/* Patches: rules dropped by CSS parser in shell.css. Loaded after shell.css to guarantee application. */ .tkpi{display:grid;grid-template-columns:1fr;gap:14px;margin:8px 0 0} .tk-group{border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:var(--panel)} .tk-hdr{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .tk-hdr > span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--tx3);font-weight:500;text-transform:none} .tk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px} .tk{border-left:2px solid var(--line);padding-left:12px;min-width:0} .tk b{display:block;font-family:var(--disp);font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--tx);line-height:1.1;margin-bottom:2px} .tk span{font-family:var(--mono);font-size:11px;color:var(--tx2);letter-spacing:.02em;line-height:1.35;display:block} .tk.e1{border-left-color:var(--e1)} .tk.e1 b{color:var(--e1)} .tk.e2{border-left-color:var(--e2)} .tk.e2 b{color:var(--e2)} .tk.acc{border-left-color:var(--acc)} .tk.acc b{color:var(--acc)} .tk .spark{display:block;margin-top:6px;width:60px;height:16px;color:var(--tx3);opacity:.75} .tk.e1 .spark{color:var(--e1)} .tk.e2 .spark{color:var(--e2)} .tk.acc .spark{color:var(--acc)} .tk-foot{font-family:var(--mono);font-size:10.5px;color:var(--tx3);letter-spacing:.02em;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.5} /* Evidence tier + mechanism color legend, drop anywhere with .tlegend */ .tlegend{display:inline-flex;flex-wrap:wrap;gap:14px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--tx2);align-items:center} .tlegend .tl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .tlegend .tl .sw{width:11px;height:11px;border-radius:2px;background:var(--tx3);display:inline-block} .tlegend .tl.e1 .sw{background:var(--e1)} .tlegend .tl.e2 .sw{background:var(--e2)} .tlegend .tl.e3 .sw{background:var(--e3)} .tlegend .tl.acc .sw{background:var(--acc)} .tlegend .tl b{color:var(--tx);font-weight:600} .tlegend .tl small{color:var(--tx3);font-size:10.5px} .tlegend .sep{color:var(--line);font-weight:400} @media(max-width:640px){.tk-row{grid-template-columns:1fr 1fr;gap:14px}.tk b{font-size:22px}} /* chart card header (globally shared with home/vectors/etc) */ .chartbox .chdr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px} .chartbox .chdr .capt{margin:0!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:700!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--tx)!important} .chartbox .cframe{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;flex-shrink:0} .chartbox .cframe .fr{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:4px;border:1px solid} .chartbox .cframe .fr-fl{color:#B54708;border-color:rgba(181,71,8,.35);background:rgba(181,71,8,.06)} .chartbox .cframe .fr-all{color:#5D7A99;border-color:rgba(93,122,153,.35);background:rgba(93,122,153,.06)} .chartbox .cframe .fr-both{color:var(--acc);border-color:rgba(45,106,231,.35);background:rgba(45,106,231,.06)} .chartbox .cframe .fn{font-family:var(--mono);font-size:10px;color:var(--tx3);letter-spacing:.08em;font-weight:600} @media(max-width:640px){.chartbox .chdr{flex-direction:column;gap:6px}.chartbox .cframe{align-items:flex-start;text-align:left}} /* hero anchor: right-side visual/stat block that fills empty dark-hero half */ .phead .heroflex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:56px;align-items:end;margin-top:14px} .phead .heroflex > .htxt{min-width:0} .phead .heroflex > .hank{min-width:0;position:relative} @media(max-width:960px){.phead .heroflex{grid-template-columns:1fr;gap:28px}.phead .heroflex > .hank{max-width:520px}} .hank{font-family:var(--mono)} .hank .hlbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc2);font-weight:700;margin-bottom:12px} .hank .hgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(91,138,238,.22);border:1px solid rgba(91,138,238,.32);border-radius:8px;overflow:hidden} .hank .hgrid .hc{background:rgba(12,17,29,.62);padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px;min-width:0} .hank .hgrid .hc b{font-family:var(--mono);font-size:26px;line-height:1;letter-spacing:-.015em;color:var(--acc2);font-weight:700} .hank .hgrid .hc .lbl{font-size:10.5px;letter-spacing:.09em;color:#D2DBEB;font-weight:600;line-height:1.35;text-transform:none} .hank .hgrid .hc .sub{font-size:9.5px;letter-spacing:.12em;color:#8A9AB2;text-transform:uppercase;font-weight:600;margin-top:2px} .hank .hgrid .hc.e1 b{color:#F97066} .hank .hgrid .hc.e2 b{color:#FDB022} .hank .hgrid .hc.ok b{color:#7FD48A} .hank .hfoot{margin-top:10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A9AB2;font-weight:600;line-height:1.55} .hank .hfoot .sep{color:#5B8AEE;margin:0 6px} .hank .hmini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px} .hank .hmini .m{background:rgba(24,34,48,.5);border:1px solid rgba(91,138,238,.18);border-radius:5px;padding:7px 8px;display:flex;flex-direction:column;gap:2px} .hank .hmini .m b{font-family:var(--mono);font-size:14px;color:var(--acc2);line-height:1;font-weight:700} .hank .hmini .m .l{font-size:9.5px;letter-spacing:.06em;color:#8A9AB2;text-transform:uppercase;line-height:1.25;font-weight:600} .hank .hbars{display:flex;flex-direction:column;gap:10px;margin-top:2px} .hank .hbrow{display:grid;grid-template-columns:100px minmax(0,1fr) 32px;align-items:center;gap:10px;font-size:11px} .hank .hbrow .hln{color:#D2DBEB;font-weight:600;letter-spacing:.02em} .hank .hbrow .hbar{position:relative;height:8px;border-radius:2px;background:rgba(91,138,238,.14);overflow:hidden} .hank .hbrow .hbar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#5B8AEE,#7AA3FC);border-radius:2px} .hank .hbrow .hbar span.e1{background:linear-gradient(90deg,#F97066,#FDA29B)} .hank .hbrow .hbar span.e2{background:linear-gradient(90deg,#FDB022,#FEC84B)} .hank .hbrow .hval{color:var(--acc2);font-weight:700;text-align:right} .hank a.hbrow.lnk{text-decoration:none;padding:6px 8px;margin:-6px -8px;border-radius:6px;transition:background .12s ease,transform .12s ease} .hank a.hbrow.lnk:hover{background:rgba(91,138,238,.10);transform:translateX(2px)} .hank a.hbrow.lnk:hover .hln{color:#fff} .hank a.hbrow.lnk:hover .hval{color:#fff} .hank a.hbrow.lnk:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} /* Copy for agents button - lives inside .nav next to the CTA */ /* Floating fallback if nav is absent */ .gl-term{border-bottom:1px dotted var(--tx3);cursor:help;text-decoration:none;color:inherit;transition:border-color .12s,color .12s} .gl-term:hover,.gl-term:focus-visible{border-bottom-color:var(--acc);color:var(--acc);outline:none} /* When the term is inside a , keep monospace + subtle underline instead of dotted border */ code.gl-term,.gl-term code{border-bottom:1px dotted currentColor} /* Comet-style glossary tooltip: header + body + footer, with pointer arrow */ .gl-tip{position:absolute;z-index:200;width:360px;max-width:calc(100vw - 24px);background:var(--panel);color:var(--tx);border-radius:12px;padding:0;border:1px solid var(--line);box-shadow:0 24px 60px rgba(12,17,29,.14),0 6px 16px rgba(12,17,29,.06);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease;font-family:var(--sans);left:0;top:0;overflow:hidden} .gl-tip.on{opacity:1;pointer-events:auto;transform:translateY(0)} .gl-tip .gl-h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--acc);padding:14px 16px 4px;line-height:1.4} .gl-tip .gl-b{font-size:13.5px;line-height:1.55;color:var(--tx);padding:6px 16px 14px;font-weight:400} .gl-tip .gl-f{font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--tx3);padding:10px 16px 12px;border-top:1px solid var(--line);background:var(--bg2);letter-spacing:.02em;font-weight:700} @media(max-width:520px){ .gl-tip{max-width:calc(100vw - 24px)} } /* Cross-surface fixes: ensure .tk-group and .tlegend are visible on both dark hero and light body */ .tk-group{background:linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%);border-color:#CBD5E1;box-shadow:0 1px 2px rgba(12,17,29,.04),inset 0 1px 0 rgba(255,255,255,.6)} .tk-group .tk-hdr{color:#334155;border-bottom:1px solid rgba(203,213,225,.7);padding-bottom:8px;margin-bottom:14px} .tk-group .tk-hdr>span{color:#64748B} .tk-group .tk{border-left-width:3px} .tk-group .tk-foot{color:#475569;border-top-color:rgba(203,213,225,.7)} .tlegend{background:#F8FAFC;border-color:#CBD5E1} /* On dark hero (.phead), invert back so it reads well */ .phead .tk-group{background:rgba(12,17,29,.55);border-color:#33455F;box-shadow:none} .phead .tk-group .tk-hdr{color:#B9C6D8;border-bottom-color:rgba(155,180,214,.18)} .phead .tk-group .tk-hdr>span{color:#8A9AB2} .phead .tk-group .tk b{color:#E7EDF6} .phead .tk-group .tk span{color:#B9C6D8} .phead .tk-group .tk-foot{color:#8A9AB2;border-top-color:rgba(155,180,214,.18)} .phead .tlegend{background:rgba(12,17,29,.55);border-color:#33455F;color:#B9C6D8} /* Landscape and downloads .hank rails need to work on light body too */ /* Scope light-body overrides to
ancestors - never
/.phead */ section .wrap:not(.dark) .hank .hgrid{background:rgba(45,106,231,.12);border-color:rgba(45,106,231,.24)} section .wrap:not(.dark) .hank .hgrid .hc{background:#F8FAFC} section .wrap:not(.dark) .hank .hgrid .hc b{color:var(--acc)} section .wrap:not(.dark) .hank .hgrid .hc .lbl{color:#334155} section .wrap:not(.dark) .hank .hgrid .hc .sub{color:#64748B} section .wrap:not(.dark) .hank .hlbl{color:var(--acc)} section .wrap:not(.dark) .hank .hfoot{color:#64748B} section .wrap:not(.dark) .hank .hfoot .sep{color:var(--acc)} section .wrap:not(.dark) .hank .hbrow .hln{color:#334155} section .wrap:not(.dark) .hank .hbrow .hbar{background:rgba(45,106,231,.10)} section .wrap:not(.dark) .hank .hbrow .hval{color:var(--acc)} section .wrap:not(.dark) .hank a.hbrow.lnk:hover{background:rgba(45,106,231,.06)} section .wrap:not(.dark) .hank a.hbrow.lnk:hover .hln{color:#0C111D} section .wrap:not(.dark) .hank a.hbrow.lnk:hover .hval{color:#1D57D6} section .wrap:not(.dark) .hank .hmini .m{background:#F8FAFC;border-color:rgba(45,106,231,.14)} section .wrap:not(.dark) .hank .hmini .m b{color:var(--acc)} section .wrap:not(.dark) .hank .hmini .m .l{color:#64748B} /* (i) info tooltip icon - used for methodology caveats without cluttering the report */ .info-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:transparent;border:1.25px solid var(--acc);color:var(--acc);font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;margin:0 2px 0 6px;cursor:help;vertical-align:middle;transition:background .12s ease,color .12s ease;position:relative;text-decoration:none} .info-tip::before{content:"i";font-style:italic;transform:translateY(-.5px)} .info-tip:hover{background:var(--acc);color:#FFF} .info-tip:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} .info-tip[data-tip]:hover::after,.info-tip[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--panel);color:var(--tx);border:1px solid var(--line);font-family:var(--sans);font-style:normal;font-size:12px;font-weight:400;line-height:1.5;padding:10px 12px;border-radius:6px;box-shadow:0 12px 30px rgba(12,17,29,.14),0 3px 8px rgba(12,17,29,.06);white-space:normal;width:max-content;max-width:280px;pointer-events:none;z-index:100;letter-spacing:0;text-transform:none} /* ============================================================ Chaos Palette v2 - unified brand tokens for all charts ============================================================ */ :root{ /* Semantic tiers */ --tier-e1:#EF4E4E; --tier-e1-soft:rgba(239,78,78,.14); --tier-e2:#F59E0B; --tier-e2-soft:rgba(245,158,11,.16); --tier-e3:#8B5CF6; --tier-e3-soft:rgba(139,92,246,.16); /* Categorical - 8 hues, one per mechanism/vector family */ --cat-blue:#5B8AEE; --cat-blue-soft:rgba(91,138,238,.14); --cat-red:#EF4E4E; --cat-red-soft:rgba(239,78,78,.14); --cat-orange:#F59E0B; --cat-orange-soft:rgba(245,158,11,.16); --cat-purple:#8B5CF6; --cat-purple-soft:rgba(139,92,246,.16); /* brand remap: former teal/sage/coral slots now carry Chaos hues only */ --cat-teal:#2D6AE7; --cat-teal-soft:rgba(45,106,231,.14); --cat-sage:#B42318; --cat-sage-soft:rgba(180,35,24,.14); --cat-coral:#B54708; --cat-coral-soft:rgba(181,71,8,.16); --cat-slate:#597182; --cat-slate-soft:rgba(89,113,130,.14); /* Verdict tags (Core / Adjacent / Gap / Watch) */ --v-core:var(--cat-red); --v-core-soft:var(--cat-red-soft); --v-adj:var(--cat-orange); --v-adj-soft:var(--cat-orange-soft); --v-gap:var(--cat-purple); --v-gap-soft:var(--cat-purple-soft); --v-watch:var(--cat-teal); --v-watch-soft:var(--cat-teal-soft); /* Object-type accents (registry entity kinds) */ --ot-protocol:var(--cat-teal); --ot-model:var(--cat-purple); --ot-harness:var(--cat-blue); --ot-framework:var(--cat-orange); /* Chart-surface neutrals */ --ch-grid:#EEF2F7; --ch-grid-strong:#DCE3ED; --ch-tx:#3D4B60; --ch-tx-mute:#597182; --ch-refline:rgba(89,113,130,.55); } [data-theme="dark"]{ --ch-grid:#25354B; --ch-grid-strong:#33455F; --ch-tx:#B9C6D8; --ch-tx-mute:#8298B0; --ch-refline:rgba(155,180,214,.4); /* Slightly lift saturation of soft fills on dark */ --tier-e1-soft:rgba(249,112,102,.22); --tier-e2-soft:rgba(253,176,34,.22); --tier-e3-soft:rgba(154,127,255,.24); --cat-blue-soft:rgba(122,163,252,.22); } /* Rich chart tooltip - Comet-style header/body/footer, matches Cortex chart example */ .ck-tip{position:absolute;pointer-events:none;z-index:120;background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 48px rgba(12,17,29,.14),0 4px 12px rgba(12,17,29,.06);font-family:var(--sans);font-size:12px;line-height:1.5;min-width:200px;max-width:320px;opacity:0;transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease} .ck-tip.on{opacity:1;transform:translateY(0)} .ck-tip .ck-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;border-bottom:1px solid var(--line);background:var(--bg2)} .ck-tip .ck-hdr .ck-sw{width:10px;height:10px;border-radius:3px;background:var(--acc);flex:none} .ck-tip .ck-hdr .ck-nm{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--tx);letter-spacing:-.005em;line-height:1.3;flex:1;min-width:0} .ck-tip .ck-body{padding:8px 12px 4px;display:flex;flex-direction:column;gap:4px} .ck-tip .ck-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--mono);font-size:11px} .ck-tip .ck-row .ck-k{color:var(--tx3);letter-spacing:.02em;font-weight:600} .ck-tip .ck-row .ck-v{color:var(--tx);font-weight:700} .ck-tip .ck-row .ck-v.acc{color:var(--acc)} .ck-tip .ck-row .ck-v.red{color:var(--e1s)} .ck-tip .ck-row .ck-v.orange{color:var(--e2)} .ck-tip .ck-row .ck-v.purple{color:var(--e3)} .ck-tip .ck-foot{padding:8px 12px 10px;border-top:1px solid var(--line);margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-weight:700;background:var(--bg2)} .ck-tip .ck-foot.lnk{color:var(--acc);cursor:pointer;pointer-events:auto} .ck-tip .ck-foot.lnk:hover{color:var(--acc2)} /* Chart hover halo - drawn by chart-kit plugin */ .chartbox{position:relative} .chartbox canvas{cursor:pointer} .chartbox canvas.no-click{cursor:default} /* Legend swatches (chart-kit interactive legend) */ .ck-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:12px;padding:0} .ck-legend .ck-lg{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--ch-tx);letter-spacing:.02em;background:none;border:0;padding:2px 0;transition:opacity .12s} .ck-legend .ck-lg .ck-lg-sw{width:12px;height:12px;border-radius:3px;background:currentColor;opacity:.9} .ck-legend .ck-lg.off{opacity:.35;text-decoration:line-through} .ck-legend .ck-lg:hover{opacity:.75} .ck-legend .ck-lg.off:hover{opacity:.55} /* Card typography: bump body legibility on white surfaces */ .card h3{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#0C111D;margin-bottom:10px} .card p{color:#3D4B60;font-size:14.5px;line-height:1.55;font-weight:450} .card .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:12px} .card .blist li{font-size:14.5px;color:#3D4B60;line-height:1.55} /* Hero rank rows (top mechanism families) - restore legibility on dark panel */ .hank{font-family:var(--mono)} .hank .hlbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc2);font-weight:700;margin-bottom:12px} .hank .hbars{display:flex;flex-direction:column;gap:10px;margin-top:2px} .hank .hbrow{display:grid;grid-template-columns:100px minmax(0,1fr) 32px;align-items:center;gap:10px;font-size:12px} .hank .hbrow .hln{color:#F1F5FB;font-weight:600;letter-spacing:.01em;font-family:var(--sans);font-size:13px} .hank .hbrow .hbar{position:relative;height:8px;border-radius:2px;background:rgba(91,138,238,.14);overflow:hidden} .hank .hbrow .hbar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#5B8AEE,#7AA3FC);border-radius:2px} .hank .hbrow .hbar span.e1{background:linear-gradient(90deg,#F97066,#FDA29B)} .hank .hbrow .hbar span.e2{background:linear-gradient(90deg,#FDB022,#FEC84B)} .hank .hbrow .hval{color:#FCFCFD;font-weight:700;text-align:right;font-family:var(--mono);font-size:13px} .hank a.hbrow.lnk{text-decoration:none;padding:6px 8px;margin:-6px -8px;border-radius:6px;transition:background .12s ease,transform .12s ease} .hank a.hbrow.lnk:hover{background:rgba(91,138,238,.10);transform:translateX(2px)} .hank a.hbrow.lnk:hover .hln{color:#fff} .hank a.hbrow.lnk:hover .hval{color:#fff} .hank .hfoot{margin-top:14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#B5C3D6;font-weight:600;line-height:1.55;font-family:var(--mono)} .hank .hfoot .sep{color:#5B8AEE;margin:0 6px} /* ============================================================ Registry row rhythm - clearer hierarchy, tier accent stripe Overrides styles from pages/registry.html inline