/* ENGAGEMENT // THREAT RESPONSE MATRIX */
.ei-engage-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start
}
.ei-engage-head h3{
  margin-bottom:8px!important
}
.ei-engage-state{
  flex:0 0 auto;
  display:grid;
  gap:5px;
  text-align:right
}
.ei-engage-state span{
  font:700 6px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.14em;
  color:#52676c
}
.ei-engage-state b{
  font:850 8px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.1em;
  color:#c3d0d2
}

.ei-threat-matrix{
  margin-top:20px;
  border:1px solid #2b3d41;
  background:#080e10;
  padding:20px 18px 16px
}

.ei-risk-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:start;
  padding-top:4px
}
.ei-risk-track:before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:23px;
  height:1px;
  background:#31454a
}
.ei-risk-progress{
  position:absolute;
  left:10%;
  top:23px;
  height:1px;
  width:40%;
  background:#9db3b8;
  box-shadow:0 0 8px #8ea8ae;
  transition:width .35s ease
}

.ei-threat-matrix[data-view-risk="D"] .ei-risk-progress{
  width:0
}
.ei-threat-matrix[data-view-risk="C"] .ei-risk-progress{
  width:20%
}
.ei-threat-matrix[data-view-risk="B"] .ei-risk-progress{
  width:40%
}
.ei-threat-matrix[data-view-risk="A"] .ei-risk-progress{
  width:60%
}
.ei-threat-matrix[data-view-risk="S"] .ei-risk-progress{
  width:80%
}

.ei-risk-track button{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  gap:9px;
  border:0;
  background:transparent;
  color:#5f7479;
  cursor:pointer;
  padding:0
}
.ei-risk-track button span{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #40565b;
  background:#091113;
  transform:rotate(45deg);
  font:900 11px ui-monospace,SFMono-Regular,monospace
}
.ei-risk-track button span{
  line-height:38px
}
.ei-risk-track button em{
  font:700 5px ui-monospace,SFMono-Regular,monospace;
  font-style:normal
}
.ei-risk-track button strong{
  position:absolute;
  top:58px;
  font:800 5px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.1em;
  color:#82979c
}
.ei-risk-track button.active{
  color:#d5e0e2
}
.ei-risk-track button.active span{
  border-color:#b2c7cc;
  box-shadow:0 0 12px #9db6bb55;
  background:#122023
}
.ei-risk-track button.baseline:after{
  content:"";
  position:absolute;
  top:-7px;
  width:4px;
  height:4px;
  border:1px solid #9db3b8;
  transform:rotate(45deg)
}

.ei-threat-readout{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
  margin-top:34px;
  padding:17px 0 14px;
  border-top:1px solid #26383c;
  border-bottom:1px solid #26383c
}
.ei-threat-code{
  display:grid;
  align-content:start;
  gap:5px
}
.ei-threat-code span,.ei-threat-directive>span{
  font:700 5px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.13em;
  color:#5e7378
}
.ei-threat-code b{
  font:900 24px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.02em;
  color:#d4dfe1
}
.ei-threat-code em{
  font:800 6px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.1em;
  color:#8fa2a6;
  font-style:normal
}

.ei-threat-bars{
  display:grid;
  gap:9px
}
.ei-threat-bars>div{
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  gap:10px
}
.ei-threat-bars span{
  font:750 5px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.1em;
  color:#71858a
}
.ei-threat-bars i{
  height:5px;
  background:#172326;
  overflow:hidden
}
.ei-threat-bars i b{
  display:block;
  height:100%;
  width:0;
  background:#9fb5ba;
  box-shadow:0 0 7px #9eb6bb;
  transition:width .4s ease
}

.ei-threat-directive{
  display:grid;
  grid-template-columns:150px 1fr auto;
  align-items:center;
  gap:16px;
  padding-top:14px
}
.ei-threat-directive p{
  margin:0;
  font-size:9px;
  line-height:1.65;
  color:#809195
}
.ei-threat-directive>b{
  font:850 6px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.09em;
  color:#bdcacc;
  text-align:right
}

.ei-engage-note{
  display:flex;
  gap:13px;
  margin-top:9px;
  padding:9px 11px;
  border-left:2px solid #52676c;
  background:#091113
}
.ei-engage-note>span{
  font:800 5px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.1em;
  color:#71858a
}
.ei-engage-note p{
  margin:0;
  font-size:8px;
  line-height:1.5;
  color:#708287
}
.ei-engage-note p b{
  color:#a9b9bc
}

.ei-threat-matrix[data-view-risk="S"]{
  border-color:#654044
}
.ei-threat-matrix[data-view-risk="S"] .ei-risk-progress,.ei-threat-matrix[data-view-risk="S"] .ei-threat-bars i b{
  background:#a86a70;
  box-shadow:0 0 8px #a86a7055
}
.ei-threat-matrix[data-view-risk="S"] .ei-risk-track button.active span{
  border-color:#a86a70;
  color:#e2c6c9;
  background:#1c1113
}

@media(max-width:760px){
  .ei-engage-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px
  }
  .ei-engage-state{
    min-width:82px
  }
  .ei-threat-matrix{
    margin-top:16px;
    padding:17px 10px 13px
  }
  .ei-risk-track button span{
    width:31px;
    height:31px;
    line-height:31px;
    font-size:9px
  }
  .ei-risk-track:before,.ei-risk-progress{
    top:19px
  }
  .ei-risk-track button strong{
    top:50px;
    font-size:4px
  }
  .ei-threat-readout{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:30px
  }
  .ei-threat-code{
    grid-template-columns:auto 1fr;
    align-items:baseline;
    column-gap:10px
  }
  .ei-threat-code span{
    grid-column:1/-1
  }
  .ei-threat-code b{
    font-size:21px
  }
  .ei-threat-bars>div{
    grid-template-columns:52px 1fr
  }
  .ei-threat-directive{
    grid-template-columns:1fr;
    gap:7px
  }
  .ei-threat-directive>b{
    text-align:left
  }
  .ei-engage-note{
    align-items:flex-start
  }
  
}

@media(prefers-reduced-motion:reduce){
  .ei-risk-progress,.ei-threat-bars i b{
    transition:none!important
  }
  
}



/* SERAPH // OPERATIONAL SCALE BREACH */
.ei-risk-breach,.ei-risk-unbounded{
  display:none
}

.eidolon-view .risk-unbounded .ei-risk-wrap{
  border-color:#5b3438;
  box-shadow:inset 0 0 24px #6b303516
}

.eidolon-view .risk-unbounded .ei-risk-scale{
  padding-right:72px;
  position:relative
}

.eidolon-view .risk-unbounded .ei-risk-scale span{
  opacity:.28!important;
  color:#68777a!important;
  text-shadow:none!important
}

.eidolon-view .risk-unbounded .ei-risk-breach{
  display:block;
  position:absolute;
  left:calc(100% - 70px);
  right:20px;
  top:50%;
  height:1px;
  background:#9d555c;
  box-shadow:0 0 8px #9d555c;
  animation:eiRiskBreach .72s ease-out both
}

.eidolon-view .risk-unbounded .ei-risk-breach:after{
  content:"×";
  position:absolute;
  right:-7px;
  top:-10px;
  color:#d18a91;
  font:900 17px ui-monospace,SFMono-Regular,monospace
}

.eidolon-view .risk-unbounded .ei-risk-unbounded{
  display:block;
  position:absolute;
  right:0;
  bottom:-16px;
  color:#b86c73;
  font:900 5px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.12em
}

.ei-seraph-breach{
  display:none;
  position:relative;
  margin-top:12px;
  min-height:56px;
  border:1px solid #58353a;
  background:#120b0d;
  overflow:hidden;
  padding:10px 12px
}

.ei-seraph-risk .ei-seraph-breach{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px
}

.ei-seraph-breach span,.ei-seraph-breach strong{
  font:800 5px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.12em;
  color:#82575b
}
.ei-seraph-breach i{
  height:1px;
  background:#78464b;
  transform-origin:left
}
.ei-seraph-breach b{
  color:#d28a91;
  font:900 20px ui-monospace,SFMono-Regular,monospace
}
.ei-seraph-breach strong{
  grid-column:1/3;
  color:#b96e75
}
.ei-seraph-breach em{
  justify-self:end;
  color:#e0a0a6;
  font:900 9px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.1em;
  font-style:normal
}

.ei-seraph-risk .ei-threat-matrix{
  border-color:#56353a
}
.ei-seraph-risk .ei-threat-matrix.breaching{
  animation:eiSeraphTear .12s steps(2) 5
}
.ei-seraph-risk .ei-threat-matrix.breaching .ei-risk-progress{
  width:92%!important;
  background:#a45c63;
  box-shadow:0 0 10px #a45c63
}
.ei-seraph-risk .ei-threat-matrix.breached .ei-risk-progress{
  width:80%!important;
  background:#75464b
}
.ei-seraph-risk .ei-threat-matrix.breached .ei-threat-code b{
  color:#dfa0a6
}

@keyframes eiRiskBreach{
  from{
    transform:scaleX(0);
    transform-origin:left;
    opacity:.2
  }
  to{
    transform:scaleX(1);
    opacity:1
  }
  
}

@keyframes eiSeraphTear{
  0%{
    transform:translateX(0)
  }
  25%{
    transform:translateX(2px)
  }
  50%{
    transform:translateX(-3px)
  }
  75%{
    transform:translateX(1px)
  }
  100%{
    transform:translateX(0)
  }
  
}

@media(max-width:760px){
  .eidolon-view .risk-unbounded .ei-risk-scale{
    padding-right:55px
  }
  .eidolon-view .risk-unbounded .ei-risk-breach{
    left:calc(100% - 53px);
    right:14px
  }
  .ei-seraph-risk .ei-seraph-breach{
    min-height:62px
  }
  
}

@media(prefers-reduced-motion:reduce){
  .eidolon-view .risk-unbounded .ei-risk-breach,.ei-seraph-risk .ei-threat-matrix.breaching{
    animation:none!important
  }
  
}