/* Energy cost card and sheet (energy-cost.js); the card family of docs/sync-home-design.md: one big value, one thin
   visual, colour only on the figure (amber solar, green saved), grid in ink. */
.ec { display: grid; grid-template-rows: auto 1fr; gap: 6px; height: 100%; padding: 12px 14px 14px; min-width: 0; cursor: pointer }
.ec .ci2 { width: 30px; height: 30px } .ec .ci2 svg { width: 16px; height: 16px } .ec .ch2 { min-height: 30px; gap: 8px }
.ec-p { flex: none; font-size: 12.5px; color: var(--hi2); font-variant-numeric: tabular-nums }
.ec-m { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0 }
.ec-l { font-size: 12.5px; color: var(--hi2); font-weight: 500 }
.ec .bv { font-size: 30px; font-weight: 650 } .h2 .ec .bv { font-size: 32px }
.ec-bar { display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--amber) 55%, transparent); overflow: hidden }
.ec-bar i { display: block; height: 100%; background: var(--hi2); border-radius: 4px 0 0 3px }
.ec-f { font-size: 12.5px; color: var(--hi2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ec-f span { font-weight: 600 }
.ec.ec-w { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 22px } .ec.ec-w > .ch2 { grid-column: 1 / -1 }
.ec-d { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0 }
.ec-r { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 0 }
.ec-r b { font-weight: 600; color: var(--hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 } .ec-r span { flex: none; color: var(--hi) } .ec-r small { color: var(--hi2) }
.ec.ec-full { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr) }
.ec-y { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px } .ec-y span { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums }
.ec-y small { color: var(--hi2) } .ec-y b { font-weight: 600 }
@container (max-width: 520px) { .ec.ec-full { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) } .ec-y { display: none } }

.dpop-s.ec-sheet { width: min(760px, 100%); max-height: min(92vh, 900px); overflow-y: auto }
.ec-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px }
.ec-nav .seg { background: var(--toff) } .ec-nav .seg button { min-height: 40px; padding: 0 18px; font-size: 14px }
.ec-nv { display: flex; align-items: center; gap: 10px } .ec-nv b { min-width: 118px; text-align: center; font-size: 15px; font-weight: 650 } .ec-nv .round:disabled { opacity: .35; cursor: default }
.ec-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; padding: 4px 2px 6px }
.ec-g { display: flex; flex-direction: column; gap: 3px; min-width: 0 } .ec-g small { font-size: 12.5px; color: var(--hi2) }
.ec-g b { font-size: 20px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 2px 10px; font-size: 15px; font-weight: 700 }
.ec-st { display: flex; height: 10px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 12px } .ec-st i { display: block; height: 100% }
.ec-st .g, .ec-dot.g { background: var(--hi2) } .ec-st .s, .ec-dot.s { background: var(--amber) }
.ec-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px }
.ec-rr { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0 } .ec-rr span { flex: 1; color: var(--hi2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ec-rr b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap }
.ec-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; display: inline-block }
.ec-est { display: block; margin-top: 10px; font-size: 12px; color: var(--hi2) }
.ec-chh { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--hi2); margin-bottom: 8px; min-height: 18px; font-variant-numeric: tabular-nums }
.ec-lg { display: flex; align-items: center; gap: 6px } .ec-lg .ec-dot + .ec-dot, .ec-lg .ec-dot.s { margin-left: 8px }
.ec-ch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 150px; align-items: end }
.ec-ch.days { gap: 2px }
.ec-col { height: 100%; display: grid; grid-template-rows: 1fr 18px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--hi2); font: inherit; min-width: 0 }
.ec-b { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; border-radius: 4px }
.ec-b i { display: block; flex: 1; max-width: 16px; min-height: 0; border-radius: 4px 3px 1px 1px } .ec-b .g { background: var(--hi2) } .ec-b .s { background: var(--amber) }
.ec-col.on .ec-b { background: color-mix(in srgb, var(--hi) 7%, transparent) } .ec-col small { font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums }
.ec-tb { display: flex; flex-direction: column; gap: 10px }
.ec-tr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; align-items: baseline }
.ec-tr b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ec-tr span { text-align: right; white-space: nowrap } .ec-tr .ec-gr { color: var(--hi2) }
.ec-add { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px } .ec-add svg { width: 16px; height: 16px }
.ec-pl { display: flex; flex-direction: column; gap: 14px }
.ec-pu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center }
.ec-pu > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .ec-pu b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums }
.ec-pu small { font-size: 12.5px; color: var(--hi2); font-variant-numeric: tabular-nums }
.ec-pa { display: flex; gap: 8px; align-items: center } .ec-pa .btn { min-height: 44px; font-size: 14px }
.ec-pill { grid-column: 1 / -1; justify-self: start; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--a-amber); font-weight: 600 }
.ec-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--hi) 4%, transparent); margin-bottom: 12px }
.ec-form details, .ec-form .ec-ck, .ec-form .ec-fa, .ec-form .err { grid-column: 1 / -1 }
.ec-form summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hi2); min-height: 32px; display: flex; align-items: center }
.ec-fr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 8px }
.ec-form input { font-size: 16px; font-variant-numeric: tabular-nums; width: 100%; box-sizing: border-box }
.ec-ck { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px } .ec-ck input { width: 22px; height: 22px; flex: none }
.ec-fa { display: flex; justify-content: flex-end; gap: 10px } .ec-fa .btn { min-height: 44px } .ec-fa .btn.arm { background: var(--amber); color: var(--on-tone) }
@media (max-width: 600px) {
  .ec-figs { grid-template-columns: repeat(2, minmax(0, 1fr)) } .ec-rows { grid-template-columns: 1fr }
  .ec-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px } .ec-tr b { grid-area: 1 / 1 } .ec-tr span:nth-child(3) { grid-area: 1 / 2 }
  .ec-tr span:nth-child(2) { grid-area: 2 / 1; text-align: left; color: var(--hi2); font-size: 12.5px } .ec-tr .ec-gr { grid-area: 2 / 2; font-size: 12.5px }
  .ec-pu { grid-template-columns: 1fr } .ec-pa { justify-content: flex-end }
  .ec-form, .ec-fr { grid-template-columns: repeat(2, minmax(0, 1fr)) } .ec-form > label:first-child { grid-column: 1 / -1 }
  .ec-ch { height: 130px }
}
/* the units card's amount paid and receipt */
.tu.buy .tu-p { gap: 8px } .tu.buy .tu-p .tu-x { min-height: 44px }
.tu-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.tu-r input { min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--toff); color: var(--hi); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; outline: none }
.w4 .tu.buy { display: flex } .w4 .tu.buy .tu-f { align-self: stretch }
@media (max-width: 600px) { .tu.buy .tu-f:last-child { flex-direction: column } .tu.buy .tu-f:last-child input { flex: none } .tu.buy .tu-f:last-child .tu-b { width: 100% } }