[data-solar-case-form] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-width: 60rem; }
[data-solar-case-form][hidden] { display: none; }
[data-solar-case-form] label { display: grid; gap: .45rem; min-width: 0; font-weight: 600; line-height: 1.5; }
[data-solar-case-form] input,
[data-solar-case-form] select,
[data-solar-case-form] textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: .75rem; border: 1px solid #758078; border-radius: .35rem; background: #fff; color: #17241f; font: inherit; font-weight: 400; }
[data-solar-case-form] textarea { resize: vertical; }
[data-solar-case-form] fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1rem; border: 1px solid #758078; border-radius: .4rem; min-width: 0; }
[data-solar-case-form] legend { padding: 0 .25rem; font-weight: 600; }
[data-solar-case-form] .button { justify-self: start; }
[data-solar-case-form] .button:disabled { opacity: .6; cursor: not-allowed; }
[data-solar-case-form] .solar-case-confirmation { border: 1px solid #758078; border-radius: .4rem; padding: 1rem; }
[data-solar-case-form] .solar-case-confirmation .button { margin: .35rem .5rem .35rem 0; max-width: 100%; white-space: normal; }
[data-solar-case-form] [hidden] { display: none; }
@media (min-width: 768px) {
  [data-solar-case-form] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-solar-case-form] fieldset { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-solar-case-form] .solar-case-wide,
  [data-solar-case-form] .form-status { grid-column: 1 / -1; }
}

/* Energy-flow diagram: solar charge to staged night dimming (dimming-programme section) */
.energy-flow-figure { margin: 2.5rem 0 0; }
.energy-flow-scroll { overflow-x: auto; padding-block: .3rem; }
.energy-flow { display: flex; align-items: stretch; gap: .3rem; min-width: max-content; }
.energy-flow-node,
.energy-flow-stage { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 8rem; padding: 1rem .7rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.energy-flow-icon { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.energy-flow-battery-icon { width: 3.25rem; height: auto; }
.energy-flow-node-label { margin: 0; font-size: .82rem; line-height: 1.35; }
.energy-flow-node-label strong { display: block; color: var(--ink); font-size: .92rem; }
.energy-flow-node-label span { color: var(--muted); }
.energy-flow-arrow { align-self: center; flex: none; color: var(--sage); font-size: 1.3rem; line-height: 1; }
.energy-flow-stages { display: flex; gap: .3rem; }
.energy-flow-stage-figure { margin: 0; font-weight: 700; color: var(--night); font-size: .95rem; }
.energy-flow-stage-figure span { display: block; margin-top: .15rem; color: var(--teal); font-weight: 600; font-size: .85rem; }
.energy-flow-stage--100 .energy-flow-icon { opacity: 1; }
.energy-flow-stage--70 .energy-flow-icon { opacity: .75; }
.energy-flow-stage--50 .energy-flow-icon { opacity: .55; }
.energy-flow-stage--30 .energy-flow-icon { opacity: .35; }

@media (max-width: 460px) {
  .energy-flow-node,
  .energy-flow-stage { width: 6.75rem; padding: .8rem .5rem; }
  .energy-flow-icon,
  .energy-flow-battery-icon { width: 2.6rem; }
}