/* Calculator-specific layout exceptions for Tube Geometry & Flow.
 * Shared card, slider, button, section and general input styling remains in
 * CC-OrangeCard / the CCI Calculators Core.
 */

/* Editable diameter conversions: keep the familiar equation-like line on
 * wider screens, but group each input with its unit so it can reflow cleanly.
 */
.cci-tube-geometry .cci-size-conversion-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  box-sizing:border-box;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.cci-tube-geometry .cci-size-pair{
  display:inline-grid;
  grid-template-columns:auto max-content;
  align-items:center;
  gap:4px;
  min-width:0;
  font-weight:inherit;
}

.cci-tube-geometry .cci-size-pair input[type="number"]{
  width:5.6ch;
  min-width:0;
  box-sizing:border-box;
  min-height:var(--cc-control-h,34px);
  padding:3px 4px;
  text-align:right;
  font:inherit;
  font-size:.92rem;
}

.cci-tube-geometry .cci-size-pair input[data-unit="in"]{
  width:6.2ch;
}

.cci-tube-geometry .cci-size-equals{
  opacity:.7;
}

/* Centre the ID/OD and Wall controls below their headings. */
.cci-tube-geometry .cci-centred-control > div{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
}

.cci-tube-geometry .cci-centred-control .cc-right-btn{
  margin:0 auto;
  justify-content:center;
}

/* Wall thickness is a compact label / value / unit row rather than the
 * full-width clinical three-column row, which is too widely separated here.
 */
.cci-tube-geometry .cci-compact-row{
  display:grid;
  grid-template-columns:max-content 10ch max-content;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:14px 0;
}

.cci-tube-geometry .cci-compact-row label,
.cci-tube-geometry .cci-compact-row input,
.cci-tube-geometry .cci-compact-row .cc-unit{
  flex:none;
}

.cci-tube-geometry .cci-compact-row label{
  min-width:0;
}

.cci-tube-geometry .cci-compact-row .cc-unit{
  display:block;
  text-align:left;
}

/* Browser number-input normalisation for the compact conversion row only. */
.cci-tube-geometry .cci-size-pair input[type="number"]{
  -moz-appearance:textfield;
}
.cci-tube-geometry .cci-size-pair input[type="number"]::-webkit-outer-spin-button,
.cci-tube-geometry .cci-size-pair input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Phone layout: use a clean 2 x 2 unit grid rather than letting a long
 * equation line overflow the calculator card. The equals signs are omitted
 * only at this breakpoint; the four linked measurements remain obvious and
 * editable, and their alignment is stable as values change.
 */
@media (max-width:520px){
  .cci-tube-geometry .cci-size-conversion-line{
    display:grid;
    grid-template-columns:repeat(2,max-content);
    justify-content:center;
    align-items:center;
    gap:8px 16px;
    white-space:normal;
    margin-bottom:10px;
  }

  .cci-tube-geometry .cci-size-equals{
    display:none;
  }

  .cci-tube-geometry .cci-size-pair{
    grid-template-columns:6.2ch max-content;
    justify-content:start;
  }

  .cci-tube-geometry .cci-size-pair input[type="number"],
  .cci-tube-geometry .cci-size-pair input[data-unit="in"]{
    width:6.2ch;
    min-height:34px;
    padding:3px 4px;
    font-size:.9rem;
  }

  .cci-tube-geometry .cci-centred-control .cc-slider-title{
    max-width:19rem;
    margin-left:auto;
    margin-right:auto;
  }

  .cci-tube-geometry .cci-compact-row{
    grid-template-columns:max-content 7.5ch max-content;
    gap:6px;
  }

  .cci-tube-geometry .cci-compact-row input[type="number"]{
    width:7.5ch;
    flex:none;
  }
}