/* =====================================================================
   Moment 05 — Trusted Network explorer
   Desktop: the real "Trusted Network" screen (background image) with the
   graph, filters, timeline and side panel live on top of it. Every size is
   in "u" = 1px of the 1920px-wide design, so the whole screen scales as
   one picture, exactly like the hero banner.
   Mobile (<=760px): the pieces stack — filters, graph, timeline, panel.
   ===================================================================== */
.tnx-visual{max-width:1314px;margin:40px auto 0;}
.tnx{--u:calc(100cqw / 1920);position:relative;width:100%;aspect-ratio:1920/1064;container-type:inline-size;
  border-radius:10px;overflow:hidden;background:#fff;border:1px solid #E8EBF2;box-shadow:0 4px 9px rgba(0,0,0,.14);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;color:#1B2736;text-align:left;line-height:1.35;}
.tnx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;}
.tnx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;}
.tnx button:focus-visible,.tnx input:focus-visible,.tnx select:focus-visible{outline:2px solid #2D8DE7;outline-offset:2px;}

/* ---- filters ---- */
.tnx-filters{position:absolute;left:calc(var(--u)*100);top:calc(var(--u)*180);width:calc(var(--u)*820);height:calc(var(--u)*38);}
.tnx-search{position:absolute;left:0;top:0;width:calc(var(--u)*200);height:calc(var(--u)*38);display:flex;align-items:center;gap:calc(var(--u)*8);background:#fff;padding-left:calc(var(--u)*12);}
.tnx-search svg{width:calc(var(--u)*16);height:calc(var(--u)*16);flex-shrink:0;}
.tnx-search input{width:100%;border:0;outline:0;background:transparent;font:400 calc(var(--u)*12.5) 'Manrope',sans-serif;color:#1B2736;padding:calc(var(--u)*6) 0;}
.tnx-search input::placeholder{color:#3A4553;}
.tnx .tnx-search input:focus-visible{outline:none;}
.tnx-search.is-active{box-shadow:inset 0 calc(var(--u)*-1.5) 0 #2D8DE7;}
.tnx-verdict{position:absolute;left:calc(var(--u)*442);top:0;width:calc(var(--u)*112);height:calc(var(--u)*38);background:#fff;display:flex;align-items:center;}
.tnx-verdict select{appearance:none;-webkit-appearance:none;border:0;background:transparent;width:100%;height:100%;
  font:400 calc(var(--u)*12.5) 'Manrope',sans-serif;color:#3A4553;padding:0 calc(var(--u)*26) 0 calc(var(--u)*7);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233A4553' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right calc(var(--u)*6) center;background-size:calc(var(--u)*10) calc(var(--u)*6);}
.tnx-verdict.is-active select{color:#2F4989;font-weight:600;}
.tnx-clear{position:absolute;left:calc(var(--u)*742);top:0;width:calc(var(--u)*70);height:calc(var(--u)*38);background:#fff !important;font:400 calc(var(--u)*12.5) 'Manrope',sans-serif !important;color:#2F4989 !important;}
.tnx-clear:hover{text-decoration:underline;}

/* ---- graph ---- */
.tnx-graph{position:absolute;left:calc(var(--u)*75);top:calc(var(--u)*222);width:calc(var(--u)*1400);height:calc(var(--u)*706);overflow:hidden;}
.tnx-graph canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;}
.tnx-hint{position:absolute;left:calc(var(--u)*24);top:calc(var(--u)*10);font:400 calc(var(--u)*12) 'Manrope',sans-serif;color:#8A8F99;pointer-events:none;transition:opacity .4s;}
.tnx-hint b{font-weight:600;color:#496387;}
.tnx-event{position:absolute;right:calc(var(--u)*20);top:calc(var(--u)*10);max-width:calc(var(--u)*420);display:flex;align-items:flex-start;gap:calc(var(--u)*10);background:#fff;
  border:1px solid #F799AF;border-radius:calc(var(--u)*8);padding:calc(var(--u)*10) calc(var(--u)*14);box-shadow:0 8px 22px rgba(10,2,6,.10);
  font:400 calc(var(--u)*12)/1.45 'Manrope',sans-serif;color:#1B2736;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none;}
.tnx-event.show{opacity:1;transform:none;pointer-events:auto;}
.tnx-event b{font-weight:600;}
.tnx-event .ev-dot{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:#EA0038;margin-top:calc(var(--u)*5);flex-shrink:0;box-shadow:0 0 0 calc(var(--u)*4) rgba(234,0,56,.15);}
.tnx-event .ev-date{display:block;font-size:calc(var(--u)*10.5);color:#8A8F99;margin-bottom:calc(var(--u)*1);}
.tnx-event button{text-decoration:underline;color:#2F4989;font-size:calc(var(--u)*11.5);margin-top:calc(var(--u)*3);}
.tnx-zoom{position:absolute;right:calc(var(--u)*20);bottom:calc(var(--u)*16);display:flex;flex-direction:column;gap:calc(var(--u)*6);}
.tnx-zoom button{width:calc(var(--u)*30);height:calc(var(--u)*30);display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E8EBF2;border-radius:calc(var(--u)*7);
  box-shadow:0 2px 6px rgba(10,2,6,.08);font:500 calc(var(--u)*16) 'Manrope',sans-serif;color:#1B2736;}
.tnx-zoom button:hover{background:#F5F7FB;}
.tnx-zoom svg{width:calc(var(--u)*14);height:calc(var(--u)*14);}
.tnx .tng-tooltip{font-size:12px;}

/* ---- timeline ---- */
.tnx-timeline{position:absolute;left:calc(var(--u)*96);top:calc(var(--u)*930);width:calc(var(--u)*1370);height:calc(var(--u)*92);background:#fff;user-select:none;}
.tnx-play{position:absolute;left:calc(var(--u)*36);top:calc(var(--u)*30);width:calc(var(--u)*26);height:calc(var(--u)*26);display:flex;align-items:center;justify-content:center;border-radius:50% !important;}
.tnx-play:hover{background:#EEF1F8 !important;}
.tnx-play svg{width:calc(var(--u)*15);height:calc(var(--u)*15);}
.tnx-track{position:absolute;left:calc(var(--u)*66);right:calc(var(--u)*36);top:calc(var(--u)*22);height:calc(var(--u)*42);cursor:pointer;touch-action:none;}
.tnx-track::before{content:'';position:absolute;left:0;right:0;top:calc(var(--u)*20);height:calc(var(--u)*1.5);background:#D5DAE6;}
.tnx-fill{position:absolute;left:0;top:calc(var(--u)*20);height:calc(var(--u)*1.5);background:#2D8DE7;}
.tnx-thumb{position:absolute;top:calc(var(--u)*16);width:calc(var(--u)*24);height:calc(var(--u)*9);margin-left:calc(var(--u)*-12);border-radius:calc(var(--u)*5);background:#2D8DE7;box-shadow:0 1px 4px rgba(45,141,231,.45);cursor:grab;transition:transform .15s;}
.tnx-thumb:hover,.tnx-thumb.drag{transform:scaleY(1.25);}
.tnx-dot{position:absolute;top:calc(var(--u)*2);width:calc(var(--u)*14);height:calc(var(--u)*14);margin-left:calc(var(--u)*-7);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.tnx-dot::after{content:'';width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:#EA0038;transition:transform .2s;}
.tnx-dot.past::after{box-shadow:0 0 0 calc(var(--u)*3) rgba(234,0,56,.18);}
.tnx-dot:hover::after{transform:scale(1.5);}
.tnx-dot .dot-tip{position:absolute;bottom:calc(var(--u)*18);left:50%;transform:translateX(-50%);white-space:nowrap;background:#1B2736;color:#fff;font:400 calc(var(--u)*11) 'Manrope',sans-serif;padding:calc(var(--u)*5) calc(var(--u)*9);border-radius:calc(var(--u)*5);opacity:0;pointer-events:none;transition:opacity .15s;}
.tnx-dot:hover .dot-tip{opacity:1;}
.tnx-labels{position:absolute;left:calc(var(--u)*66);right:calc(var(--u)*36);top:calc(var(--u)*56);height:calc(var(--u)*20);font:400 calc(var(--u)*11.5) 'Manrope',sans-serif;color:#1B2736;}
.tnx-labels span{position:absolute;top:0;white-space:nowrap;}
.tnx-lab-start{left:calc(var(--u)*-20);}
.tnx-lab-end{right:calc(var(--u)*-24);}
.tnx-lab-cur{transform:translateX(-50%);font-weight:600;}

/* ---- side panel ---- */
.tnx-panel{position:absolute;left:calc(var(--u)*1481);top:calc(var(--u)*61);width:calc(var(--u)*439);height:calc(var(--u)*1003);background:#fff;display:flex;flex-direction:column;}
.tnx-view{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 calc(var(--u)*32);animation:tnxIn .28s ease;}
@keyframes tnxIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}
.tnx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*12);padding:calc(var(--u)*46) calc(var(--u)*16) calc(var(--u)*18);border-bottom:1px solid #E6E7E9;}
.tnx-head h3{font:400 calc(var(--u)*15)/1.3 'Manrope',sans-serif;color:#2F4989;margin:0;}
.tnx-head p{font:400 calc(var(--u)*12)/1.4 'Manrope',sans-serif;color:#6B7280;margin:calc(var(--u)*2) 0 0;}
.tnx-pill{display:inline-flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*4) calc(var(--u)*10);border-radius:calc(var(--u)*14);background:#EEF1F8;font:500 calc(var(--u)*11) 'Manrope',sans-serif;letter-spacing:.04em;color:#2F4989;white-space:nowrap;margin-top:calc(var(--u)*4);}
.tnx-pill svg{width:calc(var(--u)*13);height:calc(var(--u)*13);}
.tnx-back{display:inline-flex;align-items:center;gap:calc(var(--u)*5);font:400 calc(var(--u)*11.5) 'Manrope',sans-serif !important;color:#2F4989 !important;padding:calc(var(--u)*18) calc(var(--u)*16) 0 !important;align-self:flex-start;}
.tnx-back:hover{text-decoration:underline;}
.tnx-back + .tnx-head{padding-top:calc(var(--u)*8);}
.tnx-explain{padding:calc(var(--u)*16) calc(var(--u)*16) calc(var(--u)*14);}
.tnx-explain h4{display:flex;align-items:center;gap:calc(var(--u)*8);font:400 calc(var(--u)*12) 'Manrope',sans-serif;color:#2F4989;margin:0 0 calc(var(--u)*8);}
.tnx-explain h4 svg{width:calc(var(--u)*14);height:calc(var(--u)*14);}
.tnx-explain p{font:400 calc(var(--u)*12)/1.5 'Manrope',sans-serif;color:#3A4553;margin:0;}
.tnx-explain p b{font-weight:600;color:#1B2736;}
.tnx-statline{display:flex;gap:calc(var(--u)*8);flex-wrap:wrap;margin-top:calc(var(--u)*10);}
.tnx-statline span{font:400 calc(var(--u)*11) 'Manrope',sans-serif;color:#3A4553;background:#F6F7FA;border:1px solid #ECEEF3;border-radius:calc(var(--u)*5);padding:calc(var(--u)*4) calc(var(--u)*8);}
.tnx-statline b{font-weight:600;color:#1B2736;}
.tnx-list{flex:1;min-height:0;overflow-y:auto;padding:0 calc(var(--u)*8);margin:0 0 calc(var(--u)*8);scrollbar-width:thin;}
.tnx-row{display:flex;align-items:center;gap:calc(var(--u)*12);width:100%;height:calc(var(--u)*52);padding:0 calc(var(--u)*12) !important;border-bottom:1px solid #E6E7E9 !important;text-align:left;transition:background .15s;}
.tnx-row:hover{background:#F5F7FB !important;}
.tnx-row.is-sel{background:#EEF3FC !important;}
.tnx-row.is-new{animation:tnxRow .9s ease;}
@keyframes tnxRow{0%{background:#DBEEFF;}100%{background:transparent;}}
.tnx-row .ic{width:calc(var(--u)*16);height:calc(var(--u)*16);flex-shrink:0;}
.tnx-row .nm{flex:1;min-width:0;}
.tnx-row .nm b{display:block;font:400 calc(var(--u)*13)/1.3 'Manrope',sans-serif;color:#1B2736;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tnx-row .nm small{display:block;font:400 calc(var(--u)*11.5)/1.3 'Manrope',sans-serif;color:#6B7280;}
.tnx-row .pct{font:600 calc(var(--u)*12) 'Manrope',sans-serif;color:#2F4989;padding:calc(var(--u)*5) calc(var(--u)*10);border-radius:calc(var(--u)*14);min-width:calc(var(--u)*44);text-align:center;}
.tnx-row:hover .pct,.tnx-row.is-sel .pct{background:#E3E9F6;}
.tnx-empty{padding:calc(var(--u)*30) calc(var(--u)*16);font:400 calc(var(--u)*12.5)/1.5 'Manrope',sans-serif;color:#6B7280;text-align:center;}
.tnx-empty button{color:#2F4989;text-decoration:underline;}

/* vendor brief */
.tnx-vhead{display:flex;justify-content:space-between;gap:calc(var(--u)*12);padding:calc(var(--u)*40) calc(var(--u)*8) 0;}
.tnx-vhead h3{font:400 calc(var(--u)*17)/1.3 'Manrope',sans-serif;color:#1B2736;margin:0;}
.tnx-vhead p{font:400 calc(var(--u)*12.5)/1.4 'Manrope',sans-serif;color:#3A4553;margin:calc(var(--u)*3) 0 0;}
.tnx-close{width:calc(var(--u)*24);height:calc(var(--u)*24);display:flex;align-items:center;justify-content:center;color:#3A4553 !important;flex-shrink:0;border-radius:calc(var(--u)*5) !important;}
.tnx-close:hover{background:#F0F2F6 !important;}
.tnx-close svg{width:calc(var(--u)*14);height:calc(var(--u)*14);}
.tnx-viewpage{display:inline-flex;align-items:center;gap:calc(var(--u)*6);margin:calc(var(--u)*14) calc(var(--u)*8) 0;font:500 calc(var(--u)*12) 'Manrope',sans-serif !important;color:#2F4989 !important;}
.tnx-viewpage:hover{text-decoration:underline;}
.tnx-viewpage svg{flex-shrink:0;}
.tnx-vbody{flex:1;min-height:0;overflow-y:auto;padding:0 calc(var(--u)*8) calc(var(--u)*12);scrollbar-width:thin;}
.tnx-evline{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*8);margin-top:calc(var(--u)*30);font:400 calc(var(--u)*11) 'Manrope',sans-serif;color:#6B7280;}
.tnx-evline .tng-tag{font-size:calc(var(--u)*12);padding:calc(var(--u)*3) calc(var(--u)*10) calc(var(--u)*3) calc(var(--u)*7);}
.tnx-evline .tng-tag-icon{width:calc(var(--u)*13);height:calc(var(--u)*13);font-size:calc(var(--u)*8.5);}
.tnx-bullets{list-style:none;margin:calc(var(--u)*12) 0 0;padding:0;}
.tnx-bullets li{position:relative;padding-left:calc(var(--u)*14);font:400 calc(var(--u)*12.5)/1.5 'Manrope',sans-serif;color:#1B2736;margin-bottom:calc(var(--u)*6);}
.tnx-bullets li::before{content:'';position:absolute;left:0;top:calc(var(--u)*7);width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:#34D399;}
.tnx-bullets li.warn::before{background:#EA0038;}
.tnx-bullets li.info::before{background:#60A5FA;}
.tnx-cards{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10);margin-top:calc(var(--u)*26);}
.tnx-card{border:1px solid #E6E7E9;border-radius:calc(var(--u)*6);padding:calc(var(--u)*14) calc(var(--u)*10);text-align:center;}
.tnx-card small{display:block;font:400 calc(var(--u)*10.5) 'Manrope',sans-serif;color:#6B7280;}
.tnx-card b{display:block;font:400 calc(var(--u)*16)/1.3 'Manrope',sans-serif;color:#1B2736;margin-top:calc(var(--u)*6);}
.tnx-card b.up{animation:tnxUp .8s ease;}
@keyframes tnxUp{0%{color:#2D8DE7;}100%{color:#1B2736;}}
.tnx-sec{font:400 calc(var(--u)*14) 'Manrope',sans-serif;color:#1B2736;margin:calc(var(--u)*30) 0 calc(var(--u)*8);}
.tnx-crow{display:flex;justify-content:space-between;gap:calc(var(--u)*10);padding:calc(var(--u)*10) 0;border-bottom:1px solid #E6E7E9;font:400 calc(var(--u)*12.5) 'Manrope',sans-serif;color:#1B2736;}
.tnx-crow:last-child{border-bottom:0;}
.tnx-crow .ok{color:#4AB261;font-weight:600;}
.tnx-crow .nw{color:#2D8DE7;font-weight:600;}
.tnx-crow .bad{color:#EA0038;font-weight:600;}
.tnx-crow small{color:#8A8F99;font-size:calc(var(--u)*11);margin-left:calc(var(--u)*6);}
.tnx-timeline-mini{margin-top:calc(var(--u)*6);}
.tnx-timeline-mini .tnx-crow{font-size:calc(var(--u)*12);}
.tnx-timeline-mini .tnx-crow span:first-child{color:#6B7280;white-space:nowrap;}
.tnx-timeline-mini .tnx-crow span:last-child{text-align:right;}

/* ask box + invented AI answer */
.tnx-ai{margin:0 0 calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*10);background:#F5F7FB;border:1px solid #E6EAF3;font:400 calc(var(--u)*12)/1.5 'Manrope',sans-serif;color:#1B2736;animation:tnxIn .3s ease;}
.tnx-ai .who{display:flex;align-items:center;gap:calc(var(--u)*6);font-weight:600;color:#2F4989;margin-bottom:calc(var(--u)*4);font-size:calc(var(--u)*11.5);}
.tnx-ai .q{color:#6B7280;font-style:italic;margin-bottom:calc(var(--u)*4);}
.tnx-ai .typing{display:inline-flex;gap:calc(var(--u)*3);}
.tnx-ai .typing i{width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:#9AA3B5;animation:tnxDot 1s infinite;}
.tnx-ai .typing i:nth-child(2){animation-delay:.15s;}.tnx-ai .typing i:nth-child(3){animation-delay:.3s;}
@keyframes tnxDot{0%,100%{opacity:.3;}50%{opacity:1;}}
.tnx-ask{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*64);margin:0 0 calc(var(--u)*64);padding:0 calc(var(--u)*18) 0 calc(var(--u)*22);border-radius:calc(var(--u)*8);background:#fff;box-shadow:0 2px 14px rgba(27,39,54,.10);}
.tnx-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:italic 400 calc(var(--u)*14) 'Manrope',sans-serif;color:#1B2736;}
.tnx-ask input::placeholder{color:#6B7280;}
.tnx-ask button{width:calc(var(--u)*24);height:calc(var(--u)*24);display:flex;align-items:center;justify-content:center;}
.tnx-ask button svg{width:calc(var(--u)*22);height:calc(var(--u)*22);}
.tnx-ask--v2{border:1px solid #BDEFE6;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#DCD3FF,#BDEFE6) border-box;border:1px solid transparent;border-radius:calc(var(--u)*14);margin:0 0 calc(var(--u)*40);height:calc(var(--u)*76);}
.tnx-ask--v2 input{font-style:normal;}
.tnx-ask--v2 .plus{font:300 calc(var(--u)*20) 'Manrope',sans-serif;color:#1B2736;}
.tnx-ask--v2 .send{width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:50%;background:#0A0206;}
.tnx-ask--v2 .send svg{width:calc(var(--u)*12);height:calc(var(--u)*12);}

/* ---- mobile: stack everything, real px ---- */
@media (max-width:760px){
  .tnx{--u:1px;aspect-ratio:auto;display:flex;flex-direction:column;container-type:normal;}
  .tnx-bg{display:none;}
  .tnx-filters,.tnx-graph,.tnx-timeline,.tnx-panel{position:relative;left:auto;top:auto;width:auto;}
  .tnx-filters{display:flex;align-items:center;gap:8px;height:auto;padding:12px 12px 6px;flex-wrap:wrap;}
  .tnx-search,.tnx-verdict,.tnx-clear{position:relative;left:auto;top:auto;}
  .tnx-search{flex:1 1 160px;width:auto;border:1px solid #E6E7E9;border-radius:8px;height:36px;}
  .tnx-search input{font-size:14px;}
  .tnx-verdict{width:auto;flex:0 0 auto;border:1px solid #E6E7E9;border-radius:8px;height:36px;}
  .tnx-verdict select{font-size:13px;}
  .tnx-clear{width:auto;height:36px;padding:0 4px !important;}
  .tnx-graph{height:auto;aspect-ratio:4/5;max-height:520px;margin:0 12px;border:1px solid #EEF0F4;border-radius:10px;
    background:#fff radial-gradient(#D9DDE6 1px,transparent 1.2px) 0 0/22px 22px;}
  .tnx-event{left:12px;right:12px;max-width:none;}
  .tnx-hint{display:none;}
  .tnx-timeline{height:84px;margin:0 4px;}
  .tnx-play{left:8px;}
  .tnx-track{left:40px;right:18px;}
  .tnx-labels{left:40px;right:18px;font-size:11px;}
  .tnx-lab-start{left:0;}.tnx-lab-end{right:0;}
  .tnx-panel{height:auto;max-height:620px;border-top:1px solid #E6E7E9;}
  .tnx-view{padding:0 8px;}
  .tnx-list{max-height:380px;}
  .tnx-vbody{max-height:470px;}
  .tnx-ask{margin-bottom:16px;}
  .tnx .tng-tooltip{display:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .tnx-view,.tnx-ai,.tnx-row.is-new,.tnx-card b.up{animation:none;}
}