/* scene 6: what a household gets */
.hh { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.hh-controls { display: grid; gap: 26px; }
.hh-field { display: grid; gap: 10px; }
.hh-field > span { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color); }
.hh-field select { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 8px 28px 8px 0; font-size: 1.15rem; color: var(--ink); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; max-width: 340px; }
.hh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-out { min-width: 0; }
.hh-sum { display: flex; align-items: baseline; gap: 14px; }
.hh-total { font-size: var(--s-num); color: var(--blue); line-height: .9; }
.hh-per { font-size: var(--s-lead); color: var(--ink-2); }
.hh-what { margin: 12px 0 0; color: var(--ink-2); font-size: var(--s-small); max-width: 36rem; }
.hh-bars { width: 100%; height: clamp(170px, 26vh, 250px); margin-top: 22px; overflow: visible; }
.hh-bars rect { fill: var(--blue-2); transform-box: fill-box; transform-origin: 50% 100%; transition: fill .2s; cursor: pointer; }
.hh-bars .bar.sel rect { fill: var(--blue); }
.hh-bars .bar:hover rect { fill: var(--blue); }
.hh-bars text { font-family: var(--text); font-size: 12px; text-anchor: middle; fill: var(--ink-3); }
.hh-bars .bar.sel text { fill: var(--ink); font-weight: 600; }
.hh-lines { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.hh-lines li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto 3em; gap: 12px; align-items: center; height: 38px; border-bottom: 1px solid var(--grey-2); font-size: var(--s-small); }
.hh-lines .l { color: var(--ink); white-space: nowrap; }
.hh-lines .pr { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.hh-lines .a { font-family: var(--text); font-weight: 600; font-feature-settings: "kern" 1, "tnum" 1; font-size: 1rem; color: var(--ink); text-align: right; }
.hh-lines a { color: var(--ink-3); text-decoration: none; text-align: right; }
.hh-lines a:hover { color: var(--blue); }
.hh-lines .tot { border-bottom: 0; }
.hh-lines .tot .l { font-weight: 600; }
.hh-lines .tot .a { color: var(--blue); }
@media (max-width: 860px) {
  .hh { grid-template-columns: 1fr; }
  .hh-lines .pr { display: none; }
  .hh-lines li { grid-template-columns: minmax(0, 1fr) auto 2.6em; }
}