/* Pay period calculator (/pay-period-calculator/). Builds on .hmbd-tool / .hmbd-table in hmbd.css. */
.hmbd-pp-fields { display: grid; align-items: end; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: 0.75em 1em; margin: 0 0 1em; }
.hmbd-pp-fields .hmbd-pp-field { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.hmbd-pp-fields .hmbd-pp-field[hidden] { display: none; }
.hmbd-pp-fields label { font-weight: 600; font-size: 0.9em; }
.hmbd-tool .hmbd-pp-fields input, .hmbd-tool .hmbd-pp-fields select { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 480px) { .hmbd-pp-fields { grid-template-columns: minmax(0, 1fr); } }
/* Reserve the height of the script's default result (next payday, two year lines, two collapsed
   lists, note) so the server text being replaced shifts nothing. Root font is 14.6px below 922px. */
#pp-result { min-height: 18.75rem; }
@media (max-width: 1023px) { #pp-result { min-height: 22rem; } }
@media (max-width: 767px) { #pp-result { min-height: 25.25rem; } }
@media (max-width: 480px) { #pp-result { min-height: 31.5rem; } }
@media (max-width: 359px) { #pp-result { min-height: 36.5rem; } }
#pp-result > p { margin: 0 0 0.6em; }
.hmbd-pp-years { margin: 0 0 0.8em 1.1em; padding: 0; }
.hmbd-pp-years li + li { margin-top: 0.35em; }
.hmbd-pp-list { margin: 0.5em 0; border: 1px solid var(--ast-global-color-6); border-radius: 6px; background: var(--ast-global-color-5); }
.hmbd-pp-list summary { cursor: pointer; padding: 0.6em 0.9em; font-weight: 600; }
.hmbd-pp-list[open] summary { border-bottom: 1px solid var(--ast-global-color-6); }
.hmbd-pp-list .hmbd-table-wrap { margin: 0; }
.hmbd-pp-list .hmbd-table { margin: 0; font-size: 0.92em; }
.hmbd-pp-list tr.hmbd-pp-moved td { font-weight: 600; }
.hmbd-pp-note { font-size: 0.92em; color: var(--ast-global-color-3); }