@layer components{.time-calculator{& .time-calculator__rows{margin:0}& .time-calculator__row{display:flex;gap:var(--space-s);align-items:center;justify-content:space-between;padding-block:var(--space-xs);border-block-end:1px solid var(--color-border)}& dt{flex-shrink:0}& dd{display:flex;gap:var(--space-s);align-items:center;margin:0}& .time-calculator__value{min-inline-size:4ch;font-size:var(--size-step-1);text-align:end}& .time-calculator__range{inline-size:min(100%,12rem);accent-color:var(--color-on-band);cursor:pointer}& [data-total=true]{padding-block-start:var(--space-m);border-block-end:0;& dt{font-size:var(--size-step-1)}}& .time-calculator__total{font-size:var(--size-step-3);line-height:1}& .time-calculator__note{margin-block-start:var(--space-s)}& .time-calculator__monthly{font-weight:600}}}