section.common.calc h2
{
   font-size:2.5rem;
}

section.common.calc form label input[type="number"]::-webkit-outer-spin-button,
section.common.calc form label input[type="number"]::-webkit-inner-spin-button
{
   -webkit-appearance:none;
}

section.common.calc form label input[type='number'],
section.common.calc form label input[type="number"]:hover,
section.common.calc form label input[type="number"]:focus
{
   appearance:none;
   -moz-appearance:textfield;
}

section.common.calc form label.hybrid_input
{
   position:relative;
}

section.common.calc form label.hybrid_input>.data_field
{
   position:absolute;
   left:0;
   bottom:0;
   right:0;
   padding:0 4em 0 1.1em;
   grid-template-columns:min-content 1fr;
   border-color:transparent;
   opacity:0.6;
   z-index:0;
}
section.common.calc form label.hybrid_input:has(.user_input>input:placeholder-shown)>.data_field
{
   display:none;
}

section.common.calc form label.hybrid_input>.data_field>input
{
   min-width:0;
   margin-right:-2ex;
   padding:0;
}
section.common.calc form label.hybrid_input>.data_field>.unit
{
   padding-right:0;
}

section.common.calc form label.hybrid_input>.user_input
{
   background:none transparent;
   z-index:1;
}

section.common.calc form label.hybrid_input>.user_input>input
{
   font-size:150%;
   font-weight:600;
   text-align:right;
   background:none transparent;
}

section.common.calc form input:disabled,.input_w_unit:has(input:disabled),.select_wrap:has(select:disabled)
{
   background-color:var(--light-grey);
}

/* --- Results --- */
section.common.calc .display .monitors>.group ul>li.item:has(.cost)
{
   grid-template:'c s v u t'/auto minmax(1em,1fr) auto auto auto;
}

section.common.calc .display .monitors .item>.value
{
   font-weight:600;
}

section.common.calc .display .monitors .item>.cost
{
   grid-area:t;
   font-weight:600;
   white-space:nowrap;
   color:var(--blue);
}

section.common.calc .display .monitors .group.summary .item>.value:not(:empty)::before
{
   content:'~';
   display:inline;
   font-weight:normal;
}