:root{ --black:#0A0A0A; --black-1:#141414; --black-2:#1C1C1C; --line-dk:#2E2E2E; --line-dk-2:#3D3D3D; --white:#FFFFFF; --paper:#F7F7F7; --paper-2:#EFEFEF; --line-lt:#E5E5E5; --ink:#171717; --ink-2:#525252; --dim:#A3A3A3; --purple:#A88BE8; --purple-deep:#5C3FA3; --purple-line:#4A3576; --og:#3B82F6; --og-solid:#2563EB; --go:#15803D; --go-bg:#DCFCE7; --go-line:#86EFAC; --crit:#EF4444; --high:#F59E0B; --display:'Archivo','Helvetica Neue',Arial,sans-serif; --ui:'Inter','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --shell:1200px; } *{box-sizing:border-box} body{background:var(--black);color:var(--white);font-family:var(--ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;margin:0} h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.015em;text-wrap:balance;margin:0} p{margin:0} a{color:inherit} img{display:block;max-width:100%} .shell{max-width:var(--shell);margin:0 auto;padding:0 28px} /* grid/flex children default to min-width:auto, so any nowrap descendant (a mono filename, the pane title) can push a track wider than the viewport */ .hero-grid > *,.corr > *,.grid > *,.splitsec > *,.cwrap > *,.people > *,.proof > *{min-width:0} .pane,.chat,.flow,.srcrail,.pane-bar .oglock{min-width:0} .pane-bar .oglock{overflow:hidden} .sc{max-width:100%;word-break:break-all} /* line-break control: break at clauses, never mid-phrase */ .nb{white-space:nowrap} br.wb{display:none} @media(min-width:860px){br.wb{display:inline}} p,li,summary,.lede,.ans-txt,.cb,.pill-cap,.cap,.said,.src .s,.tlc-desc,.rung > p,.ev-row .lab,.usc .k,.nd .nm{text-wrap:pretty} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--purple)} .lede{font-size:19px;line-height:1.55;max-width:62ch;color:var(--dim)} .lt .lede{color:var(--ink-2)} section{padding:76px 0} .lt{background:var(--paper);color:var(--ink)} .lt h1,.lt h2,.lt h3,.lt h4,.lt h5{color:var(--ink)} .lt .eyebrow{color:var(--purple-deep)} .sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:66ch} .sec-head h2{font-size:clamp(27px,3.4vw,38px)} /* ============ HEADER — solid, cannot collapse ============ */ header.site{position:sticky;top:0;z-index:60;background:var(--black);border-bottom:1px solid var(--line-dk)} .bar{display:flex;align-items:center;min-height:76px;gap:24px;flex-wrap:nowrap} .brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none} .brand img{height:28px;width:auto} .navwrap{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto} nav.main{display:flex;align-items:center;gap:4px} nav.main a{font-family:var(--display);font-size:15px;font-weight:500;text-decoration:none;color:var(--dim);padding:10px 14px;border-radius:5px;white-space:nowrap;line-height:1.2} nav.main a:hover{color:var(--white);background:var(--black-2)} nav.main a[aria-current="page"]{color:var(--white);background:var(--black-2)} /* the CTA inside the nav must beat `nav.main a` on specificity */ nav.main a.btn{color:#14091F;background:var(--purple);border-color:var(--purple)} nav.main a.btn:hover{color:#14091F;background:#BFA6F0;border-color:#BFA6F0} .burger{display:none;background:transparent;border:1px solid var(--line-dk-2);border-radius:7px;width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex:0 0 auto} .burger i{display:block;width:18px;height:1.6px;background:var(--white);transition:transform .2s,opacity .2s} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.6px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)} @media(max-width:1040px){ .burger{display:flex} nav.main{position:absolute;top:100%;left:0;right:0;background:var(--black);border-bottom:1px solid var(--line-dk);flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 22px;display:none} nav.main.open{display:flex} nav.main a{padding:15px 4px;font-size:17px;border-bottom:1px solid var(--line-dk);border-radius:0} nav.main a:last-of-type{border-bottom:0} nav.main .btn{margin-top:16px;justify-content:center} } .btn{font-family:var(--display);font-weight:600;font-size:14.5px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:12px 21px;border-radius:5px;background:var(--purple);color:#14091F;border:1px solid var(--purple);cursor:pointer;white-space:nowrap;line-height:1.2} .btn:hover{background:#BFA6F0;border-color:#BFA6F0} .btn.ghost{background:transparent;color:var(--white);border-color:var(--line-dk-2)} .btn.ghost:hover{background:var(--black-2);border-color:var(--dim)} .lt .btn{background:var(--purple-deep);color:#fff;border-color:var(--purple-deep)} .lt .btn:hover{background:#4B3287;border-color:#4B3287} .lt .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-lt)} .lt .btn.ghost:hover{background:var(--paper-2);border-color:var(--ink-2)} .btn.sm{padding:10px 16px;font-size:14px} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:2px} .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .page{display:none} .page.on{display:block} .hero{padding:70px 0 80px;border-bottom:1px solid var(--line-dk)} .hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center} @media(min-width:1040px){.hero-grid{grid-template-columns:.9fr 1.1fr;gap:52px}} .hero h1{font-size:clamp(31px,4.3vw,48px);max-width:17ch;margin:0 0 18px} /* flagship opener — the product brand leads the page */ .og-hero-lock{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:22px} .og-hero-lock .tile{width:clamp(50px,5.8vw,64px);height:clamp(50px,5.8vw,64px);border-radius:14px} .og-hero-lock .ogword{font-size:clamp(32px,4.4vw,48px);color:var(--white)} .og-hero-lock .byss{align-self:flex-end;padding-bottom:8px} /* the operator's question, tying the pitch to the demo beside it */ .hook{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.1vw,23px);line-height:1.25;color:var(--white);letter-spacing:-.01em;border-left:3px solid var(--purple);padding-left:16px;margin-top:24px;max-width:26ch} .hero-note{margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--dim)} /* ============ OmniusGrid brand lockups ============ */ .oglock{display:inline-flex;align-items:center;gap:13px} .tile{background:#fff;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.18)} .tile img{width:66%;height:auto} .lt .tile{border:1px solid var(--line-lt)} .ogword{font-family:var(--ui);font-weight:400;letter-spacing:-.02em;line-height:1;white-space:nowrap} .ogword b{font-weight:800} .byss{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.04em} .byss img{height:19px} .ogstrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--line-dk);border-radius:11px;background:var(--black-1)} .lt .ogstrip{border-color:var(--line-lt);background:var(--white)} .ogstrip .txt{font-size:14.5px;color:var(--dim);line-height:1.5;flex:1 1 260px;min-width:0} .lt .ogstrip .txt{color:var(--ink-2)} /* ============ PRODUCT PANE ============ */ .pane{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);font-family:var(--ui);color:var(--ink);text-align:left;position:relative} .lt .pane{box-shadow:0 14px 38px rgba(0,0,0,.11),0 1px 3px rgba(0,0,0,.07);border:1px solid var(--line-lt)} .pane-bar{background:var(--paper-2);border-bottom:1px solid var(--line-lt);padding:11px 15px;display:flex;align-items:center;gap:10px} .pane-bar .dots{display:flex;gap:5px;flex:0 0 auto} .pane-bar .dots i{width:9px;height:9px;border-radius:50%;background:#C9C9C9;display:block} .pane-bar .t{font-size:12.5px;font-weight:600;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pane-bar .lv{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--go);display:flex;align-items:center;gap:5px;flex:0 0 auto} .pane-bar .lv b{width:6px;height:6px;border-radius:50%;background:var(--go);display:block;animation:blip 1.8s ease-in-out infinite} @keyframes blip{0%,100%{opacity:1}50%{opacity:.25}} .pane-body{padding:16px} .plabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#6B6B6B;margin-bottom:8px} .pane-lead{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .pane-lead h4{font-size:18px} .pane-lead p{font-size:14.5px;color:var(--dim);line-height:1.5} .lt .pane-lead p{color:var(--ink-2)} .pane-foot{margin-top:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .pane-foot .cap{font-size:13px;color:var(--dim);line-height:1.5;font-family:var(--mono);flex:1 1 200px;min-width:0} .lt .pane-foot .cap{color:#6B6B6B} .replay{background:transparent;border:1px solid var(--line-dk-2);border-radius:6px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);padding:7px 12px;cursor:pointer;flex:0 0 auto} .replay:hover{color:var(--white);border-color:var(--dim)} .lt .replay{border-color:var(--line-lt);color:var(--ink-2)} .lt .replay:hover{color:var(--ink);border-color:var(--ink-2)} /* ---- chat / ask ---- */ .chat{display:grid;grid-template-rows:auto 1fr auto;gap:12px;height:446px} .srcrail{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line-lt)} .sc{display:flex;align-items:center;gap:7px;border:1px solid var(--line-lt);background:#FAFAFA;border-radius:6px;padding:5px 9px;font-size:10.5px;color:var(--ink-2);font-family:var(--mono);opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease} .sc.in{opacity:1;transform:none} .sc em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--og-solid);background:#EAF1FE;border:1px solid #C7DBFB;border-radius:3px;padding:1px 4px;flex:0 0 auto} .sc.livesrc em{color:var(--go);background:var(--go-bg);border-color:var(--go-line)} .flow{display:flex;flex-direction:column;justify-content:flex-end;gap:11px;min-height:0;overflow:hidden} .bub{max-width:88%;border-radius:13px;padding:11px 14px;font-size:14px;line-height:1.5} .bub.me{align-self:flex-end;background:var(--og-solid);color:#fff;border-bottom-right-radius:4px;font-weight:500} .hide{display:none !important} .think{border:1px solid var(--line-lt);border-radius:10px;padding:13px;background:#fff} .think .hd{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13.5px;font-weight:600;color:var(--ink)} .spin{width:14px;height:14px;border-radius:50%;border:2px solid #BFDBFE;border-top-color:var(--og);animation:sp .7s linear infinite;flex:0 0 auto;display:block} @keyframes sp{to{transform:rotate(360deg)}} .stp{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:center;font-size:12px;color:#767676;padding:2.5px 0;line-height:1.4} .stp.is-done{color:#5A5A62} .stp.is-active{color:var(--ink);font-weight:500} .stp .mk{width:16px;height:16px;display:grid;place-items:center;font-size:11px;font-weight:700} .stp.is-done .mk{color:#22C55E} .stp.is-wait .mk{color:#D4D4D8} .stp .mk .spin{width:12px;height:12px} .ansbox{border:1px solid var(--go-line);background:#F7FEFA;border-radius:11px;padding:13px} .ans-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap} .go{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--go);background:var(--go-bg);border:1px solid var(--go-line);border-radius:8px;padding:9px 13px;white-space:nowrap;flex:0 0 auto} .go.punch{animation:punch .55s cubic-bezier(.22,1.4,.4,1)} @keyframes punch{0%{transform:scale(.8)}60%{transform:scale(1.07)}100%{transform:scale(1)}} .ans-txt{flex:1 1 220px;font-size:14px;line-height:1.5;color:var(--ink-2);min-width:0} .ans-txt b{color:var(--ink);font-weight:600} .ans-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .abtn{font-family:var(--ui);font-size:12.5px;font-weight:600;border-radius:999px;padding:9px 16px;border:1px solid var(--og-solid);background:var(--og-solid);color:#fff;cursor:default;white-space:nowrap} .abtn.alt{background:#fff;color:var(--ink);border-color:var(--line-lt);font-weight:500} .abtn.alt .ok{color:var(--go);font-weight:600} .composer{display:flex;gap:9px;align-items:center;border:1px solid var(--line-lt);border-radius:10px;padding:9px 10px 9px 13px;background:#fff} .composer .q{flex:1;font-size:13.5px;color:var(--ink);min-height:19px;line-height:1.45;min-width:0;word-break:break-word} .composer .q.ph{color:#767676} .caret{display:inline-block;width:1.5px;height:14px;background:var(--og);vertical-align:-2px;margin-left:1px;animation:bl .8s step-end infinite} @keyframes bl{50%{opacity:0}} .send{background:var(--og-solid);color:#fff;border:none;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;font-size:13px;flex:0 0 auto} .send.flash{box-shadow:0 0 0 4px rgba(37,99,235,.3)} /* ---- headroom bar (from the growth example) ---- */ .hr-top{display:flex;align-items:center;gap:11px;margin-bottom:9px} .hr-top .mini{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--go);background:var(--go-bg);border:1px solid var(--go-line);border-radius:4px;padding:3px 7px} .hr-top .ln{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink)} .hr-top .rt{margin-left:auto;font-size:15px;font-weight:800;color:var(--ink)} .hr-top .rt span{color:var(--ink-2);font-weight:500;font-size:13px} .hrbar{position:relative;height:20px;border-radius:10px;background:var(--line-lt);overflow:hidden} .hrbar .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:10px;background:var(--og);transition:width 1s cubic-bezier(.2,.8,.25,1)} .hrbar .head{position:absolute;top:0;bottom:0;left:63%;width:0;border-radius:10px;border:2px dashed var(--go-line);background:var(--go-bg);transition:width .8s cubic-bezier(.2,.8,.25,1) .9s} .hr-cap{text-align:right;font-size:12.5px;font-weight:700;color:var(--go);margin-top:8px} /* ---- alarms ---- */ .alarm{display:grid;grid-template-columns:64px 1fr;gap:11px;align-items:start;padding:11px 3px;border-bottom:1px solid var(--line-lt)} .alarm:last-child{border-bottom:0} .chip{font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:4px;text-align:center} .chip.critical{background:#DC2626;color:#fff} .chip.high{background:#FEF3C7;color:#92400E} .chip.medium{background:#FDE68A;color:#78350F} .chip.low{background:#3F3F46;color:#fff} .alarm .h{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35} .alarm .m{display:block;font-family:var(--mono);font-size:10.5px;color:#737373;margin-top:3px;word-break:break-word} /* ---- kanban ---- */ .kb-head{display:flex;align-items:center;gap:9px;background:#F1EBFB;border:1px solid #E2D5F7;border-radius:8px;padding:10px 12px} .kb-head .d{width:10px;height:10px;border-radius:50%;background:var(--purple-deep);flex:0 0 auto} .kb-head .n{font-weight:600;font-size:14.5px} .kb-head .c{font-size:12px;background:#E7E7E7;border-radius:20px;padding:2px 8px;color:var(--ink-2)} .wip{margin:12px 2px 4px;font-size:12.5px;color:var(--ink-2);display:flex;justify-content:space-between} .wip b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)} .track{height:5px;border-radius:3px;background:var(--line-lt);overflow:hidden;margin-bottom:13px} .track i{display:block;height:100%;border-radius:3px;background:#22C55E} .track.blue i{background:var(--og)} .sub{font-size:12px;color:#71717A;margin:0 2px 8px} .wo{border:1px solid #FCA5A5;border-radius:10px;padding:13px;transition:transform .35s ease,box-shadow .35s ease} .wo.lift{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.11)} .wo h5{font-size:14.5px;font-weight:600;margin:0 0 9px;font-family:var(--ui);color:var(--ink);line-height:1.35} .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px} .tg{font-size:11px;font-weight:600;border-radius:5px;padding:3px 8px} .tg.corr{background:#FFEDD5;color:#9A3412} .tg.over{background:#FEE2E2;color:#B91C1C} .tg.asset{background:#EDE9FE;color:#5B21B6;font-weight:500} .wo .srcline{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-bottom:11px} .prog{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-bottom:5px} .prog b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)} .wo-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid #F1F1F1;font-size:11.5px;color:#71717A} .who{display:flex;align-items:center;gap:7px;border-radius:20px;padding:3px 9px 3px 3px;transition:background .3s} .who.flip{background:var(--go-bg)} .av{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;background:#7C3AED;flex:0 0 auto} .av.ro{background:#0E7490} .who .nm{font-size:11.5px;color:#3F3F46;font-weight:600;white-space:nowrap} .wo-meta .mi{white-space:nowrap} .wo-meta .due{color:#DC2626;font-weight:600} .popwrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:12px} .pop{position:absolute;right:12px;bottom:62px;width:min(228px,72%);background:#fff;border:1px solid var(--line-lt);border-radius:10px;box-shadow:0 16px 34px rgba(0,0,0,.2);overflow:hidden;opacity:0;transform:translateY(9px) scale(.96);transform-origin:bottom right;transition:opacity .2s ease,transform .2s ease} .pop.in{opacity:1;transform:none} .pop .ph{padding:8px 12px;font-size:9.5px;font-weight:700;color:#6B6B6B;text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid #F1F1F1} .mr{display:flex;align-items:center;gap:9px;padding:8px 12px} .mr.hot{background:#F4F4F5} .mr .who2{min-width:0} .mr .t2{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2;display:block} .mr .r2{font-size:10.5px;color:#6B6B6B;display:block} .mr .ck{margin-left:auto;color:#22C55E;font-weight:700;opacity:0;transition:opacity .18s;flex:0 0 auto} .mr.picked .ck{opacity:1} .toast{position:absolute;left:12px;right:12px;bottom:12px;background:#18181B;color:#fff;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:0 12px 26px rgba(0,0,0,.34);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;line-height:1.35} .toast.in{opacity:1;transform:none} .toast .ck{color:#4ADE80;font-weight:700;flex:0 0 auto} .ghostcur{position:absolute;left:0;top:0;width:15px;height:20px;opacity:0;transition:opacity .2s} .ghostcur.on{opacity:1} /* ---- recommended actions ---- */ .ra-li{display:grid;grid-template-columns:16px 1fr;gap:9px;padding:6px 0;font-size:13.5px;color:var(--ink);line-height:1.45} .ra-li .k{color:var(--go);font-weight:700;font-size:13px} .ts{font-family:var(--mono);font-size:10.5px;color:#6B6B6B;margin-top:11px;padding-top:9px;border-top:1px solid var(--line-lt);line-height:1.55} /* ---- OmniusGrid product panes --------------------------------------- The markup inside .ogx is OmniusGrid's own, captured from its frontend running on the demo dataset it ships with (VITE_USE_MOCK), in the light theme this page uses. These are its palette variables and the rules its classes resolve against; the rest is placement. */ .ogx{--color-bg:#fafafa;--color-panel:#ffffff;--color-border:#e5e5e5; --color-border-emphasis:#d4d4d4;--color-text:#171717;--color-text-secondary:#525252; --color-primary:#171717;--color-accent:#404040;--color-hover:#f5f5f5; color:var(--color-text);font-family:Inter,system-ui,sans-serif;font-size:13px} .ogx *{box-sizing:border-box} /* Tailwind's preflight sets border-style globally; without it every `border` class here resolved to 1px of nothing and the cards lost their outlines */ .ogx *,.ogx ::before,.ogx ::after{border-width:0;border-style:solid; border-color:var(--color-border)} .ogx p,.ogx h1,.ogx h2,.ogx h3,.ogx h4,.ogx h5{margin:0} .ogx table{border-collapse:collapse;width:100%} .ogx svg{flex:none} .og-lead{margin-top:34px} .og-lead:first-of-type{margin-top:0} .og-pane{margin-bottom:4px} .og-pane .pane-body{padding:14px;background:var(--color-bg)} .ogx > div + div{margin-top:12px} .ogx .bg-blue-500{--tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));} .ogx .bg-gray-400{--tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));} .ogx .bg-green-500{--tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));} .ogx .bg-opsgrid-bg{background-color: var(--color-bg);} .ogx .bg-opsgrid-panel{background-color: var(--color-panel);} .ogx .bg-opsgrid-primary{background-color: var(--color-primary);} .ogx .bg-opsgrid-text-secondary{background-color: var(--color-text-secondary);} .ogx .bg-red-500{--tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));} .ogx .bg-red-500\/10{background-color: rgba(239, 68, 68, 0.1);} .ogx .bg-status-alarm{--tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));} .ogx .bg-yellow-500{--tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));} .ogx .border{border-width: 1px;} .ogx .border-opsgrid-border{border-color: var(--color-border);} .ogx .border-red-500\/30{border-color: rgba(239, 68, 68, 0.3);} .ogx .border-red-500\/50{border-color: rgba(239, 68, 68, 0.5);} .ogx .border-t{border-top-width: 1px;} .ogx .capitalize{text-transform: capitalize;} .ogx .cursor-pointer{cursor: pointer;} .ogx .disabled\:cursor-not-allowed:disabled{cursor: not-allowed;} .ogx .disabled\:opacity-50:disabled{opacity: 0.5;} .ogx .divide-opsgrid-border > :not([hidden]) ~ :not([hidden]){border-color: var(--color-border);} .ogx .divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse));} .ogx .flex{display: flex;} .ogx .flex-1{flex: 1 1 0%;} .ogx .focus\:outline-none:focus{outline: transparent solid 2px; outline-offset: 2px;} .ogx .focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);} .ogx .focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px;} .ogx .focus\:ring-offset-opsgrid-bg:focus{--tw-ring-offset-color: var(--color-bg);} .ogx .focus\:ring-red-500:focus{--tw-ring-opacity: 1; --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));} .ogx .font-bold{font-weight: 700;} .ogx .font-medium{font-weight: 500;} .ogx .font-normal{font-weight: 400;} .ogx .font-semibold{font-weight: 600;} .ogx .gap-1{gap: 0.25rem;} .ogx .gap-1\.5{gap: 0.375rem;} .ogx .gap-2{gap: 0.5rem;} .ogx .gap-3{gap: 0.75rem;} .ogx .gap-4{gap: 1rem;} .ogx .grid{display: grid;} .ogx .grid-cols-1{grid-template-columns: repeat(1, minmax(0px, 1fr));} .ogx .grid-cols-2{grid-template-columns: repeat(2, minmax(0px, 1fr));} .ogx .h-2{height: 0.5rem;} .ogx .h-3{height: 0.75rem;} .ogx .h-4{height: 1rem;} .ogx .h-5{height: 1.25rem;} .ogx .h-full{height: 100%;} .ogx .hover\:bg-red-600:hover{--tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));} .ogx .inline-block{display: inline-block;} .ogx .inline-flex{display: inline-flex;} .ogx .items-center{align-items: center;} .ogx .justify-between{justify-content: space-between;} .ogx .justify-center{justify-content: center;} .ogx .max-w-xs{max-width: 20rem;} .ogx .mb-1{margin-bottom: 0.25rem;} .ogx .mb-2{margin-bottom: 0.5rem;} .ogx .mb-3{margin-bottom: 0.75rem;} .ogx .mb-4{margin-bottom: 1rem;} .ogx .min-w-0{min-width: 0px;} .ogx .ml-2{margin-left: 0.5rem;} .ogx .mt-1{margin-top: 0.25rem;} .ogx .mt-3{margin-top: 0.75rem;} .ogx .mt-4{margin-top: 1rem;} .ogx .overflow-hidden{overflow: hidden;} .ogx .overflow-x-auto{overflow-x: auto;} .ogx .p-3{padding: 0.75rem;} .ogx .p-4{padding: 1rem;} .ogx .p-6{padding: 1.5rem;} .ogx .pt-3{padding-top: 0.75rem;} .ogx .pt-4{padding-top: 1rem;} .ogx .px-2{padding-left: 0.5rem; padding-right: 0.5rem;} .ogx .px-3{padding-left: 0.75rem; padding-right: 0.75rem;} .ogx .px-4{padding-left: 1rem; padding-right: 1rem;} .ogx .py-0\.5{padding-top: 0.125rem; padding-bottom: 0.125rem;} .ogx .py-1{padding-top: 0.25rem; padding-bottom: 0.25rem;} .ogx .py-1\.5{padding-top: 0.375rem; padding-bottom: 0.375rem;} .ogx .py-3{padding-top: 0.75rem; padding-bottom: 0.75rem;} .ogx .rounded{border-radius: 0.25rem;} .ogx .rounded-full{border-radius: 9999px;} .ogx .rounded-lg{border-radius: 0.5rem;} .ogx .shrink-0{flex-shrink: 0;} .ogx .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));} .ogx .space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));} .ogx .space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse));} .ogx .text-2xl{font-size: 1.5rem; line-height: 2rem;} .ogx .text-blue-500{--tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1));} .ogx .text-gray-400{--tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1));} .ogx .text-green-500{--tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1));} .ogx .text-left{text-align: left;} .ogx .text-lg{font-size: 1.125rem; line-height: 1.75rem;} .ogx .text-opsgrid-accent{color: var(--color-accent);} .ogx .text-opsgrid-bg{color: var(--color-bg);} .ogx .text-opsgrid-primary{color: var(--color-primary);} .ogx .text-opsgrid-text{color: var(--color-text);} .ogx .text-opsgrid-text-secondary{color: var(--color-text-secondary);} .ogx .text-red-500{--tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1));} .ogx .text-right{text-align: right;} .ogx .text-sm{font-size: 0.875rem; line-height: 1.25rem;} .ogx .text-status-alarm{--tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1));} .ogx .text-status-warning{--tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity, 1));} .ogx .text-white{--tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1));} .ogx .text-xl{font-size: 1.25rem; line-height: 1.75rem;} .ogx .text-xs{font-size: 0.75rem; line-height: 1rem;} .ogx .text-yellow-500{--tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity, 1));} .ogx .transition-all{transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;} .ogx .transition-colors{transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;} .ogx .truncate{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .ogx .uppercase{text-transform: uppercase;} .ogx .w-16{width: 4rem;} .ogx .w-2{width: 0.5rem;} .ogx .w-28{width: 7rem;} .ogx .w-3{width: 0.75rem;} .ogx .w-4{width: 1rem;} .ogx .w-5{width: 1.25rem;} .ogx .w-full{width: 100%;} @media (min-width: 1024px) {.ogx .lg\:grid-cols-4{grid-template-columns: repeat(4, minmax(0px, 1fr));}} @media (min-width: 1024px) {.ogx .lg\:grid-cols-8{grid-template-columns: repeat(8, minmax(0px, 1fr));}} @media (min-width: 768px) {.ogx .md\:grid-cols-2{grid-template-columns: repeat(2, minmax(0px, 1fr));}} @media (min-width: 768px) {.ogx .md\:grid-cols-3{grid-template-columns: repeat(3, minmax(0px, 1fr));}} @media (min-width: 768px) {.ogx .md\:grid-cols-4{grid-template-columns: repeat(4, minmax(0px, 1fr));}} @media (min-width: 768px) {.ogx .md\:grid-cols-6{grid-template-columns: repeat(6, minmax(0px, 1fr));}} /* the app sizes for a full browser window; in a pane the same markup needs a pane's measure */ .ogx .text-3xl{font-size:20px;line-height:1.15} .ogx .text-2xl{font-size:17px;line-height:1.2} .ogx .text-xl{font-size:15px;line-height:1.25} .ogx .text-lg{font-size:14px;line-height:1.3} .ogx .text-base{font-size:13px;line-height:1.45} .ogx .text-sm{font-size:12px;line-height:1.45} .ogx .text-xs{font-size:10.5px;line-height:1.4} .ogx .p-6{padding:12px} .ogx .p-4{padding:10px} .ogx .p-3{padding:9px} .ogx .px-6{padding-left:12px;padding-right:12px} .ogx .py-4{padding-top:10px;padding-bottom:10px} .ogx .py-3{padding-top:8px;padding-bottom:8px} .ogx .gap-4{gap:9px} .ogx .gap-3{gap:7px} .ogx .mb-6{margin-bottom:10px} .ogx .mb-4{margin-bottom:8px} .ogx .mb-3{margin-bottom:6px} .ogx .mt-6{margin-top:10px} .ogx .space-y-4 > * + *{margin-top:8px} .ogx .space-y-3 > * + *{margin-top:6px} .ogx .space-y-2 > * + *{margin-top:5px} .ogx table{font-size:11.5px} .ogx th,.ogx td{padding-top:7px;padding-bottom:7px} /* these came out of the app's stylesheet without their breakpoints, so md:grid-cols-4 was winning at 390px and nothing ever collapsed */ @media (min-width: 768px){ .ogx .md\:grid-cols-2{grid-template-columns: repeat(2, minmax(0px, 1fr));} .ogx .md\:grid-cols-3{grid-template-columns: repeat(3, minmax(0px, 1fr));} .ogx .md\:grid-cols-4{grid-template-columns: repeat(4, minmax(0px, 1fr));} .ogx .md\:grid-cols-6{grid-template-columns: repeat(6, minmax(0px, 1fr));} } @media (min-width: 1024px){ .ogx .lg\:grid-cols-4{grid-template-columns: repeat(4, minmax(0px, 1fr));} .ogx .lg\:grid-cols-8{grid-template-columns: repeat(8, minmax(0px, 1fr));} } /* ---- yard ---- */ .yrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line-lt);font-size:13px} .yrow:last-of-type{border-bottom:0} .yrow .tr{font-weight:600;color:var(--ink)} .yrow .sm{font-family:var(--mono);font-size:10.5px;color:#737373} .yrow .cost{font-family:var(--mono);font-size:13px;color:#DC2626;font-weight:500;font-variant-numeric:tabular-nums} .yrow .okc{color:var(--go)} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px} .tl{border:1px solid var(--line-lt);border-radius:9px;padding:12px 13px} .tl .l{font-size:12px;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px} .tl .v{font-family:var(--display);font-weight:700;font-size:25px;color:#DC2626;margin-top:4px;font-variant-numeric:tabular-nums} /* ---- correlation ---- */ .corr{display:grid;grid-template-columns:1fr;gap:20px;align-items:center} @media(min-width:1040px){.corr{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:0}} .srcs{display:flex;flex-direction:column;gap:10px} .src{background:var(--white);border:1px solid var(--line-lt);border-left:3px solid var(--og);border-radius:9px;padding:13px 15px} .src .w{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink)} .src .f{font-family:var(--mono);font-size:10.5px;color:#737373;margin:3px 0 6px;word-break:break-all} .src .s{font-size:14px;line-height:1.45;color:var(--ink-2)} .src .s b{color:var(--ink)} .src.livesrc{border-left-color:var(--go)} .weave{display:none} @media(min-width:1040px){.weave{display:block;height:300px;width:92px}} .fan{fill:none;stroke:#CBCBCB;stroke-width:1.5;stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.3s ease-out forwards} .fan.on{stroke:var(--og);stroke-width:2} .fan:nth-of-type(2){animation-delay:.12s}.fan:nth-of-type(3){animation-delay:.24s} @keyframes draw{to{stroke-dashoffset:0}} .grid{display:grid;gap:14px} @media(min-width:760px){.grid.c2{grid-template-columns:1fr 1fr}} @media(min-width:980px){.grid.c3{grid-template-columns:repeat(3,1fr)}} @media(min-width:980px){.grid.c4{grid-template-columns:repeat(4,1fr)}} @media(min-width:640px) and (max-width:979px){.grid.c4,.grid.c3{grid-template-columns:1fr 1fr}} .cell{background:var(--black-1);border:1px solid var(--line-dk);border-radius:11px;padding:22px;display:flex;flex-direction:column;gap:9px} .lt .cell{background:var(--white);border-color:var(--line-lt)} .cell h4{font-size:16.5px} .cell p{font-size:14.5px;color:var(--dim);line-height:1.55} .lt .cell p{color:var(--ink-2)} .cell .big{font-family:var(--mono);font-size:27px;font-weight:500;letter-spacing:-.02em} .door{border:1px solid var(--line-lt);background:var(--white);border-radius:13px;padding:28px;display:flex;flex-direction:column;gap:14px} .door .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500} .door.ogd .k{color:var(--og-solid)} .door.secd .k{color:var(--purple-deep)} .door h3{font-size:clamp(23px,2.8vw,29px)} .door .buys{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.75;border-top:1px solid var(--line-lt);border-bottom:1px solid var(--line-lt);padding:12px 0} .door ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:8px} .door li{font-size:15px;line-height:1.5;color:var(--ink-2)} .door.ogd li::marker{color:var(--og-solid)} .door.secd li::marker{color:var(--purple-deep)} .door .go-link{margin-top:auto;padding-top:6px} /* heading beside its steps, so wide viewports don't leave half the row empty */ .splitsec{display:grid;grid-template-columns:1fr;gap:34px;align-items:start} @media(min-width:1000px){.splitsec{grid-template-columns:.8fr 1.2fr;gap:64px}} .splitsec .sec-head{margin-bottom:0} @media(min-width:1000px){.splitsec .sec-head{position:sticky;top:104px}} .steps{display:flex;flex-direction:column;gap:26px;max-width:70ch} .step{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start} .step .n{font-family:var(--mono);font-size:12px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;flex:0 0 auto;border:1px solid var(--og);color:var(--og);background:rgba(59,130,246,.1)} .lt .step .n{background:#EAF1FE} .step h4{font-size:17px;margin-bottom:5px} .step p{font-size:15px;color:var(--dim);line-height:1.55} .lt .step p{color:var(--ink-2)} .step b{color:var(--white);font-weight:600} .lt .step b{color:var(--ink)} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips span{font-family:var(--mono);font-size:11.5px;color:var(--dim);border:1px solid var(--line-dk);border-radius:5px;padding:6px 10px;background:var(--black-1)} .lt .chips span{color:var(--ink-2);border-color:var(--line-lt);background:var(--white)} .chartwrap{border:1px solid var(--line-dk);border-radius:12px;padding:24px;background:var(--black-1)} .chart-t{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:4px} .chart-s{font-size:13.5px;color:var(--dim);margin-bottom:20px} .crow{display:grid;grid-template-columns:84px 1fr 56px;gap:12px;align-items:center;padding:5px 0} .crow .st{font-size:13.5px;color:var(--dim)} .crow .v{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--white)} .cbar{height:13px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden} .cbar i{display:block;height:100%;background:var(--purple);border-radius:0 3px 3px 0;width:0;transition:width 1s cubic-bezier(.2,.8,.25,1)} .crow.tot .st,.crow.tot .v{color:var(--white);font-weight:600} .crow.tot .cbar i{background:#D6C6F5} .chart-f{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-dk);font-size:12.5px;color:var(--dim);line-height:1.55} /* ---- FAQ ---- */ .faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-lt)} section:not(.lt) .faq{border-top-color:var(--line-dk)} .faq details{border-bottom:1px solid var(--line-lt)} section:not(.lt) .faq details{border-bottom-color:var(--line-dk)} .faq summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;font-family:var(--display);font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:19px;font-weight:400;color:var(--purple);transition:transform .2s ease} .lt .faq summary::after{color:var(--purple-deep)} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq summary:hover{color:var(--purple)} .lt .faq summary:hover{color:var(--purple-deep)} .faq details > div{padding:0 40px 20px 0} .faq details p{font-size:15.5px;line-height:1.6;color:var(--dim);max-width:68ch} .lt .faq details p{color:var(--ink-2)} /* ---- Notes / posts ---- */ .posts{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px} @media(min-width:820px){.posts{grid-template-columns:1fr 1fr}} .posts > *{min-width:0} .post{border:1px solid var(--line-dk);border-radius:12px;padding:24px;background:var(--black-1);display:flex;flex-direction:column;gap:11px} .lt .post{border-color:var(--line-lt);background:var(--white)} .post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .post-cat{border:1px solid var(--line-dk-2);border-radius:999px;padding:3px 10px;color:var(--dim)} .post-cat.og{color:#93C5FD;border-color:rgba(59,130,246,.45)} .post-cat.sec{color:var(--purple);border-color:var(--purple-line)} .post h3{font-size:19px;line-height:1.25} .post p{font-size:14.5px;color:var(--dim);line-height:1.55} .post-read{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-dk);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)} /* ---- stylized US tile map ---- */ .mapwrap{border:1px solid var(--line-dk);border-radius:12px;padding:26px;background:var(--black-1)} .usmap{display:block;width:100%;height:auto;max-width:820px;margin:0 auto;overflow:visible} .usmap .stp{stroke:#0F0F14;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke; fill:rgba(255,255,255,.06);opacity:0;transition:opacity .6s ease,fill .6s ease} .usmap.is-live .stp{opacity:1} .usmap.is-live .stp.coast{fill:rgba(255,255,255,.07);transition-delay:1.15s} .usmap.is-live .stp.ring2{fill:rgba(168,139,232,.26);transition-delay:.7s} .usmap.is-live .stp.core{fill:var(--purple);transition-delay:.25s} .usmap .slab{fill:#1B0F2E;font-family:var(--mono);font-size:14px;font-weight:600;text-anchor:middle;opacity:0;transition:opacity .5s ease .55s;pointer-events:none} .usmap .ilab{fill:#6E6E78;font-family:var(--mono);font-size:11px;text-anchor:start;pointer-events:none} .usmap.is-live .slab{opacity:1} .usmap .stp:hover{fill:rgba(255,255,255,.16)} .usmap.is-live .stp.core:hover{fill:#C4ADF0} .map-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line-dk)} .map-legend div{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);line-height:1.4} .map-legend i{width:13px;height:13px;border-radius:3px;flex:0 0 auto;display:block} .map-legend i.c1{background:var(--purple)} .map-legend i.c2{background:rgba(168,139,232,.16);border:1px solid var(--purple-line)} .map-legend i.c3{background:rgba(255,255,255,.07);border:1px solid var(--line-dk-2)} .map-legend b{color:var(--white);font-weight:600} /* ================= Security dashboard surfaces ================= Modelled on tools/dashboard: main-feed/event-hover-cards.tsx severity bands, uts-engine/node-configuration/node-card.tsx, and the investigative-support case container. */ .dark-pane{background:#0F1117;border:1px solid #232733;border-radius:12px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.5);position:relative} .dp-bar{background:#151925;border-bottom:1px solid #232733;padding:11px 15px;display:flex;align-items:center;gap:10px} .dp-bar .t{font-size:12.5px;font-weight:600;color:#C7CBD6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .dp-bar .lv{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#34D399;display:flex;align-items:center;gap:5px;flex:0 0 auto} .dp-bar .lv b{width:6px;height:6px;border-radius:50%;background:#34D399;display:block;animation:blip 1.8s ease-in-out infinite} .dp-body{padding:18px} /* ---- timeline ---- */ .tl-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:#7C8397;margin-bottom:7px} .tl-track{position:relative;height:64px;border-radius:8px;background:linear-gradient(180deg,#151925,#11141d);border:1px solid #232733;margin-bottom:218px} .tl-track::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#242938} .tl-ev{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;border:2px solid #0F1117;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;padding:0} .tl-ev:hover,.tl-ev.on{transform:translate(-50%,-50%) scale(1.45);z-index:3} .tl-ev::after{content:"";position:absolute;inset:-9px;border-radius:50%} .tl-card{position:absolute;z-index:9;width:min(310px,88%);background:rgba(17,24,39,.97);backdrop-filter:blur(4px);border:2px solid #dc2626;border-radius:12px;padding:13px 15px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;transform:translateY(6px)} .tl-card.show{opacity:1;transform:none} .tlc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px} .tlc-head .fn{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25} .tlc-sev{font-size:10px;font-weight:700;color:#fff;border-radius:999px;padding:3px 9px;white-space:nowrap;flex:0 0 auto} .tlc-desc{font-size:12px;color:#C2C7D4;line-height:1.5;margin-bottom:10px} .tlc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px} .tlc-stats div{background:rgba(31,41,55,.6);border-radius:8px;padding:7px 9px} .tlc-stats .k{font-size:9.5px;color:#8D93A5;margin-bottom:2px;display:block} .tlc-stats .v{font-size:13.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;display:block} .tlc-rows{display:flex;flex-direction:column;gap:4px;font-size:11.5px} .tlc-rows div{display:flex;justify-content:space-between;gap:10px} .tlc-rows .k{color:#8D93A5} .tlc-rows .v{color:#D6DAE4;font-weight:600;text-transform:capitalize} .tl-hint{margin-top:0;font-family:var(--mono);font-size:10px;color:#7C8397} /* ---- node canvas ---- */ .canvas{position:relative;border-radius:10px;background: linear-gradient(#1b2030 1px,transparent 1px),linear-gradient(90deg,#1b2030 1px,transparent 1px),#11141d; background-size:26px 26px;border:1px solid #232733;padding:18px;overflow-x:auto} .canvas-inner{position:relative;min-width:710px;height:452px} .wire{position:absolute;left:0;top:0;width:710px;height:452px;pointer-events:none} .wire path{fill:none;stroke:#2E5FA8;stroke-width:2;stroke-dasharray:6 7;opacity:.9;animation:flow 1.1s linear infinite} @keyframes flow{to{stroke-dashoffset:-26}} .wire path.p{stroke:#7C3AED} .nd{position:absolute;width:150px;background:#171B26;border:1px solid #2A3040;border-radius:10px;padding:12px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease} .canvas.is-live .nd{opacity:1;transform:none} .canvas.is-live .nd:nth-of-type(2){transition-delay:.1s} .canvas.is-live .nd:nth-of-type(3){transition-delay:.2s} .canvas.is-live .nd:nth-of-type(4){transition-delay:.34s} .canvas.is-live .nd:nth-of-type(5){transition-delay:.48s} .nd .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 8px rgba(52,211,153,.8)} .nd .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;margin:2px auto 8px;font-size:16px} .nd .nm{font-size:11.5px;font-weight:700;color:#E6E9F0;text-align:center;line-height:1.25;margin-bottom:9px} .nd .mt{border-top:1px solid #242938;padding-top:8px;display:flex;flex-direction:column;gap:4px} .nd .mt div{display:flex;justify-content:space-between;font-size:10px} .nd .mt .k{color:#7C8397} .nd .mt .v{color:#C7CBD6;font-weight:600;font-family:var(--mono)} .nd.audio .ic{background:rgba(124,58,237,.16);color:#C4A6F7} .nd.video .ic{background:rgba(59,130,246,.16);color:#93C5FD} .nd.sensor .ic{background:rgba(14,116,144,.2);color:#7DD3E0} .nd.proc .ic{background:rgba(234,88,12,.16);color:#FDBA74} .nd.out{width:172px;border-color:#3E2F63;background:#1A1526} .nd.out .ic{background:rgba(168,139,232,.18);color:var(--purple)} .nd.out .score{text-align:center;font-family:var(--display);font-size:27px;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums} .nd.out .lvl{text-align:center;font-size:10px;font-weight:700;color:#fff;background:#C2410C;border-radius:999px;padding:3px 0;margin-top:7px} .nd-lib{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .nd-lib span{font-family:var(--mono);font-size:10px;color:#7C8397;border:1px solid #2A3040;border-radius:5px;padding:4px 9px;background:#151925} /* ---- case container ---- */ .case-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .case-id{font-family:var(--mono);font-size:12px;color:#C7CBD6;background:#151925;border:1px solid #2A3040;border-radius:6px;padding:6px 11px} .case-st{font-size:10.5px;font-weight:700;color:#0B1A12;background:#34D399;border-radius:999px;padding:4px 11px} .case-act{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap} .case-act span{font-size:11.5px;font-weight:600;border-radius:7px;padding:7px 12px;white-space:nowrap} .case-act .pri{background:var(--purple);color:#14091F} .case-act .sec2{background:#171B26;color:#C7CBD6;border:1px solid #2A3040} .ev-row{display:grid;grid-template-columns:56px 1fr auto;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid #232733;font-size:12.5px} .ev-row:last-of-type{border-bottom:0} .ev-k{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-align:center;border-radius:4px;padding:3px 0} .ev-k.v{color:#93C5FD;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.3)} .ev-k.a{color:#C4A6F7;background:rgba(124,58,237,.16);border:1px solid rgba(124,58,237,.35)} .ev-k.s{color:#7DD3E0;background:rgba(14,116,144,.2);border:1px solid rgba(14,116,144,.4)} .ev-k.d{color:#FDBA74;background:rgba(234,88,12,.14);border:1px solid rgba(234,88,12,.3)} .ev-row .lab{color:#D6DAE4;min-width:0} .ev-row .lab small{display:block;font-family:var(--mono);font-size:10px;color:#7C8397;margin-top:2px;word-break:break-all} .ev-row .hash{font-family:var(--mono);font-size:10px;color:#7C8397;white-space:nowrap} .coc{margin-top:14px;border-top:1px solid #232733;padding-top:12px} .coc-row{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#8D93A5;padding:4px 0} .coc-row i{width:7px;height:7px;border-radius:50%;background:#34D399;flex:0 0 auto;display:block} .coc-row b{color:#C7CBD6;font-weight:600} .coc-row time{margin-left:auto;font-family:var(--mono);font-size:10px;color:#7C8397;white-space:nowrap} /* ================= Security Layer dashboard, rebuilt live ============ Tokens read from the running app: --background 220 13% 18%, --card 220 13% 22%, --muted-foreground 220 8% 65%, --radius .5rem, threat low/medium/high 142 71% 45% / 48 97% 54% / 0 72% 51%. */ .fs{--bg:#282C34;--card:#313640;--mut:#3A4049;--bd:#3A4049;--pbd:#4D5563; --fg:#FAFAFA;--dim:#9FA3AD;--side:#D1D5DB;--low:#22C55E;--med:#FCD417;--high:#DC2626;--blue:#3B82F6; background:var(--bg);border:1px solid var(--pbd);border-radius:10px;overflow:hidden; font-family:var(--ui);color:var(--fg);box-shadow:0 20px 55px rgba(0,0,0,.42)} .lt .fs{box-shadow:0 14px 40px rgba(0,0,0,.18)} .fs-top{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--bd);background:#23262E} .fs-top .ttl{font-size:14px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .fs-top .pill{font-size:12px;font-weight:600;color:var(--fg);background:var(--mut);border-radius:999px;padding:3px 11px;white-space:nowrap;flex:0 0 auto} .fs-top .right{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap;flex:0 0 auto} .fs-body{padding:16px} .fs-sec{font-size:18px;font-weight:600;color:var(--fg);margin-bottom:4px} .fs-sub{font-size:12.5px;color:var(--dim);line-height:1.5;margin-bottom:14px} .fs-sub b{color:var(--fg);font-weight:600} .fs-metrics.m3{grid-template-columns:1fr} @media(min-width:620px){.fs-metrics.m3{grid-template-columns:repeat(3,1fr)}} .fs-stats2{grid-template-columns:1fr} @media(min-width:560px){.fs-stats2{grid-template-columns:repeat(3,1fr)}} .fs-metrics > div,.fs-stats > div,.fs-stats2 > div,.nc > *,.iv > *,.dl-grid > *{min-width:0} .fs-sub,.nc-ok,.fs-row,.iv-ask .p{overflow-wrap:anywhere} /* ===== real Security Layer dashboard markup, scoped to .dash ===== DOM captured from the running app; CSS is the app's own compiled stylesheet, tree-shaken to the rules these panels use and namespaced to .dash. */ .dashbox{border:1px solid #3A4049;border-radius:11px;overflow:hidden;background:#282C34;box-shadow:0 20px 55px rgba(0,0,0,.42)} .lt .dashbox{box-shadow:0 14px 40px rgba(0,0,0,.18)} .dashbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#23262E;border-bottom:1px solid #3A4049} .dashbar .t{font-family:var(--ui);font-size:12.5px;font-weight:700;color:#FAFAFA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .dashbar .r{margin-left:auto;font-family:var(--mono);font-size:10px;color:#9FA3AD;white-space:nowrap;flex:0 0 auto} .dashscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .dash{color:#FAFAFA;font-family:Inter,system-ui,sans-serif;padding:14px;background:#282C34} .dash *{box-sizing:border-box} .dashmin{min-width:700px} .dash img{max-width:100%} .dash [class*="fixed"],.dash [class*="sticky"]{position:static !important} .dash .overflow-y-auto,.dash .overflow-auto{overflow:visible !important} .dash .h-screen,.dash .min-h-screen{height:auto !important;min-height:0 !important} .dash *, .dash ::before, .dash ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .dash ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .dash *, .dash ::before, .dash ::after{ box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); } .dash ::before, .dash ::after{ --tw-content: ''; } .dash{ line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } .dash{ margin: 0px; line-height: inherit; } .dash hr{ height: 0px; color: inherit; border-top-width: 1px; } .dash abbr:where([title]){ text-decoration: underline dotted; } .dash h1, .dash h2, .dash h3, .dash h4, .dash h5, .dash h6{ font-size: inherit; font-weight: inherit; } .dash a{ color: inherit; text-decoration: inherit; } .dash b, .dash strong{ font-weight: bolder; } .dash code, .dash kbd, .dash samp, .dash pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } .dash small{ font-size: 80%; } .dash sub, .dash sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .dash sub{ bottom: -0.25em; } .dash sup{ top: -0.5em; } .dash table{ text-indent: 0px; border-color: inherit; border-collapse: collapse; } .dash button, .dash input, .dash optgroup, .dash select, .dash textarea{ font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; } .dash button, .dash select{ text-transform: none; } .dash button, .dash input:where([type="button"]), .dash input:where([type="reset"]), .dash input:where([type="submit"]){ appearance: button; background-color: transparent; background-image: none; } .dash progress{ vertical-align: baseline; } .dash ::-webkit-inner-spin-button, .dash ::-webkit-outer-spin-button{ height: auto; } .dash [type="search"]{ appearance: textfield; outline-offset: -2px; } .dash ::-webkit-search-decoration{ appearance: none; } .dash ::-webkit-file-upload-button{ appearance: button; font: inherit; } .dash summary{ display: list-item; } .dash blockquote, .dash dl, .dash dd, .dash h1, .dash h2, .dash h3, .dash h4, .dash h5, .dash h6, .dash hr, .dash figure, .dash p, .dash pre{ margin: 0px; } .dash fieldset{ margin: 0px; padding: 0px; } .dash legend{ padding: 0px; } .dash ol, .dash ul, .dash menu{ list-style: none; margin: 0px; padding: 0px; } .dash dialog{ padding: 0px; } .dash textarea{ resize: vertical; } .dash input::placeholder, .dash textarea::placeholder{ opacity: 1; color: rgb(156, 163, 175); } .dash button, .dash [role="button"]{ cursor: pointer; } .dash :disabled{ cursor: default; } .dash img, .dash svg, .dash video, .dash canvas, .dash audio, .dash iframe, .dash embed, .dash object{ display: block; vertical-align: middle; } .dash img, .dash video{ max-width: 100%; height: auto; } .dash [hidden]:where(:not([hidden="until-found"])){ display: none; } .dash{ --background: 0 0% 98%; --foreground: 220 13% 18%; --card: 0 0% 100%; --card-foreground: 220 13% 18%; --popover: 0 0% 100%; --popover-foreground: 220 13% 18%; --primary: 220 13% 18%; --primary-foreground: 0 0% 98%; --secondary: 220 9% 46%; --secondary-foreground: 0 0% 98%; --muted: 220 9% 96%; --muted-foreground: 220 8% 46%; --accent: 220 9% 96%; --accent-foreground: 220 13% 18%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --border: 220 13% 91%; --input: 220 13% 91%; --ring: 220 13% 18%; --radius: 0.5rem; --threat-low: 142 76% 36%; --threat-medium: 38 93% 50%; --threat-high: 0 84% 60%; --chart-1: 220 13% 46%; --chart-2: 220 9% 56%; --chart-3: 220 6% 66%; --chart-4: 220 3% 76%; --pane-border: 220 13% 85%; --pane-shadow: 220 13% 10%; --pane-background: 0 0% 100%; --pane-hover: 220 9% 96%; --pane-foreground: 220 13% 18%; --pane-ring: 220 13% 18%; --pane-muted-foreground: 220 8% 46%; } .dash{ --background: 220 13% 18%; --foreground: 0 0% 98%; --card: 220 13% 22%; --card-foreground: 0 0% 98%; --popover: 220 13% 22%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 220 13% 18%; --secondary: 220 9% 46%; --secondary-foreground: 0 0% 98%; --muted: 220 13% 26%; --muted-foreground: 220 10% 74%; --accent: 220 13% 26%; --accent-foreground: 0 0% 98%; --destructive: 0 63% 31%; --destructive-foreground: 0 0% 98%; --border: 220 13% 26%; --input: 220 13% 26%; --ring: 213 27% 84%; --threat-low: 142 71% 45%; --threat-medium: 48 97% 54%; --threat-high: 0 72% 51%; --chart-1: 220 9% 65%; --chart-2: 220 6% 75%; --chart-3: 220 3% 85%; --chart-4: 220 1% 95%; --pane-border: 220 13% 35%; --pane-shadow: 220 13% 5%; --pane-background: 220 13% 22%; --pane-hover: 220 13% 30%; --pane-foreground: 0 0% 98%; --pane-ring: 213 27% 84%; --pane-muted-foreground: 220 8% 65%; } .dash *{ border-color: hsl(var(--border)); } .dash{ background-color: hsl(var(--background)); color: hsl(var(--foreground)); } .dash .pane-badge{ display: inline-flex; align-items: center; border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; border-width: 2px; border-color: hsl(var(--pane-border)); background-color: hsl(var(--pane-hover)); color: hsl(var(--pane-foreground)); } .dash .pane-button{ border-radius: 0.25rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-width: 2px; border-color: hsl(var(--pane-border)); background-color: hsl(var(--pane-background)); color: hsl(var(--pane-foreground)); } .dash .pane-button:hover{ background-color: hsl(var(--pane-hover)); } .dash .pane-button-primary{ border-radius: 0.25rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-width: 2px; border-color: hsl(var(--pane-border)); background-color: hsl(var(--pane-foreground)); color: hsl(var(--pane-background)); } .dash .pane-button-primary:hover{ background-color: hsl(var(--pane-hover)); color: hsl(var(--pane-foreground)); } .dash .pointer-events-none{ pointer-events: none; } .dash .absolute{ position: absolute; } .dash .relative{ position: relative; } .dash .inset-y-0{ top: 0px; bottom: 0px; } .dash .bottom-0{ bottom: 0px; } .dash .left-0{ left: 0px; } .dash .left-2{ left: 0.5rem; } .dash .left-2\.5{ left: 0.625rem; } .dash .left-24{ left: 6rem; } .dash .right-0{ right: 0px; } .dash .right-2{ right: 0.5rem; } .dash .right-2\.5{ right: 0.625rem; } .dash .top-0{ top: 0px; } .dash .top-1{ top: 0.25rem; } .dash .top-1\.5{ top: 0.375rem; } .dash .top-1\/2{ top: 50%; } .dash .top-10{ top: 2.5rem; } .dash .top-2{ top: 0.5rem; } .dash .top-2\.5{ top: 0.625rem; } .dash .top-20{ top: 5rem; } .dash .top-24{ top: 6rem; } .dash .z-20{ z-index: 20; } .dash .mx-auto{ margin-left: auto; margin-right: auto; } .dash .mb-2{ margin-bottom: 0.5rem; } .dash .mb-3{ margin-bottom: 0.75rem; } .dash .mb-4{ margin-bottom: 1rem; } .dash .ml-24{ margin-left: 6rem; } .dash .mr-1{ margin-right: 0.25rem; } .dash .mr-1\.5{ margin-right: 0.375rem; } .dash .mr-2{ margin-right: 0.5rem; } .dash .mr-3{ margin-right: 0.75rem; } .dash .mt-0\.5{ margin-top: 0.125rem; } .dash .mt-1{ margin-top: 0.25rem; } .dash .mt-1\.5{ margin-top: 0.375rem; } .dash .mt-12{ margin-top: 3rem; } .dash .mt-2{ margin-top: 0.5rem; } .dash .mt-24{ margin-top: 6rem; } .dash .line-clamp-2{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dash .block{ display: block; } .dash .flex{ display: flex; } .dash .inline-flex{ display: inline-flex; } .dash .grid{ display: grid; } .dash .h-10{ height: 2.5rem; } .dash .h-12{ height: 3rem; } .dash .h-16{ height: 4rem; } .dash .h-3{ height: 0.75rem; } .dash .h-3\.5{ height: 0.875rem; } .dash .h-32{ height: 8rem; } .dash .h-4{ height: 1rem; } .dash .h-40{ height: 10rem; } .dash .h-48{ height: 12rem; } .dash .h-5{ height: 1.25rem; } .dash .h-6{ height: 1.5rem; } .dash .h-64{ height: 16rem; } .dash .h-7{ height: 1.75rem; } .dash .h-8{ height: 2rem; } .dash .h-80{ height: 20rem; } .dash .h-auto{ height: auto; } .dash .h-full{ height: 100%; } .dash .min-h-\[120px\]{ min-height: 120px; } .dash .w-0\.5{ width: 0.125rem; } .dash .w-10{ width: 2.5rem; } .dash .w-11{ width: 2.75rem; } .dash .w-24{ width: 6rem; } .dash .w-3{ width: 0.75rem; } .dash .w-3\.5{ width: 0.875rem; } .dash .w-3\/4{ width: 75%; } .dash .w-32{ width: 8rem; } .dash .w-4{ width: 1rem; } .dash .w-40{ width: 10rem; } .dash .w-48{ width: 12rem; } .dash .w-5{ width: 1.25rem; } .dash .w-5\/6{ width: 83.3333%; } .dash .w-6{ width: 1.5rem; } .dash .w-64{ width: 16rem; } .dash .w-8{ width: 2rem; } .dash .w-80{ width: 20rem; } .dash .w-full{ width: 100%; } .dash .w-px{ width: 1px; } .dash .min-w-0{ min-width: 0px; } .dash .flex-1{ flex: 1 1 0%; } .dash .flex-\[1_1_0\%\]{ flex: 1 1 0%; } .dash .flex-shrink-0{ flex-shrink: 0; } .dash .shrink-0{ flex-shrink: 0; } .dash .flex-grow{ flex-grow: 1; } .dash .border-collapse{ border-collapse: collapse; } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes spin { 100% { transform: rotate(360deg); } } .dash .cursor-pointer{ cursor: pointer; } /* --- rules the S.A.G.E. pane needs, from the product's own stylesheet --- */ .dash .-translate-y-1\/2{--tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .\[\&_svg\]\:pointer-events-none svg{pointer-events: none;} .dash .\[\&_svg\]\:shrink-0 svg{flex-shrink: 0;} .dash .\[\&_svg\]\:size-4 svg{width: 1rem; height: 1rem;} .dash .animate-pulse{animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;} .dash .bg-pane{background-color: hsl(var(--pane-background));} .dash .dark\:bg-primary\/20:is(.dark *){background-color: hsl(var(--primary) / 0.2);} .dash .dark\:border-primary\/50:is(.dark *){border-color: hsl(var(--primary) / 0.5);} .dash .file\:bg-transparent::file-selector-button{background-color: transparent;} .dash .file\:border-0::file-selector-button{border-width: 0px;} .dash .file\:font-medium::file-selector-button{font-weight: 500;} .dash .file\:text-foreground::file-selector-button{color: hsl(var(--foreground));} .dash .file\:text-sm::file-selector-button{font-size: 0.875rem; line-height: 1.25rem;} .dash .h-2{height: 0.5rem;} .dash .h-9{height: 2.25rem;} .dash .hover\:bg-muted:hover{background-color: hsl(var(--muted));} .dash .hover\:bg-primary\/90:hover{background-color: hsl(var(--primary) / 0.9);} .dash .left-3{left: 0.75rem;} .dash .md\:text-sm{font-size: 0.875rem; line-height: 1.25rem;} .dash .min-w-\[120px\]{min-width: 120px;} .dash .ml-1{margin-left: 0.25rem;} .dash .pane-content{padding: 1rem; background-color: hsl(var(--pane-background));} .dash .pane-header{border-bottom-width: 2px; padding: 1rem; border-width: 2px; background-color: hsl(var(--pane-hover)); border-color: hsl(var(--pane-border));} .dash .pane-input{width: 100%; border-radius: 0.25rem; border-width: 1px; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem;} .dash .pane-input::placeholder{color: hsl(var(--muted-foreground));} .dash .pane-input{border-width: 2px; background-color: hsl(var(--pane-background)); color: hsl(var(--foreground)); border-color: hsl(var(--pane-border));} .dash .pane-input:focus{outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); border-color: hsl(var(--pane-border)); ring-color: hsl(var(--pane-ring));} .dash .pb-3{padding-bottom: 0.75rem;} .dash .pl-10{padding-left: 2.5rem;} .dash .placeholder\:text-muted-foreground::placeholder{color: hsl(var(--muted-foreground));} .dash .px-4{padding-left: 1rem; padding-right: 1rem;} .dash .text-base{font-size: 1rem; line-height: 1.5rem;} .dash .transform{transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .w-2{width: 0.5rem;} .dash .animate-spin{ animation: spin 1s linear infinite; } /* --- the last two dark variants, which the evidence row's pending pill needed to stop rendering light-on-light --- */ .dash .dark\:bg-yellow-900\/20:is(.dark *){background-color: rgb(113 63 18 / 0.2);} .dash .dark\:text-yellow-400:is(.dark *){--tw-text-opacity: 1; color: rgb(250 204 21 / var(--tw-text-opacity, 1));} /* --- the selected styling the walkthrough applies on click --- */ .dash .bg-orange-50{--tw-bg-opacity: 1; background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));} .dash .dark\:bg-orange-900\/30:is(.dark *){background-color: rgb(124 45 18 / 0.3);} .dash .dark\:border-orange-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(154 52 18 / var(--tw-border-opacity, 1));} .dash .dark\:text-orange-300:is(.dark *){--tw-text-opacity: 1; color: rgb(253 186 116 / var(--tw-text-opacity, 1));} .dash .text-orange-800{--tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity, 1));} /* --- the product's dark variants; without a .dark ancestor every one of these was dead, which is why its selected cards came out light-on-light --- */ .dash .dark\:bg-green-900\/20:is(.dark *){background-color: rgb(20 83 45 / 0.2);} .dash .dark\:bg-green-900\/30:is(.dark *){background-color: rgb(20 83 45 / 0.3);} .dash .dark\:bg-primary\/20:is(.dark *){background-color: hsl(var(--primary) / 0.2);} .dash .dark\:bg-primary\/30:is(.dark *){background-color: hsl(var(--primary) / 0.3);} .dash .dark\:bg-purple-900\/20:is(.dark *){background-color: rgb(88 28 135 / 0.2);} .dash .dark\:bg-purple-900\/30:is(.dark *){background-color: rgb(88 28 135 / 0.3);} .dash .dark\:bg-red-900\/30:is(.dark *){background-color: rgb(127 29 29 / 0.3);} .dash .dark\:bg-yellow-900\/30:is(.dark *){background-color: rgb(113 63 18 / 0.3);} .dash .dark\:border-blue-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));} .dash .dark\:border-green-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));} .dash .dark\:border-purple-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));} .dash .dark\:border-red-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));} .dash .dark\:border-yellow-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));} .dash .dark\:from-blue-900\/20:is(.dark *){--tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);} .dash .dark\:hover\:bg-green-900\/30:hover:is(.dark *){background-color: rgb(20 83 45 / 0.3);} .dash .dark\:hover\:bg-primary\/30:hover:is(.dark *){background-color: hsl(var(--primary) / 0.3);} .dash .dark\:hover\:bg-purple-900\/30:hover:is(.dark *){background-color: rgb(88 28 135 / 0.3);} .dash .dark\:hover\:border-blue-600:hover:is(.dark *){--tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));} .dash .dark\:hover\:border-green-600:hover:is(.dark *){--tw-border-opacity: 1; border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));} .dash .dark\:hover\:border-purple-600:hover:is(.dark *){--tw-border-opacity: 1; border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));} .dash .dark\:hover\:text-green-300:hover:is(.dark *){--tw-text-opacity: 1; color: rgb(134 239 172 / var(--tw-text-opacity, 1));} .dash .dark\:hover\:text-purple-300:hover:is(.dark *){--tw-text-opacity: 1; color: rgb(216 180 254 / var(--tw-text-opacity, 1));} .dash .dark\:text-blue-300:is(.dark *){--tw-text-opacity: 1; color: rgb(147 197 253 / var(--tw-text-opacity, 1));} .dash .dark\:text-green-300:is(.dark *){--tw-text-opacity: 1; color: rgb(134 239 172 / var(--tw-text-opacity, 1));} .dash .dark\:text-green-400:is(.dark *){--tw-text-opacity: 1; color: rgb(74 222 128 / var(--tw-text-opacity, 1));} .dash .dark\:text-green-500:is(.dark *){--tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1));} .dash .dark\:text-purple-300:is(.dark *){--tw-text-opacity: 1; color: rgb(216 180 254 / var(--tw-text-opacity, 1));} .dash .dark\:text-purple-400:is(.dark *){--tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1));} .dash .dark\:text-purple-500:is(.dark *){--tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity, 1));} .dash .dark\:text-red-300:is(.dark *){--tw-text-opacity: 1; color: rgb(252 165 165 / var(--tw-text-opacity, 1));} .dash .dark\:text-yellow-300:is(.dark *){--tw-text-opacity: 1; color: rgb(253 224 71 / var(--tw-text-opacity, 1));} .dash .dark\:to-purple-900\/20:is(.dark *){--tw-gradient-to: rgb(88 28 135 / 0.2) var(--tw-gradient-to-position);} /* --- rules the Case Constructor needs, from the product's stylesheet --- */ .dash .bg-green-100{--tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));} .dash .bg-green-50{--tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));} .dash .bg-purple-100{--tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));} .dash .bg-purple-50{--tw-bg-opacity: 1; background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));} .dash .bg-red-50{--tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));} .dash .bg-yellow-50{--tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));} .dash .capitalize{text-transform: capitalize;} .dash .dark\:bg-green-900\/20:is(.dark *){background-color: rgb(20 83 45 / 0.2);} .dash .dark\:bg-green-900\/30:is(.dark *){background-color: rgb(20 83 45 / 0.3);} .dash .dark\:bg-primary\/30:is(.dark *){background-color: hsl(var(--primary) / 0.3);} .dash .dark\:bg-purple-900\/20:is(.dark *){background-color: rgb(88 28 135 / 0.2);} .dash .dark\:bg-purple-900\/30:is(.dark *){background-color: rgb(88 28 135 / 0.3);} .dash .dark\:bg-red-900\/30:is(.dark *){background-color: rgb(127 29 29 / 0.3);} .dash .dark\:bg-yellow-900\/30:is(.dark *){background-color: rgb(113 63 18 / 0.3);} .dash .dark\:border-blue-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));} .dash .dark\:border-green-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));} .dash .dark\:border-purple-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));} .dash .dark\:border-red-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));} .dash .dark\:border-yellow-800:is(.dark *){--tw-border-opacity: 1; border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));} .dash .dark\:from-blue-900\/20:is(.dark *){--tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);} .dash .dark\:hover\:bg-green-900\/30:hover:is(.dark *){background-color: rgb(20 83 45 / 0.3);} .dash .dark\:hover\:bg-primary\/30:hover:is(.dark *){background-color: hsl(var(--primary) / 0.3);} .dash .dark\:hover\:bg-purple-900\/30:hover:is(.dark *){background-color: rgb(88 28 135 / 0.3);} .dash .dark\:hover\:border-blue-600:hover:is(.dark *){--tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));} .dash .dark\:hover\:border-green-600:hover:is(.dark *){--tw-border-opacity: 1; border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));} .dash .dark\:hover\:border-purple-600:hover:is(.dark *){--tw-border-opacity: 1; border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));} .dash .dark\:hover\:text-green-300:hover:is(.dark *){--tw-text-opacity: 1; color: rgb(134 239 172 / var(--tw-text-opacity, 1));} .dash .dark\:hover\:text-purple-300:hover:is(.dark *){--tw-text-opacity: 1; color: rgb(216 180 254 / var(--tw-text-opacity, 1));} .dash .dark\:text-blue-300:is(.dark *){--tw-text-opacity: 1; color: rgb(147 197 253 / var(--tw-text-opacity, 1));} .dash .dark\:text-green-300:is(.dark *){--tw-text-opacity: 1; color: rgb(134 239 172 / var(--tw-text-opacity, 1));} .dash .dark\:text-green-400:is(.dark *){--tw-text-opacity: 1; color: rgb(74 222 128 / var(--tw-text-opacity, 1));} .dash .dark\:text-green-500:is(.dark *){--tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1));} .dash .dark\:text-purple-300:is(.dark *){--tw-text-opacity: 1; color: rgb(216 180 254 / var(--tw-text-opacity, 1));} .dash .dark\:text-purple-400:is(.dark *){--tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1));} .dash .dark\:text-purple-500:is(.dark *){--tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity, 1));} .dash .dark\:text-red-300:is(.dark *){--tw-text-opacity: 1; color: rgb(252 165 165 / var(--tw-text-opacity, 1));} .dash .dark\:text-yellow-300:is(.dark *){--tw-text-opacity: 1; color: rgb(253 224 71 / var(--tw-text-opacity, 1));} .dash .dark\:to-purple-900\/20:is(.dark *){--tw-gradient-to: rgb(88 28 135 / 0.2) var(--tw-gradient-to-position);} .dash .focus\:ring-blue-500:focus{--tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));} .dash .font-mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;} .dash .from-blue-50{--tw-gradient-from: #eff6ff var(--tw-gradient-from-position); --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);} .dash .hover\:bg-green-100:hover{--tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));} .dash .hover\:bg-muted\/50:hover{background-color: hsl(var(--muted) / 0.5);} .dash .hover\:bg-primary\/20:hover{background-color: hsl(var(--primary) / 0.2);} .dash .hover\:bg-purple-100:hover{--tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));} .dash .hover\:border-blue-300:hover{--tw-border-opacity: 1; border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));} .dash .hover\:border-border:hover{border-color: hsl(var(--border));} .dash .hover\:border-green-300:hover{--tw-border-opacity: 1; border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));} .dash .hover\:border-purple-300:hover{--tw-border-opacity: 1; border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));} .dash .hover\:text-green-800:hover{--tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1));} .dash .hover\:text-primary\/80:hover{color: hsl(var(--primary) / 0.8);} .dash .hover\:text-purple-800:hover{--tw-text-opacity: 1; color: rgb(107 33 168 / var(--tw-text-opacity, 1));} .dash .mb-6{margin-bottom: 1.5rem;} .dash .py-6{padding-top: 1.5rem; padding-bottom: 1.5rem;} .dash .scale-110{--tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));} .dash .text-blue-900{--tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity, 1));} .dash .text-green-700{--tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1));} .dash .text-green-800{--tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1));} .dash .text-purple-500{--tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity, 1));} .dash .text-purple-600{--tw-text-opacity: 1; color: rgb(147 51 234 / var(--tw-text-opacity, 1));} .dash .text-purple-700{--tw-text-opacity: 1; color: rgb(126 34 206 / var(--tw-text-opacity, 1));} .dash .text-purple-800{--tw-text-opacity: 1; color: rgb(107 33 168 / var(--tw-text-opacity, 1));} .dash .text-red-800{--tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity, 1));} .dash .text-yellow-800{--tw-text-opacity: 1; color: rgb(133 77 14 / var(--tw-text-opacity, 1));} .dash .to-purple-50{--tw-gradient-to: #faf5ff var(--tw-gradient-to-position);} /* --- rules the Node Configuration pane needs, from the product's stylesheet --- */ .dash .-right-3{right: -0.75rem;} .dash .-top-3{top: -0.75rem;} .dash .-translate-x-full{--tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .bg-amber-50{--tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));} .dash .bg-blue-500{--tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));} .dash .bg-indigo-500{--tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));} .dash .bg-opacity-10{--tw-bg-opacity: 0.1;} .dash .bg-yellow-500{--tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));} .dash .cursor-default{cursor: default;} .dash .cursor-move{cursor: move;} .dash .duration-150{transition-duration: 150ms;} .dash .duration-300{transition-duration: 300ms;} .dash .ease-out{transition-timing-function: cubic-bezier(0, 0, 0.2, 1);} .dash .focus\:border-primary:focus{border-color: hsl(var(--primary));} .dash .focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);} .dash .focus\:ring-primary:focus{--tw-ring-color: hsl(var(--primary));} .dash .h-\[280px\]{height: 280px;} .dash .hover\:bg-blue-600:hover{--tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));} .dash .hover\:bg-destructive\/20:hover{background-color: hsl(var(--destructive) / 0.2);} .dash .hover\:bg-indigo-600:hover{--tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));} .dash .hover\:bg-muted\/80:hover{background-color: hsl(var(--muted) / 0.8);} .dash .hover\:border-primary\/50:hover{border-color: hsl(var(--primary) / 0.5);} .dash .hover\:cursor-crosshair:hover{cursor: crosshair;} .dash .hover\:scale-110:hover{--tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);} .dash .hover\:text-destructive:hover{color: hsl(var(--destructive));} .dash .hover\:text-foreground:hover{color: hsl(var(--foreground));} .dash .mb-1{margin-bottom: 0.25rem;} .dash .min-h-0{min-height: 0px;} .dash .ml-2{margin-left: 0.5rem;} .dash .mt-4{margin-top: 1rem;} .dash .mt-auto{margin-top: auto;} .dash .mx-3{margin-left: 0.75rem; margin-right: 0.75rem;} .dash .pt-1{padding-top: 0.25rem;} .dash .py-0{padding-top: 0px; padding-bottom: 0px;} .dash .ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);} .dash .ring-background{--tw-ring-color: hsl(var(--background));} .dash .ring-blue-500{--tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));} .dash .ring-offset-2{--tw-ring-offset-width: 2px;} .dash .ring-primary{--tw-ring-color: hsl(var(--primary));} .dash .scale-105{--tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));} .dash .space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));} .dash .text-\[11px\]{font-size: 11px;} .dash .text-amber-800{--tw-text-opacity: 1; color: rgb(146 64 14 / var(--tw-text-opacity, 1));} .dash .text-gray-500{--tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1));} .dash .text-green-500{--tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1));} .dash .translate-x-full{--tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));} .dash .w-12{width: 3rem;} .dash .w-7{width: 1.75rem;} .dash .w-\[220px\]{width: 220px;} .dash .z-30{z-index: 30;} /* --- and the classes the injected chat messages use --- */ .dash .justify-end{justify-content: flex-end;} .dash .justify-start{justify-content: flex-start;} .dash .opacity-70{opacity: 0.7;} .dash .whitespace-pre-wrap{white-space: pre-wrap;} .dash .select-none{ user-select: none; } .dash .grid-cols-1{ grid-template-columns: repeat(1, minmax(0px, 1fr)); } .dash .grid-cols-11{ grid-template-columns: repeat(11, minmax(0px, 1fr)); } .dash .grid-cols-2{ grid-template-columns: repeat(2, minmax(0px, 1fr)); } .dash .grid-cols-3{ grid-template-columns: repeat(3, minmax(0px, 1fr)); } .dash .grid-cols-4{ grid-template-columns: repeat(4, minmax(0px, 1fr)); } .dash .grid-cols-5{ grid-template-columns: repeat(5, minmax(0px, 1fr)); } .dash .grid-cols-6{ grid-template-columns: repeat(6, minmax(0px, 1fr)); } .dash .grid-cols-7{ grid-template-columns: repeat(7, minmax(0px, 1fr)); } .dash .grid-cols-\[minmax\(140px\, .dash 1fr\)_80px_120px_1fr_80px_60px_100px\]{ grid-template-columns: minmax(140px, 1fr) 80px 120px 1fr 80px 60px 100px; } .dash .grid-rows-2{ grid-template-rows: repeat(2, minmax(0px, 1fr)); } .dash .flex-row{ flex-direction: row; } .dash .flex-col{ flex-direction: column; } .dash .flex-col-reverse{ flex-direction: column-reverse; } .dash .flex-wrap{ flex-wrap: wrap; } .dash .items-start{ align-items: flex-start; } .dash .items-center{ align-items: center; } .dash .justify-center{ justify-content: center; } .dash .justify-between{ justify-content: space-between; } .dash .gap-1{ gap: 0.25rem; } .dash .gap-1\.5{ gap: 0.375rem; } .dash .gap-2{ gap: 0.5rem; } .dash .gap-3{ gap: 0.75rem; } .dash .gap-4{ gap: 1rem; } .dash .space-x-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } .dash .space-x-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .dash .space-y-0 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .dash .space-y-0\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .dash .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .dash .space-y-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .dash .space-y-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .dash .overflow-hidden{ overflow: hidden; } .dash .overflow-visible{ overflow: visible; } .dash .overflow-y-auto{ overflow-y: auto; } .dash .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash .whitespace-normal{ white-space: normal; } .dash .whitespace-nowrap{ white-space: nowrap; } .dash .break-words{ overflow-wrap: break-word; } .dash .rounded{ border-radius: 0.25rem; } .dash .rounded-2xl{ border-radius: 1rem; } .dash .rounded-\[2px\]{ border-radius: 2px; } .dash .rounded-\[inherit\]{ border-radius: inherit; } .dash .rounded-full{ border-radius: 9999px; } .dash .rounded-lg{ border-radius: var(--radius); } .dash .rounded-md{ border-radius: calc(var(--radius) - 2px); } .dash .rounded-none{ border-radius: 0px; } .dash .rounded-sm{ border-radius: calc(var(--radius) - 4px); } .dash .rounded-xl{ border-radius: 0.75rem; } .dash .rounded-b-md{ border-bottom-right-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .dash .rounded-l-none{ border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .dash .rounded-r-md{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .dash .rounded-r-none{ border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .dash .rounded-t{ border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .dash .rounded-t-\[10px\]{ border-top-left-radius: 10px; border-top-right-radius: 10px; } .dash .rounded-t-lg{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .dash .rounded-t-md{ border-top-left-radius: calc(var(--radius) - 2px); border-top-right-radius: calc(var(--radius) - 2px); } .dash .rounded-tl-sm{ border-top-left-radius: calc(var(--radius) - 4px); } .dash .border{ border-width: 1px; } .dash .border-0{ border-width: 0px; } .dash .border-2{ border-width: 2px; } .dash .border-\[1\.5px\]{ border-width: 1.5px; } .dash .border-y{ border-top-width: 1px; border-bottom-width: 1px; } .dash .border-b{ border-bottom-width: 1px; } .dash .border-b-2{ border-bottom-width: 2px; } .dash .border-b-4{ border-bottom-width: 4px; } .dash .border-l{ border-left-width: 1px; } .dash .border-l-4{ border-left-width: 4px; } .dash .border-r{ border-right-width: 1px; } .dash .border-r-2{ border-right-width: 2px; } .dash .border-r-4{ border-right-width: 4px; } .dash .border-t{ border-top-width: 1px; } .dash .border-t-2{ border-top-width: 2px; } .dash .border-t-4{ border-top-width: 4px; } .dash .border-dashed{ border-style: dashed; } .dash .border-none{ border-style: none; } .dash .border-\[--color-border\]{ border-color: var(--color-border); } .dash .border-amber-200{ --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); } .dash .border-amber-300{ --tw-border-opacity: 1; border-color: rgb(252 211 77 / var(--tw-border-opacity, 1)); } .dash .border-amber-500{ --tw-border-opacity: 1; border-color: rgb(245 158 11 / var(--tw-border-opacity, 1)); } .dash .border-amber-500\/30{ border-color: rgba(245, 158, 11, 0.3); } .dash .border-amber-500\/50{ border-color: rgba(245, 158, 11, 0.5); } .dash .border-amber-700{ --tw-border-opacity: 1; border-color: rgb(180 83 9 / var(--tw-border-opacity, 1)); } .dash .border-blue-200{ --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); } .dash .border-blue-300{ --tw-border-opacity: 1; border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); } .dash .border-blue-400{ --tw-border-opacity: 1; border-color: rgb(96 165 250 / var(--tw-border-opacity, 1)); } .dash .border-blue-400\/30{ border-color: rgba(96, 165, 250, 0.3); } .dash .border-blue-500{ --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } .dash .border-blue-500\/20{ border-color: rgba(59, 130, 246, 0.2); } .dash .border-blue-500\/30{ border-color: rgba(59, 130, 246, 0.3); } .dash .border-blue-500\/40{ border-color: rgba(59, 130, 246, 0.4); } .dash .border-blue-500\/50{ border-color: rgba(59, 130, 246, 0.5); } .dash .border-blue-600{ --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)); } .dash .border-blue-700{ --tw-border-opacity: 1; border-color: rgb(29 78 216 / var(--tw-border-opacity, 1)); } .dash .border-blue-800{ --tw-border-opacity: 1; border-color: rgb(30 64 175 / var(--tw-border-opacity, 1)); } .dash .border-blue-800\/50{ border-color: rgba(30, 64, 175, 0.5); } .dash .border-border{ border-color: hsl(var(--border)); } .dash .border-border\/50{ border-color: hsl(var(--border) / 0.5); } .dash .border-border\/60{ border-color: hsl(var(--border) / 0.6); } .dash .border-current{ border-color: currentcolor; } .dash .border-cyan-200{ --tw-border-opacity: 1; border-color: rgb(165 243 252 / var(--tw-border-opacity, 1)); } .dash .border-cyan-400\/50{ border-color: rgba(34, 211, 238, 0.5); } .dash .border-cyan-500\/30{ border-color: rgba(6, 182, 212, 0.3); } .dash .border-cyan-500\/40{ border-color: rgba(6, 182, 212, 0.4); } .dash .border-cyan-500\/50{ border-color: rgba(6, 182, 212, 0.5); } .dash .border-cyan-600{ --tw-border-opacity: 1; border-color: rgb(8 145 178 / var(--tw-border-opacity, 1)); } .dash .border-destructive{ border-color: hsl(var(--destructive)); } .dash .border-destructive\/20{ border-color: hsl(var(--destructive) / 0.2); } .dash .border-destructive\/30{ border-color: hsl(var(--destructive) / 0.3); } .dash .border-destructive\/50{ border-color: hsl(var(--destructive) / 0.5); } .dash .border-emerald-200{ --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); } .dash .border-emerald-500{ --tw-border-opacity: 1; border-color: rgb(16 185 129 / var(--tw-border-opacity, 1)); } .dash .border-foreground{ border-color: hsl(var(--foreground)); } .dash .border-gray-100{ --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); } .dash .border-gray-200{ --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .dash .border-gray-300{ --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } .dash .border-gray-400{ --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)); } .dash .border-gray-500{ --tw-border-opacity: 1; border-color: rgb(107 114 128 / var(--tw-border-opacity, 1)); } .dash .border-gray-500\/30{ border-color: rgba(107, 114, 128, 0.3); } .dash .border-gray-500\/50{ border-color: rgba(107, 114, 128, 0.5); } .dash .border-gray-600{ --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); } .dash .border-gray-600\/20{ border-color: rgba(75, 85, 99, 0.2); } .dash .border-gray-600\/30{ border-color: rgba(75, 85, 99, 0.3); } .dash .border-gray-600\/50{ border-color: rgba(75, 85, 99, 0.5); } .dash .border-gray-700{ --tw-border-opacity: 1; border-color: rgb(55 65 81 / var(--tw-border-opacity, 1)); } .dash .border-gray-700\/30{ border-color: rgba(55, 65, 81, 0.3); } .dash .border-gray-700\/50{ border-color: rgba(55, 65, 81, 0.5); } .dash .border-gray-800{ --tw-border-opacity: 1; border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); } .dash .border-gray-900{ --tw-border-opacity: 1; border-color: rgb(17 24 39 / var(--tw-border-opacity, 1)); } .dash .border-green-200{ --tw-border-opacity: 1; border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); } .dash .border-green-300{ --tw-border-opacity: 1; border-color: rgb(134 239 172 / var(--tw-border-opacity, 1)); } .dash .border-green-400\/70{ border-color: rgba(74, 222, 128, 0.7); } .dash .border-green-500{ --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); } .dash .border-green-500\/30{ border-color: rgba(34, 197, 94, 0.3); } .dash .border-green-500\/40{ border-color: rgba(34, 197, 94, 0.4); } .dash .border-green-500\/50{ border-color: rgba(34, 197, 94, 0.5); } .dash .border-green-600{ --tw-border-opacity: 1; border-color: rgb(22 163 74 / var(--tw-border-opacity, 1)); } .dash .border-green-700{ --tw-border-opacity: 1; border-color: rgb(21 128 61 / var(--tw-border-opacity, 1)); } .dash .border-green-800{ --tw-border-opacity: 1; border-color: rgb(22 101 52 / var(--tw-border-opacity, 1)); } .dash .border-green-800\/50{ border-color: rgba(22, 101, 52, 0.5); } .dash .border-indigo-200{ --tw-border-opacity: 1; border-color: rgb(199 210 254 / var(--tw-border-opacity, 1)); } .dash .border-input{ border-color: hsl(var(--input)); } .dash .border-muted{ border-color: hsl(var(--muted)); } .dash .border-orange-200{ --tw-border-opacity: 1; border-color: rgb(254 215 170 / var(--tw-border-opacity, 1)); } .dash .border-orange-300{ --tw-border-opacity: 1; border-color: rgb(253 186 116 / var(--tw-border-opacity, 1)); } .dash .border-orange-400\/50{ border-color: rgba(251, 146, 60, 0.5); } .dash .border-orange-500{ --tw-border-opacity: 1; border-color: rgb(249 115 22 / var(--tw-border-opacity, 1)); } .dash .border-orange-500\/30{ border-color: rgba(249, 115, 22, 0.3); } .dash .border-orange-500\/40{ border-color: rgba(249, 115, 22, 0.4); } .dash .border-orange-500\/50{ border-color: rgba(249, 115, 22, 0.5); } .dash .border-pink-500\/50{ border-color: rgba(236, 72, 153, 0.5); } .dash .border-primary{ border-color: hsl(var(--primary)); } .dash .border-primary\/20{ border-color: hsl(var(--primary) / 0.2); } .dash .border-purple-200{ --tw-border-opacity: 1; border-color: rgb(233 213 255 / var(--tw-border-opacity, 1)); } .dash .border-purple-300{ --tw-border-opacity: 1; border-color: rgb(216 180 254 / var(--tw-border-opacity, 1)); } .dash .border-purple-500{ --tw-border-opacity: 1; border-color: rgb(168 85 247 / var(--tw-border-opacity, 1)); } .dash .border-purple-500\/30{ border-color: rgba(168, 85, 247, 0.3); } .dash .border-purple-500\/50{ border-color: rgba(168, 85, 247, 0.5); } .dash .border-purple-600{ --tw-border-opacity: 1; border-color: rgb(147 51 234 / var(--tw-border-opacity, 1)); } .dash .border-red-200{ --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); } .dash .border-red-300{ --tw-border-opacity: 1; border-color: rgb(252 165 165 / var(--tw-border-opacity, 1)); } .dash .border-red-400{ --tw-border-opacity: 1; border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } .dash .border-red-500{ --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } .dash .border-red-500\/30{ border-color: rgba(239, 68, 68, 0.3); } .dash .border-red-500\/40{ border-color: rgba(239, 68, 68, 0.4); } .dash .border-red-500\/50{ border-color: rgba(239, 68, 68, 0.5); } .dash .border-red-600{ --tw-border-opacity: 1; border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)); } .dash .border-red-600\/40{ border-color: rgba(220, 38, 38, 0.4); } .dash .border-red-600\/50{ border-color: rgba(220, 38, 38, 0.5); } .dash .border-red-800{ --tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); } .dash .border-red-800\/50{ border-color: rgba(153, 27, 27, 0.5); } .dash .border-slate-200{ --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); } .dash .border-slate-300{ --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); } .dash .border-slate-400{ --tw-border-opacity: 1; border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)); } .dash .border-teal-200{ --tw-border-opacity: 1; border-color: rgb(153 246 228 / var(--tw-border-opacity, 1)); } .dash .border-transparent{ border-color: transparent; } .dash .border-violet-200{ --tw-border-opacity: 1; border-color: rgb(221 214 254 / var(--tw-border-opacity, 1)); } .dash .border-white{ --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .dash .border-white\/30{ border-color: rgba(255, 255, 255, 0.3); } .dash .border-white\/50{ border-color: rgba(255, 255, 255, 0.5); } .dash .border-yellow-200{ --tw-border-opacity: 1; border-color: rgb(254 240 138 / var(--tw-border-opacity, 1)); } .dash .border-yellow-400{ --tw-border-opacity: 1; border-color: rgb(250 204 21 / var(--tw-border-opacity, 1)); } .dash .border-yellow-500{ --tw-border-opacity: 1; border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); } .dash .border-yellow-500\/20{ border-color: rgba(234, 179, 8, 0.2); } .dash .border-yellow-500\/30{ border-color: rgba(234, 179, 8, 0.3); } .dash .border-yellow-500\/40{ border-color: rgba(234, 179, 8, 0.4); } .dash .border-yellow-500\/50{ border-color: rgba(234, 179, 8, 0.5); } .dash .border-yellow-600{ --tw-border-opacity: 1; border-color: rgb(202 138 4 / var(--tw-border-opacity, 1)); } .dash .border-yellow-600\/30{ border-color: rgba(202, 138, 4, 0.3); } .dash .border-yellow-600\/50{ border-color: rgba(202, 138, 4, 0.5); } .dash .border-l-transparent{ border-left-color: transparent; } .dash .border-t-gray-300{ --tw-border-opacity: 1; border-top-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } .dash .border-t-transparent{ border-top-color: transparent; } .dash .border-t-white{ --tw-border-opacity: 1; border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .dash .bg-amber-500\/10{ background-color: rgba(245, 158, 11, 0.1); } .dash .bg-background{ background-color: hsl(var(--background)); } .dash .bg-blue-500\/10{ background-color: rgba(59, 130, 246, 0.1); } .dash .bg-blue-500\/20{ background-color: rgba(59, 130, 246, 0.2); } .dash .bg-card{ background-color: hsl(var(--card)); } .dash .bg-cyan-500\/10{ background-color: rgba(6, 182, 212, 0.1); } .dash .bg-destructive{ background-color: hsl(var(--destructive)); } .dash .bg-destructive\/10{ background-color: hsl(var(--destructive) / 0.1); } .dash .bg-destructive\/20{ background-color: hsl(var(--destructive) / 0.2); } .dash .bg-gray-200{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .dash .bg-gray-300{ --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); } .dash .bg-gray-500{ --tw-bg-opacity: 1; background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)); } .dash .bg-gray-500\/10{ background-color: rgba(107, 114, 128, 0.1); } .dash .bg-gray-500\/20{ background-color: rgba(107, 114, 128, 0.2); } .dash .bg-gray-500\/30{ background-color: rgba(107, 114, 128, 0.3); } .dash .bg-gray-800{ --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); } .dash .bg-gray-800\/30{ background-color: rgba(31, 41, 55, 0.3); } .dash .bg-gray-800\/40{ background-color: rgba(31, 41, 55, 0.4); } .dash .bg-gray-800\/50{ background-color: rgba(31, 41, 55, 0.5); } .dash .bg-gray-800\/60{ background-color: rgba(31, 41, 55, 0.6); } .dash .bg-gray-800\/70{ background-color: rgba(31, 41, 55, 0.7); } .dash .bg-gray-800\/80{ background-color: rgba(31, 41, 55, 0.8); } .dash .bg-gray-800\/95{ background-color: rgba(31, 41, 55, 0.95); } .dash .bg-gray-900{ --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } .dash .bg-gray-900\/30{ background-color: rgba(17, 24, 39, 0.3); } .dash .bg-gray-900\/50{ background-color: rgba(17, 24, 39, 0.5); } .dash .bg-gray-900\/60{ background-color: rgba(17, 24, 39, 0.6); } .dash .bg-gray-900\/80{ background-color: rgba(17, 24, 39, 0.8); } .dash .bg-gray-900\/90{ background-color: rgba(17, 24, 39, 0.9); } .dash .bg-gray-900\/95{ background-color: rgba(17, 24, 39, 0.95); } .dash .bg-green-500{ --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .dash .bg-green-500\/10{ background-color: rgba(34, 197, 94, 0.1); } .dash .bg-green-500\/20{ background-color: rgba(34, 197, 94, 0.2); } .dash .bg-green-500\/90{ background-color: rgba(34, 197, 94, 0.9); } .dash .bg-indigo-500\/10{ background-color: rgba(99, 102, 241, 0.1); } .dash .bg-muted{ background-color: hsl(var(--muted)); } .dash .bg-muted-foreground{ background-color: hsl(var(--muted-foreground)); } .dash .bg-muted\/20{ background-color: hsl(var(--muted) / 0.2); } .dash .bg-muted\/30{ background-color: hsl(var(--muted) / 0.3); } .dash .bg-muted\/50{ background-color: hsl(var(--muted) / 0.5); } .dash .bg-orange-500\/10{ background-color: rgba(249, 115, 22, 0.1); } .dash .bg-pink-500\/10{ background-color: rgba(236, 72, 153, 0.1); } .dash .bg-primary{ background-color: hsl(var(--primary)); } .dash .bg-primary\/10{ background-color: hsl(var(--primary) / 0.1); } .dash .bg-primary\/100{ background-color: hsl(var(--primary) / 1); } .dash .bg-primary\/20{ background-color: hsl(var(--primary) / 0.2); } .dash .bg-primary\/30{ background-color: hsl(var(--primary) / 0.3); } .dash .bg-purple-500\/10{ background-color: rgba(168, 85, 247, 0.1); } .dash .bg-red-500{ --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .dash .bg-red-500\/10{ background-color: rgba(239, 68, 68, 0.1); } .dash .bg-red-500\/20{ background-color: rgba(239, 68, 68, 0.2); } .dash .bg-red-500\/30{ background-color: rgba(239, 68, 68, 0.3); } .dash .bg-red-500\/90{ background-color: rgba(239, 68, 68, 0.9); } .dash .bg-rose-500\/10{ background-color: rgba(244, 63, 94, 0.1); } .dash .bg-secondary{ background-color: hsl(var(--secondary)); } .dash .bg-yellow-500\/10{ background-color: rgba(234, 179, 8, 0.1); } .dash .bg-gradient-to-r{ background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .dash .from-gray-800\/95{ --tw-gradient-from: rgb(31 41 55 / 0.95) var(--tw-gradient-from-position); --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dash .to-gray-900\/95{ --tw-gradient-to: rgb(17 24 39 / 0.95) var(--tw-gradient-to-position); } .dash .p-0{ padding: 0px; } .dash .p-1{ padding: 0.25rem; } .dash .p-1\.5{ padding: 0.375rem; } .dash .p-12{ padding: 3rem; } .dash .p-2{ padding: 0.5rem; } .dash .p-3{ padding: 0.75rem; } .dash .p-4{ padding: 1rem; } .dash .p-6{ padding: 1.5rem; } .dash .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .dash .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; } .dash .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .dash .py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; } .dash .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .dash .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .dash .py-12{ padding-top: 3rem; padding-bottom: 3rem; } .dash .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .dash .pb-2{ padding-bottom: 0.5rem; } .dash .pb-20{ padding-bottom: 5rem; } .dash .pt-0{ padding-top: 0px; } .dash .pt-2{ padding-top: 0.5rem; } .dash .pt-20{ padding-top: 5rem; } .dash .text-left{ text-align: left; } .dash .text-center{ text-align: center; } .dash .text-2xl{ font-size: 1.5rem; line-height: 2rem; } .dash .text-\[10px\]{ font-size: 10px; } .dash .text-lg{ font-size: 1.125rem; line-height: 1.75rem; } .dash .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .dash .text-xs{ font-size: 0.75rem; line-height: 1rem; } .dash .font-bold{ font-weight: 700; } .dash .font-medium{ font-weight: 500; } .dash .font-semibold{ font-weight: 600; } .dash .leading-none{ line-height: 1; } .dash .leading-relaxed{ line-height: 1.625; } .dash .tracking-tight{ letter-spacing: -0.025em; } .dash .text-amber-400{ --tw-text-opacity: 1; color: rgb(251 191 36 / var(--tw-text-opacity, 1)); } .dash .text-blue-300{ --tw-text-opacity: 1; color: rgb(147 197 253 / var(--tw-text-opacity, 1)); } .dash .text-blue-400{ --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)); } .dash .text-blue-400\/70{ color: rgba(96, 165, 250, 0.7); } .dash .text-card-foreground{ color: hsl(var(--card-foreground)); } .dash .text-cyan-400{ --tw-text-opacity: 1; color: rgb(34 211 238 / var(--tw-text-opacity, 1)); } .dash .text-cyan-400\/80{ color: rgba(34, 211, 238, 0.8); } .dash .text-cyan-400\/90{ color: rgba(34, 211, 238, 0.9); } .dash .text-destructive{ color: hsl(var(--destructive)); } .dash .text-destructive-foreground{ color: hsl(var(--destructive-foreground)); } .dash .text-foreground{ color: hsl(var(--foreground)); } .dash .text-foreground\/50{ color: hsl(var(--foreground) / 0.5); } .dash .text-gray-300{ --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .dash .text-gray-400{ --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .dash .text-gray-600{ --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .dash .text-green-400{ --tw-text-opacity: 1; color: rgb(74 222 128 / var(--tw-text-opacity, 1)); } .dash .text-green-600{ --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } .dash .text-indigo-400{ --tw-text-opacity: 1; color: rgb(129 140 248 / var(--tw-text-opacity, 1)); } .dash .text-muted-foreground{ color: hsl(var(--muted-foreground)); } .dash .text-orange-400{ --tw-text-opacity: 1; color: rgb(251 146 60 / var(--tw-text-opacity, 1)); } .dash .text-pink-400{ --tw-text-opacity: 1; color: rgb(244 114 182 / var(--tw-text-opacity, 1)); } .dash .text-primary{ color: hsl(var(--primary)); } .dash .text-primary-foreground{ color: hsl(var(--primary-foreground)); } .dash .text-purple-400{ --tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1)); } .dash .text-red-400{ --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } .dash .text-rose-400{ --tw-text-opacity: 1; color: rgb(251 113 133 / var(--tw-text-opacity, 1)); } .dash .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .dash .text-white\/70{ color: rgba(255, 255, 255, 0.7); } .dash .text-yellow-400{ --tw-text-opacity: 1; color: rgb(250 204 21 / var(--tw-text-opacity, 1)); } .dash .opacity-0{ opacity: 0; } .dash .shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-2xl{ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{ --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border)); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-inner{ --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-md{ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-none{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-sm{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-xl{ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .shadow-blue-500\/25{ --tw-shadow-color: rgb(59 130 246 / 0.25); --tw-shadow: var(--tw-shadow-colored); } .dash .shadow-gray-600\/25{ --tw-shadow-color: rgb(75 85 99 / 0.25); --tw-shadow: var(--tw-shadow-colored); } .dash .shadow-green-400\/50{ --tw-shadow-color: rgb(74 222 128 / 0.5); --tw-shadow: var(--tw-shadow-colored); } .dash .shadow-red-400\/50{ --tw-shadow-color: rgb(248 113 113 / 0.5); --tw-shadow: var(--tw-shadow-colored); } .dash .ring-0{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .dash .ring-offset-background{ --tw-ring-offset-color: hsl(var(--background)); } .dash .backdrop-blur-md{ --tw-backdrop-blur: blur(12px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .dash .backdrop-blur-sm{ --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .dash .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .dash .transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .dash .transition-opacity{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .dash .transition-shadow{ transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .dash .transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .dash .duration-200{ transition-duration: 200ms; } .dash .border-pane{ border-width: 2px; border-color: hsl(var(--pane-border)); } .dash .bg-pane-hover{ background-color: hsl(var(--pane-hover)); } .dash .text-pane{ color: hsl(var(--foreground)); } .dash .text-pane-muted{ color: hsl(var(--muted-foreground)); } .dash .pane-card{ background-color: hsl(var(--pane-background)); border-color: hsl(var(--pane-border)); } .dash .pane-hover{ background-color: hsl(var(--pane-hover)); } @keyframes border-glow-pulse { 0% { box-shadow: rgba(245, 158, 11, 0.7) 0px 0px 0px 0px; } 50% { box-shadow: rgba(245, 158, 11, 0.3) 0px 0px 0px 4px; } 100% { box-shadow: rgba(245, 158, 11, 0.7) 0px 0px 0px 0px; } } .dash .border-glow-pulse{ animation: 2s ease-in-out 0s infinite normal none running border-glow-pulse; } @keyframes recent-event-glow { 0% { box-shadow: rgba(34, 197, 94, 0.7) 0px 0px 0px 0px; } 50% { box-shadow: rgba(34, 197, 94, 0.3) 0px 0px 0px 3px; } 100% { box-shadow: rgba(34, 197, 94, 0.7) 0px 0px 0px 0px; } } @keyframes high-priority-glow { 0% { box-shadow: rgba(245, 158, 11, 0.8) 0px 0px 0px 0px; } 50% { box-shadow: rgba(245, 158, 11, 0.4) 0px 0px 0px 2px; } 100% { box-shadow: rgba(245, 158, 11, 0.8) 0px 0px 0px 0px; } } @keyframes border-glow-pulse-tooltip { 0% { box-shadow: rgba(245, 158, 11, 0.6) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 10px 25px; } 50% { box-shadow: rgba(245, 158, 11, 0.3) 0px 0px 0px 3px, rgba(0, 0, 0, 0.3) 0px 10px 25px; } 100% { box-shadow: rgba(245, 158, 11, 0.6) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 10px 25px; } } .dash .border-glow-pulse-tooltip{ animation: 2s ease-in-out 0s infinite normal none running border-glow-pulse-tooltip; } @keyframes scrubbing-glow { 0% { box-shadow: rgba(59, 130, 246, 0.7) 0px 0px 0px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 0px; } 50% { box-shadow: rgba(59, 130, 246, 0.3) 0px 0px 0px 4px, rgba(255, 255, 255, 0.3) 0px 0px 0px 2px; } 100% { box-shadow: rgba(59, 130, 246, 0.7) 0px 0px 0px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 0px; } } @keyframes timeline-flow-glow { 0% { box-shadow: rgba(34, 197, 94, 0.6) 0px 0px 0px 0px; } 50% { box-shadow: rgba(34, 197, 94, 0.3) 0px 0px 0px 2px; } 100% { box-shadow: rgba(34, 197, 94, 0.6) 0px 0px 0px 0px; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes shimmer { 0% { background-position: -200% 0px; } 100% { background-position: 200% 0px; } } .dash .investigative-support-container{ background: hsl(var(--background)); } .dash .enhanced-card{ background: hsl(var(--card)); border-color: hsl(var(--border)); } .dash .query-input{ background: hsl(var(--input)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); } .dash .query-input::placeholder{ color: hsl(var(--muted-foreground)); } .dash .tool-card{ background: hsl(var(--card)); border-color: hsl(var(--border)); } .dash .chat-message.ai{ background: hsl(var(--muted)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .dash .hover\:border-gray-600:hover{ --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); } .dash .hover\:bg-accent:hover{ background-color: hsl(var(--accent)); } .dash .hover\:bg-destructive\/80:hover{ background-color: hsl(var(--destructive) / 0.8); } .dash .hover\:bg-gray-700:hover{ --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } .dash .hover\:bg-gray-700\/30:hover{ background-color: rgba(55, 65, 81, 0.3); } .dash .hover\:bg-gray-700\/50:hover{ background-color: rgba(55, 65, 81, 0.5); } .dash .hover\:bg-gray-700\/60:hover{ background-color: rgba(55, 65, 81, 0.6); } .dash .hover\:bg-gray-800\/50:hover{ background-color: rgba(31, 41, 55, 0.5); } .dash .hover\:bg-primary\/80:hover{ background-color: hsl(var(--primary) / 0.8); } .dash .hover\:text-accent-foreground:hover{ color: hsl(var(--accent-foreground)); } .dash .hover\:shadow-md:hover{ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .hover\:border-pane:hover{ border-width: 2px; border-color: hsl(var(--pane-border)); } .dash .hover\:bg-pane-hover:hover{ background-color: hsl(var(--pane-hover)); } .dash .focus\:outline-none:focus{ outline: transparent solid 2px; outline-offset: 2px; } .dash .focus\:ring-2:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .dash .focus\:ring-ring:focus{ --tw-ring-color: hsl(var(--ring)); } .dash .focus\:ring-offset-2:focus{ --tw-ring-offset-width: 2px; } .dash .focus-visible\:outline-none:focus-visible{ outline: transparent solid 2px; outline-offset: 2px; } .dash .focus-visible\:ring-2:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .dash .focus-visible\:ring-ring:focus-visible{ --tw-ring-color: hsl(var(--ring)); } .dash .focus-visible\:ring-offset-2:focus-visible{ --tw-ring-offset-width: 2px; } .dash .focus-visible\:ring-offset-background:focus-visible{ --tw-ring-offset-color: hsl(var(--background)); } .dash .disabled\:pointer-events-none:disabled{ pointer-events: none; } .dash .disabled\:cursor-not-allowed:disabled{ cursor: not-allowed; } .dash .disabled\:opacity-50:disabled{ opacity: 0.5; } .dash .group[open] .group-open\:rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dash .group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{ opacity: 1; } .dash .group:hover .group-hover\:bg-black\/20{ background-color: rgba(0, 0, 0, 0.2); } .dash .group:hover .group-hover\:text-blue-300{ --tw-text-opacity: 1; color: rgb(147 197 253 / var(--tw-text-opacity, 1)); } .dash .group:hover .group-hover\:text-destructive{ color: hsl(var(--destructive)); } .dash .group\/menu-item:hover .group-hover\/menu-item\:opacity-100{ opacity: 1; } .dash .group:hover .group-hover\:opacity-100{ opacity: 1; } .dash .group.destructive .group-\[\.destructive\]\:border-muted\/40{ border-color: hsl(var(--muted) / 0.4); } .dash .group.toaster .group-\[\.toaster\]\:border-border{ border-color: hsl(var(--border)); } .dash .group.toast .group-\[\.toast\]\:bg-muted{ background-color: hsl(var(--muted)); } .dash .group.toast .group-\[\.toast\]\:bg-primary{ background-color: hsl(var(--primary)); } .dash .group.toaster .group-\[\.toaster\]\:bg-background{ background-color: hsl(var(--background)); } .dash .group.destructive .group-\[\.destructive\]\:text-red-300{ --tw-text-opacity: 1; color: rgb(252 165 165 / var(--tw-text-opacity, 1)); } .dash .group.toast .group-\[\.toast\]\:text-muted-foreground{ color: hsl(var(--muted-foreground)); } .dash .group.toast .group-\[\.toast\]\:text-primary-foreground{ color: hsl(var(--primary-foreground)); } .dash .group.toaster .group-\[\.toaster\]\:text-foreground{ color: hsl(var(--foreground)); } .dash .group.toaster .group-\[\.toaster\]\:shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover{ border-color: hsl(var(--destructive) / 0.3); } .dash .group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{ background-color: hsl(var(--destructive)); } .dash .group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{ color: hsl(var(--destructive-foreground)); } .dash .group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover{ --tw-text-opacity: 1; color: rgb(254 242 242 / var(--tw-text-opacity, 1)); } .dash .group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{ --tw-ring-color: hsl(var(--destructive)); } .dash .group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1)); } .dash .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{ --tw-ring-offset-color: #dc2626; } .dash .peer:disabled ~ .peer-disabled\:cursor-not-allowed{ cursor: not-allowed; } .dash .peer:disabled ~ .peer-disabled\:opacity-70{ opacity: 0.7; } .dash .group\/menu-item:has([data-sidebar="menu-action"]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8{ padding-right: 2rem; } .dash .data-\[state\=checked\]\:translate-x-5[data-state="checked"]{ --tw-translate-x: 1.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dash .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dash .data-\[state\=checked\]\:bg-primary[data-state="checked"]{ background-color: hsl(var(--primary)); } .dash .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{ background-color: hsl(var(--input)); } .dash .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{ left: calc(var(--sidebar-width) * -1); } .dash .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{ right: calc(var(--sidebar-width) * -1); } .dash .group[data-side="left"] .group-data-\[side\=left\]\:-right-4{ right: -1rem; } .dash .group[data-side="right"] .group-data-\[side\=right\]\:left-0{ left: 0px; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8{ margin-top: -2rem; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden{ display: none; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!size-8{ width: 2rem !important; height: 2rem !important; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{ width: var(--sidebar-width-icon); } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{ width: calc(var(--sidebar-width-icon) + 1rem); } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{ width: calc(var(--sidebar-width-icon) + 1rem + 2px); } .dash .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0{ width: 0px; } .dash .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dash .group[data-side="right"] .group-data-\[side\=right\]\:rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dash .group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden{ overflow: hidden; } .dash .group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg{ border-radius: var(--radius); } .dash .group[data-variant="floating"] .group-data-\[variant\=floating\]\:border{ border-width: 1px; } .dash .group[data-side="left"] .group-data-\[side\=left\]\:border-r{ border-right-width: 1px; } .dash .group[data-side="right"] .group-data-\[side\=right\]\:border-l{ border-left-width: 1px; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-0{ padding: 0px !important; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-2{ padding: 0.5rem !important; } .dash .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0{ opacity: 0; } .dash .group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dash .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after{ content: var(--tw-content); left: 100%; } .dash .peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5{ top: 0.375rem; } .dash .peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{ top: 0.625rem; } .dash .peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1{ top: 0.25rem; } .dash .peer[data-variant="inset"] ~ .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\]{ min-height: calc(-1rem + 100svh); } @media (min-width: 640px) {.dash .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }} @media (min-width: 768px) {.dash .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0px, 1fr)); } .dash .md\:col-span-2{ grid-column: span 2 / span 2; } .dash .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0px, 1fr)); } .dash .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0px, 1fr)); } .dash .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2{ margin: 0.5rem; } .dash .peer[data-state="collapsed"][data-variant="inset"] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2{ margin-left: 0.5rem; } .dash .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0{ margin-left: 0px; } .dash .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl{ border-radius: 0.75rem; } .dash .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }} @media (min-width: 1024px) {.dash .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0px, 1fr)); } /* also emitted outside a media query, so grid-cols-1 beat it and the pipeline's three cards stacked instead of sitting side by side */ .dash .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0px, 1fr)); } /* this was emitted outside a media query, so the later md:grid-cols-3 beat it and the sector grid came out three across instead of five */ .dash .lg\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0px, 1fr)); }} @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/ba9851c3c22cd980-s.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/21350d82a1f187e9-s.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/c5fe6dc8356a8c31-s.woff2") format("woff2"); unicode-range: U+1F00-1FFF; } @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/19cfc7226ec3afaa-s.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/df0a9ae256c0569c-s.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/8e9860b6e62d6359-s.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: __Inter_f367f3; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/_next/static/media/e4af272ccee01ff0-s.p.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: __Inter_Fallback_f367f3; src: local("Arial"); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; } .dash [data-radix-scroll-area-viewport]{ scrollbar-width: none; } .dash [data-radix-scroll-area-viewport]::-webkit-scrollbar{ display: none; } /* ---- hero: Live Threat Assessment ---- */ .lta-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px} .lta-l{display:flex;flex-direction:column;min-width:0} .lta-k{font-size:11.5px;color:var(--dim)} .lta-n{font-family:var(--display);font-size:52px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums} .lta-s{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:6px} .lta-b{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:6px 15px;white-space:nowrap;background:#15803D;color:#DCFCE7} .lta-track{height:10px;border-radius:5px;background:var(--mut);overflow:hidden;margin-bottom:6px;position:relative} .lta-track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#22C55E,#4ADE80);width:0;transition:width .8s cubic-bezier(.2,.8,.25,1)} .lta-marks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:#9BA2B0;margin-bottom:16px} .lta-mods{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:14px} @media(min-width:520px){.lta-mods{grid-template-columns:repeat(3,1fr)}} .lta-mod{border:1px solid var(--bd);border-radius:9px;padding:10px 11px;background:var(--card);min-width:0} .lta-mod .k{display:block;font-size:10.5px;color:var(--dim);margin-bottom:4px} .lta-mod .v{display:block;font-family:var(--display);font-size:17px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums} .lta-mod .t{display:block;height:3px;border-radius:2px;background:var(--mut);margin-top:7px;overflow:hidden} .lta-mod .t i{display:block;height:100%;width:0;transition:width .8s cubic-bezier(.2,.8,.25,1) .2s} .lta-foot{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--bd)} .lta-foot span{font-family:var(--mono);font-size:10px;color:var(--side);background:var(--mut);border-radius:5px;padding:4px 9px;white-space:nowrap} .lta-foot span b{color:#4ADE80;font-weight:700} /* ============ Security Layer — one night at Site A ============ */ .beat-time{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-bottom:14px} .lt .beat-time{color:var(--purple-deep)} .beat-time b{font-weight:700;color:var(--white);font-size:13px;letter-spacing:.04em} .lt .beat-time b{color:var(--ink)} .beat-time::after{content:"";flex:1;height:1px;background:var(--line-dk)} .lt .beat-time::after{background:var(--line-lt)} .beat-cap{margin-top:14px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--dim);max-width:80ch} .lt .beat-cap{color:var(--ink-2)} .beat-cap b{color:var(--white);font-weight:600} .lt .beat-cap b{color:var(--ink)} /* shared live-pane chrome, matched to the app */ .lp{position:relative;--bg:#282C34;--card:#313640;--mut:#3A4049;--bd:#3A4049;--pbd:#4D5563;--fg:#FAFAFA;--dim2:#B7BCC7;--side:#D1D5DB; background:var(--bg);border:1px solid var(--pbd);border-radius:11px;overflow:hidden;font-family:var(--ui); color:var(--fg);box-shadow:0 20px 55px rgba(0,0,0,.42)} .lt .lp{box-shadow:0 14px 40px rgba(0,0,0,.18)} .lp-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#23262E;border-bottom:1px solid var(--bd)} .lp-bar .t{font-size:12.5px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .lp-bar .r{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim2);white-space:nowrap;flex:0 0 auto;display:flex;align-items:center;gap:6px} .lp-bar .r i{width:6px;height:6px;border-radius:50%;background:#34D399;display:block;animation:blip 1.8s ease-in-out infinite} .lp-body{padding:16px;position:relative} .lp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---- timeline ---- */ .twrap{min-width:680px} .tax{display:grid;grid-template-columns:76px 1fr;margin-bottom:4px} .tax .tk{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--dim2)} .tlane{display:grid;grid-template-columns:76px 1fr;align-items:stretch;border-top:1px solid var(--bd)} .tlane .ln{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--side);padding:16px 10px 16px 2px} .tlane .ln i{width:8px;height:8px;border-radius:2px;flex:0 0 auto} .tstrip{position:relative;min-height:56px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.66% - 1px),rgba(255,255,255,.05) calc(16.66% - 1px),rgba(255,255,255,.05) 16.66%)} .tev{position:absolute;top:50%;transform:translate(-50%,-50%) scale(.3);width:12px;height:12px;border-radius:50%; border:2px solid #282C34;opacity:0;transition:transform .45s cubic-bezier(.2,1.5,.4,1),opacity .45s ease,box-shadow .2s ease} .lp.on .tev{opacity:1;transform:translate(-50%,-50%) scale(1)} .tev.tag{width:auto;height:17px;border-radius:9px;padding:0 9px;display:flex;align-items:center; font-family:var(--mono);font-size:9px;font-weight:700;white-space:nowrap} .tev.lit{box-shadow:0 0 0 6px rgba(255,255,255,.13)} .tph{position:absolute;top:0;bottom:0;width:2px;left:0;background:#2563eb;opacity:0;z-index:6} .lp.on .tph{opacity:.9} .tkey{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--bd);font-size:11px;color:var(--dim2)} .tkey span{display:flex;align-items:center;gap:6px} .tkey i{width:9px;height:9px;border-radius:50%} /* ---- kanban ---- */ .kwrap{min-width:900px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .kcol2{background:rgba(31,41,55,.4);border:1px solid var(--bd);border-radius:9px;padding:9px;min-width:0} .kh{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:5px 8px;border-radius:6px;margin-bottom:9px} .kh .n{margin-left:auto;font-family:var(--mono);font-size:10px;opacity:.9} .kh.sug{background:rgba(55,65,81,.35);border:1px solid rgba(75,85,99,.35);color:#D1D5DB} .kh.pen{background:rgba(234,179,8,.18);border:1px solid rgba(234,179,8,.3);color:#FDE047} .kh.pro{background:rgba(249,115,22,.18);border:1px solid rgba(249,115,22,.3);color:#FDBA74} .kh.com{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.3);color:#86EFAC} .kh.rej{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.3);color:#FCA5A5} .kc{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px;margin-bottom:8px; opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease} .lp.on .kc{opacity:1;transform:none} .kc:last-child{margin-bottom:0} .kc .ti{font-size:11.5px;font-weight:700;line-height:1.3} .kc .de{font-size:10px;color:var(--dim2);margin-top:4px;line-height:1.45} .kbadge{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px} .kbadge i{font-style:normal;font-size:9px;font-weight:700;border-radius:4px;padding:2px 6px;white-space:nowrap} .kbadge i.p-low{background:rgba(107,114,128,.25);color:#D1D5DB} .kbadge i.p-med{background:rgba(34,197,94,.2);color:#86EFAC} .kbadge i.p-high{background:rgba(249,115,22,.2);color:#FDBA74} .kbadge i.p-crit{background:rgba(239,68,68,.22);color:#FCA5A5} .kbadge i.t-preset{background:rgba(34,197,94,.16);color:#86EFAC} .kbadge i.t-hybrid{background:rgba(59,130,246,.2);color:#93C5FD} .kbadge i.human{background:rgba(168,139,232,.2);color:#C9B2F2} .kacts{margin-top:9px;padding-top:8px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:5px} .kact{display:grid;grid-template-columns:12px 1fr;gap:7px;font-size:9.5px;color:var(--dim2);line-height:1.4} .kact b{font-weight:600;color:#E6E9F0} .kact .m{font-size:9px} .kact.done .m{color:#4ADE80} .kact.run .m{color:#FDBA74} .kact.wait .m{color:#7C8397} .kroe{margin-top:8px;padding-top:7px;border-top:1px dashed var(--bd);font-size:9px;color:#C9B2F2;line-height:1.45} .kroe b{color:#E0D2F8;font-weight:700} .kprog2{margin-top:8px} .kprog2 .r{display:flex;justify-content:space-between;font-size:9px;color:var(--dim2);margin-bottom:3px} .kprog2 .b{height:4px;border-radius:2px;background:var(--mut);overflow:hidden} .kprog2 .b i{display:block;height:100%;background:#FB923C;width:0;transition:width 1s cubic-bezier(.2,.8,.25,1) .4s} /* ---- node canvas ---- */ .nwrap{position:relative;min-width:700px;height:470px;border-radius:9px;border:1px solid var(--bd); background:radial-gradient(circle,#434A57 1px,transparent 1px) 0 0/18px 18px,#22262E;overflow:hidden} .nwrap svg{position:absolute;left:0;top:0;width:700px;height:470px;pointer-events:none} .nwrap svg path{fill:none;stroke:#3B82F6;stroke-width:2;stroke-dasharray:5 6;opacity:0;animation:flow 1s linear infinite;transition:opacity .5s ease .5s} .lp.on .nwrap svg path{opacity:.95} .nwrap svg path.v2{stroke:#A78BFA} .nn{position:absolute;width:150px;background:var(--card);border:1px solid var(--pbd);border-radius:9px;padding:10px; opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease} .lp.on .nn{opacity:1;transform:none} .lp.on .nn:nth-of-type(2){transition-delay:.1s}.lp.on .nn:nth-of-type(3){transition-delay:.2s} .lp.on .nn:nth-of-type(4){transition-delay:.32s}.lp.on .nn:nth-of-type(5){transition-delay:.44s} .nn .st{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:#22C55E;animation:stpulse 2.2s ease-in-out infinite} @keyframes stpulse{0%,100%{box-shadow:0 0 8px rgba(34,197,94,.85)}50%{box-shadow:0 0 2px rgba(34,197,94,.3)}} .nn .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;margin:0 auto 7px;font-size:14px} .nn .nm{font-size:11px;font-weight:700;text-align:center;line-height:1.25} .nn .sub{font-size:9px;color:var(--dim2);text-align:center;margin-top:3px;line-height:1.3} .nn .mt{margin-top:8px;padding-top:7px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:3px} .nn .mt div{display:flex;justify-content:space-between;font-size:9px} .nn .mt .k{color:var(--dim2)}.nn .mt .v{color:var(--side);font-family:var(--mono)} .nn.out{width:164px;border-color:#4C3A78;background:#2A2438} .nn.out .nsc{text-align:center;font-family:var(--display);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:#fff;margin-top:8px} .nn.out .lv{text-align:center;font-size:9px;font-weight:700;color:#052E16;background:#22C55E;border-radius:999px;padding:3px 0;margin-top:6px} .nlib{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .nlib span{font-family:var(--mono);font-size:9.5px;color:var(--dim2);border:1px solid var(--bd);border-radius:5px;padding:4px 9px;background:#1E212A} /* ---- Security Layer · Node Configuration --------------------------- The library, toolbar, node cards and connection lines are the dashboard's own rendered DOM. Only the node coordinates changed, and the graph is sized through the product's own canvas zoom transform rather than being redrawn at another scale. */ .slnode{position:relative} .slnode-grid{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:stretch} /* the library shows all eight node types outright: no scrollbar, and no item cut in half at the bottom of a column */ .slnode-lib{min-width:0;border-right:1px solid hsl(var(--border));overflow:visible} .dash.slnode .slnode-lib .space-y-2 > * + *{margin-top:5px} .dash.slnode .slnode-lib .p-2{padding:6px 8px} .dash.slnode .slnode-lib .text-sm{font-size:11.5px;line-height:1.25} .dash.slnode .slnode-lib .text-xs{font-size:9.5px;line-height:1.3} .dash.slnode .slnode-lib h2{font-size:13px} .dash.slnode .slnode-lib .mb-4{margin-bottom:8px} .dash.slnode .slnode-lib .w-64{width:100%;border-right:0;height:100%} .slnode-main{min-width:0;display:flex;flex-direction:column} .slnode-main > .p-2{flex:0 0 auto} /* the product paints its canvas with an inline dot grid; these are its values */ .slnode-canvas{position:relative;overflow:hidden;height:586px; background-color:hsl(220,13%,12%); background-image:radial-gradient(hsl(var(--border)) 1px,transparent 1px), radial-gradient(hsl(var(--border)) 1px,transparent 1px); background-size:20px 20px;background-position:0 0,10px 10px} /* A transform does not change layout size, so the drawing sits in a sizer box cut to its scaled footprint (880x1010 at the zoom below). That keeps it centred here and makes it scroll by the right amount on a phone. */ .slnode-canvas{display:grid;justify-content:center} .slnode-sizer{width:580px;height:580px;position:relative} .dash.slnode .slnode-layer{transform:scale(.58) !important;transform-origin:top left !important} /* the UTS Output card holds more than the product's fixed 280px box, and in the dashboard it simply spills over its neighbours. Given room here, it can be read whole. */ .dash.slnode #node-output-1 .h-\[280px\]{height:auto;min-height:280px} /* a node card is a fixed 280px box whose content is free to spill over its neighbours — which it does in the dashboard too, where the nodes are further apart. Here each card keeps to its own box, and the live throughput block is set tight enough to fit inside it. */ .dash.slnode [id^="node-"] > div{overflow:hidden} .dash.slnode [data-sn-perf]{font-size:9px;line-height:1.3;gap:2px;margin-top:2px} /* the video card carries an extra feed selector, so the status panel is tightened a little to keep its live row inside the box */ .dash.slnode [id^="node-"] .space-y-2 > * + *{margin-top:3px} .dash.slnode [id^="node-"] .mb-2{margin-bottom:4px} .dash.slnode [data-sn-perf] span{white-space:nowrap} /* this canvas plays; it is not an editor. Nothing in it invites a click, and the delete affordances the dashboard puts on each node are dropped. */ .slnode-canvas{pointer-events:none} .slnode-canvas *{cursor:default !important} .dash.slnode .slnode-canvas .-top-3{display:none} .slnode svg{flex:none} @media (prefers-reduced-motion: reduce){ .slnode-layer circle[class*="animate"]{animation:none} .slnode-layer animateMotion{display:none} } /* ---- Node Configuration on a phone ---------------------------------- The library becomes a scrollable rail above the canvas instead of a fixed column, the toolbar keeps only the controls that mean anything without a mouse, and the graph is zoomed out far enough to read whole. */ /* ---- Node Configuration on a phone ---------------------------------- The canvas is the one thing here that genuinely wants to be panned, so on a phone it stays at a readable zoom and scrolls, exactly as the dashboard's own canvas does. The library becomes a swipeable rail, and the node-config panel — which only appears when a node is selected with a mouse — is left out. */ @media(max-width:860px){ .dash .slnode-grid{grid-template-columns:minmax(0,1fr)} .dash .slnode-lib{height:auto;overflow:visible;border-right:0; border-bottom:1px solid hsl(var(--border))} .dash.slnode .slnode-lib .w-64{width:100%;padding:9px;border-right:0; display:block;height:auto} .dash.slnode .slnode-lib .mb-4{margin-bottom:7px} .dash.slnode .slnode-lib h2{font-size:12.5px} .dash.slnode .slnode-cfg{display:none} /* the eight node types as one swipeable line */ .dash.slnode .slnode-lib .flex-shrink-0{overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch} .dash.slnode .slnode-lib .flex-shrink-0::-webkit-scrollbar{display:none} .dash.slnode .slnode-lib .space-y-2{display:flex;flex-direction:row; flex-wrap:nowrap;gap:7px} .dash.slnode .slnode-lib .space-y-2 > * + *{margin-top:0} .dash.slnode .slnode-lib .space-y-2 > *{flex:0 0 168px} .dash.slnode .slnode-lib .text-sm{font-size:11.5px} .dash.slnode .slnode-lib .text-xs{font-size:9.5px;line-height:1.3} /* toolbar: the controls, smaller, not stacked into a tower */ .dash.slnode .slnode-main > .p-2{padding:8px} .dash.slnode .slnode-main .text-sm{font-size:11.5px} .dash.slnode .slnode-main .text-xs{font-size:10px} .dash.slnode .slnode-main button{height:28px;padding:0 9px;font-size:11px} .dash.slnode .slnode-main .gap-2{gap:5px} /* a canvas you pan, at a zoom you can actually read */ .dash.slnode .slnode-canvas{height:430px;display:block; overflow:auto !important;-webkit-overflow-scrolling:touch} .dash.slnode .slnode-sizer{width:550px;height:550px} .dash.slnode .slnode-layer{transform:scale(.55) !important; transform-origin:top left !important} } /* ---- Security Layer · S.A.G.E. ------------------------------------- The markup inside .slsage is the product's own rendered DOM, captured from the dashboard. Everything below is layout only: it places that markup in a pane and gives the phone its own composition, rather than a narrowed copy of the desktop one. */ .slsage{position:relative} /* ---- Case Constructor ------------------------------------------------ One window, walked a step at a time. Only one state is mounted at a time, and the lead above the pane changes with it, so the page shows the wizard progressing rather than six screens at once. */ .cc-lead{margin-bottom:14px;min-height:74px} .cc-lead h4,.cc-lead p{transition:opacity .25s ease} .cc-pane{position:relative} .cc-state{display:none} .cc-state[data-on]{display:block} .slcc{padding:16px 18px;pointer-events:none} .slcc *{cursor:default !important} /* the dialog is laid out for a near-fullscreen modal; in a pane its justify-between rows would pull apart, so each keeps a readable measure */ .slcc .space-y-4{max-width:1080px;margin:0 auto} /* One height for every step, so the section neither stretches nor collapses as the walkthrough advances. The number at each breakpoint is the tallest step there, measured. */ .cc-pane .lp-body{height:730px} @media(max-width:1180px){ .cc-pane .lp-body{height:770px} } @media(max-width:860px){ .cc-pane .lp-body{height:640px} } @media(max-width:640px){ .cc-pane .lp-body{height:815px} } .cc-rail{display:flex;gap:6px;justify-content:center;padding:0 0 12px} .cc-rail i{width:22px;height:3px;border-radius:2px;background:var(--bd); transition:background .3s ease,width .3s ease} .cc-rail i[data-on]{background:var(--side);width:34px} /* the Add Evidence dialog, over the step it belongs to */ .slcc-evmodal{position:absolute;inset:0;z-index:30;display:flex;align-items:center; justify-content:center;background:rgba(8,10,14,.6);border-radius:8px} .slcc-evmodal > div{width:min(420px,92%);background:hsl(var(--card)); border:1px solid hsl(var(--border));border-radius:10px;padding:14px; box-shadow:0 24px 60px rgba(0,0,0,.5)} .cc-state{position:relative} .slcc-foot{margin-top:12px;padding-top:10px;border-top:1px solid hsl(var(--border))} .cc-pressed{filter:brightness(.86)} .cc-focus{border-color:hsl(var(--pane-ring)) !important; box-shadow:0 0 0 2px hsl(var(--pane-ring) / .35)} .dash.slcc .text-2xl{font-size:16px;line-height:1.25} .dash.slcc .text-xl{font-size:14.5px;line-height:1.25} .dash.slcc .text-lg{font-size:13.5px;line-height:1.3} .dash.slcc .text-base{font-size:12.5px;line-height:1.45} .dash.slcc .text-sm{font-size:12px;line-height:1.45} .dash.slcc .text-xs{font-size:10.5px;line-height:1.4} .dash.slcc .p-6{padding:12px} .dash.slcc .p-4{padding:10px} .dash.slcc .p-3{padding:9px} .dash.slcc .gap-4{gap:9px} .dash.slcc .space-y-6 > * + *{margin-top:12px} .dash.slcc .space-y-4 > * + *{margin-top:9px} .dash.slcc .space-y-3 > * + *{margin-top:7px} .dash.slcc .space-y-2 > * + *{margin-top:6px} .dash.slcc .mb-4{margin-bottom:8px} .dash.slcc .w-8{width:22px}.dash.slcc .h-8{height:22px} .dash.slcc .h-10{height:34px} .dash.slcc select,.dash.slcc textarea,.dash.slcc input{font-size:12.5px;line-height:1.45} .dash.slcc select{background:hsl(var(--background));color:hsl(var(--foreground)); color-scheme:dark} .dash.slcc textarea{min-height:70px} /* ---- Case Constructor on a phone ------------------------------------ The wizard is a near-fullscreen dialog on a desktop; on a phone the same screens have to be read one thumb-length at a time. The product's own grids already collapse (the sector tiles go two-up, the category cards one-up), so what is left is density — and, on the category step, not making the reader scroll past three cards they did not choose to reach the one that was. */ @media(max-width:860px){ .dash.slcc{padding:10px} .dash.slcc .text-2xl{font-size:14px} .dash.slcc .text-xl{font-size:13px} .dash.slcc .text-lg{font-size:12.5px} .dash.slcc .text-base{font-size:11.5px} .dash.slcc .text-sm{font-size:11.5px;line-height:1.4} .dash.slcc .text-xs{font-size:10px;line-height:1.35} .dash.slcc .p-6{padding:9px} .dash.slcc .p-4{padding:9px} .dash.slcc .p-3{padding:8px} .dash.slcc .gap-4{gap:7px} .dash.slcc .space-y-6 > * + *{margin-top:9px} .dash.slcc .space-y-4 > * + *{margin-top:7px} .dash.slcc .space-y-3 > * + *{margin-top:6px} .dash.slcc .space-y-2 > * + *{margin-top:5px} .dash.slcc .w-8{width:19px}.dash.slcc .h-8{height:19px} .dash.slcc .h-10{height:32px} .dash.slcc textarea{min-height:56px} .cc-pane .lp-body{min-height:320px} .cc-lead{min-height:96px;margin-bottom:11px} /* the category step: the chosen category, not the three beside it */ .cc-state[data-cc-state="1"] .grid > div:not([data-cc-cat]){display:none} /* The product prints each typology's description twice — once as the row's subtitle, once again beneath it. On a phone neither earns its height: the code, the title and the badges beside them carry it. */ .dash.slcc [data-cc-state="2"] p.text-xs.text-muted-foreground.mb-3{display:none} .dash.slcc [data-cc-state="2"] .grid:not(.lg\:grid-cols-3) > div p{display:none} /* the pipeline's own header carries a six-unit gap meant for a full-screen dialog */ .dash.slcc [data-cc-state="2"] .mb-6{margin-bottom:8px} .dash.slcc [data-cc-state="2"] .space-x-3 > * + *{margin-left:7px} /* three exhibits, each wrapping its name over two lines, made the last step twice the height of any other one */ .dash.slcc [data-cc-evrow]{padding:7px 8px} .dash.slcc [data-cc-evrow] .text-sm{font-size:11px;line-height:1.3} .dash.slcc [data-cc-evrow] .space-x-3 > * + *{margin-left:7px} .dash.slcc [data-cc-evrow] .mt-1{margin-top:3px} .dash.slcc [data-cc-evlist] > * + *{margin-top:5px} .dash.slcc [data-cc-evrow] .p-1{padding:3px} /* Stacked, the pipeline's three cards make this step three times the height of every other one. As a swipe rail they read the same and the window stops having to grow to fit one step. */ .dash.slcc [data-cc-state="2"] .grid.lg\:grid-cols-3{display:flex;flex-direction:row; gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:2px} .dash.slcc [data-cc-state="2"] .grid.lg\:grid-cols-3::-webkit-scrollbar{display:none} .dash.slcc [data-cc-state="2"] .grid.lg\:grid-cols-3 > *{flex:0 0 86%;scroll-snap-align:start} /* the typologies are a list, and stay one */ .dash.slcc [data-cc-state="2"] .grid:not(.lg\:grid-cols-3){display:block} .dash.slcc [data-cc-state="2"] .grid:not(.lg\:grid-cols-3) > * + *{margin-top:7px} .cc-state[data-cc-state="2"] li, .cc-state[data-cc-state="2"] .space-y-1 > * + *{margin-top:3px} } /* this pane plays; it is not a console. Nothing in it takes a click. */ .slsage{pointer-events:none} .slsage *{cursor:default !important} /* denser than the product's own full-page padding, so the pane reads as a pane rather than a screenshot of a whole screen */ .dash.slsage .p-6{padding:12px 14px} .dash.slsage .pb-3{padding-bottom:8px} .dash.slsage .p-4{padding:10px} .dash.slsage .text-lg{font-size:14.5px} .dash.slsage .text-sm{font-size:12.5px} .dash.slsage .text-xs{font-size:10.5px} .dash.slsage .text-base{font-size:12.5px} .dash.slsage .h-10{height:34px} .dash.slsage .h-8{height:28px} .dash.slsage .space-y-4 > * + *{margin-top:9px} .dash.slsage .space-y-2 > * + *{margin-top:6px} /* the product prints two paragraphs of preamble. Clamping the block cut a sentence in half; the first paragraph is the point, so the second goes. */ .dash.slsage .pane-header .mt-2 > p + p{display:none} /* .dash flattens the product's scroll containers so panes cannot trap the page scroll. The transcript and the template list are meant to scroll, so they are exempted here. */ .slsage .slsage-chat .overflow-y-auto{overflow-y:auto !important;overflow-x:hidden !important} .slsage .slsage-tpl-list{overflow-y:auto !important;overflow-x:hidden !important} /* one fixed height for the pane; both columns scroll their own content inside it rather than the taller one setting the height of the page */ .slsage-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px; align-items:stretch;height:552px} .slsage-grid > *{min-height:0} .slsage-main{min-width:0;min-height:0;padding:10px} .slsage-main > .pane-card{height:100%;min-height:0;display:flex;flex-direction:column} .slsage-main .pane-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px} .slsage-aside{min-width:0;min-height:0;display:flex;flex-direction:column; border-left:2px solid hsl(var(--pane-border))} .slsage-aside > .h-full{min-height:0} /* the transcript takes whatever height the templates column sets, so the assistant card has no dead space under it */ .slsage-chat{flex:1 1 auto;height:auto;min-height:300px;overflow:hidden} /* a flex child only scrolls if its ancestors are allowed to shrink; without this the transcript grows and spills past the pane */ .slsage-chat > .flex-1{min-width:0;min-height:0} .slsage-chat > .flex-1 > .overflow-y-auto{min-height:0} .slsage-tpl-list{min-height:0} .slsage-tplhead h3{white-space:nowrap} .slsage-tplhead .pane-badge{white-space:nowrap} /* the product sizes its own SVGs; keep them from inheriting the 24px attr */ .slsage svg{flex:none} /* ---- S.A.G.E. on a phone -------------------------------------------- Not the desktop pane made narrow. The templates sidebar becomes a swipeable rail beneath the assistant, the chat-history column drops (it is a desktop affordance), the filter row becomes one scrollable line instead of three wrapped ones, and the ask row stacks. */ /* ---- S.A.G.E. on a phone -------------------------------------------- Not the desktop pane made narrow: its own type scale, its own spacing, and its own composition. The markup stays the product's; only the metrics change. Every selector carries .dash so it outranks the product's own utility layer, which is (0,2,0). */ @media(max-width:860px){ /* the phone stacks, so the pane's height comes from its content */ .dash .slsage-grid{grid-template-columns:minmax(0,1fr);height:auto} .dash .slsage-main{padding:8px} .dash .slsage-aside,.dash .slsage-aside > .h-full, .dash .slsage-aside > .h-full > *,.dash .slsage-tplhead > div, .dash .slsage-tpl-list,.dash .slsage-chat .flex-1{min-width:0} .dash .slsage-aside > .h-full > *{width:100%} .dash .slsage-main{padding:8px} /* phone type scale, applied to the product's own size classes */ .dash.slsage .text-lg{font-size:13.5px;line-height:1.3} .dash.slsage .text-2xl{font-size:15px;line-height:1.25} .dash.slsage .text-sm{font-size:12px;line-height:1.45} .dash.slsage .text-xs{font-size:10px;line-height:1.4} .dash.slsage .text-base{font-size:12.5px;line-height:1.4} .dash.slsage .p-6{padding:10px} .dash.slsage .pb-3{padding-bottom:8px} .dash.slsage .p-4{padding:9px} .dash.slsage .p-3{padding:8px} .dash.slsage .px-4{padding-left:10px;padding-right:10px} .dash.slsage .py-2{padding-top:6px;padding-bottom:6px} .dash.slsage .h-10{height:34px} .dash.slsage .h-8{height:27px} .dash.slsage .h-7{height:25px} .dash.slsage .h-5{height:16px} .dash.slsage .w-5{width:16px} .dash.slsage .space-y-4 > * + *{margin-top:8px} .dash.slsage .space-y-2 > * + *{margin-top:6px} .dash.slsage .gap-2{gap:5px} /* ask row: the field owns its line, the actions share the next */ .dash .slsage-ask{display:grid;grid-template-columns:1fr auto;gap:6px} .dash .slsage-ask > .flex-1{grid-column:1 / -1} .dash .slsage-ask > button{padding:0 11px} /* one swipeable line of filters instead of three wrapped rows */ /* a blanket ".dash .flex{flex-wrap:wrap}" further down this stylesheet ties on specificity and wins on order, so these carry .dash.slsage */ .dash.slsage .slsage-filters{flex-wrap:nowrap;overflow-x:auto;gap:5px; scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px} .dash.slsage .slsage-filters::-webkit-scrollbar{display:none} .dash.slsage .slsage-filters > .relative{flex:0 0 auto} /* the templates footer is a call to action for the app, not for a reader of this page */ .dash.slsage .slsage-tplfoot{display:none} .dash.slsage .slsage-tpltabs{padding:6px 9px} .dash.slsage .slsage-tplhead{padding:8px 9px} /* the thread gets the full width — chat history is a desktop column */ .dash .slsage-history{display:none !important} /* the pane no longer takes a click, so nothing here may be hidden behind a scroll: on the phone the transcript sizes to the exchange it holds */ .dash .slsage-chat{flex:0 0 auto;height:auto;min-height:0} .dash.slsage .slsage-chat .text-sm{font-size:11.5px} .dash.slsage .slsage-chat .p-4{padding:9px} /* the assistant's three badges on one line rather than two */ .dash.slsage .pane-header .space-x-2{flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none} .dash.slsage .pane-header .space-x-2::-webkit-scrollbar{display:none} .dash.slsage .pane-header .space-x-2 > *{flex:0 0 auto} .dash .slsage-chat .max-w-\[80\%\]{max-width:90%} /* templates: a rail beneath the assistant, one card at a time. A percentage basis would resolve against an indefinite width and drag the column open, so the basis is viewport-relative. */ .dash .slsage-aside{border-left:0;border-top:2px solid hsl(var(--pane-border))} .dash.slsage .slsage-tpl-list{display:flex;flex-direction:row;gap:8px;padding:9px; overflow-x:auto !important;overflow-y:hidden !important; scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .dash .slsage-tpl-list::-webkit-scrollbar{display:none} .dash .slsage-tpl-list > .group{flex:0 0 min(74vw,280px);scroll-snap-align:start;margin:0} .dash .slsage-tpl-list > .group > [role="button"]{min-height:0;height:100%;padding:9px} .dash .slsage-tpl-list .opacity-0{display:none} .dash .slsage-tplhead{flex-wrap:wrap;padding:9px;gap:6px} .dash .slsage-tplhead h3{font-size:12.5px;white-space:nowrap} .dash .slsage-tplhead button{display:none !important} .dash .slsage-tpltabs{padding:8px 9px} .dash .slsage-tpltabs > .flex{overflow-x:auto;scrollbar-width:none} .dash .slsage-tpltabs > .flex::-webkit-scrollbar{display:none} .dash .slsage-tpltabs button{flex:0 0 auto} .dash .slsage-tplfoot{padding:10px} } .slsage-focus{border-color:hsl(var(--pane-ring)) !important; box-shadow:0 0 0 2px hsl(var(--pane-ring) / .35)} .slsage-press{filter:brightness(.88)} .slsage-picked > [role="button"]{background-color:hsl(var(--pane-hover)) !important; border-color:hsl(var(--primary)) !important; box-shadow:0 0 0 1px hsl(var(--primary) / .45)} @media (prefers-reduced-motion: reduce){.slsage .animate-spin{animation:none}} /* running-state animation */ .playhead{position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,#4ADE80,transparent);left:0;opacity:0;pointer-events:none;z-index:2} .fs.on .playhead{opacity:.85} .playhead::after{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 10px #4ADE80} .ev.hit{box-shadow:0 0 0 5px rgba(255,255,255,.16)} .ev.wide.hit{box-shadow:0 0 0 4px rgba(255,255,255,.2)} .kcard.moving{transition:transform .6s cubic-bezier(.3,.9,.35,1),opacity .4s ease} .kcard.landed{animation:landpop .5s ease-out} @keyframes landpop{0%{box-shadow:0 0 0 0 rgba(251,146,60,.55)}100%{box-shadow:0 0 0 12px rgba(251,146,60,0)}} .tick-live{animation:tickfade .35s ease-out} @keyframes tickfade{from{opacity:.35}to{opacity:1}} .dl.flick{animation:flick .4s ease-out} @keyframes flick{0%{background:rgba(59,130,246,.22)}100%{background:rgba(31,41,55,.5)}} .nnode .st{animation:stpulse 2.2s ease-in-out infinite} @keyframes stpulse{0%,100%{box-shadow:0 0 8px rgba(34,197,94,.8)}50%{box-shadow:0 0 2px rgba(34,197,94,.35)}} @media (prefers-reduced-motion: reduce){.playhead{display:none}.nnode .st{animation:none}} .iv-case{margin-top:10px;padding-top:9px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--dim)} .iv-case b{color:#4ADE80;font-weight:700} .iv-case .id{font-family:var(--mono);color:var(--side);background:var(--mut);border-radius:5px;padding:2px 8px} .iv-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .iv-acts span{font-size:11px;font-weight:600;border-radius:7px;padding:6px 11px;white-space:nowrap} .iv-acts .pri{background:#F4F4F5;color:#18181B} .iv-acts .sec3{background:var(--mut);color:var(--side)} .iv-run{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#FDBA74;margin-top:8px} .iv-run i{width:11px;height:11px;border-radius:50%;border:2px solid rgba(253,186,116,.35);border-top-color:#FDBA74;animation:sp .8s linear infinite;display:block} /* ---- Event Timeline (swimlanes) ---- */ .fs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .tlw{min-width:660px} .tl-hd{display:flex;align-items:center;gap:10px;margin-bottom:11px} .tl-hd .t{font-size:14px;font-weight:700} .tl-hd .live{margin-left:auto;font-size:11.5px;font-weight:700;color:#4ADE80} .tl-ax{display:grid;grid-template-columns:78px 1fr;gap:0;border-bottom:1px solid var(--bd)} .tl-ax .sp{} .tl-ax .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--dim);padding:0 0 6px} .lane{display:grid;grid-template-columns:78px 1fr;align-items:stretch;border-bottom:1px solid var(--bd)} .lane:last-child{border-bottom:0} .lane .nm{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--side);padding:14px 10px 14px 2px} .lane .nm i{width:8px;height:8px;border-radius:2px;display:block;flex:0 0 auto} .lane .strip{position:relative;min-height:52px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(255,255,255,.05) calc(12.5% - 1px),rgba(255,255,255,.05) 12.5%)} .ev{position:absolute;top:50%;transform:translate(-50%,-50%) scale(.2);width:13px;height:13px;border-radius:50%;border:2px solid var(--bg);opacity:0;transition:transform .4s cubic-bezier(.2,1.4,.4,1),opacity .4s ease} .fs.on .ev{opacity:1;transform:translate(-50%,-50%) scale(1)} .ev.wide{width:auto;height:16px;border-radius:8px;padding:0 9px;display:flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;color:#0B0F14;white-space:nowrap;transform:translate(-50%,-50%) scale(.6)} .fs.on .ev.wide{transform:translate(-50%,-50%) scale(1)} .tl-foot{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:11px;color:var(--dim)} .tl-foot span{display:flex;align-items:center;gap:6px} .tl-foot i{width:9px;height:9px;border-radius:50%;display:block} /* ---- COA Kanban ---- */ .kbw{min-width:820px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .kcol{background:rgba(31,41,55,.4);border:1px solid var(--bd);border-radius:9px;padding:10px;min-width:0} .kcol-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 7px;border-radius:7px;margin-bottom:9px} .kcol-h .c{margin-left:auto;font-family:var(--mono);font-size:10.5px;opacity:.85} .kc-sug{background:rgba(55,65,81,.3);border:1px solid rgba(75,85,99,.3);color:#D1D5DB} .kc-pen{background:rgba(234,179,8,.2);border:1px solid rgba(234,179,8,.3);color:#FDE047} .kc-pro{background:rgba(249,115,22,.2);border:1px solid rgba(249,115,22,.3);color:#FDBA74} .kc-com{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.3);color:#86EFAC} .kc-rej{background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.3);color:#FCA5A5} .kcard{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px;margin-bottom:8px;opacity:0;transform:translateY(7px);transition:opacity .45s ease,transform .45s ease} .fs.on .kcard{opacity:1;transform:none} .kcard:last-child{margin-bottom:0} .kcard .t{font-size:12px;font-weight:700;color:var(--fg);line-height:1.3} .kcard .d{font-size:10.5px;color:var(--dim);margin-top:4px;line-height:1.4} .kbadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px} .kb{font-size:9.5px;font-weight:600;border-radius:5px;padding:2px 7px;white-space:nowrap} .kb.low{background:rgba(107,114,128,.2);color:#D1D5DB;border:1px solid rgba(107,114,128,.3)} .kb.med{background:rgba(34,197,94,.2);color:#86EFAC;border:1px solid rgba(34,197,94,.3)} .kb.high{background:rgba(249,115,22,.2);color:#FDBA74;border:1px solid rgba(249,115,22,.3)} .kb.crit{background:rgba(239,68,68,.2);color:#FCA5A5;border:1px solid rgba(239,68,68,.3)} .kb.preset{background:rgba(34,197,94,.2);color:#86EFAC;border:1px solid rgba(34,197,94,.3)} .kb.hybrid{background:rgba(59,130,246,.2);color:#93C5FD;border:1px solid rgba(59,130,246,.3)} .kprog{margin-top:8px} .kprog .r{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);margin-bottom:3px} .kprog .t2{height:4px;border-radius:2px;background:var(--mut);overflow:hidden} .kprog .t2 i{display:block;height:100%;background:#FB923C;width:0;transition:width .9s cubic-bezier(.2,.8,.25,1) .4s} .fs.on .kprog .t2 i{width:var(--w)} /* ---- node canvas in action ---- */ .ncw{position:relative;min-width:680px;height:330px;border:1px solid var(--bd);border-radius:9px; background:radial-gradient(circle,#434A57 1px,transparent 1px) 0 0/18px 18px,#22262E;overflow:hidden} .ncw svg{position:absolute;left:0;top:0;width:680px;height:330px;pointer-events:none} .ncw svg path{fill:none;stroke:#3B82F6;stroke-width:2;stroke-dasharray:5 6;opacity:0;animation:flow 1s linear infinite} .fs.on .ncw svg path{opacity:.95} .ncw svg path.pp{stroke:#A78BFA} .nnode{position:absolute;width:152px;background:var(--card);border:1px solid var(--pbd);border-radius:9px;padding:10px;opacity:0;transform:translateY(9px);transition:opacity .5s ease,transform .5s ease} .fs.on .nnode{opacity:1;transform:none} .fs.on .nnode:nth-of-type(2){transition-delay:.12s} .fs.on .nnode:nth-of-type(3){transition-delay:.24s} .fs.on .nnode:nth-of-type(4){transition-delay:.4s} .fs.on .nnode:nth-of-type(5){transition-delay:.56s} .nnode .st{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px rgba(34,197,94,.8)} .nnode .ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;margin:0 auto 7px;font-size:14px} .nnode .nm{font-size:11.5px;font-weight:700;text-align:center;color:var(--fg);line-height:1.25} .nnode .mt{margin-top:8px;padding-top:7px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:3px} .nnode .mt div{display:flex;justify-content:space-between;font-size:9.5px} .nnode .mt .k{color:var(--dim)} .nnode .mt .v{color:var(--side);font-family:var(--mono)} .nnode.out{width:168px;border-color:#4C3A78;background:#2A2438} .nnode.out .sc{text-align:center;font-family:var(--display);font-size:25px;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums} .nnode.out .lv2{text-align:center;font-size:9.5px;font-weight:700;color:#052E16;background:#22C55E;border-radius:999px;padding:3px 0;margin-top:6px} .fs-hint{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--dim)} /* detection layers */ .dl-head{display:flex;align-items:center;gap:10px;margin-bottom:13px} .dl-head .lbl{font-size:14px;font-weight:600} .dl-head .cnt{font-size:12px;font-weight:600;color:#93C5FD;background:rgba(59,130,246,.16);border-radius:999px;padding:3px 10px} .dl-grid{display:grid;grid-template-columns:1fr;gap:9px} @media(min-width:560px){.dl-grid{grid-template-columns:1fr 1fr}} @media(min-width:900px){.dl-grid{grid-template-columns:repeat(4,1fr)}} .dl{display:flex;align-items:center;gap:10px;padding:11px;background:rgba(31,41,55,.5);border:1px solid rgba(55,65,81,.3);border-radius:8px;min-width:0} .dl .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:12px;flex:0 0 auto} .dl .tx{min-width:0;flex:1} .dl .n{display:block;font-size:13px;font-weight:700;color:var(--fg);line-height:1.25} .dl .d{display:block;font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.3} .sw{width:34px;height:19px;border-radius:999px;background:#F4F4F5;flex:0 0 auto;position:relative} .sw::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#1F2937} /* metric strip */ .fs-metrics{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px} @media(min-width:660px){.fs-metrics{grid-template-columns:repeat(4,1fr)}} .fs-metrics > div{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:11px 13px;min-width:0} .fs-metrics .k{display:block;font-size:12px;font-weight:500;color:var(--fg)} .fs-metrics .v{display:block;font-size:12px;color:var(--dim);margin-top:3px} /* big stats */ .fs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:15px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)} @media(min-width:660px){.fs-stats{grid-template-columns:repeat(4,1fr)}} .fs-stats div{text-align:center;min-width:0} .fs-stats .n{display:block;font-size:24px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1} .fs-stats .n.err{color:#811D1D} .fs-stats .l{display:block;font-size:12px;color:var(--dim);margin-top:5px} .fs-stats2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 0} .fs-stats2 div{text-align:center} .fs-stats2 .n{display:block;font-size:18px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums} .fs-stats2 .l{display:block;font-size:12px;color:var(--dim);margin-top:4px} .fs-badge{font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px;white-space:nowrap} .fs-badge.min{background:var(--low);color:#052E16} .fs-badge.unk{background:var(--mut);color:#fff} .fs-assess{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:11px} .fs-score{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg)} .fs-track{height:9px;border-radius:5px;background:var(--mut);overflow:hidden;margin-bottom:13px} .fs-track i{display:block;height:100%;border-radius:5px;background:var(--low);width:0;transition:width 1s cubic-bezier(.2,.8,.25,1)} .fs-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--dim);padding:6px 0;flex-wrap:wrap;min-width:0} .fs-row b{color:var(--fg);font-weight:600} /* tabs */ .fs-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:5px;background:var(--card);border-radius:9px;margin-bottom:15px} .fs-tabs span{font-size:12.5px;font-weight:500;color:var(--dim);padding:7px 12px;border-radius:7px;white-space:nowrap} .fs-tabs span.on{background:var(--mut);color:var(--fg);font-weight:600} /* node library + canvas toolbar */ .nc{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:820px){.nc{grid-template-columns:250px 1fr}} .nc > *{min-width:0} .nl-t{font-size:15px;font-weight:700;margin-bottom:10px} .nl-i{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:11px 12px;margin-bottom:8px} .nl-i b{display:block;font-size:13px;font-weight:600;color:var(--fg)} .nl-i span{display:block;font-size:11px;color:var(--dim);margin-top:3px;line-height:1.35} .nc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;min-width:0} .nc-bar .cnt{min-width:0} .nc-bar .cnt{font-size:12.5px;color:var(--dim);margin-right:auto} .nc-btn{font-size:12px;font-weight:600;color:var(--fg);background:var(--card);border:1px solid var(--bd);border-radius:7px;padding:6px 11px;white-space:nowrap} .nc-btn.go{background:#F4F4F5;color:#18181B;border-color:#F4F4F5} .nc-canvas{border:1px solid var(--bd);border-radius:9px;min-height:210px; background:radial-gradient(circle,#434A57 1px,transparent 1px) 0 0/18px 18px,#22262E} .nc-ok{font-size:12.5px;color:var(--fg);margin-bottom:12px} .nc-ok b{color:#4ADE80} /* investigative templates */ .iv{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:820px){.iv{grid-template-columns:1.15fr .85fr}} .iv > *{min-width:0} .iv-ask{background:var(--card);border:1px solid var(--bd);border-radius:9px;padding:13px} .iv-ask .h{font-size:14px;font-weight:700;margin-bottom:7px} .iv-ask .p{font-size:12px;color:var(--dim);line-height:1.5} .iv-ask .p b{color:var(--fg)} .iv-input{margin-top:11px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#9298A5} .iv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .iv-chips span{font-size:11.5px;color:var(--side);background:var(--mut);border-radius:999px;padding:5px 11px;white-space:nowrap} .iv-tpl{background:var(--card);border:1px solid var(--bd);border-radius:9px;padding:12px;margin-bottom:9px} .iv-tpl .n{font-size:13px;font-weight:700} .iv-tpl .s{font-size:11px;color:var(--dim);margin:2px 0 7px} .iv-tpl .d{font-size:11.5px;color:var(--dim);line-height:1.45} .iv-tpl .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .iv-tpl .tags i{font-style:normal;font-size:10px;font-weight:600;color:var(--side);background:var(--mut);border-radius:5px;padding:3px 8px} .iv-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap} .iv-head .t{font-size:14px;font-weight:700} .iv-head .c{font-size:11.5px;color:#C3C8D2;background:var(--mut);border-radius:999px;padding:3px 10px} /* ---- real dashboard screenshots ---- */ .shot{border:1px solid var(--line-dk);border-radius:12px;overflow:hidden;background:#0F1420;box-shadow:0 20px 55px rgba(0,0,0,.45)} .lt .shot{border-color:var(--line-lt);box-shadow:0 14px 40px rgba(0,0,0,.16)} .shot-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#151B28;border-bottom:1px solid #232B3B} .shot-bar .dots{display:flex;gap:5px;flex:0 0 auto} .shot-bar .dots i{width:9px;height:9px;border-radius:50%;background:#39415440;display:block} .shot-bar .t{font-size:12px;font-weight:600;color:#C7CDDA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .shot-bar .lv{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#4ADE80;flex:0 0 auto} .shot img{display:block;width:100%;height:auto} .shot-cap{margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--dim);line-height:1.55} .lt .shot-cap{color:var(--ink-2)} .shot-cap b{color:var(--white);font-weight:600} .lt .shot-cap b{color:var(--ink)} /* ---- app shell replica (sidebar + UTS panel), from tools/dashboard ---- */ .app{display:grid;grid-template-columns:1fr;border:1px solid #232733;border-radius:12px;overflow:hidden;background:#0F1117;box-shadow:0 20px 55px rgba(0,0,0,.3)} @media(min-width:900px){.app{grid-template-columns:206px 1fr}} .app-nav{background:#0B0D13;border-bottom:1px solid #232733;padding:14px 12px;display:flex;flex-direction:column;gap:2px} @media(min-width:900px){.app-nav{border-bottom:0;border-right:1px solid #232733}} .app-brand{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:#E6E9F0;padding:6px 10px 14px} .app-dot{width:9px;height:9px;border-radius:3px;background:var(--purple);box-shadow:0 0 10px rgba(168,139,232,.8);flex:0 0 auto} .an{font-size:12.5px;color:#8D93A5;padding:8px 11px;border-radius:7px;white-space:nowrap;cursor:default} .an.is-on{background:#1E2536;color:#fff;font-weight:600} .app-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid #232733;background:#151925} .ah-t{font-size:13px;font-weight:700;color:#E6E9F0} .ah-conn{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#34D399} .ah-conn i{width:6px;height:6px;border-radius:50%;background:#34D399;display:block;animation:blip 1.8s ease-in-out infinite} .ah-upd{margin-left:auto;font-family:var(--mono);font-size:10px;color:#7C8397} .app-body{padding:18px} .uts-hero{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:10px} .uts-hero-l{display:flex;flex-direction:column;min-width:0} .uts-hero .k{font-size:12px;color:#8D93A5;margin-bottom:4px} .uts-pct{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .uts-raw{font-family:var(--mono);font-size:10.5px;color:#7C8397;margin-top:6px} .uts-badge{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;border-radius:999px;padding:6px 15px;white-space:nowrap} .uts-badge.high{background:#C2410C} .uts-prog{height:9px;border-radius:5px;background:#1C2130;overflow:hidden;margin-bottom:18px} .uts-prog i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#d97706,#ea580c);width:0;transition:width 1.1s cubic-bezier(.2,.8,.25,1)} .uts-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:20px} @media(min-width:620px){.uts-grid{grid-template-columns:1fr 1fr}} .usc{border:1px solid #232733;border-radius:9px;padding:11px 13px;background:#141824;min-width:0} .usc .k{display:block;font-size:11px;color:#8D93A5;margin-bottom:5px} .usc .v{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums} .usc .t{display:block;height:4px;border-radius:2px;background:#1C2130;margin-top:8px;overflow:hidden} .usc .t i{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.2,.8,.25,1) .3s} .usc .t i.vv{background:#3B82F6}.usc .t i.cc{background:#A88BE8} .usc .t i.aa{background:#7C3AED}.usc .t i.ss{background:#0E7490} .app-split{display:grid;grid-template-columns:1fr;gap:22px} @media(min-width:820px){.app-split{grid-template-columns:1fr 1fr;gap:28px}} .app-split > *{min-width:0} .feedstat{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px} .feedstat div{border:1px solid #232733;border-radius:8px;padding:9px;background:#141824;text-align:center} .feedstat .n{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums} .feedstat .n.ok{color:#34D399}.feedstat .n.warn{color:#FB923C}.feedstat .n.err{color:#F87171} .feedstat .l{display:block;font-size:9.5px;color:#8D93A5;margin-top:3px;line-height:1.3} .sysrow{display:flex;justify-content:space-between;font-size:12px;color:#8D93A5;padding:6px 0;border-bottom:1px solid #1C2130} .sysrow:last-of-type{border-bottom:0} .sysrow b{color:#E6E9F0;font-family:var(--mono);font-variant-numeric:tabular-nums} .spark{display:flex;align-items:flex-end;gap:3px;height:86px;padding:8px;border:1px solid #232733;border-radius:9px;background:#141824} .spark i{flex:1;border-radius:2px 2px 0 0;background:#34D399;height:0;transition:height .7s cubic-bezier(.2,.8,.25,1)} .spark.go i{height:var(--h)} .spark i.m{background:#d97706}.spark i.h{background:#ea580c} .spark i.cur{background:#fb7185;box-shadow:0 0 10px rgba(251,113,133,.6)} .spark-ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:#8E94A6;margin-top:6px} .fl{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #1C2130;font-size:12px} .fl:last-of-type{border-bottom:0} .fl-n{color:#D6DAE4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ft,.fs{font-size:9.5px;font-weight:700;border-radius:4px;padding:3px 7px;white-space:nowrap} .ft.vid{background:rgba(124,58,237,.2);color:#C4A6F7} .ft.aud{background:rgba(59,130,246,.2);color:#93C5FD} .ft.sen{background:rgba(16,185,129,.18);color:#6EE7B7} .ft.uni{background:rgba(217,119,6,.2);color:#FCD34D} .fs.live{background:rgba(16,185,129,.18);color:#6EE7B7} .fs.idle{background:rgba(148,163,184,.18);color:#B6BECD} .fs.alert{background:rgba(220,38,38,.22);color:#FCA5A5} /* ---- Unified Threat Score pane (from tools/dashboard uts-engine) ---- */ .uts-top{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px} .uts-num{font-family:var(--display);font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} .uts-cap{font-size:12.5px;color:var(--ink-2);margin-bottom:5px} .uts-lvl{margin-left:auto;font-size:12px;font-weight:600;color:#fff;background:#DC2626;border-radius:999px;padding:6px 14px;white-space:nowrap} .uts-bar{height:9px;border-radius:5px;background:var(--line-lt);overflow:hidden;margin-bottom:16px} .uts-bar i{display:block;height:100%;border-radius:5px;background:#DC2626;width:0;transition:width 1.1s cubic-bezier(.2,.8,.25,1)} .uts-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px} .uts-mod{border:1px solid var(--line-lt);border-radius:9px;padding:11px 12px;text-align:left;min-width:0} .uts-mod .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#6B6B6B;display:block;margin-bottom:5px} .uts-mod .v{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;display:block} .uts-mod .t{display:block;height:4px;border-radius:2px;background:var(--line-lt);margin-top:8px;overflow:hidden} .uts-mod .t i{display:block;height:100%;background:var(--og);width:0;transition:width .9s cubic-bezier(.2,.8,.25,1) .25s} .uts-det{border-top:1px solid var(--line-lt);padding-top:12px} .uts-det .row{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:12.5px;color:var(--ink-2)} .uts-det .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:#6B6B6B;border:1px solid var(--line-lt);border-radius:4px;padding:2px 0;text-align:center} .uts-det .m.a{color:#7C3AED;border-color:#DDD0F7;background:#F5F0FD} .uts-det .m.v{color:var(--og-solid);border-color:#C7DBFB;background:#EAF1FE} .uts-det .m.s{color:#0E7490;border-color:#B6E3EC;background:#ECFAFD} .uts-det .row b{font-family:var(--mono);font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums} .spec-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-dk)} .spec-row span{font-size:12.5px;color:var(--dim);white-space:nowrap} @media(max-width:560px){.spec-row span{white-space:normal}.spec-row{gap:6px 14px}} .spec-row b{color:var(--white);font-weight:600;font-family:var(--mono);font-size:12px} .ent-strip{display:grid;grid-template-columns:1fr;border:1px solid var(--purple-line);border-radius:11px;overflow:hidden;margin-top:16px} @media(min-width:760px){.ent-strip{grid-template-columns:repeat(4,1fr)}} .ent-strip > div{padding:15px 18px;border-top:1px solid var(--purple-line)} .ent-strip > div:first-child{border-top:0} @media(min-width:760px){.ent-strip > div{border-top:0;border-left:1px solid var(--purple-line)}.ent-strip > div:first-child{border-left:0}} .ent-strip .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--purple);margin-bottom:5px} .ent-strip .v{display:block;font-size:14.5px;font-weight:600;color:var(--white);line-height:1.35} /* ---- Security Layer: engine identity + resolving ladder ---- */ .engine-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);border:1px solid var(--purple-line);background:rgba(168,139,232,.09);border-radius:999px;padding:8px 15px;margin-bottom:20px} .engine-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 10px rgba(168,139,232,.8)} .ladder{display:flex;flex-direction:column;gap:14px;counter-reset:rung} .rung{border:1px solid var(--line-dk);border-left:3px solid var(--purple-line);border-radius:12px;padding:22px 24px;background:var(--black-1);position:relative} .rung:nth-child(2){border-left-color:#8465C9} .rung:nth-child(3){border-left-color:var(--purple)} .rung-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:9px} .rung-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--purple);flex:0 0 auto} .rung-head h4{font-size:18px} .rung > p{font-size:15px;color:var(--dim);line-height:1.55;max-width:74ch} .rung-viz{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dk)} .node{font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line-dk-2);border-radius:5px;padding:5px 10px;background:var(--black-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease} .rung.in .node{opacity:1;transform:none} .rung.in .node:nth-child(2){transition-delay:.07s} .rung.in .node:nth-child(3){transition-delay:.14s} .rung.in .node:nth-child(4){transition-delay:.21s} .rung.in .node:nth-child(5){transition-delay:.28s} .node.grp{border-color:var(--purple-line);color:#D6C6F5} .rung-out{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);border:1px dashed var(--line-dk-2);border-radius:5px;padding:5px 12px;white-space:nowrap;opacity:0;transition:opacity .4s ease .4s} .rung.in .rung-out{opacity:1} .rung-out.on{color:#14091F;background:var(--purple);border:1px solid var(--purple);font-weight:700} @media(max-width:620px){.rung-out{margin-left:0}} .tier{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 0;border-top:1px solid var(--line-dk)} .tier:first-of-type{border-top:0} .tier .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);border:1px solid var(--purple-line);border-radius:5px;padding:6px 10px;white-space:nowrap;background:rgba(168,139,232,.08)} .tier h4{font-size:17.5px;margin-bottom:6px} .tier p{font-size:15px;color:var(--dim);line-height:1.55} .pband{background:linear-gradient(180deg,#150E24 0%,#0A0A0A 100%);border-top:1px solid var(--purple-line);border-bottom:1px solid var(--line-dk)} /* proof strip — deliberately not a third row of cards */ .proof{display:grid;grid-template-columns:1fr;border:1px solid var(--purple-line);border-radius:11px;overflow:hidden;margin-top:14px} @media(min-width:720px){.proof{grid-template-columns:repeat(3,1fr)}} .proof > div{padding:18px 20px;border-top:1px solid var(--purple-line)} .proof > div:first-child{border-top:0} @media(min-width:720px){ .proof > div{border-top:0;border-left:1px solid var(--purple-line)} .proof > div:first-child{border-left:0} } .proof .n{font-family:var(--mono);font-size:25px;font-weight:500;letter-spacing:-.02em;color:var(--white);display:block;font-variant-numeric:tabular-nums} .proof .l{font-size:13.5px;color:var(--dim);line-height:1.5;margin-top:5px;display:block} .proof-lead{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin:26px 0 10px} /* light-surface variant of the proof strip */ .proof.on-light{border-color:var(--line-lt);margin-top:34px} .proof.on-light > div{border-top-color:var(--line-lt);border-left-color:var(--line-lt)} .proof.on-light .n{font-size:20px;color:var(--ink)} .proof.on-light .l{color:var(--ink-2)} /* closing call to action */ .closer{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:62ch} .closer h2{font-size:clamp(28px,3.6vw,42px)} /* estate correlation (Security Layer) */ .feeds{display:flex;flex-direction:column;gap:7px} .feed{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;border:1px solid var(--line-lt);border-radius:8px;padding:10px 12px;background:#FAFAFA} .feed .site{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap} .feed .ev{font-size:13px;color:var(--ink);font-weight:500;min-width:0} .feed .tm{font-family:var(--mono);font-size:11px;color:#6B6B6B;white-space:nowrap;font-variant-numeric:tabular-nums} .rollup{margin-top:12px;border:1px solid var(--purple-line);background:#F6F2FC;border-radius:9px;padding:13px} .rollup .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--purple-deep);margin-bottom:7px} .rollup p{font-size:13.5px;line-height:1.5;color:var(--ink-2)} .rollup p b{color:var(--ink);font-weight:600} /* pillar mini-UI (OmniusGrid) */ .pill-ui{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-dk);display:flex;flex-direction:column;gap:10px} .lt .pill-ui{border-top-color:var(--line-lt)} .pill-cap{font-size:13px;color:var(--dim);line-height:1.5;font-style:italic} .mini-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .mini{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;border-radius:4px;padding:3px 7px;white-space:nowrap} .mini.live{color:#86EFAC;background:rgba(21,128,61,.18);border:1px solid rgba(134,239,172,.4)} .mini.score{color:#86EFAC;background:rgba(21,128,61,.18);border:1px solid rgba(134,239,172,.4);font-size:11px} .mini-name{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--white)} .mini-val{margin-left:auto;font-size:14px;font-weight:700;color:var(--white)} .mini-val span{color:var(--dim);font-weight:500;font-size:12.5px} .mini-bar{position:relative;height:16px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden} .mini-bar .f{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:var(--og);transition:width .9s cubic-bezier(.2,.8,.25,1)} .mini-bar .h{position:absolute;top:0;bottom:0;left:63%;width:0;border-radius:8px;border:2px dashed rgba(134,239,172,.65);background:rgba(21,128,61,.16);transition:width .8s cubic-bezier(.2,.8,.25,1) .8s} .mini-head{align-self:flex-end;font-size:12px;font-weight:700;color:#86EFAC} .pill-chip{font-size:12px;font-weight:600;border-radius:999px;padding:7px 13px;border:1px solid var(--line-dk-2);color:var(--dim);white-space:nowrap} .pill-chip.solid{background:var(--og-solid);border-color:var(--og-solid);color:#fff} .pill-chip .ok{color:#86EFAC;font-weight:700} .det-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--dim);padding:5px 0;border-bottom:1px solid var(--line-dk)} .det-row:last-child{border-bottom:0} .det-row b{font-family:var(--mono);color:#FCA5A5;font-weight:500;font-variant-numeric:tabular-nums} .det-row b.okc{color:#86EFAC} /* ============ OmniusGrid promo language ============ Values taken from frontend/video/src/promo/PromoCards.tsx, components/Caption.tsx and video/src/theme.ts */ .bl{color:var(--og)} .og-soft{color:#93C5FD} /* faint grid backdrop — PromoCards Backdrop, 120px grid on darkBorder */ .ogtex{position:relative;isolation:isolate} .ogtex::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(#2E2E2E 1px,transparent 1px),linear-gradient(90deg,#2E2E2E 1px,transparent 1px); background-size:64px 64px;opacity:.22; -webkit-mask-image:radial-gradient(ellipse at center,#000 12%,transparent 72%); mask-image:radial-gradient(ellipse at center,#000 12%,transparent 72%); } /* lower-third caption bar — blue rail + charcoal body */ .capwrap{display:flex} .capbar{display:flex;align-items:stretch;border-radius:12px;overflow:hidden;box-shadow:0 16px 46px rgba(0,0,0,.5);max-width:64ch} .capbar i{width:8px;background:var(--og);flex:0 0 auto;display:block} .capbar span{padding:17px 26px;background:rgba(10,10,10,.94);color:#FAFAFA;font-family:var(--display);font-weight:600;font-size:clamp(15px,1.9vw,20px);line-height:1.3;letter-spacing:.01em} .capbar b{color:#93C5FD;font-weight:700} /* inverted highlight — "scattered" */ .bigstat{font-family:var(--display);font-size:clamp(22px,3.1vw,34px);font-weight:600;letter-spacing:-.015em;line-height:1.42;max-width:26ch;margin-bottom:30px} .hlbox{background:#fff;color:var(--black);border-radius:8px;padding:1px 14px;font-weight:800;display:inline-block} .lt .hlbox{background:var(--ink);color:#fff} /* the Industry 4.0 pill */ .i40{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:11px;border:2px solid rgba(59,130,246,.55);background:rgba(59,130,246,.10);color:#93C5FD;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.01em} .lt .i40{color:var(--og-solid);background:rgba(59,130,246,.08)} /* glowing blue bullets */ .bul{display:flex;flex-direction:column;gap:15px;margin-top:8px} .bul div{display:grid;grid-template-columns:11px 1fr;gap:15px;align-items:start} .bul i{width:11px;height:11px;border-radius:50%;background:var(--og);margin-top:8px;box-shadow:0 0 14px rgba(59,130,246,.75);display:block} .bul p{font-size:16px;line-height:1.45;color:rgba(250,250,250,.9)} .lt .bul p{color:var(--ink-2)} /* "OmniusGrid is the solution." lockup line */ .solution{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px} .solution .tile{width:52px;height:52px;border-radius:13px} .solution .txt{font-family:var(--display);font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.015em} .solution .txt .ogword{font-size:inherit;color:inherit} /* format chips */ .fmts{display:flex;flex-wrap:wrap;gap:9px} .fmt{display:flex;align-items:center;gap:9px;border:1px solid var(--line-dk);border-radius:9px;padding:10px 14px;font-size:13.5px;color:var(--white);background:var(--black-1)} .lt .fmt{border-color:var(--line-lt);color:var(--ink);background:var(--white)} .fmt em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.07em;color:#93C5FD;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.35);border-radius:3px;padding:2px 5px;flex:0 0 auto} .lt .fmt em{color:var(--og-solid);background:#EAF1FE;border-color:#C7DBFB} /* cross-source investigation */ .pane-bar .srccount{margin-left:auto;font-size:11px;color:var(--ink-2);border:1px solid var(--line-lt);background:#fff;border-radius:999px;padding:3px 11px;white-space:nowrap;flex:0 0 auto} .risk{display:inline-flex;align-items:center;background:#DC2626;color:#fff;font-family:var(--display);font-weight:700;font-size:14px;border-radius:999px;padding:8px 16px;position:relative} .risk::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--og);opacity:0;animation:ring 2.8s ease-out infinite} @keyframes ring{0%{opacity:.85;transform:scale(.97)}55%{opacity:0;transform:scale(1.14)}100%{opacity:0}} .stags{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 4px} .stag{font-size:11px;border-radius:999px;padding:4px 11px;border:1px solid var(--line-lt);color:var(--ink-2);background:#fff} .stag.on{background:var(--og-solid);border-color:var(--og-solid);color:#fff;font-weight:600} .chain{display:flex;flex-direction:column} .clink{display:grid;grid-template-columns:25px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-lt);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease} .clink.in{opacity:1;transform:none} .clink:last-child{border-bottom:0} .clink .num{font-family:var(--mono);font-size:11px;color:var(--og-solid);border:1px solid #C7DBFB;background:#EAF1FE;border-radius:50%;width:25px;height:25px;display:grid;place-items:center} .clink .cb{font-size:13.5px;line-height:1.5;color:var(--ink-2);min-width:0} .clink .cb b{color:var(--ink);font-weight:600} .clink .cb .csrc{font-weight:700;color:var(--ink)} /* ---- sneak peeks: products in development ---- */ .peeks{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px} @media(min-width:820px){.peeks{grid-template-columns:1fr 1fr}} .peeks > *{min-width:0} .peek{border:1px solid var(--purple-line);border-radius:12px;padding:24px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:11px} .peek-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-bottom:4px} .peek-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--purple);border:1px solid var(--purple-line);border-radius:999px;padding:4px 10px;white-space:nowrap} .peek h4{font-size:18px} .peek p{font-size:14.5px;color:var(--dim);line-height:1.55} .peek-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-dk);font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.02em} /* OverPeak: typographic lockup — Over 400 · Peak 700 · Vision 400 muted */ .op-word{font-family:var(--ui);font-size:23px;font-weight:400;color:var(--white);letter-spacing:-.01em;white-space:nowrap} .op-word b{font-weight:700} .op-word .op-mute{color:#A1A1A1;font-weight:400} /* ReadinessQ: symbol only, name set in our own type beside it */ .rq-lock{display:inline-flex;align-items:center;gap:11px} .rq-lock img{width:30px;height:30px} .rq-word{font-family:var(--display);font-size:21px;font-weight:600;color:var(--white);letter-spacing:-.015em;white-space:nowrap} /* feeder modules carry OmniusGrid's blue, since that is where they land */ .peek.feeder{border-color:rgba(59,130,246,.4)} .peek.feeder .peek-foot{color:#93C5FD;border-top-color:rgba(59,130,246,.25)} .peek-tag.feeds-og{color:#93C5FD;border-color:rgba(59,130,246,.45)} .fd-word{font-family:var(--ui);font-size:22px;font-weight:400;color:var(--white);letter-spacing:-.01em;white-space:nowrap} .fd-word b{font-weight:700;color:var(--og)} /* engine cards — the company-level story above the two products */ .engines{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:820px){.engines{grid-template-columns:1fr 1fr}} .engines > *{min-width:0} .engine{border:1px solid var(--line-lt);background:var(--white);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px} .engine.og-e{border-top:3px solid var(--og-solid)} .engine.sec-e{border-top:3px solid var(--purple-deep)} .engine .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)} .engine h4{font-size:20px} .engine .powers{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line-lt);border-bottom:1px solid var(--line-lt);padding:11px 0} .engine .powers b{font-weight:600;color:var(--ink)} .engine p{font-size:14.5px;color:var(--ink-2);line-height:1.55} .people{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:760px){.people{grid-template-columns:1fr 1fr}} .person{background:var(--black-1);border:1px solid var(--line-dk);border-radius:11px;padding:22px} .person h4{font-size:17px} .person .r{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);margin:7px 0 11px} .person p{font-size:14.5px;color:var(--dim);line-height:1.55} .cwrap{display:grid;grid-template-columns:1fr;gap:40px} @media(min-width:880px){.cwrap{grid-template-columns:1.05fr .95fr;gap:56px}} form.talk{display:flex;flex-direction:column;gap:16px;max-width:52ch} .field{display:flex;flex-direction:column;gap:7px} .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)} .field input,.field textarea{font-family:var(--ui);font-size:16px;color:var(--white);background:var(--black-1);border:1px solid var(--line-dk);padding:12px 14px;border-radius:7px;width:100%} .field textarea{min-height:118px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:#6B6B6B} .direct{display:flex;flex-direction:column;gap:24px} .direct .mail{font-family:var(--display);font-size:clamp(19px,2.3vw,24px);font-weight:600;color:var(--purple);text-decoration:none;word-break:break-all} .where{font-family:var(--mono);font-size:13px;color:var(--dim);line-height:1.95} .note{margin-top:15px;font-size:14px;color:var(--dim);max-width:64ch;line-height:1.55} .lt .note{color:var(--ink-2)} footer.site{border-top:1px solid var(--line-dk);padding:44px 0 56px} .foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start} .foot img.ss{height:24px;margin-bottom:14px} .foot nav{display:flex;flex-wrap:wrap;gap:18px} .foot a{font-family:var(--display);font-size:14px;color:var(--dim);text-decoration:none} .foot a:hover{color:var(--white)} .fine{font-family:var(--mono);font-size:11px;color:#7A7A7A;line-height:1.8} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} } /* ============================================================ SECURITY LAYER PANES — responsive reflow. These panes reconstruct the real product UI. On desktop they hold the product's own proportions; below 640px they REFLOW rather than scroll sideways, so the interface reads on a phone instead of being dragged. ============================================================ */ @media(max-width:640px){ /* --- event timeline: lane label above its strip, no h-scroll --- */ .twrap{min-width:0} .tax{grid-template-columns:1fr;padding-left:2px} .tax .tk span:nth-child(2),.tax .tk span:nth-child(4){display:none} .tlane{grid-template-columns:1fr;padding:10px 0 4px} .tlane .ln{padding:0 0 7px;font-size:11px;gap:6px} .tstrip{min-height:38px;border-radius:6px} .tev{width:11px;height:11px} .tev.tag{width:11px;height:11px;border-radius:50%;padding:0;font-size:0;overflow:hidden} .tkey{gap:9px 13px;font-size:10.5px;margin-top:11px} .tkey span[style]{margin-left:0 !important;width:100%} /* --- COA / ROE board: five columns become a vertical stack --- */ .kwrap{min-width:0;grid-template-columns:1fr;gap:12px} .kcol2{padding:10px} .kh{font-size:12px} /* --- node configuration: canvas graph becomes a vertical pipeline --- */ .nwrap{min-width:0;height:auto;display:flex;flex-direction:column;gap:9px;padding:12px} .nwrap svg{display:none} .nn,.nn.out{position:static;width:100%;left:auto !important;top:auto !important} .nn:not(:last-child){position:relative} .nn:not(:last-child)::after{content:"";display:block;width:2px;height:9px;margin:9px auto -9px; background:linear-gradient(180deg,#3B82F6,transparent)} .nlib{gap:5px;margin-top:10px} /* --- investigative support: templates below the findings --- */ } @media(min-width:641px) and (max-width:900px){ .kwrap{min-width:0;grid-template-columns:1fr 1fr;gap:11px} .twrap{min-width:0} .tlane{grid-template-columns:62px 1fr} .tax{grid-template-columns:62px 1fr} } /* --- event blobs, per legacy-event-blobs-overlay.tsx ------------------- A blob is a card + a 3px severity stem + a 12px white-ringed anchor dot on the axis. Severity palette is getSeverityInfo(); the scrubber is bg-blue-600 and the now-marker bg-red-400/60, per scrubber-timeline.tsx. */ .tnow{position:absolute;top:0;bottom:0;width:1px;left:78%;background:rgba(248,113,113,.6);z-index:5} .teb{position:absolute;top:0;bottom:0;transform:translateX(-50%);z-index:20; opacity:0;transition:opacity .4s ease,transform .4s ease} .lp.on .teb{opacity:1} .teb-dot{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:12px;height:12px; border-radius:50%;border:2px solid #fff;z-index:10} .teb-stem{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:3px;height:13px; border-radius:2px;opacity:.9;z-index:5} .teb-card{position:absolute;top:30px;left:50%;transform:translateX(-50%); min-width:104px;max-width:132px;border:1px solid;border-radius:7px; padding:4px 6px 5px 9px;text-align:left;overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.45)} .teb-card b{display:block;font-size:10px;font-weight:700;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .teb-card em{display:block;font-style:normal;font-size:9.5px;opacity:.82;line-height:1.3; margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .teb-notch{position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:0 4px 4px 0;opacity:.8} .teb-corr{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%; background:#a855f7;border:1px solid #fff} .teb.lit .teb-dot{box-shadow:0 0 0 5px rgba(255,255,255,.16)} .teb:nth-child(even) .teb-card{top:auto;bottom:4px} .teb:nth-child(even) .teb-stem{top:17px;height:auto;bottom:34px} .tlane .ln{gap:7px} .lni{width:14px;height:14px;flex:0 0 auto} .tstrip{min-height:112px} @media(max-width:640px){ .teb-card{min-width:84px;max-width:96px;padding:3px 5px 4px 8px} .teb-card b{font-size:9px}.teb-card em{display:none} .tstrip{min-height:96px} .teb-notch{width:5px} } /* --- COA / ROE cards, per coa-kanban-board.tsx ------------------------ COLUMNS[] gives the column palette and icons; PRIORITY_COLORS[] gives the badge palette. medium is GREEN in the product (person-detection green), not yellow. */ .khi{width:13px;height:13px;flex:0 0 auto} .kh{gap:6px} .ktags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .kt{font-size:8.5px;font-weight:700;letter-spacing:.02em;border-radius:4px;padding:2px 6px;border:1px solid} .kt-low {background:rgba(107,114,128,.2);color:#d1d5db;border-color:rgba(107,114,128,.3)} .kt-med {background:rgba(34,197,94,.2); color:#86efac;border-color:rgba(34,197,94,.3)} .kt-high{background:rgba(249,115,22,.2); color:#fdba74;border-color:rgba(249,115,22,.3)} .kt-crit{background:rgba(239,68,68,.2); color:#fca5a5;border-color:rgba(239,68,68,.3)} .kt-pre,.kt-hyb,.kt-sign{background:var(--mut);color:var(--side);border-color:var(--bd)} .kph{margin:8px 0 0 4px;display:flex;flex-direction:column;gap:4px} .kp{display:flex;align-items:flex-start;gap:6px;font-size:9.5px;color:var(--dim2);line-height:1.35} .kp b{color:var(--side);font-weight:600} .kp i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--pbd);flex:0 0 auto;margin-top:2px; position:relative;transition:background .3s ease,border-color .3s ease} .kp.kp-on i{background:#22C55E;border-color:#22C55E} .kp.kp-on i::after{content:"";position:absolute;inset:1px;border-left:1.5px solid #052E16; border-bottom:1.5px solid #052E16;transform:rotate(-45deg) translate(.5px,-.5px)} .kp.kp-half i{background:linear-gradient(90deg,#EAB308 50%,transparent 50%);border-color:#EAB308} .kroe{margin-top:8px;font-size:9px;color:#9ca3af;line-height:1.4;border-top:1px solid var(--bd);padding-top:7px} .kroe b{color:var(--side);font-family:var(--mono);font-size:8.5px;letter-spacing:.04em} .kprog{display:flex;justify-content:space-between;font-size:9px;color:var(--dim2);margin-top:8px} .kbar{height:3px;border-radius:2px;background:var(--mut);overflow:hidden;margin-top:3px} .kbar i{display:block;height:100%;background:#F97316;border-radius:2px;transition:width .8s cubic-bezier(.2,.7,.3,1)} /* workflow demo: a pending card is opened, ticked, then moves to In Progress */ .kc[data-coa-card]{transition:box-shadow .35s ease,border-color .35s ease,transform .5s cubic-bezier(.2,.7,.3,1),opacity .45s ease} .kc[data-coa-card].kc-open{border-color:#EAB308;box-shadow:0 0 0 2px rgba(234,179,8,.25),0 10px 26px rgba(0,0,0,.5)} .kc[data-coa-card].kc-move{transform:translateY(-6px) scale(.97);opacity:0} .kc-ghost{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease} .kc-ghost.kc-land{opacity:1;transform:none} @media(max-width:640px){ .kt{font-size:8px;padding:2px 5px} .kp{font-size:9px} .kroe{font-size:8.5px} .khi{width:12px;height:12px} } /* blob selection — scrubber-timeline.tsx uses ring-2 ring-blue-500 on select */ .teb-sel .teb-dot{box-shadow:0 0 0 3px #3b82f6,0 0 10px rgba(59,130,246,.7)!important} .teb-sel .teb-card{transform:translateX(-50%) scale(1.06);box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 0 2px #3b82f6} .teb-card{transition:transform .3s ease,box-shadow .3s ease} /* node canvas activity */ .nn.nn-sel{border-color:#3B82F6;box-shadow:0 0 0 2px rgba(59,130,246,.35),0 10px 26px rgba(0,0,0,.5)} .nn .mt .v{transition:color .25s ease} .nn .mt .v.tickv{color:#93C5FD} .npkt{position:absolute;width:6px;height:6px;border-radius:50%;background:#60A5FA; box-shadow:0 0 8px rgba(96,165,250,.9);opacity:0;z-index:4;pointer-events:none} @media(max-width:640px){ .teb-sel .teb-card{transform:translateX(-50%) scale(1.02)} } /* ============================================================ SECURITY LAYER — full mobile pass. The .dashbox panes embed the product's own Tailwind markup, which is laid out for a desktop viewport. Rather than letting it scroll sideways we reflow it: multi-column grids collapse, padding and type step down, and the horizontal scroller is switched off so nothing is hidden off-screen on a phone. ============================================================ */ @media(max-width:640px){ .dashscroll{overflow-x:visible} .dash{padding:10px} .dash [class*="grid-cols-"]{grid-template-columns:1fr !important} .dash .p-6{padding:13px !important} .dash .p-4{padding:10px !important} .dash .text-2xl{font-size:19px !important;line-height:1.2 !important} .dash .text-lg{font-size:15px !important} .dash .gap-4{gap:10px !important} .dash .gap-6{gap:12px !important} .dash [class*="min-w-"]{min-width:0 !important} .dash .space-y-4 > * + *{margin-top:10px !important} /* pane chrome */ .dashbox,.lp{border-radius:9px} .dashbar,.lp-bar{padding:9px 11px;gap:8px} .dashbar .t,.lp-bar .t{font-size:11.5px} .dashbar .r,.lp-bar .r{font-size:9px} .lp-body{padding:12px} /* investigative support */ /* node library chips + tier ladder + enterprise strip */ .nlib span{font-size:9px;padding:3px 7px} .rung{padding:16px 15px} .rung-head h4{font-size:16px} .rung > p{font-size:14px} .ent-strip > div{padding:11px 13px} /* narrative beats */ .beat-time{font-size:11px;gap:9px} .beat-cap{font-size:12.5px;line-height:1.5} } @media(max-width:420px){ .dash{padding:8px} .dash .text-2xl{font-size:17px !important} .teb-card{min-width:74px;max-width:84px} .tlane .ln span{font-size:10.5px} .tkey{font-size:9.5px;gap:7px 10px} } /* --- compact board: phases collapse behind a summary, open on interaction --- */ .kc{padding:9px 10px} .kc .de{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ksum{margin-top:8px;font-size:9.5px;color:var(--dim2);display:flex;align-items:center;gap:5px;cursor:default} .kchev{display:inline-block;transition:transform .3s ease;color:var(--side);font-size:12px;line-height:1} .kph{max-height:0;overflow:hidden;margin:0 0 0 4px;opacity:0; transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .35s ease,margin .45s ease} .kc.kc-open .kph{max-height:160px;opacity:1;margin:8px 0 0 4px} .kc.kc-open .kchev{transform:rotate(90deg)} .kroe{margin-top:7px} .kc.kc-open{border-color:#EAB308;box-shadow:0 0 0 2px rgba(234,179,8,.28),0 12px 30px rgba(0,0,0,.55)} /* card travels to its new column rather than vanishing */ .kc.kc-fly{position:relative;z-index:60;pointer-events:none; box-shadow:0 18px 40px rgba(0,0,0,.6);border-color:#F97316} .kc.kc-collapse{max-height:0!important;margin:0!important;padding-top:0!important;padding-bottom:0!important; border-width:0!important;opacity:0;overflow:hidden; transition:all .45s cubic-bezier(.4,0,.2,1)} /* demo cursor — shown on panes that are demonstrating an interaction */ .dcur{position:absolute;width:19px;height:19px;left:0;top:0;z-index:80;pointer-events:none;opacity:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.65)); transition:transform .75s cubic-bezier(.33,.1,.28,1),opacity .3s ease} .dcur.on{opacity:1} .dcur.ibeam{margin-left:-9.5px;margin-top:-9.5px} .dcur svg{width:100%;height:100%;display:block} .dclick{position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid #60A5FA; z-index:79;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3)} .dclick.go{animation:dpulse .55s ease-out} @keyframes dpulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}} @media(max-width:640px){ .dcur{width:16px;height:16px} } /* --- board footprint is fixed: a card moving between columns, or a card expanding, must not change the page height underneath the reader. --- */ .kwrap{align-items:start} .kcol2{height:var(--kcol-h,432px);overflow:hidden;display:flex;flex-direction:column} .kcol2 .kh{flex:0 0 auto} .kc{flex:0 0 auto} /* the open card expands INTO the reserved space rather than beyond it */ .kc.kc-open .kph{max-height:132px} @media(max-width:900px){ .kcol2{--kcol-h:376px} } @media(max-width:640px){ .kcol2{--kcol-h:0px;min-height:0} } /* --- the real COA detail modal, per coa-kanban-board.tsx --------------- header with source/priority/type badges and an X, a tab strip (Details · Actionables · ROE · Comments · Attachments · Dependencies · History) with border-blue-500/text-blue-400 on the active tab, and a scrolling body. Shown over the board when a card is opened. */ .coamodal{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center; background:rgba(8,10,14,.72);opacity:0;pointer-events:none;transition:opacity .3s ease;padding:14px} .coamodal.on{opacity:1} .cmbox{width:min(600px,100%);max-height:100%;min-height:0;display:flex;flex-direction:column; background:#1F2430;border:1px solid #374151;border-radius:11px;overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.7);transform:translateY(10px) scale(.98); transition:transform .35s cubic-bezier(.2,.8,.3,1)} .coamodal.on .cmbox{transform:none} .cmhead{flex:0 0 auto;display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-bottom:1px solid #374151} .cmt{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0} .cmt b{font-size:13px;color:#FAFAFA;width:100%} .cmsrc{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;padding:2px 7px;border-radius:5px; border:1px solid rgba(59,130,246,.4);background:rgba(59,130,246,.1);color:#93C5FD} .cmx{margin-left:auto;background:none;border:0;color:#9ca3af;padding:2px;cursor:pointer;line-height:0} .cmx:hover{color:#fff} .mi{width:13px;height:13px}.mi.sm{width:11px;height:11px}.mi.lg{width:16px;height:16px} .cmtabs{flex:0 0 auto;display:flex;flex-wrap:wrap;border-bottom:1px solid #374151; background:rgba(31,41,55,.5);padding:2px 4px;gap:1px} .mtab{display:flex;align-items:center;gap:4px;padding:6px 8px;font-size:9.5px;white-space:nowrap;border-radius:5px; background:none;border:0;border-bottom:2px solid transparent;color:#9ca3af;cursor:pointer; transition:color .2s ease,border-color .2s ease} .mtab.on{border-bottom-color:#3B82F6;color:#60A5FA} .cmbody{flex:1 1 auto;min-height:0;padding:12px;overflow:hidden} .mpane{display:none}.mpane.on{display:block} .mpane h4{font-size:11.5px;font-weight:700;color:#d1d5db;margin-bottom:6px} .mpane p{font-size:11.5px;color:#9ca3af;line-height:1.5} .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 12px;margin-top:10px} .mkv{display:flex;flex-direction:column;gap:2px} .mkv span{font-size:9px;color:#6b7280;letter-spacing:.04em;text-transform:uppercase} .mkv b{font-size:11px;color:#e5e7eb;font-weight:600} .mph{display:flex;justify-content:space-between;font-size:9.5px;color:#d1d5db;font-weight:700; margin:7px 0 4px;padding-bottom:3px;border-bottom:1px solid #374151} .mph span{color:#6b7280;font-weight:500;font-family:var(--mono)} .ma{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:#d1d5db;padding:5px 8px; border:1px solid #374151;border-radius:6px;margin-bottom:5px;transition:all .35s ease} .ma em{font-style:normal;font-size:9.5px;color:#6b7280;flex:0 0 auto} .ma.done{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)} .ma.done::before{content:"✓ ";color:#22C55E;font-weight:700} .mroe{font-size:11px;color:#9ca3af;line-height:1.5;padding:8px 10px;border:1px solid #374151; border-radius:6px;margin-bottom:6px} .mroe b{color:#93C5FD;font-family:var(--mono);font-size:10px;margin-right:6px} @media(max-width:640px){ .cmbox{width:100%} .mgrid{grid-template-columns:1fr} .mtab{padding:7px 10px;font-size:10px} .coamodal{padding:8px} } /* --- ROE tab + assignment, per coa-kanban-board.tsx ------------------- */ .roeban{background:linear-gradient(90deg,rgba(88,28,135,.3),rgba(30,58,138,.3)); border:1px solid rgba(168,85,247,.3);border-radius:8px;padding:8px 10px;margin-bottom:8px} .roeban h4{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#d8b4fe;margin-bottom:5px} .roeban p{font-size:9.5px;color:#9ca3af;line-height:1.4} .rc{position:relative;padding:7px 9px;border-radius:7px;border:1px solid;margin-bottom:6px} .rc.active{border-color:rgba(34,197,94,.3);background:rgba(31,41,55,.5)} .rc.suspended{border-color:rgba(239,68,68,.3);background:rgba(127,29,29,.1)} .rc.pending{border-color:rgba(234,179,8,.3);background:rgba(113,63,18,.1)} .rch{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap} .rtype{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:.03em} .r-auth{background:rgba(34,197,94,.2);color:#4ade80} .r-proh{background:rgba(239,68,68,.2);color:#f87171} .r-thr{background:rgba(234,179,8,.2);color:#facc15} .rc h5{font-size:11.5px;font-weight:700;color:#fff} .rc p{font-size:10px;color:#9ca3af;line-height:1.4;margin-bottom:5px} .rval{display:inline-block;font-size:10px;background:rgba(31,41,55,.5);padding:3px 7px;border-radius:5px} .rval span{color:#6b7280}.rval b{color:#fff;font-family:var(--mono);font-weight:500} .rmod{font-size:9px;color:#eab308;margin-top:6px} .rcid{position:absolute;top:10px;right:11px;font-family:var(--mono);font-size:9px;color:#6b7280} /* assignment */ .massign{position:relative} .adrop{position:absolute;bottom:100%;top:auto;right:0;left:auto;z-index:5;min-width:190px;max-width:min(250px,74vw);margin-bottom:2px;background:#111827; border:1px solid #374151;border-radius:7px;padding:2px;opacity:0;pointer-events:none; transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease; box-shadow:0 16px 34px rgba(0,0,0,.6)} .massign.open .adrop{opacity:1;transform:none} .adrop{transform:translateY(4px)} .aopt{font-size:10px;color:#d1d5db;padding:3px 8px;border-radius:5px;line-height:1.3} .aopt[data-assign-pick]{color:#93C5FD} .aopt.sel{background:rgba(59,130,246,.16)} .massign b[data-assign-val]{color:#6b7280} .massign.done b[data-assign-val]{color:#4ade80} /* arrow points down normally; up when the popup is flipped above the blob */ /* --- Radix Switch thumb: the data-[state]:translate-x rules never made it into the extracted stylesheet, so the toggles could only ever change track colour. translate-x-5 is 1.25rem in Tailwind. --- */ .dash [role="switch"]{transition:background-color .25s ease} .dash [role="switch"] > span{transition:transform .25s cubic-bezier(.3,.8,.3,1)} .dash [role="switch"] > span[data-state="checked"]{transform:translateX(1.25rem)} .dash [role="switch"] > span[data-state="unchecked"]{transform:translateX(0)} /* the layer row lifts as it activates, so the sweep is legible */ .dash .group{transition:border-color .3s ease,background-color .3s ease} .dash .group.lyr-on{border-color:rgba(59,130,246,.45)} /* --- event detail card, per event-hover-cards.tsx --------------------- rounded-xl, border-2 tinted by severity, bg-gray-900/95 with a backdrop blur, and a 0 20px 40px shadow in the severity's shadowColor. Severity labels and colours are getSeverityInfo(): Critical #dc2626, High #ea580c, Medium #d97706, Low #059669. */ .evpop{position:absolute;z-index:75;opacity:0;pointer-events:none;left:50%;top:0; transform:translate(-50%,-10px);transition:opacity .22s ease,transform .22s ease} .evpop.on{opacity:1;transform:translate(-50%,0)} .evcard{width:256px;border-radius:12px;border:2px solid;background:rgba(17,24,39,.95); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:11px 14px;font-size:11px} .evhd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px;gap:8px} .evfn{font-weight:700;font-size:12.5px;color:#fff;line-height:1.3} .evsev{flex:0 0 auto;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:700;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3)} .evdesc{margin-bottom:8px;color:#d1d5db;line-height:1.55;font-size:11px} .evstats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px} .evstat{background:rgba(31,41,55,.5);border-radius:8px;padding:7px 8px} .evk{color:#9ca3af;font-size:9.5px;margin-bottom:3px} .evv{color:#fff;font-weight:700;font-size:12.5px} .evrows{display:flex;flex-direction:column;gap:4px} .evrow{display:flex;align-items:center;justify-content:space-between} .evrow span:first-child{color:#9ca3af} .evrow span:last-child{font-weight:600;color:#e5e7eb} .evcap{text-transform:capitalize} @media(max-width:640px){ .evcard{width:212px;padding:9px 11px} } /* --- COA modal: everything visible, nothing scrolls ------------------- */ .mpane h4{font-size:11px;margin-bottom:4px} .mpane p{font-size:11px;line-height:1.45} .mkv span{font-size:8.5px} .mkv b{font-size:10.5px} .rc h5{font-size:11px} .rcid{top:7px;right:9px;font-size:8.5px} .rval{font-size:9.5px;padding:2px 6px} .rmod{font-size:8.5px;margin-top:4px} .cmt b{font-size:12.5px} @media(max-width:640px){ .coamodal{padding:6px} .cmbox{width:100%;border-radius:9px} .cmhead{padding:9px 10px} .cmt b{font-size:11.5px} .mtab{padding:5px 7px;font-size:9px;gap:3px} .mtab .mi{width:11px;height:11px} .cmbody{padding:10px} .mgrid{grid-template-columns:1fr 1fr;gap:7px 9px} .rc p{font-size:9.5px} .roeban p{font-size:9px} .ma{font-size:10px;padding:4px 7px} .ma em{display:none} .rcid{display:none} } @media(max-width:420px){ .mgrid{grid-template-columns:1fr} .mtab{font-size:8.5px;padding:5px 6px} } /* ============================================================ MOBILE PLAN — each pane gets a layout for the viewport, not a shrunken desktop one. Detection layers : 4-up -> 2-up (was 13 rows, 754px) Timeline : blob cards -> dots (15 cards in 350px is mush) COA board : 5 cols -> 2 + chips (was 5x432 = 2160px) Node canvas : graph -> vertical pipe (kept) ============================================================ */ .kmini{display:none} @media(max-width:640px){ /* --- detection layers: two across, not one --- */ .dash [class*="grid-cols-"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .dash .group{padding:8px !important} .dash .group h4{font-size:11px !important} .dash .group p{font-size:9px !important;line-height:1.3 !important} .dash [role="switch"]{height:18px !important;width:32px !important} .dash [role="switch"] > span{height:14px !important;width:14px !important} .dash [role="switch"] > span[data-state="checked"]{transform:translateX(0.875rem)} /* --- timeline: anchor dots carry the story, the detail card reads it --- */ .teb-card{display:none} .teb-stem{height:9px;top:15px} .teb-dot{top:4px;width:10px;height:10px;border-width:1.5px} .tstrip{min-height:34px} .tlane{padding:8px 0 2px} .teb:nth-child(even) .teb-stem{top:15px;height:9px;bottom:auto} /* --- COA board: the two columns the story moves between --- */ .kmini{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap} .kmc{display:flex;align-items:center;gap:5px;font-size:9.5px;padding:4px 8px;border-radius:6px; border:1px solid var(--bd);color:var(--dim2);background:rgba(31,41,55,.4)} .kmc b{font-family:var(--mono);color:var(--side)} .kmc.sug{border-color:rgba(75,85,99,.4)} .kmc.com{border-color:rgba(34,197,94,.3);color:#86EFAC} .kmc.rej{border-color:rgba(239,68,68,.3);color:#FCA5A5} .kwrap{grid-template-columns:1fr 1fr;gap:8px} .kcol2:nth-child(1),.kcol2:nth-child(4),.kcol2:nth-child(5){display:none} .kcol2{height:auto;min-height:250px;padding:8px} .kc{padding:8px} .kc .ti{font-size:11px} .kc .de{font-size:9.5px;-webkit-line-clamp:2} .ksum{font-size:9px;margin-top:6px} .kroe{font-size:8.5px;margin-top:6px;padding-top:5px} .ktags{gap:3px;margin-top:5px} /* --- node canvas --- */ .nwrap{gap:7px;padding:10px} .nn{padding:8px} .nn .nm{font-size:10.5px} .nn .sub{font-size:8.5px} } @media(max-width:420px){ .dash [class*="grid-cols-"]{grid-template-columns:1fr !important} /* both columns stay: the card has to have somewhere to fly to */ .kwrap{gap:6px} .kcol2{padding:7px;min-height:236px} .kc{padding:7px} .kc .ti{font-size:10.5px;line-height:1.25} .kc .de{-webkit-line-clamp:2;font-size:9px} .kt{font-size:7.5px;padding:1px 4px} .kroe{display:none} .kmini .kmc{font-size:9px;padding:3px 6px} } /* --- S.A.G.E., per app/investigative-support/page.tsx ------------------ the page is a case builder: Case Details, an Evidence Container holding typed evidence items, and Investigation Tools. "Quick Templates" was my own invention; the real panel is Investigation Tools and its six types. */ .evhdr{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;color:var(--side); letter-spacing:.05em;text-transform:uppercase;margin:12px 0 7px;padding-bottom:5px; border-bottom:1px solid var(--bd)} @media(max-width:640px){ } /* ============================================================ MOBILE OVERFLOW — the actual cause. .dashmin pins the embedded product markup to min-width:700px. With overflow-x:visible that content does not scroll, it spills out of the viewport and is clipped, which is why copy was sliced mid-word and the toggles sat off-screen. Release the width and let the Tailwind grids inside reflow. ============================================================ */ @media(max-width:760px){ .dashmin,.dash{min-width:0 !important;width:auto !important} .dashscroll{overflow-x:hidden} .dash [class*="min-w-"]{min-width:0 !important} .dash .w-80,.dash .w-64,.dash .w-48,.dash .w-40,.dash .w-32,.dash .w-24{width:auto !important;max-width:100% !important} .dash [class*="whitespace-nowrap"]{white-space:normal !important} .dash .flex{flex-wrap:wrap} .dash .truncate{white-space:normal;overflow:visible;text-overflow:clip} /* the site's own shell must not be exceeded either */ .lp,.dashbox{max-width:100%} .twrap,.kwrap,.nwrap{max-width:100%} } /* --- detection layers: two across, compact rows -------------------- */ @media(max-width:640px){ .dash .grid.grid-cols-1, .dash [class*="grid-cols-"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important} .dash .group{padding:7px !important;border-radius:8px !important} /* icon tile smaller, text tighter, switch on its own line if needed */ .dash .group .rounded-lg,.dash .group .rounded-md{padding:4px !important} .dash .group svg{width:13px !important;height:13px !important} .dash .group h4{font-size:10.5px !important;line-height:1.2 !important} .dash .group p{font-size:8.5px !important;line-height:1.25 !important;margin-top:1px !important} .dash .group .flex{gap:5px !important} } @media(max-width:400px){ .dash .grid.grid-cols-1, .dash [class*="grid-cols-"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .dash .group p{display:none !important} } /* --- mobile: S.A.G.E. tools and the node canvas were the two tall panes --- */ @media(max-width:640px){ /* Investigation Tools: a 2-up chip grid, not six stacked blocks */ /* evidence rows tighten */ /* node canvas: 3 sources 2-up, then processor and output full width */ .nwrap{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px} .nn{width:auto;padding:7px} .nn:nth-child(6),.nn.out{grid-column:1 / -1} .nn .ic{width:24px;height:24px;margin-bottom:5px;font-size:12px} .nn .nm{font-size:10px} .nn .sub{display:none} .nn .mt{margin-top:6px;padding-top:5px} .nn .mt div{font-size:8.5px} .nn:not(:last-child)::after{display:none} .nn.out .nsc{font-size:20px} } /* classes the command panel only uses once a command is chosen; taken from the app's own stylesheet with their at-rule context intact. bg-opsgrid-primary/10 is deliberately absent: the palette is a bare CSS variable, so Tailwind cannot build an alpha of it and the real selected button is border-only too. */ .ogx .block{display: block;} .ogx .border-opsgrid-primary{border-color: var(--color-primary);} .ogx .focus\:border-transparent:focus{border-color: transparent;} .ogx .focus\:ring-opsgrid-accent:focus{--tw-ring-color: var(--color-accent);} .ogx .focus\:ring-opsgrid-border-emphasis:focus{--tw-ring-color: var(--color-border-emphasis);} .ogx .focus\:ring-opsgrid-primary:focus{--tw-ring-color: var(--color-primary);} .ogx .hover\:bg-opsgrid-accent:hover{background-color: var(--color-accent);} .ogx .hover\:bg-opsgrid-panel:hover{background-color: var(--color-panel);} .ogx .hover\:text-opsgrid-text:hover{color: var(--color-text);} .ogx .mr-2{margin-right: 0.5rem;} .ogx .placeholder\:text-opsgrid-text-secondary::placeholder{color: var(--color-text-secondary);} .ogx .py-2{padding-top: 0.5rem; padding-bottom: 0.5rem;} /* --- the four panes above, played rather than posed --------------------- Cards, rows and the detention banner arrive rather than being there; the state bars grow to the widths the app reported. Nothing here is a control: the body takes no pointer events and the only cursor is the drawn one. */ .og-pane .pane-body{pointer-events:none} .og-pane .ogx [data-og-card],.og-pane .ogx [data-og-row],.og-pane .ogx [data-og-alert]{ opacity:0;transform:translateY(8px); transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1)} .og-pane.og-live .ogx [data-og-card],.og-pane.og-live .ogx [data-og-row], .og-pane.og-live .ogx [data-og-alert]{opacity:1;transform:none} .og-pane .ogx .h-full.bg-opsgrid-primary{transition:width 1.1s cubic-bezier(.25,.8,.35,1)} /* the parameter block holds its space from the start, so choosing a command never changes the height of the pane under the reader */ .og-pane .ogx .og-rsv{visibility:hidden;opacity:0;transition:opacity .32s ease} .og-pane .ogx .og-rsv.on{visibility:visible;opacity:1} .og-pane .ogx [data-og-ts]{transition:color .2s ease} .og-pane .ogx [data-og-ts].tick{color:var(--color-text)} .og-pane .ogx [data-og-cmd].sel{border-color:var(--color-primary)} .og-pane .ogx [data-og-send].hot{background-color:var(--color-accent)} @media(prefers-reduced-motion:reduce){ .og-pane .ogx [data-og-card],.og-pane .ogx [data-og-row],.og-pane .ogx [data-og-alert]{ opacity:1;transform:none;transition:none} .og-pane .ogx .h-full.bg-opsgrid-primary{transition:none} } .ogx .ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);} .ogx .ring-opsgrid-primary{--tw-ring-color: var(--color-primary);} .ogx .rounded-md{border-radius: 0.375rem;} .ogx .shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);} .ogx .z-50{z-index: 50;} .ogx .py-1\.5{padding-top: 0.375rem; padding-bottom: 0.375rem;} /* the app's tooltip, placed by us rather than by Radix: same element and the same classes, positioned over the card the pointer is resting on */ .og-pane .ogx .og-tip{position:absolute;pointer-events:none;opacity:0; transform:translateY(3px);transition:opacity .16s ease,transform .16s ease; min-width:max-content;max-width:min(280px,80vw)} .og-pane .ogx .og-tip.on{opacity:1;transform:none} /* the door the pointer picked, in the classes the app swaps in */ .og-pane .ogx [data-og-door]{transition:border-color .2s ease,box-shadow .2s ease} /* --- condensed for the page ------------------------------------------ Every element, colour, border and type size is the app's. Only the whitespace between them is tightened, so four surfaces fit on a page someone is scrolling through rather than working in. */ .og-pane .pane-body{padding:10px} .og-pane .ogx > div + div{margin-top:8px} .og-pane .ogx .p-6{padding:0.9rem} .og-pane .ogx .p-4{padding:0.7rem} .og-pane .ogx .p-3{padding:0.55rem} .og-pane .ogx .py-3{padding-top:0.42rem;padding-bottom:0.42rem} .og-pane .ogx .px-4{padding-left:0.7rem;padding-right:0.7rem} .og-pane .ogx .mb-4{margin-bottom:0.6rem} .og-pane .ogx .mb-3{margin-bottom:0.5rem} .og-pane .ogx .mt-4{margin-top:0.6rem} .og-pane .ogx .pt-4{padding-top:0.6rem} .og-pane .ogx .gap-4{gap:0.55rem} .og-pane .ogx .gap-3{gap:0.45rem} .og-pane .ogx .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:0.6rem} .og-pane .ogx .mt-3{margin-top:0.45rem} .og-pane .ogx .pt-3{padding-top:0.45rem} .og-pane .ogx .text-2xl{font-size:1.32rem;line-height:1.7rem} .og-pane .ogx .mt-1{margin-top:0.1rem} /* --- the two tables, below the width they need ------------------------- The app puts its trailer and shipment tables in an overflow-x-auto, which on a phone means the carrier, the dwell time and the detention are all off to the right. Nothing is dropped here; each row becomes its own card and each cell carries the column heading it lost. Desktop is untouched. */ @media(max-width:760px){ .og-pane .ogx .overflow-x-auto{overflow-x:visible} .og-pane .ogx table,.og-pane .ogx tbody,.og-pane .ogx tr,.og-pane .ogx td{ display:block;width:auto;max-width:none} .og-pane .ogx thead{display:none} .og-pane .ogx tbody tr{border:1px solid var(--color-border);border-radius:8px; background:var(--color-panel);padding:9px 12px;margin-bottom:8px} .og-pane .ogx td{padding:4px 0;display:flex;align-items:baseline; justify-content:space-between;gap:14px} .og-pane .ogx td::before{content:attr(data-l);flex:0 0 auto;font-size:11px; letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary)} .og-pane .ogx td>*{text-align:right} .og-pane .ogx td.og-td-main{display:block;padding:0 0 7px;margin-bottom:5px; border-bottom:1px solid var(--color-border)} .og-pane .ogx td.og-td-main::before{display:none} .og-pane .ogx td.og-td-main>*{text-align:left} .og-pane .ogx td .flex{justify-content:flex-end} .og-pane .ogx td.og-td-main .flex{justify-content:flex-start} } @media(max-width:760px){ .og-pane .pane-body{padding:8px} /* a row card reads as a small two-column form rather than seven long lines: heading across the top, then label over value in pairs */ .og-pane .ogx tbody tr{display:grid;grid-template-columns:1fr 1fr; column-gap:12px;row-gap:5px;padding:8px 10px;margin-bottom:6px} .og-pane .ogx td{display:block;padding:0;min-width:0} .og-pane .ogx td::before{display:block;margin-bottom:1px} .og-pane .ogx td>*{text-align:left} .og-pane .ogx td .flex{justify-content:flex-start} .og-pane .ogx td.og-td-main{grid-column:1/-1;padding:0 0 5px;margin-bottom:1px} .og-pane .ogx td::before{font-size:10px;line-height:1.3;margin-bottom:0; letter-spacing:.05em} .og-pane .ogx td,.og-pane .ogx td .text-sm{line-height:1.3} /* the dock doors pair up too — four short cards, not four tall ones */ .og-pane .ogx .grid-cols-1{grid-template-columns:repeat(2,minmax(0,1fr))} /* eight KPIs across four columns instead of two halves the strip */ .og-pane .ogx .grid-cols-2.lg\:grid-cols-8{grid-template-columns:repeat(4,minmax(0,1fr))} .og-pane .ogx .grid-cols-2.lg\:grid-cols-8 .text-xs{font-size:0.66rem;line-height:0.95rem} .og-pane .ogx .grid-cols-2.lg\:grid-cols-8 .text-lg{font-size:0.95rem;line-height:1.25rem} .og-pane .ogx .grid-cols-2.lg\:grid-cols-8 svg{width:14px;height:14px} .og-pane .ogx .p-6{padding:0.65rem} .og-pane .ogx .p-4{padding:0.55rem} .og-pane .ogx .p-3{padding:0.45rem} .og-pane .ogx .gap-4{gap:0.42rem} .og-pane .ogx > div + div{margin-top:7px} .og-pane .ogx .text-2xl{font-size:1.15rem;line-height:1.5rem} .og-pane .ogx .text-xl{font-size:1.02rem;line-height:1.4rem} .og-pane .ogx .text-lg{font-size:0.98rem;line-height:1.35rem} }