/* =========================================================== THROUGHLINE — THEME LAYER Sits after app.css and overrides only what a theme owns. Three modes, set with data-theme on : mixed dark chrome, light workspace ← recommended dark the current all-dark console light light chrome, light workspace The split in "mixed" is the argument the product already makes visually: the rail and the top bar are the machine, the workspace is where your evidence lives. Chrome stays dark so the eye reads it as furniture and stops scanning it. Contrast measured on every surface: light text 16.2 / 8.5 / 5.3 accents 5.5–7.9 dark chrome 16.8 / 9.6 / 6.1 =========================================================== */ /* ----------------------------------------------------------- CHROME VARIABLES app.css hardcodes chrome colours; these selectors re-point it at variables so a theme can move the rail independently of the workspace. ----------------------------------------------------------- */ .nav{background:linear-gradient(180deg,var(--c-bg),var(--c-bg2))!important; border-right:1px solid var(--c-line)} .nav-brand,.nav-proj,.nav-user{border-color:var(--c-line)} .nav-proj .lbl,.nav-head{color:var(--c-t3)} .nav-proj select{background:var(--c-sunk);border-color:var(--c-line);color:var(--c-t1)} .nav-proj select:hover{border-color:var(--c-edge)} .navitem{color:var(--c-t2)} .navitem:hover{background:var(--c-hover);color:var(--c-t1)} .navitem.on{background:var(--c-active);color:var(--c-on)} .navitem .ic svg{color:var(--c-t3)} .navitem:hover .ic svg{color:var(--c-t2)} .navitem.on .ic svg{color:var(--c-accent)} .navitem .badge{color:var(--c-t3)} .navitem.on .badge{color:var(--c-accent)} .navitem.on::before{background:var(--c-accent)} .nav-user .b .nm{color:var(--c-t1)} .roletag{color:var(--c-t3)} .roletag.admin{color:var(--c-warn)} .nav-user .iconbtn{color:var(--c-t3)} .avatar{background:var(--c-avatar);border-color:var(--c-avatar-line);color:var(--c-t1)} .wordmark{color:var(--c-t1)} .wordmark-sub{color:var(--c-t3)} .top{background:var(--c-top)!important;border-bottom:1px solid var(--c-line)} .crumb{color:var(--c-t3)} .top-sub{color:var(--c-t1)} .meter{border-color:var(--c-line);background:var(--c-hover)} .meter b{color:var(--c-accent)} .meter span{color:var(--c-t3)} .status{color:var(--c-t3)} .status.run{color:var(--c-t1)} .status i{background:var(--c-dot)} .navtoggle{color:var(--c-t2)} .top .btn.dark{background:var(--c-hover);border-color:var(--c-line);color:var(--c-t1)} .top .btn.dark:hover{background:var(--c-active);border-color:var(--c-edge)} /* =========================================================== DARK — the current console, unchanged =========================================================== */ :root, [data-theme="dark"]{ --c-bg:rgba(13,17,26,.94); --c-bg2:rgba(6,8,15,.96); --c-top:rgba(6,8,15,.82); --c-line:#1F2839; --c-edge:#2A3448; --c-sunk:rgba(6,8,15,.6); --c-t1:#EEF2FB; --c-t2:#AEB9D0; --c-t3:#8593AE; --c-on:#fff; --c-hover:rgba(255,255,255,.045); --c-active:linear-gradient(90deg,rgba(77,124,254,.13),transparent); --c-accent:#7C9CFF; --c-warn:#F0B429; --c-dot:#39445E; --c-avatar:linear-gradient(140deg,rgba(77,124,254,.3),rgba(166,107,255,.3)); --c-avatar-line:rgba(124,156,255,.34); --field-link:124,156,255; --field-node:174,185,208; --field-seminal:188,147,255; --field-pulse:160,190,255; --field-alpha:1; } /* =========================================================== SHARED LIGHT WORKSPACE Applied by both "mixed" and "light". =========================================================== */ [data-theme="mixed"], [data-theme="light"]{ --void:#EFF2F7; --hull:#F7F9FC; --bulk:#FFFFFF; --card:#FFFFFF; --line:#DCE2EC; --line2:#E7EBF3; --edge:rgba(15,22,34,.04); --edge-lit:rgba(47,85,212,.16); --t1:#0F1622; --t2:#3A4658; --t3:#586477; --acc:#2F55D4; --acc-ink:#2647B8; --acc-fill:#2F55D4; --acc-soft:rgba(47,85,212,.09); --acc-line:rgba(47,85,212,.30); --acc-glow:rgba(47,85,212,.24); --plasma:#6D28D9; --plasma-ink:#5B21B6; --plasma-fill:#6D28D9; --ok:#0B6B4F; --ok-soft:rgba(11,107,79,.09); --ok-line:rgba(11,107,79,.28); --warn:#8A5B0C; --warn-soft:rgba(138,91,12,.10); --warn-line:rgba(138,91,12,.28); --bad:#B3243F; --bad-soft:rgba(179,36,63,.08); --bad-line:rgba(179,36,63,.26); --s-framer:#2F55D4; --s-retriever:#0C6E9E; --s-screener:#0B6B4F; --s-analyst:#8A5B0C; --s-synth:#6D28D9; --s-verifier:#B3243F; --field-link:47,85,212; --field-node:90,110,145; --field-seminal:109,40,217; --field-pulse:47,85,212; --field-alpha:.55; } /* ---------- surfaces ---------- */ [data-theme="mixed"] body,[data-theme="light"] body{background:var(--void);color:var(--t1)} [data-theme="mixed"] body::before,[data-theme="light"] body::before{ background: radial-gradient(900px 620px at 12% -8%, rgba(47,85,212,.09), transparent 60%), radial-gradient(760px 540px at 92% 4%, rgba(109,40,217,.07), transparent 62%), radial-gradient(1100px 700px at 60% 108%, rgba(11,107,79,.05), transparent 60%)} [data-theme="mixed"] body::after,[data-theme="light"] body::after{ background-image: linear-gradient(rgba(47,85,212,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(47,85,212,.055) 1px,transparent 1px)} [data-theme="mixed"] .panel,[data-theme="light"] .panel{ background:var(--card); box-shadow:0 1px 2px rgba(15,22,34,.04),0 8px 24px -18px rgba(15,22,34,.30)} [data-theme="mixed"] .panel:hover,[data-theme="light"] .panel:hover{border-color:#CBD4E2} [data-theme="mixed"] .stat,[data-theme="light"] .stat{ background:var(--card);box-shadow:0 1px 2px rgba(15,22,34,.04)} [data-theme="mixed"] .stat:hover,[data-theme="light"] .stat:hover{border-color:#CBD4E2} [data-theme="mixed"] .stats,[data-theme="light"] .stats{background:transparent} [data-theme="mixed"] .nextcard,[data-theme="light"] .nextcard{ background:linear-gradient(120deg,rgba(47,85,212,.10),rgba(109,40,217,.07) 55%,var(--card)); border-color:var(--acc-line); box-shadow:0 1px 2px rgba(15,22,34,.04),0 10px 30px -22px rgba(47,85,212,.5)} [data-theme="mixed"] .nextcard h2,[data-theme="light"] .nextcard h2{color:var(--t1)} [data-theme="mixed"] .nextcard p,[data-theme="light"] .nextcard p{color:var(--t2)} [data-theme="mixed"] .nextcard-e,[data-theme="light"] .nextcard-e{color:var(--acc-ink)} [data-theme="mixed"] .nextcard::after,[data-theme="light"] .nextcard::after{ background:linear-gradient(90deg,transparent,rgba(47,85,212,.07),transparent)} [data-theme="mixed"] .autopanel,[data-theme="light"] .autopanel{ background:linear-gradient(155deg,rgba(47,85,212,.07),var(--card) 46%)} /* ---------- controls ---------- */ [data-theme="mixed"] .input,[data-theme="light"] .input, [data-theme="mixed"] .textarea,[data-theme="light"] .textarea, [data-theme="mixed"] .select,[data-theme="light"] .select{ background:var(--card);border-color:var(--line);color:var(--t1)} [data-theme="mixed"] .input::placeholder,[data-theme="light"] .input::placeholder, [data-theme="mixed"] .textarea::placeholder,[data-theme="light"] .textarea::placeholder{color:#8592A6} [data-theme="mixed"] .input:hover,[data-theme="light"] .input:hover, [data-theme="mixed"] .textarea:hover,[data-theme="light"] .textarea:hover{border-color:#C3CDDD} [data-theme="mixed"] .select option,[data-theme="light"] .select option{background:#fff;color:var(--t1)} [data-theme="mixed"] .btn,[data-theme="light"] .btn{ background:var(--card);border-color:var(--line);color:var(--t1); box-shadow:0 1px 1.5px rgba(15,22,34,.05)} [data-theme="mixed"] .btn:hover,[data-theme="light"] .btn:hover{ background:var(--hull);border-color:#C3CDDD} [data-theme="mixed"] .btn.primary,[data-theme="light"] .btn.primary{ background:linear-gradient(135deg,var(--acc-fill),var(--plasma-fill));color:#fff; box-shadow:0 2px 10px -2px rgba(47,85,212,.42)} [data-theme="mixed"] .btn.danger:hover,[data-theme="light"] .btn.danger:hover, [data-theme="mixed"] .btn.good:hover,[data-theme="light"] .btn.good:hover{color:#fff} [data-theme="mixed"] .check,[data-theme="light"] .check{ background:var(--card);border-color:#A9B5C7} [data-theme="mixed"] .tag,[data-theme="light"] .tag{background:var(--hull)} [data-theme="mixed"] .chip,[data-theme="light"] .chip{background:var(--card)} [data-theme="mixed"] .chip:hover,[data-theme="light"] .chip:hover{border-color:#C3CDDD} /* ---------- data surfaces ---------- */ [data-theme="mixed"] .tbl tbody tr:hover,[data-theme="light"] .tbl tbody tr:hover, [data-theme="mixed"] .srcrow:hover,[data-theme="light"] .srcrow:hover{background:var(--hull)} [data-theme="mixed"] .srcrow.excluded .t,[data-theme="light"] .srcrow.excluded .t{ text-decoration-color:#B6C0CF} [data-theme="mixed"] .progbar,[data-theme="light"] .progbar, [data-theme="mixed"] .tlc-bars-t,[data-theme="light"] .tlc-bars-t, [data-theme="mixed"] .tlc-stack,[data-theme="light"] .tlc-stack{ background:#E3E8F1;border-color:var(--line2)} [data-theme="mixed"] .tlc-hm td,[data-theme="light"] .tlc-hm td{border-color:#fff} [data-theme="mixed"] .tlc-hm td span.is-hi,[data-theme="light"] .tlc-hm td span.is-hi{color:#fff} [data-theme="mixed"] .tlc-rb,[data-theme="light"] .tlc-rb{color:#fff} [data-theme="mixed"] .timeline .pip.system,[data-theme="light"] .timeline .pip.system{background:#94A2B6} [data-theme="mixed"] .timeline .pip,[data-theme="light"] .timeline .pip{ box-shadow:0 0 0 3px rgba(15,22,34,.04)} [data-theme="mixed"] .autodot,[data-theme="light"] .autodot{background:var(--card)} [data-theme="mixed"] .autorow.is-ok .autodot,[data-theme="light"] .autorow.is-ok .autodot, [data-theme="mixed"] .autorow.is-err .autodot,[data-theme="light"] .autorow.is-err .autodot{color:#fff} [data-theme="mixed"] .autorow.is-run,[data-theme="light"] .autorow.is-run{ background:linear-gradient(90deg,rgba(47,85,212,.06),transparent 62%)} [data-theme="mixed"] #autolist::before,[data-theme="light"] #autolist::before{ background:linear-gradient(180deg,var(--line),#C7D0DF 12%,#C7D0DF 88%,var(--line))} /* the manuscript sheet needs an edge once the page behind it is light */ [data-theme="mixed"] .doc,[data-theme="light"] .doc{ border:1px solid #E2DED6; box-shadow:0 1px 2px rgba(15,22,34,.05),0 18px 44px -30px rgba(15,22,34,.4)} [data-theme="mixed"] .toast,[data-theme="light"] .toast{ background:rgba(15,22,34,.94);color:#EEF2FB;border-color:rgba(15,22,34,.2)} [data-theme="mixed"] .callout,[data-theme="light"] .callout{background:var(--warn-soft)} [data-theme="mixed"] .callout.info,[data-theme="light"] .callout.info{background:var(--acc-soft)} [data-theme="mixed"] .formerr,[data-theme="light"] .formerr{background:var(--bad-soft)} [data-theme="mixed"] *,[data-theme="light"] *{scrollbar-color:#C3CDDD transparent} [data-theme="mixed"] *::-webkit-scrollbar-thumb,[data-theme="light"] *::-webkit-scrollbar-thumb{ background:#C3CDDD;background-clip:content-box} [data-theme="mixed"] *::-webkit-scrollbar-thumb:hover,[data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background:#A9B5C7;background-clip:content-box} [data-theme="mixed"] ::selection,[data-theme="light"] ::selection{ background:rgba(47,85,212,.20);color:var(--t1)} /* =========================================================== MIXED — chrome stays dark, workspace goes light =========================================================== */ [data-theme="mixed"]{ --c-bg:#0D111A; --c-bg2:#080B12; --c-top:#0D111A; --c-line:#1E2637; --c-edge:#2A3448; --c-sunk:rgba(0,0,0,.32); --c-t1:#EEF2FB; --c-t2:#AEB9D0; --c-t3:#8593AE; --c-on:#fff; --c-hover:rgba(255,255,255,.05); --c-active:linear-gradient(90deg,rgba(124,156,255,.16),transparent); --c-accent:#7C9CFF; --c-warn:#F0B429; --c-dot:#39445E; --c-avatar:linear-gradient(140deg,rgba(124,156,255,.28),rgba(188,147,255,.28)); --c-avatar-line:rgba(124,156,255,.32); } /* the rail is opaque here, so it reads as a hard edge against the light page */ [data-theme="mixed"] .nav{backdrop-filter:none} [data-theme="mixed"] .top{backdrop-filter:none;box-shadow:0 1px 0 rgba(15,22,34,.05)} /* the field is behind a light page: keep it barely there */ [data-theme="mixed"] .neural-field{opacity:.5} /* the sign-in screen keeps its dark side panel in every theme — it is the one full-bleed brand moment the product gets */ [data-theme="mixed"] .auth-side,[data-theme="light"] .auth-side{ background:#0D111A;border-right-color:#1E2637} [data-theme="mixed"] .auth-side .auth-lede,[data-theme="light"] .auth-side .auth-lede{color:#AEB9D0} [data-theme="mixed"] .auth-side .auth-spec,[data-theme="light"] .auth-side .auth-spec{ border-top-color:#1E2637} [data-theme="mixed"] .auth-side .auth-spec div,[data-theme="light"] .auth-side .auth-spec div{ border-bottom-color:#1E2637} [data-theme="mixed"] .auth-side .auth-spec b,[data-theme="light"] .auth-side .auth-spec b{color:#EEF2FB} [data-theme="mixed"] .auth-side .auth-spec span,[data-theme="light"] .auth-side .auth-spec span{color:#8593AE} [data-theme="mixed"] .auth-main,[data-theme="light"] .auth-main{background:var(--card)} /* =========================================================== LIGHT — everything light, for bright rooms and projectors =========================================================== */ [data-theme="light"]{ --c-bg:#FFFFFF; --c-bg2:#FBFCFE; --c-top:rgba(255,255,255,.88); --c-line:#DCE2EC; --c-edge:#C3CDDD; --c-sunk:#F2F5FA; --c-t1:#0F1622; --c-t2:#3A4658; --c-t3:#586477; --c-on:#0F1622; --c-hover:#F2F5FA; --c-active:linear-gradient(90deg,rgba(47,85,212,.10),transparent); --c-accent:#2647B8; --c-warn:#8A5B0C; --c-dot:#B6C0CF; --c-avatar:linear-gradient(140deg,rgba(47,85,212,.14),rgba(109,40,217,.14)); --c-avatar-line:rgba(47,85,212,.24); } [data-theme="light"] .nav{box-shadow:1px 0 0 rgba(15,22,34,.03)} [data-theme="light"] .logo{box-shadow:0 4px 14px -5px rgba(47,85,212,.5)} [data-theme="light"] .neural-field{opacity:.42} [data-theme="light"] .navitem.on::before{box-shadow:0 0 10px rgba(47,85,212,.35)}