/* Working hours tool: reserve room for the result so nothing shifts when the script fills it. */
/* Heights fit both the server sentence and the script's two lines (root is 14.6px below 922px). */
#hmbd-hours-out { min-height: 4.2rem; }
#hmbd-hours-extra { min-height: 1.6em; font-size: 0.92em; }
@media (max-width: 767px) { #hmbd-hours-extra { min-height: 2.9rem; } }
@media (max-width: 480px) { #hmbd-hours-out { min-height: 5.85rem; } }
@media (max-width: 359px) { #hmbd-hours-out { min-height: 7.4rem; } #hmbd-hours-extra { min-height: 4.3rem; } }
/* Fields: one <p> with label/control pairs. Wide: labels above controls in a 4-column grid (2 x 2
   on tablets); phones keep the stacked column from hmbd.css. */
@media (min-width: 545px) {
  #hmbd-hours-tool > p:first-child { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.3em 1em; align-items: end; }
  #hmbd-hours-tool > p:first-child > input, #hmbd-hours-tool > p:first-child > select { width: 100%; }
}
@media (min-width: 545px) and (max-width: 760px) {
  #hmbd-hours-tool > p:first-child { grid-template-rows: auto auto auto auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 544px) {
  #hmbd-hours-tool > p:first-child > label:not(:first-child) { margin-top: 0.45em; }
}