.sup-value-field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sup-value-field-box {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg);
    color: var(--sup-text);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere
}

.sup-choice-field>.sup-select {
    width: 100%
}

.sup-choice-field>.sup-select .sup-field--select {
    width: 100%
}

.sup-choice-field>.sup-select .sup-field-selval {
    justify-content: space-between;
    width: 100%
}

.sup-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 9px 9px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm)
}

.sup-field-group-title {
    color: var(--sup-text-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sup-field-group-rows {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sup-field-input.is-locked {
    cursor: default;
    opacity: .4
}

.sup-field-input.is-locked .sup-num {
    display: inline-block;
    width: 52px;
    text-align: right
}

.sup-props .sup-field .sup-field-input.is-locked:hover {
    border-color: var(--sup-border)
}

.sup-edge-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0
}

.sup-edge-group-title {
    margin: 0;
    color: var(--sup-text-dim);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px
}

.sup-edge-panel-body {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-edge-panel .sup-edge-list {
    gap: 18px
}

.sup-edge-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-edge-panel .sup-edge-opt {
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2)
}

.sup-edge-panel .sup-edge-opt-name {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--sup-text)
}

.sup-edge-panel .sup-edge-opt-value {
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    color: var(--sup-text)
}

.sup-edge-opt--all {
    grid-template-columns: auto minmax(0, 1fr)
}

.sup-edge-opt--all .sup-edge-opt-name,
.sup-edge-panel .sup-edge-opt--all .sup-edge-opt-value {
    line-height: 14px
}

.sup-edge-panel .sup-edge-opt--all .sup-edge-opt-value {
    font-weight: 500;
    text-align: right
}

.sup-edge-opt--edge {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px
}

.sup-edge-opt--edge .sup-edge-opt-name {
    grid-area: 1 / 1
}

.sup-edge-opt--edge .sup-edge-opt-value {
    grid-area: 2 / 1
}

.sup-edge-opt-edited {
    grid-area: 1 / 2 / 3 / 3;
    align-self: center;
    color: var(--sup-accent);
    font-size: 11px;
    font-weight: 600
}

.sup .sup-edge-panel .sup-row-btn {
    min-height: 30px;
    padding: 0 10px
}

.sup-edge-panel-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.sup-edge-panel-sel-label {
    color: var(--sup-text-dim);
    font-size: 12px;
    line-height: 22px
}

.sup-edge-panel-sel-value {
    color: var(--sup-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 22px
}

.sup-edge-panel-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2)
}

.sup-edge-panel-fields .sup-field-input {
    width: 96px
}

.sup-edge-panel-fields .sup-num {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-weight: 500
}

.sup-sumt-branches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0 0 0 4px;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--sup-border);
    list-style: none
}

.sup-sumt-branch {
    min-width: 0
}

.sup-sumt-branch+.sup-sumt-branch {
    padding-top: 10px;
    border-top: 1px solid var(--sup-border)
}

.sup-sumt-mppt-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--sup-r-xs);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer
}

.sup-sumt-mppt-head:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    width: 10px;
    height: 1px;
    background: var(--sup-border)
}

.sup-sumt-mppt-head:hover {
    background: var(--sup-hover-soft)
}

.sup-sumt-mppt-head:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 1px
}

.sup-sumt-chev {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--sup-text-faint);
    transition: transform .16s var(--sup-ease-out)
}

.sup-sumt-branch:not(.is-open) .sup-sumt-chev {
    transform: rotate(-90deg)
}

.sup-sumt-mppt-head:hover .sup-sumt-chev {
    color: var(--sup-text-dim)
}

.sup-sumt-branch-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto
}

.sup-sumt-mppt-body {
    margin-top: 6px
}

.sup-sumt-act.sup-icon-btn {
    width: 22px;
    height: 22px;
    border-radius: var(--sup-r-xs)
}

.sup-sum-string .sup-sumt-act.sup-icon-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-danger) 14%, transparent);
    color: var(--sup-danger)
}

.sup-sumt-act.sup-icon-btn:disabled {
    cursor: not-allowed
}

@media(prefers-reduced-motion:reduce) {
    .sup-sumt-chev {
        transition: none
    }
}

.sup-system-group.sup-table-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon content" "actions actions";
    align-items: start;
    column-gap: 8px;
    row-gap: 11px;
    min-width: 0;
    padding: 8px 9px;
    background: var(--sup-surface-2);
    transition: background-color .14s ease, border-color .14s ease
}

.sup-table-group:hover {
    border-color: color-mix(in srgb, var(--sup-accent) 34%, var(--sup-border));
    background: color-mix(in srgb, var(--sup-accent) 7%, var(--sup-surface))
}

.sup-table-group-icon {
    grid-area: icon;
    flex: 0 0 auto;
    color: var(--sup-accent)
}

.sup-table-group-content {
    display: flex;
    grid-area: content;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    position: relative
}

.sup-table-group-name {
    overflow: hidden;
    color: var(--sup-text);
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-table-group-meta {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    color: var(--sup-text-faint);
    font-size: 9px;
    line-height: 1.35
}

.sup-table-group-meta>span {
    white-space: nowrap
}

.sup-table-group-meta-separator,
.sup-table-group-summary-separator {
    margin: 0 5px;
    color: var(--sup-text-faint)
}

.sup-table-group-highlight-cue {
    position: absolute;
    inset-block-start: calc(100% + 1px);
    inset-inline-start: 0;
    max-width: 100%;
    overflow: hidden;
    border-inline-start: 2px solid var(--sup-accent);
    padding-inline-start: 4px;
    color: var(--sup-text-dim);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .04em;
    line-height: 1.2;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity .14s ease;
    visibility: hidden;
    white-space: nowrap
}

.sup-table-group:hover .sup-table-group-highlight-cue {
    opacity: 1;
    visibility: visible
}

.sup-table-group-actions {
    display: flex;
    grid-area: actions;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    width: 100%
}

.sup-table-group-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 24px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 4px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg);
    color: var(--sup-text-dim);
    flex: 0 1 auto;
    font: inherit;
    font-size: 10px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease
}

.sup-table-group-action:hover:not(:disabled) {
    background: var(--sup-hover-soft);
    border-color: var(--sup-border-strong);
    color: var(--sup-text)
}

.sup-table-group-action:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-table-group-action:disabled {
    cursor: not-allowed;
    opacity: .52
}

.sup-table-group-action svg {
    flex: 0 0 auto;
    height: 12px;
    width: 12px
}

.sup-table-group-action-label {
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: start;
    text-overflow: ellipsis;
    white-space: normal
}

.sup-table-group-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    margin: -2px 0 1px;
    color: var(--sup-text-dim);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4
}

@media(prefers-reduced-motion:reduce) {
    .sup-table-group,
    .sup-table-group-highlight-cue,
    .sup-table-group-action {
        transition: none
    }
}

.sup-battery-nav-card {
    background: var(--sup-surface);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md)
}

.sup-battery-nav-card--back .sup-storage-button {
    display: block;
    min-height: 44px;
    background: transparent;
    border: 0
}

.sup-battery-nav-card--configure {
    padding: 12px
}

.sup-battery-nav-card .sup-storage-button {
    width: 100%
}

.sup-battery-nav-card .sup-storage-button:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: -2px
}

.sup-battery-pane .sup-system-card-actions {
    padding-top: 0
}

.sup-battery-pane,
.sup-storage-card {
    padding: 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-lg);
    background: var(--sup-surface);
    color: var(--sup-text)
}

.sup-battery-pane .sup-system-card-actions .sup-system-action {
    width: 100%;
    min-height: 36px;
    font-size: 12px
}

.sup-battery-pane .sup-seg {
    margin-bottom: 10px
}

.sup-battery-action,
.sup-battery-picked,
.sup-battery-bank {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-battery-action {
    width: 100%;
    min-height: 36px;
    cursor: pointer
}

.sup-battery-picked,
.sup-battery-bank {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px
}

.sup-battery-picked {
    margin-top: 10px
}

.sup-battery-picked>div,
.sup-battery-bank-name {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0
}

.sup-battery-picked span,
.sup-battery-bank-name span,
.sup-battery-empty,
.sup-battery-unknown,
.sup-battery-total span {
    color: var(--sup-text-dim)
}

.sup-battery-bank-list {
    display: grid;
    gap: 10px;
    margin-bottom: 12px
}

.sup-battery-bank.is-selected {
    border-color: var(--sup-accent)
}

.sup-battery-bank-name {
    border: 0;
    background: none;
    color: var(--sup-text);
    cursor: pointer;
    text-align: left
}

.sup-battery-bank .sup-num {
    width: 52px
}

.sup-battery-icon {
    border: 0;
    background: none;
    color: var(--sup-danger);
    cursor: pointer;
    font-size: 22px
}

.sup-battery-empty {
    padding: 12px;
    border-radius: var(--sup-r-md);
    background: var(--sup-surface)
}

.sup-battery-error {
    color: var(--sup-danger)
}

.sup-battery-placement-notice {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface)
}

.sup-battery-total {
    display: flex;
    justify-content: space-between;
    margin: 8px 0
}

.sup-battery-unknown {
    margin: 8px 0
}

.sup-storage-card {
    min-width: 0;
    overflow-wrap: anywhere
}

.sup-storage-card .sup-seg {
    margin-bottom: 10px
}

.sup-storage-card .sup-seg-body {
    display: grid;
    gap: 12px;
    min-width: 0
}

.sup-storage-card .sup-system-card-actions {
    padding-top: 0
}

.sup-storage-card .sup-system-action {
    width: 100%
}

.sup-storage-goal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: var(--sup-text-dim)
}

.sup-storage-card .sup-select {
    min-width: 0;
    max-width: 100%
}

.sup-storage-goal-row .sup-select {
    flex: 1 1 0;
    max-width: 75%
}

.sup-storage-card .sup-field--select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%
}

.sup-storage-goal-row .sup-field--select {
    text-align: left
}

.sup-storage-card .sup-field-selval {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box
}

.sup-storage-card .sup-field-selval-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-storage-button {
    font-size: 14px;
    font-weight: 400;
    min-height: 36px;
    border: 1px solid var(--sup-border);
    background: var(--sup-surface-2);
    color: var(--sup-text);
    border-radius: var(--sup-r-md);
    padding: 8px 10px;
    cursor: pointer
}

.sup-storage-button:disabled {
    opacity: .5;
    cursor: default
}

.sup-storage-button:hover:not(:disabled) {
    background: var(--sup-hover-soft)
}

.sup-storage-button:focus-visible {
    outline: 2px solid var(--sup-text);
    outline-offset: 2px
}

.sup-storage-notice {
    padding: 12px;
    border-radius: var(--sup-r-md);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    margin: 0
}

.sup-storage-size {
    display: grid;
    gap: 5px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    padding: 12px
}

.sup-storage-size>span,
.sup-storage-size>small {
    color: var(--sup-text-dim)
}

.sup-storage-size>strong {
    font-size: 18px;
    color: var(--sup-text)
}

.sup-storage-size.is-short>strong {
    color: var(--sup-warn)
}

.sup-storage-shortfall,
.sup-storage-remove {
    color: var(--sup-danger)
}

.sup-storage-remove {
    border-color: var(--sup-danger);
    background: transparent
}

.sup-storage-equipment-list {
    display: grid;
    gap: 10px
}

.sup-storage-equipment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    padding: 10px
}

.sup-storage-equipment-row>div {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere
}

.sup-storage-equipment-row span {
    color: var(--sup-text-dim)
}

.sup-storage-equipment-row>button {
    flex-shrink: 0
}

.sup-storage-callout {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    padding: 16px 12px;
    text-align: center
}

.sup-storage-callout p,
.sup-storage-simulation-reason {
    color: var(--sup-text-dim)
}

.sup-storage-outcomes h3 {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 12px
}

.sup-storage-outcome-list {
    display: grid;
    gap: 10px
}

.sup-storage-outcome {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    padding: 12px
}

.sup-storage-outcome>img {
    flex-shrink: 0
}

.sup-storage-outcome>div {
    display: grid;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere
}

.sup-storage-outcome strong {
    font-size: 20px;
    color: var(--sup-text)
}

.sup-storage-outcome span {
    color: var(--sup-text-dim)
}

.sup-storage-outcomes--wide .sup-storage-outcome-list {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr))
}

.sup-edit-goal {
    display: grid;
    gap: 24px;
    min-width: 0;
    color: var(--sup-text);
    font-size: 12px
}

.sup-edit-goal-content {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
    min-height: 300px
}

.sup-edit-goal h3,
.sup-edit-goal h4,
.sup-edit-goal p {
    margin: 0
}

.sup-edit-goal h3 {
    font-size: 14px;
    font-weight: 600
}

.sup-edit-goal h4 {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--sup-text-dim)
}

.sup-edit-goal .sup-seg-body {
    display: grid;
    gap: 16px;
    padding: 16px
}

.sup-edit-goal-note {
    color: var(--sup-text-dim);
    line-height: 1.6
}

.sup-edit-goal-error {
    color: var(--sup-danger)
}

.sup-edit-goal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.sup-edit-goal-tabs>button {
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--sup-text-dim);
    background: transparent;
    font: inherit;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer
}

.sup-edit-goal-tabs>button[aria-selected=true] {
    border-bottom-color: var(--sup-accent);
    color: var(--sup-text);
    background: var(--sup-surface-2)
}

.sup-edit-goal-tabs>button:hover:not([aria-selected=true]) {
    background: var(--sup-hover-soft)
}

.sup-edit-goal-reserve {
    display: flex;
    align-items: center;
    gap: 20px
}

.sup-edit-goal-reserve>.sup-scrub {
    flex: 1;
    min-width: 0
}

.sup-edit-goal-battery {
    position: relative;
    width: 22px;
    height: 42px;
    border: 2px solid var(--sup-accent);
    border-radius: 3px;
    flex-shrink: 0;
    padding: 3px;
    display: flex;
    align-items: flex-end
}

.sup-edit-goal-battery:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 5px;
    width: 8px;
    height: 3px;
    background: var(--sup-accent)
}

.sup-edit-goal-battery>span {
    width: 100%;
    background: var(--sup-accent);
    border-radius: 1px
}

.sup-edit-goal-duration,
.sup-edit-goal-periods,
.sup-edit-goal-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.sup-edit-goal-duration {
    max-width: 540px
}

.sup-edit-goal .sup-field-input {
    max-width: 100px
}

.sup-edit-goal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.sup-edit-goal-heading>button {
    flex-shrink: 0;
    color: var(--sup-accent)
}

.sup-edit-goal-period {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    padding: 12px;
    min-width: 0
}

.sup-edit-goal-times {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px
}

.sup-edit-goal-times>label {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
    min-width: 0;
    color: var(--sup-text-dim)
}

.sup-edit-goal-remove {
    display: flex;
    color: var(--sup-danger);
    padding: 7px
}

.sup-edit-goal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: fixed;
    font-variant-numeric: tabular-nums
}

.sup-edit-goal-table th,
.sup-edit-goal-table td {
    padding: 12px 8px;
    text-align: left;
    overflow-wrap: anywhere
}

.sup-edit-goal-table th {
    background: var(--sup-surface-2);
    font-weight: 500
}

.sup-edit-goal-table td {
    border-block: 1px solid var(--sup-border)
}

.sup-edit-goal-table td:first-child {
    border-left: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md) 0 0 var(--sup-r-md)
}

.sup-edit-goal-table td:last-child {
    border-right: 1px solid var(--sup-border);
    border-radius: 0 var(--sup-r-md) var(--sup-r-md) 0
}

.sup-edit-goal-table th:first-child {
    width: 46%
}

.sup-edit-goal-tou th:first-child {
    width: 6%
}

.sup-edit-goal-tou th:nth-child(2) {
    width: 28%
}

.sup-edit-goal-tou th:last-child {
    width: 16%
}

.sup-edit-goal-tou td>.sup-field {
    display: block;
    min-width: 0
}

.sup-edit-goal-tou .sup-field-label {
    display: none
}

.sup-edit-goal-tou .sup-stringing-select,
.sup-edit-goal-tou .sup-select,
.sup-edit-goal-tou .sup-field-selval {
    width: 100%;
    min-width: 0;
    max-width: 100%
}

.sup-edit-goal-schedule {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
    line-height: 1.8
}

.sup-edit-goal-schedule+.sup-edit-goal-schedule {
    border-top: 1px solid var(--sup-border);
    margin-top: 8px;
    padding-top: 8px
}

.sup-edit-goal-totals>div {
    display: grid;
    gap: 16px;
    background: var(--sup-surface-2);
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    padding: 16px
}

.sup-edit-goal-totals strong {
    font-size: 22px;
    font-weight: 500
}

.sup-edit-goal-empty {
    padding: 40px 16px;
    text-align: center;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    display: grid;
    justify-items: center;
    gap: 12px
}

.sup-edit-goal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sup-border)
}

.sup-edit-goal-footer .sup-system-card-actions {
    padding: 0;
    flex-shrink: 0
}

@media(max-width:600px) {
    .sup-edit-goal-periods,
    .sup-edit-goal-duration,
    .sup-edit-goal-totals {
        grid-template-columns: minmax(0, 1fr)
    }
    .sup-edit-goal-heading,
    .sup-edit-goal-footer {
        align-items: stretch;
        flex-direction: column
    }
    .sup-edit-goal-times>label {
        flex-direction: column;
        align-items: stretch
    }
    .sup-edit-goal-table,
    .sup-edit-goal-table tbody {
        display: block
    }
    .sup-edit-goal-table thead {
        display: none
    }
    .sup-edit-goal-table tr {
        display: grid;
        border: 1px solid var(--sup-border);
        border-radius: var(--sup-r-md);
        margin-bottom: 12px;
        padding: 8px
    }
    .sup-edit-goal-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px
    }
    .sup-edit-goal-table td,
    .sup-edit-goal-table td:first-child,
    .sup-edit-goal-table td:last-child {
        border: 0
    }
    .sup-edit-goal-table td:before {
        content: attr(data-label);
        color: var(--sup-text-dim);
        flex: 1
    }
    .sup-edit-goal-tou td>.sup-field {
        width: 45%
    }
}

.sup-storage-summary {
    display: grid;
    gap: 16px;
    min-width: 0
}

.sup-storage-summary-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--sup-border)
}

.sup-storage-summary-tabs button {
    padding: 8px 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--sup-text-dim);
    cursor: pointer
}

.sup-storage-summary-tabs button[aria-selected=true] {
    border-bottom-color: var(--sup-accent);
    color: var(--sup-text)
}

.sup-storage-summary-state,
.sup-storage-summary-empty,
.sup-storage-summary-skeleton {
    margin: 0;
    padding: 18px;
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    color: var(--sup-text-dim);
    text-align: center
}

.sup-storage-summary-error {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sup-danger)
}

.sup-storage-summary-error button {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2);
    color: var(--sup-text);
    cursor: pointer
}

.sup-storage-summary-energy,
.sup-storage-summary-utility {
    display: grid;
    gap: 10px;
    min-width: 0
}

.sup-storage-summary-energy h3 {
    margin: 0;
    color: var(--sup-text);
    font-size: 13px
}

.sup-storage-summary-month {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sup-text-dim)
}

.sup-storage-summary-month select {
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-storage-summary-skeleton {
    height: 260px;
    animation: sup-storage-summary-pulse 1s ease-in-out infinite alternate
}

@keyframes sup-storage-summary-pulse {
    to {
        opacity: .45
    }
}

.sup-storage-summary-chart-month {
    margin: 0;
    color: var(--sup-text-dim);
    font-size: 11px
}

.sup-storage-summary-chart-layout {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    min-width: 0
}

.sup-storage-summary-axis-y {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--sup-text-dim);
    white-space: nowrap;
    font-size: 11px
}

.sup-storage-summary-chart {
    width: 100%;
    min-width: 0;
    overflow: hidden
}

.sup-storage-summary-axis-x {
    margin: 0 0 0 52px;
    color: var(--sup-text-dim);
    text-align: center;
    font-size: 11px
}

.sup-storage-summary-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid var(--sup-border)
}

.sup-storage-summary-footer button {
    padding: 6px 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface-2);
    color: var(--sup-text);
    cursor: pointer
}

.sup-battery-bank {
    flex-wrap: wrap
}

.sup-battery-link {
    flex: 0 0 100%;
    min-width: 0;
    width: 100%
}

.sup-battery-link>p {
    margin: 0 0 8px;
    color: var(--sup-text-dim);
    overflow-wrap: anywhere
}

.sup-battery-link .sup-stringing-select,
.sup-battery-link .sup-select,
.sup-battery-link .sup-field--select,
.sup-battery-link .sup-field-selval {
    min-width: 0;
    max-width: 100%
}

.sup-battery-link .sup-field-selval-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-storage-goal-icon {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.sup-time-combobox {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0
}

.sup-time-combobox input {
    width: 100%;
    min-width: 0;
    padding: 6px 32px 6px 8px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg);
    color: var(--sup-text);
    font: inherit;
    font-variant-numeric: tabular-nums
}

.sup-time-combobox input:focus-visible {
    outline: 2px solid var(--sup-accent)
}

.sup-time-combobox>button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    color: var(--sup-text-dim)
}

.sup-time-combobox>button:disabled {
    opacity: .5
}

.sup-time-menu {
    max-height: min(240px, calc(100vh - 12px));
    max-width: calc(100vw - 12px);
    overflow-y: auto
}

.sup-system-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

.sup-system-card-sections {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-system-key-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px
}

.sup-system-key-item:only-child {
    grid-column: 1 / -1
}

.sup-system-key-item {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface)
}

.sup-system-key-item span,
.sup-system-key-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-system-key-item span {
    color: var(--sup-text-faint);
    font-size: 8px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sup-system-key-item strong {
    margin-top: 2px;
    color: var(--sup-text);
    font-size: 10px;
    font-weight: 650
}

.sup-system-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 10px
}

.sup-system-card-actions--stacked {
    position: static;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0
}

.sup-system-action {
    min-height: 30px;
    min-width: 0;
    padding: 6px 11px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    color: var(--sup-text-dim);
    font-size: 10px;
    font-weight: 650;
    cursor: pointer
}

.sup-system-action.is-primary {
    border-color: var(--sup-accent);
    background: var(--sup-accent);
    color: var(--sup-accent-fg)
}

.sup-system-action.is-secondary {
    background: var(--sup-surface)
}

.sup-system-action.is-danger {
    border-color: color-mix(in srgb, var(--sup-danger) 40%, var(--sup-border));
    background: var(--sup-surface);
    color: var(--sup-danger)
}

.sup-system-action:disabled {
    cursor: not-allowed;
    opacity: .48
}

.sup-check-row {
    justify-content: flex-start;
    gap: 8px
}

.sup-flat-roof-scoped-actions,
.sup-composite-roof-scoped-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
}

.sup .sup-check {
    --border-default: var(--sup-border-strong);
    --border-strong: var(--sup-text-faint);
    --bg-canvas: var(--sup-bg);
    --bg-brand: var(--sup-accent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 40%, transparent);
    border-radius: var(--sup-r-xs)
}

.sup-system-groups,
.sup-system-locks {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sup-system-lock,
.sup-system-note {
    margin: 0;
    font-size: 10px;
    line-height: 1.45
}

.sup-system-lock {
    color: var(--sup-danger)
}

.sup-system-note {
    color: var(--sup-text-faint);
    font-style: italic
}

.sup-system-message-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    font-size: 11px;
    line-height: 1.45
}

.sup-system-message-title,
.sup-system-message-copy {
    margin: 0
}

.sup-system-message-title {
    color: var(--sup-text);
    font-size: 12px;
    font-weight: 650
}

.sup-system-message-card.sup-system-error {
    color: var(--sup-danger)
}

.sup-system-change-list {
    width: 100%;
    margin: 0
}

.sup-system-change-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--sup-border)
}

.sup-system-change-row dt {
    min-width: 0;
    color: var(--sup-text-dim)
}

.sup-system-change-row dd {
    min-width: 0;
    margin: 0;
    color: var(--sup-text);
    font-weight: 600;
    text-align: right
}

.sup-system-confirm,
.sup-system-layout-proposal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%
}

.sup-system-layout-proposal>.sup-system-action {
    align-self: flex-end
}

.sup-dimension-helper {
    margin: 0;
    color: var(--sup-text-faint);
    font-size: 10px;
    line-height: 1.45
}

.sup-dimension-diagram {
    padding: 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg);
    color: var(--sup-text);
    text-align: center
}

.sup-dimension-diagram-title,
.sup-dimension-diagram-formula,
.sup-dimension-diagram-caption {
    margin: 0
}

.sup-dimension-diagram-title,
.sup-dimension-diagram-formula {
    font-size: 12px;
    font-weight: 700
}

.sup-dimension-diagram-geometry {
    display: block;
    width: 100%;
    margin: 4px 0
}

.sup-dimension-diagram-endpoint,
.sup-dimension-diagram-line-label {
    font-size: 12px;
    font-weight: 700
}

.sup-dimension-diagram-endpoint {
    fill: currentColor
}

.sup-dimension-diagram-reference {
    fill: currentColor;
    font-size: 11px;
    font-style: italic;
    opacity: .72
}

.sup-dimension-diagram-caption {
    margin-top: 5px;
    color: var(--sup-text-faint);
    font-size: 10px;
    line-height: 1.4
}

.sup-dimension-instructions {
    margin: 0;
    padding-left: 18px;
    color: var(--sup-text-dim);
    font-size: 11px;
    line-height: 1.5
}

.sup-dimension-instructions li+li {
    margin-top: 4px
}

.sup-system-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    font-size: 10px
}

.sup-inverter-card {
    padding-bottom: 2px
}

.sup-inverter-installed {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface-2);
    color: var(--sup-text);
    text-align: left;
    cursor: pointer
}

.sup-inverter-installed-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.sup-inverter-installed-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    font-weight: 500
}

.sup-inverter-installed-line.is-meta {
    color: var(--sup-text);
    font-size: 11px;
    font-weight: 600
}

.sup-inverter-installed-line>* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-inverter-installed-size {
    margin-left: auto;
    color: var(--sup-accent)
}

.sup-inverter-swatch {
    flex: none;
    width: 18px;
    height: 32px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--sup-border-strong)
}

.sup-inverter-swatch.is-unknown {
    background: var(--sup-surface)
}

.sup-edge-hint {
    color: var(--sup-text-faint);
    font-size: 9px;
    line-height: 1.4
}

.sup-edge-list {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.sup-edge-opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    text-align: left;
    cursor: pointer
}

.sup-edge-opt:hover:not(.is-active) {
    border-color: var(--sup-border-strong);
    color: var(--sup-text)
}

.sup-edge-opt.is-active {
    border-color: var(--sup-accent);
    color: var(--sup-text)
}

.sup-edge-opt-name {
    font-size: 10px;
    font-weight: 650
}

.sup-edge-opt-value {
    overflow: hidden;
    color: var(--sup-text-faint);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-edge-opt-tag {
    padding: 1px 5px;
    border-radius: var(--sup-r-xs);
    background: color-mix(in srgb, var(--sup-accent) 18%, transparent);
    color: var(--sup-accent);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sup-edge-prompt {
    display: flex;
    flex-direction: column;
    gap: 6px
}

@media(max-width:480px) {
    .sup-system-key-info {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-system-action {
        transition: none
    }
}

.sup .sup-seg-subgroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--sup-border)
}

.sup-roof-action {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sup-roof-key-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface)
}

.sup-roof-key-info div {
    min-width: 0
}

.sup-roof-key-info dt {
    color: var(--sup-text-faint);
    font-size: 10px
}

.sup-roof-key-info dd {
    overflow: hidden;
    margin: 2px 0 0;
    color: var(--sup-text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sup-roof-action .sup-seg {
    margin: 0
}

.sup-roof-action .sup-row-btn+.sup-row-btn {
    margin-top: 6px
}

.sup-roof-progress {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.sup-roof-progress progress {
    width: 100%;
    height: 5px;
    border: 0;
    border-radius: var(--sup-r-pill);
    overflow: hidden;
    background: var(--sup-border)
}

.sup-roof-progress progress::-webkit-progress-bar {
    background: var(--sup-border)
}

.sup-roof-progress progress::-webkit-progress-value {
    background: var(--sup-accent)
}

.sup-roof-progress progress::-moz-progress-bar {
    background: var(--sup-accent)
}

.sup-site-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px
}

.sup-site-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

.sup-site-scale-status,
.sup-site-scale-error,
.sup-site-control-note {
    margin: -2px 0 2px;
    color: var(--sup-text-faint);
    font-size: 10px;
    line-height: 1.4
}

.sup-site-scale-error {
    color: var(--sup-danger, #dc2626)
}

.sup-site-scale-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.sup-site-primary-action {
    border-color: var(--sup-accent);
    background: var(--sup-accent);
    color: var(--sup-accent-fg)
}

.sup-site-primary-action:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sup-accent) 88%, black)
}

@media(prefers-reduced-motion:reduce) {
    .sup-site-card *,
    .sup-site-card *:before,
    .sup-site-card *:after {
        scroll-behavior: auto;
        transition-duration: .01ms !important
    }
}

.sup-props-state {
    min-height: 112px;
    padding: 20px 16px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface);
    color: var(--sup-text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.4
}

.sup-props-state strong {
    color: var(--sup-text);
    font-size: 12.5px
}

.sup-tree-elevation {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sup-tree-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg)
}

.sup-tree-preview svg {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-select: none;
    user-select: none
}

.sup-tree-preview line:not(.sup-tree-ground) {
    stroke: var(--sup-accent);
    stroke-dasharray: 5 4;
    stroke-width: 1
}

.sup-tree-ground {
    stroke: var(--sup-border);
    stroke-width: 1
}

.sup-tree-control {
    position: absolute;
    width: 64px;
    min-height: 18px;
    padding: 1px 3px;
    transform: translateY(-50%);
    border: 1px solid var(--sup-accent);
    border-radius: var(--sup-r-xs);
    background: var(--sup-surface);
    color: var(--sup-text);
    font-size: 9px;
    line-height: 1.2;
    touch-action: none
}

.sup-tree-control.is-horizontal {
    transform: translate(3px, -50%);
    cursor: ew-resize
}

.sup-tree-control.is-vertical {
    cursor: ns-resize
}

.sup-auto {
    margin-inline-start: 6px;
    padding: 1px 5px;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-pill);
    background: transparent;
    color: var(--sup-text-faint);
    font-size: 9px;
    cursor: pointer
}

.sup-auto.is-on {
    border-color: color-mix(in srgb, var(--sup-accent) 55%, var(--sup-border));
    color: var(--sup-accent)
}

.sup-auto:disabled {
    cursor: not-allowed;
    opacity: .5
}

.sup-props .sup-props-info-row {
    gap: 10px;
    min-width: 0
}

.sup-props .sup-props-info-row dt,
.sup-props .sup-props-info-row dd {
    min-width: 0;
    overflow-wrap: anywhere
}

.sup-props .sup-props-info-row dd {
    text-align: end
}

.sup-props .sup-props-actions {
    flex-wrap: wrap;
    row-gap: 4px
}

@media(max-width:480px) {
    .sup-props {
        top: auto;
        right: 0;
        bottom: 76px;
        box-sizing: border-box;
        margin-inline: 0;
        width: 100%;
        max-height: min(62vh, calc(100vh - var(--sup-topbar-h) - 88px));
        padding: 0 8px
    }
    .sup-props-head,
    .sup-seg,
    .sup-props-state {
        border-radius: var(--sup-r-md) var(--sup-r-md) 0 0
    }
    .sup .sup-props-handle-anchor {
        top: auto;
        right: 0;
        bottom: 84px
    }
}

@media(prefers-reduced-motion:reduce) {
    .sup-props-state,
    .sup-tree-preview {
        scroll-behavior: auto
    }
}