/* ECMO + iNO oxygen fraction — APRV-era compact interface.
   Scoped to the calculator host supplied by CCI Calculators Core. */

.cc-card .ino-panel{
  margin:4px 0 14px;
  padding:16px;
  background:#fff;
  border:1px solid var(--cc-line);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(39,55,71,.04);
}

.cc-card .ino-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.cc-card .ino-eyebrow{
  margin-bottom:3px;
  color:var(--cc-muted-text);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.cc-card .ino-panel h3{
  margin:0;
  font-size:1.02rem;
  line-height:1.25;
}

.cc-card .ino-source-pill{
  flex:none;
  min-width:72px;
  padding:7px 9px;
  color:#844020;
  background:#FFF2E9;
  border:1px solid #E8C7B3;
  border-radius:13px;
  text-align:center;
  line-height:1.15;
}

.cc-card .ino-source-pill strong{
  display:block;
  font-size:1.18rem;
}

.cc-card .ino-source-pill span{
  display:block;
  margin-top:1px;
  font-size:.66rem;
}

.cc-card .ino-control-list{
  display:grid;
}

.cc-card .ino-control{
  min-width:0;
  padding:13px 0 11px;
  border-top:1px solid var(--cc-line);
}

.cc-card .ino-control:first-child{
  border-top:0;
}

.cc-card .ino-control-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:2px;
}

.cc-card .ino-control-top label{
  min-width:0;
  color:var(--cc-text);
  font-weight:650;
}

.cc-card .ino-entry{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:none;
  color:var(--cc-muted-text);
  font-size:.88rem;
  white-space:nowrap;
}

.cc-card .ino-entry input[type="number"]{
  width:6.2ch;
  min-height:42px;
  padding:6px 7px;
  text-align:right;
  font-size:1rem;
  font-weight:650;
}

.cc-card .ino-control input[type="range"]{
  width:100%;
  height:34px;
  margin:2px 0 0;
}

.cc-card .ino-scale{
  display:flex;
  justify-content:space-between;
  margin-top:-3px;
  color:var(--cc-muted-text);
  font-size:.68rem;
  line-height:1;
}

.cc-card .ino-result-card{
  margin:0 0 14px;
  padding:18px;
  color:var(--cc-heading);
  background:#FFF8F1;
  border:1px solid #E7D9CC;
  border-radius:16px;
  box-shadow:0 4px 18px rgba(39,55,71,.05);
}

.cc-card .ino-result-label{
  color:#8B4C2C;
  font-size:.7rem;
  font-weight:760;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.cc-card .ino-result-value{
  margin:3px 0 2px;
  font-size:clamp(2.7rem,11vw,4.2rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}

.cc-card .ino-result-value small{
  margin-left:4px;
  font-size:.42em;
  font-weight:600;
  letter-spacing:0;
}

.cc-card .ino-result-summary{
  color:var(--cc-muted-text);
  font-size:.82rem;
  line-height:1.4;
}

.cc-card .ino-result-divider{
  height:1px;
  margin:15px 0 11px;
  background:#E8DCCE;
}

.cc-card .ino-secondary-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

.cc-card .ino-metric{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:8px 0;
  border-top:1px solid #EADFD4;
}

.cc-card .ino-metric:first-child{
  border-top:0;
}

.cc-card .ino-metric span{
  min-width:0;
  color:var(--cc-muted-text);
  font-size:.8rem;
}

.cc-card .ino-metric strong{
  flex:none;
  font-size:.88rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.cc-card .ino-status:not([hidden]){
  display:grid;
  gap:3px;
  margin:0 0 14px;
  padding:11px 13px;
  color:#9B3030;
  background:#FFF0EF;
  border:1px solid #EFC9C5;
  border-radius:11px;
  font-size:.84rem;
}

.cc-card .ino-method{
  margin:0 0 2px;
  padding:12px 13px;
  background:#F3F6F6;
  border:1px solid #E4E9E9;
  border-radius:12px;
}

.cc-card .ino-method-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.cc-card .ino-method-row > div{
  display:grid;
  min-width:0;
}

.cc-card .ino-method-row > div strong{
  font-size:.84rem;
}

.cc-card .ino-method-row > div span{
  color:var(--cc-muted-text);
  font-size:.72rem;
}

.cc-card .ino-method-row > strong{
  flex:none;
  color:#875127;
  font-size:.86rem;
  white-space:nowrap;
}

.cc-card .ino-method p{
  margin:8px 0 0;
  color:var(--cc-muted-text);
  font-size:.75rem;
  line-height:1.42;
}

@media (min-width:520px){
  .cc-card .ino-panel{
    padding:18px 20px;
  }

  .cc-card .ino-secondary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }

  .cc-card .ino-metric{
    display:grid;
    gap:3px;
    padding:0 12px;
    border-top:0;
    border-left:1px solid #EADFD4;
  }

  .cc-card .ino-metric:first-child{
    padding-left:0;
    border-left:0;
  }

  .cc-card .ino-metric:last-child{
    padding-right:0;
  }
}

@media (max-width:359px){
  .cc-card .ino-panel,
  .cc-card .ino-result-card{
    padding:14px;
  }

  .cc-card .ino-source-pill{
    min-width:66px;
  }

  .cc-card .ino-control-top{
    gap:8px;
  }

  .cc-card .ino-entry{
    gap:5px;
  }

  .cc-card .ino-entry input[type="number"]{
    width:5.8ch;
  }
}