/* Lean Edge Sports — Draft Compare presentation layer
   Draft behaviour is owned by comparison-draft-mode.js and the individual
   Draft lens files. This stylesheet only owns Draft-specific presentation. */

.compare-draft-mode{
  width:min(1008px,calc(100% - 32px));
  box-sizing:border-box;
  margin:18px auto 26px;
  padding:22px 24px 24px;
  border:1px solid #294d72;
  border-radius:14px;
  background:#071a31;
}
.compare-draft-mode[hidden]{display:none!important}

/* Draft Compare uses the same shared Compare/Clear action bar as Players and Teams.
   The coordinator places it directly between the lens panel and Draft results. */
body.compare-draft-active .comp-btn-wrap{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 36px;
}
.compare-draft-head{margin:0 0 18px}
.compare-draft-kicker{
  display:flex;align-items:center;gap:7px;
  margin:0 0 5px;color:#ff4055;
  font:800 11px/1 "Barlow",sans-serif;
  letter-spacing:.12em;
}
.compare-draft-head h2{
  margin:0;color:#f7f9fc;
  font:800 25px/1.05 "Barlow Condensed","Barlow",sans-serif;
}
.compare-draft-head p{
  margin:6px 0 0;color:#a8b6c9;
  font:500 13px/1.4 "Barlow",sans-serif;
}
.compare-draft-accent{display:flex;gap:5px;margin-top:12px}
.compare-draft-accent span{display:block;height:2px;border-radius:2px}
.compare-draft-accent span:first-child{width:46px;background:#d31335}
.compare-draft-accent span:last-child{width:18px;background:#4da3ff}

.compare-draft-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 14px;
}
.compare-draft-field{
  display:block;box-sizing:border-box;
  padding:11px 13px;
  border:1px solid #294d72;
  border-radius:9px;
  background:#091d37;
}
.compare-draft-field>span{
  display:block;margin:0 0 7px;
  color:#75b5ff;
  font:800 10px/1 "Barlow",sans-serif;
  letter-spacing:.1em;
}
.compare-draft-input-line{position:relative}
.compare-draft-input-line input{
  width:100%;min-height:40px;box-sizing:border-box;
  padding:8px 34px 8px 10px;
  border:1px solid #356795;border-radius:7px;
  outline:0;background:#061426;color:#fff;
  font:700 14px "Barlow",sans-serif;
  appearance:textfield;
}
.compare-draft-input-line input:focus{border-color:#55a9ff}
.compare-draft-input-line input::-webkit-inner-spin-button,
.compare-draft-input-line input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.compare-draft-input-line i{
  position:absolute;right:11px;top:50%;
  transform:translateY(-50%);
  color:#8eb9e8;pointer-events:none;
}
.compare-draft-run{
  min-height:42px;padding:0 18px;
  border:0;border-radius:9px;
  background:#d31335;color:#fff;
  font:800 12px "Barlow",sans-serif;
  letter-spacing:.02em;cursor:pointer;
}
.compare-draft-run:hover{filter:brightness(1.06)}
.compare-draft-results{margin-top:18px}
.compare-draft-results-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;border:1px solid #294d72;border-radius:10px 10px 0 0;
  background:#091d37;color:#fff;
}
.compare-draft-results-bar strong{display:block}
.compare-draft-results-bar small{display:block;margin-top:3px;color:#91a2b8}
.compare-draft-minimise{
  border:1px solid #294d72;border-radius:7px;
  background:#071a31;color:#aebdd0;padding:7px 10px;cursor:pointer;
}
.compare-draft-results-body{
  border:1px solid #294d72;border-top:0;border-radius:0 0 10px 10px;
  background:#071a31;
}

@media(max-width:767px){
  #draft-compare-mode{display:none!important}
}

@media(max-width:700px){
  body.compare-draft-active .comp-btn-wrap{
    width:calc(100% - 40px);
    margin:12px 20px 28px;
  }
}