/* VV-ECMO multi-score — scoped widths & alignment atop cc-orange-card.css */
#vv-ecmo-multiscore{
  /* Desktop sizing */
  --toggle-btn-width:6.75ch;
  --toggle-gap:8px;
  --toggle-total:calc(2*var(--toggle-btn-width) + var(--toggle-gap));

  /* Right column & control widths */
  --field-width:max(14rem, var(--toggle-total));
  --input-width:calc(var(--toggle-total) + 0.5rem);

  /* EXACT width matching:
     - split-pill groups = inputs
     - single wide toggles = inputs
     (dropdown remains the only exception: uses full right column width) */
  --toggle-group-width:var(--input-width);
  --single-toggle-width:var(--input-width);
}

/* Fix right column to the specified width and hard-right align its content */
#vv-ecmo-multiscore .cc-right,
#vv-ecmo-multiscore .cc-right-btn,
#vv-ecmo-multiscore .cc-right-span{
  flex:0 0 var(--field-width);
  justify-content:flex-end;
  align-items:center;
}

/* Inputs: exact width + larger font for readability */
#vv-ecmo-multiscore input[type="text"]{
  width:var(--input-width); flex:0 0 var(--input-width);
  text-align:right; box-sizing:border-box;
  height:var(--cc-control-h);
  font-size:1.05rem;              /* ↑ a touch bigger */
  line-height:1.15;
}

/* Select (RESP Dx) is the only exception: fills the right column */
#vv-ecmo-multiscore #respDx{
  width:var(--field-width); flex:0 0 var(--field-width);
  text-align-last:right; height:var(--cc-control-h);
}

/* Two-button toggles match height and right alignment, and
   now use the exact same width as the inputs via --toggle-group-width */
#vv-ecmo-multiscore .cc-right-btn .cc-buttonset{
  width:var(--toggle-group-width);
  align-items:stretch;
}
#vv-ecmo-multiscore .cc-buttonset button{
  height:var(--cc-control-h);
}

/* Single wide toggle uses the same width & height as inputs */
#vv-ecmo-multiscore .cc-right-btn .cc-single-toggle{
  width:var(--single-toggle-width);
}
#vv-ecmo-multiscore .cc-single-toggle button{
  height:var(--cc-control-h);
}

/* Results grid (names left, score centred, interpretation trailing) */
#vv-ecmo-multiscore .cc-result-line{
  display:grid; grid-template-columns:1fr 120px 1fr; align-items:center;
}

/* ---------- Responsive widths ---------- */
@media (max-width:900px){
  #vv-ecmo-multiscore{
    --toggle-btn-width:6.5ch;
    --toggle-total:calc(2*var(--toggle-btn-width) + var(--toggle-gap));
    --field-width:max(12.5rem, var(--toggle-total));
    --input-width:calc(var(--toggle-total) + 0.5rem);
    --toggle-group-width:var(--input-width);
    --single-toggle-width:var(--input-width);
  }
}
@media (max-width:600px){
  #vv-ecmo-multiscore{
    --toggle-btn-width:6.0ch;
    --toggle-total:calc(2*var(--toggle-btn-width) + var(--toggle-gap));
    --field-width:max(10.75rem, var(--toggle-total));
    --input-width:calc(var(--toggle-total) + 0.5rem);
    --toggle-group-width:var(--input-width);
    --single-toggle-width:var(--input-width);
  }
}
@media (max-width:420px){
  #vv-ecmo-multiscore{
    --toggle-btn-width:5.6ch; --toggle-gap:6px;
    --toggle-total:calc(2*var(--toggle-btn-width) + var(--toggle-gap));
    --field-width:max(9.5rem, var(--toggle-total));
    --input-width:calc(var(--toggle-total) + 0.5rem);
    --toggle-group-width:var(--input-width);
    --single-toggle-width:var(--input-width);
  }
}