/* =====================================================================
   Running a model yourself — page-specific styles.
   The size strip, the bandwidth formula, and the fit calculator.
   ===================================================================== */

.sizeRow{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 4px}
.sizeRow span{
  flex:1 1 190px; padding:8px 11px; border-radius:9px; font-size:11.5px; line-height:1.45;
  background:rgba(46,208,192,.09); border:1px solid rgba(94,236,208,.26); color:var(--muted);
}
.sizeRow b{display:block; font-family:var(--mono); font-size:12.5px; color:var(--b); margin-bottom:2px}

.formula{
  margin:14px 0; padding:12px 15px; border-radius:10px; text-align:center;
  background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.32);
  font-family:var(--mono); font-size:13px; color:#DDD6FE;
}

/* ---------- the calculator ---------- */
.fitLab{display:grid; grid-template-columns:240px minmax(0,1fr) 240px; gap:14px; align-items:start}
@media (max-width:1080px){ .fitLab{grid-template-columns:1fr} }
.fitLab > *{min-width:0}

.fitSide{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:14px}
.fitMain{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:16px;
  min-width:0;
}

.f{display:block; margin-bottom:11px}
.f > span{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:5px;
}
.f select,.f input[type=number]{
  width:100%; background:rgba(6,14,22,.85); color:var(--text); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px; font-family:var(--mono); font-size:11.5px;
}
.f select:focus,.f input:focus{outline:none; border-color:rgba(94,236,208,.55)}
.f input[type=range]{width:100%; accent-color:var(--b); cursor:pointer}
.fVal{display:block; font-size:11px; color:var(--muted2); margin-top:3px}
.fVal b{color:var(--b); font-family:var(--mono)}
.chk{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; cursor:pointer}
.chk input{accent-color:var(--b); width:15px; height:15px; cursor:pointer; flex:0 0 auto}

/* verdict */
.fitVerdict{
  border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin-bottom:14px;
  font-size:13px; line-height:1.55; color:var(--muted); background:rgba(3,7,12,.6);
}
.fitVerdict b{color:#fff}
.fitVerdict.good{border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.11); color:#A7F3D0}
.fitVerdict.tight{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.1); color:#FDE68A}
.fitVerdict.bad{border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.1); color:#FCA5A5}

/* the bar */
.fitBarWrap{margin-bottom:12px}
.fitBar{
  position:relative; display:flex; height:34px; border-radius:9px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.fitBar span{display:block; height:100%; transition:width .3s var(--ease); min-width:0}
.bW{background:linear-gradient(180deg,rgba(46,208,192,.85),rgba(46,208,192,.6))}
.bK{background:linear-gradient(180deg,rgba(167,139,250,.85),rgba(167,139,250,.6))}
.bO{background:linear-gradient(180deg,rgba(147,197,253,.7),rgba(147,197,253,.45))}
.limit{
  position:absolute; top:-3px; bottom:-3px; width:2px; background:#FCA5A5;
  box-shadow:0 0 0 1px rgba(3,7,12,.8); transition:left .3s var(--ease);
}
.limit::after{
  content:'limit'; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; color:#FCA5A5; white-space:nowrap;
}
.fitScale{display:flex; justify-content:space-between; margin:5px 0 0; font-family:var(--mono);
  font-size:9.5px; color:var(--muted2)}

.legend{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px}
.legend li{display:flex; align-items:center; gap:6px; color:var(--muted2)}
.legend li b{color:var(--text); font-family:var(--mono); font-size:11px}
.legend li.tot{margin-left:auto; color:var(--muted)}
.legend li.tot b{color:var(--b)}
.sw{width:10px; height:10px; border-radius:3px; display:block; flex:0 0 auto}

/* speed */
.speedRow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .speedRow{grid-template-columns:1fr} }
.speedBox{border:1px solid var(--line); border-radius:10px; background:rgba(3,7,12,.55); padding:11px 13px}
.speedBox .sideT{margin:0 0 6px}
.bigNum{margin:0; font-family:var(--mono); font-size:23px; font-weight:700; color:var(--b); line-height:1.1}
.bigNum.slow{color:#FDE68A}
.bigNum.bad{color:#FCA5A5}
.smallNote{margin:5px 0 0; font-size:10.5px; color:var(--muted2); line-height:1.45}

.fmNotes{list-style:none; margin:0; padding:0; font-size:11.5px}
.fmNotes li{
  position:relative; padding:5px 0 5px 15px; color:var(--muted2); line-height:1.5;
  animation:fade .3s var(--ease);
}
.fmNotes li::before{content:'›'; position:absolute; left:2px; color:var(--b)}
.fmNotes li.good::before{content:'✓'; color:#6EE7B7}
.fmNotes li.warn::before{content:'!'; color:#FDE68A}
.fmNotes li.warn{color:#FDE68A}
.fmNotes li b{color:var(--text)}