.mos-electricity-calculator {
    --mos-accent: #22643b;
    --mos-border: #cbd5d1;
    max-width: 72rem;
    margin: 2rem auto;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--mos-border);
    border-radius: .75rem;
    background: #f7faf8;
    color: #17211b;
}

.mos-electricity-calculator .mos-calculator__title { margin-top: 0; }
.mos-electricity-calculator__devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.mos-electricity-calculator__device { min-width: 0; padding: 1rem; border: 1px solid var(--mos-border); border-radius: .5rem; background: #fff; }
.mos-electricity-calculator__device legend { padding: 0 .35rem; font-weight: 750; }
.mos-electricity-calculator__device.is-disabled [data-mos-device-fields] { opacity: .5; }
.mos-electricity-calculator .mos-calculator__toggle { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font-weight: 650; }
.mos-electricity-calculator .mos-calculator__toggle input { width: 1.2rem; height: 1.2rem; }
.mos-electricity-calculator .mos-calculator__field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.mos-electricity-calculator .mos-calculator__field { display: grid; gap: .3rem; }
.mos-electricity-calculator label { font-weight: 650; }
.mos-electricity-calculator input { width: 100%; min-height: 2.65rem; padding: .5rem .6rem; border: 1px solid #6b7971; border-radius: .35rem; background: #fff; color: inherit; }
.mos-electricity-calculator__rate { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) auto; align-items: end; gap: .8rem; margin-top: 1.25rem; }
.mos-electricity-calculator .mos-calculator__field--compact { min-width: 0; }
.mos-electricity-calculator .mos-calculator__button { min-height: 2.75rem; padding: .65rem 1rem; border: 2px solid var(--mos-accent); border-radius: .35rem; background: var(--mos-accent); color: #fff; font-weight: 700; cursor: pointer; }
.mos-electricity-calculator :is(input, button):focus-visible { outline: 3px solid #075985; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.mos-electricity-calculator .mos-calculator__error { padding: .75rem; border-left: 4px solid #a61b1b; background: #fff0f0; color: #761414; }
.mos-electricity-calculator .mos-calculator__result { margin-top: 1.25rem; padding: 1rem; border-left: 4px solid var(--mos-accent); background: #fff; }
.mos-electricity-calculator .mos-calculator__result-title { margin-top: 0; }
.mos-electricity-calculator .mos-calculator__table-wrap { overflow-x: auto; }
.mos-electricity-calculator .mos-calculator__table { width: 100%; border-collapse: collapse; }
.mos-electricity-calculator .mos-calculator__table :is(th, td) { padding: .55rem; border-bottom: 1px solid var(--mos-border); text-align: left; }
.mos-electricity-calculator .mos-calculator__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.mos-electricity-calculator .mos-calculator__metrics div { padding: .65rem; background: #eef5f0; }
.mos-electricity-calculator .mos-calculator__metrics :is(dt, dd) { margin: 0; }
.mos-electricity-calculator .mos-calculator__metrics dt { font-size: .9em; }
.mos-electricity-calculator .mos-calculator__metrics dd { margin-top: .2rem; font-size: 1.1em; font-weight: 750; }
.mos-electricity-calculator .mos-calculator__fine-print { font-size: .9em; }

@media (max-width: 35rem) {
    .mos-electricity-calculator .mos-calculator__field-grid { grid-template-columns: 1fr; }
	.mos-electricity-calculator__rate { grid-template-columns: 1fr; align-items: stretch; }
}

@media (min-width: 35.01rem) and (max-width: 62rem) {
	.mos-electricity-calculator__rate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}