/* stage: adding a dimensional instrument */
.flightTools{display:flex;align-items:center;gap:9px;flex-shrink:0}
#phase{
  --charge:100%;
  position:relative;
  display:flex;align-items:center;gap:14px;
  min-height:46px;padding:8px 11px 8px 14px;
  overflow:hidden;
  border:1px solid #91b5ff80;
  background:linear-gradient(180deg,#203851,#17283e);
  color:#d5e7ff;
  font-size:10px;letter-spacing:.06em;
}
#phase::after{
  content:"";position:absolute;bottom:0;left:0;height:2px;
  width:var(--charge);background:#99cbff;pointer-events:none;
}
#phase span{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#phase small{font:500 8px/1.2 var(--mono);letter-spacing:.04em;color:#a5c2e8}
#phase b{font:650 10px/1.3 var(--mono);min-width:38px;text-align:center;color:#deefff}
#phase:disabled{opacity:.68;filter:none}
#phase[data-active="true"]{opacity:1;border-color:#c6b3ff;background:#352a54;color:#f0e8ff;box-shadow:0 0 18px #9e8aff22}
#phase[data-active="true"]::after{background:#d2b9ff}
body.is-phased .scanner{border-bottom-color:#a897e080;background:#15152b}
body.is-phased .radarLabel::before{background:#c6b3ff;box-shadow:0 0 8px #c6b3ff70}
.phaseTip{
  margin:0 0 18px;padding:11px 14px;
  border:1px solid #a8b8ff30;border-radius:9px;background:#8288ff0a;
  color:#b7c7df;font-size:11px;line-height:1.6;text-align:left;
}
.phaseTip span{display:block;margin-bottom:3px;color:#c3caff;font:650 8px/1.5 var(--mono);letter-spacing:.08em}
body:not(.is-ready) .phaseTip{display:none}
@media(hover:hover){
  #phase:not(:disabled):hover{border-color:#b7d8ff;background:#2f4867;color:#fff;box-shadow:0 0 0 3px #8cbeff12}
}
@media(max-width:650px){
  footer{gap:9px}
  .flightTools{gap:6px}
  #phase{padding:7px 9px;gap:8px;min-height:44px;font-size:9px}
  #phase small{font-size:7px}
  #phase b{min-width:33px;font-size:9px}
}
@media(max-width:520px){
  footer{flex-wrap:wrap}
  #hint{flex-basis:100%;font-size:9px;line-height:1.4}
  .flightTools{width:100%}
  .flightTools button{flex:1;justify-content:space-between}
  .phaseTip{padding:9px 10px;margin-bottom:14px;font-size:10px}
}
@media(max-height:560px) and (min-width:600px){
  #phase{min-height:36px;padding:4px 9px 4px 12px;font-size:9px}
  #phase small{display:none}
  .phaseTip{padding:6px 10px;margin:0 0 10px;font-size:10px;text-align:center}
  .phaseTip span{display:inline;margin-right:8px}
}
@media(pointer:coarse){#phase{min-height:44px}}