.semi-auto-dock-stage {
    opacity: 1;
    transform: translateZ(0);
    transform-origin: 50% 100%;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .18s ease-out;
    will-change: transform, opacity
}

.semi-auto-dock-stage[data-presentation=compact] {
    transform: translate3d(0, 2px, 0)
}

.semi-auto-dock-stage>* {
    animation: semi-auto-dock-stage-enter .22s cubic-bezier(.22, 1, .36, 1)
}

@keyframes semi-auto-dock-stage-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@media(prefers-reduced-motion:reduce) {
    .semi-auto-dock-stage,
    .semi-auto-dock-stage>* {
        animation: none;
        transition: none
    }
}

.semi-auto-peek-dock {
    --peek-bg: var(--sup-bg);
    --peek-surface: var(--sup-surface);
    --peek-surface-2: var(--sup-surface-2);
    --peek-surface-3: var(--sup-surface-3);
    --peek-border: var(--sup-border);
    --peek-muted: var(--sup-text-dim);
    --peek-faint: var(--sup-text-faint);
    --peek-text: var(--sup-text);
    --peek-primary: var(--sup-accent);
    --peek-primary-fg: var(--sup-accent-fg);
    --peek-ok: var(--sup-ok);
    --peek-warn: var(--sup-warn);
    --peek-danger: var(--sup-danger);
    --peek-font-caption: 10px;
    --peek-font-label: 11px;
    --peek-font-control: 12px;
    --peek-font-heading: 14px;
    --peek-font-metric: 16px;
    position: relative;
    width: 100%;
    margin-inline: auto;
    color: var(--peek-text);
    background: color-mix(in srgb, var(--peek-surface) 96%, transparent);
    border: 1px solid var(--peek-border);
    border-radius: var(--sup-r-lg);
    box-shadow: var(--sup-shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: visible
}

.semi-auto-peek-header {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px
}

.semi-auto-peek-title {
    font-size: var(--peek-font-heading);
    font-weight: 700;
    white-space: nowrap
}

.semi-auto-peek-status,
.semi-auto-peek-status-button {
    border-radius: 999px;
    padding: 3px 7px;
    font-size: var(--peek-font-label);
    line-height: 1.2;
    white-space: nowrap
}

.semi-auto-peek-status {
    color: var(--peek-muted);
    background: var(--peek-surface-2)
}

.semi-auto-peek-plan-feedback {
    max-width: 280px;
    overflow: hidden;
    color: var(--peek-muted);
    font-size: var(--peek-font-caption);
    text-overflow: ellipsis;
    white-space: nowrap
}

.semi-auto-peek-status-button {
    border: 1px solid transparent;
    background: transparent
}

.semi-auto-peek-status-button.is-success {
    color: var(--peek-ok);
    background: color-mix(in srgb, var(--peek-ok) 12%, var(--peek-surface))
}

.semi-auto-peek-status-button.is-warning {
    color: var(--peek-warn);
    background: color-mix(in srgb, var(--peek-warn) 12%, var(--peek-surface))
}

.semi-auto-peek-status-button.is-blocking {
    color: var(--peek-danger);
    background: color-mix(in srgb, var(--peek-danger) 12%, var(--peek-surface))
}

.semi-auto-peek-spacer {
    flex: 1 1 auto
}

.semi-auto-peek-header button,
.semi-auto-peek-body button,
.semi-auto-peek-popover button,
.semi-auto-peek-body input,
.semi-auto-peek-body select,
.semi-auto-peek-popover input,
.semi-auto-peek-popover select {
    outline: none
}

.semi-auto-peek-header button:focus-visible,
.semi-auto-peek-body button:focus-visible,
.semi-auto-peek-popover button:focus-visible,
.semi-auto-peek-body input:focus-visible,
.semi-auto-peek-body select:focus-visible,
.semi-auto-peek-popover input:focus-visible,
.semi-auto-peek-popover select:focus-visible {
    outline: 2px solid var(--peek-primary);
    outline-offset: 2px
}

.semi-auto-peek-text-action,
.semi-auto-peek-secondary-action,
.semi-auto-peek-primary-action,
.semi-auto-peek-apply-action,
.semi-auto-peek-collapse {
    min-height: 30px;
    border-radius: 7px;
    padding: 0 10px;
    font-size: var(--peek-font-control);
    font-weight: 650
}

.semi-auto-peek-text-action {
    color: var(--peek-muted);
    background: transparent
}

.semi-auto-peek-secondary-action,
.semi-auto-peek-collapse {
    color: var(--peek-text);
    background: var(--peek-surface-2);
    border: 1px solid var(--peek-border)
}

.semi-auto-peek-primary-action {
    color: var(--peek-primary-fg);
    background: var(--peek-primary);
    border: 1px solid var(--peek-primary)
}

.semi-auto-peek-apply-action {
    color: var(--peek-text);
    background: color-mix(in srgb, var(--peek-ok) 68%, var(--peek-bg));
    border: 1px solid color-mix(in srgb, var(--peek-ok) 70%, var(--peek-border))
}

.semi-auto-peek-primary-action:disabled,
.semi-auto-peek-body button:disabled,
.semi-auto-peek-body input:disabled,
.semi-auto-peek-popover input:disabled,
.semi-auto-peek-dock [aria-disabled=true] {
    cursor: not-allowed;
    opacity: .45
}

.semi-auto-peek-collapse {
    width: 30px;
    padding: 0;
    font-size: 14px
}

.semi-auto-peek-body {
    display: grid;
    grid-template-areas: "inverter defaults hardware" "mode mode mode" "mppts mppts mppts";
    grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.2fr) minmax(260px, 1fr);
    align-items: start;
    gap: 8px 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--peek-border)
}

.semi-auto-peek-field {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-field>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.semi-auto-peek-field select,
.semi-auto-peek-field input {
    min-width: 0;
    height: 30px;
    color: var(--peek-text);
    background: var(--peek-bg);
    border: 1px solid var(--peek-border);
    border-radius: 6px;
    padding: 0 7px;
    font-size: var(--peek-font-control)
}

.semi-auto-peek-inverter-field select {
    width: 100%
}

.semi-auto-peek-inverter-field {
    grid-area: inverter
}

.semi-auto-peek-default-field {
    grid-area: defaults
}

.semi-auto-peek-auto-adjust {
    grid-area: mode;
    min-width: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 8px;
    background: var(--peek-surface-2);
    border: 1px solid var(--peek-border);
    border-radius: 7px
}

.semi-auto-peek-auto-adjust label {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    cursor: pointer
}

.semi-auto-peek-auto-adjust strong {
    flex: none;
    color: var(--peek-text);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-auto-adjust small {
    min-width: 0;
    overflow: hidden;
    color: var(--peek-muted);
    font-size: var(--peek-font-caption);
    text-overflow: ellipsis;
    white-space: nowrap
}

.semi-auto-peek-field small,
.semi-auto-peek-hardware small {
    overflow: hidden;
    color: var(--peek-muted);
    font-size: var(--peek-font-caption);
    text-overflow: ellipsis;
    white-space: nowrap
}

.semi-auto-peek-inline-field {
    display: flex;
    align-items: center;
    gap: 7px
}

.semi-auto-peek-stepper {
    display: grid;
    grid-template-columns: 28px 48px 28px;
    overflow: hidden;
    border: 1px solid var(--peek-border);
    border-radius: 7px
}

.semi-auto-peek-stepper button,
.semi-auto-peek-stepper input {
    height: 30px;
    border: 0;
    border-radius: 0;
    color: var(--peek-text);
    background: var(--peek-bg);
    text-align: center
}

.semi-auto-peek-stepper button:first-child,
.semi-auto-peek-stepper input {
    border-right: 1px solid var(--peek-border)
}

.semi-auto-peek-stepper input {
    width: 48px;
    padding: 0 3px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.semi-auto-peek-stepper input::-webkit-inner-spin-button,
.semi-auto-peek-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.semi-auto-peek-link-button {
    color: var(--peek-primary);
    font-size: var(--peek-font-label);
    white-space: nowrap;
    background: transparent
}

.semi-auto-peek-mppt-grid {
    grid-area: mppts;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(104px, 1fr);
    gap: 6px;
    overflow-x: auto;
    padding: 1px 1px 3px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin
}

.semi-auto-peek-mppt-tile {
    min-width: 0;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 8px;
    overflow: hidden;
    text-align: left;
    color: var(--peek-text);
    background: var(--peek-surface-2);
    border: 1px solid var(--peek-border);
    border-radius: 7px;
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease
}

.semi-auto-peek-mppt-tile[aria-pressed=true] {
    border-color: var(--peek-primary);
    background: color-mix(in srgb, var(--peek-primary) 14%, var(--peek-surface-2))
}

.semi-auto-peek-mppt-tile[data-invalid=true] {
    border-color: color-mix(in srgb, var(--peek-warn) 60%, var(--peek-border));
    background: color-mix(in srgb, var(--peek-warn) 12%, var(--peek-surface-2))
}

.semi-auto-peek-mppt-tile-header,
.semi-auto-peek-mppt-current,
.semi-auto-peek-mppt-footer,
.semi-auto-peek-mppt-rule-source,
.semi-auto-peek-mppt-metric,
.semi-auto-peek-mppt-capacity {
    min-width: 0
}

.semi-auto-peek-mppt-tile-header,
.semi-auto-peek-mppt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px
}

.semi-auto-peek-mppt-tile-header strong,
.semi-auto-peek-mppt-capacity,
.semi-auto-peek-mppt-current b,
.semi-auto-peek-mppt-current small,
.semi-auto-peek-mppt-metric,
.semi-auto-peek-mppt-footer small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.semi-auto-peek-mppt-tile-header strong {
    font-size: var(--peek-font-control);
    font-weight: 700
}

.semi-auto-peek-mppt-capacity {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    color: var(--peek-muted);
    background: var(--peek-surface-3);
    border-radius: 999px;
    font-size: var(--peek-font-caption);
    font-weight: 650
}

.semi-auto-peek-mppt-capacity[data-status=estimated] {
    color: var(--peek-warn);
    background: color-mix(in srgb, var(--peek-warn) 12%, var(--peek-surface-2))
}

.semi-auto-peek-mppt-current {
    display: grid;
    gap: 0
}

.semi-auto-peek-mppt-current b {
    color: var(--peek-text);
    font-size: var(--peek-font-metric);
    line-height: 1.15
}

.semi-auto-peek-mppt-current small,
.semi-auto-peek-mppt-footer small {
    color: var(--peek-muted);
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-mppt-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 3px
}

.semi-auto-peek-mppt-metric {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    color: var(--peek-muted);
    background: var(--peek-surface-3);
    border-radius: 4px;
    font-size: var(--peek-font-caption);
    font-weight: 650
}

.semi-auto-peek-mppt-metric.is-warning {
    color: var(--peek-warn);
    background: color-mix(in srgb, var(--peek-warn) 12%, var(--peek-surface-2))
}

.semi-auto-peek-metric-icon {
    width: 10px;
    height: 10px
}

.semi-auto-peek-mppt-footer {
    margin-top: auto
}

.semi-auto-peek-mppt-rule-source {
    display: grid;
    gap: 1px
}

.semi-auto-peek-mppt-footer[data-mixed-rule=true] {
    align-items: flex-end
}

.semi-auto-peek-mppt-footer small:first-child[data-status=verified] {
    color: var(--peek-ok)
}

.semi-auto-peek-mppt-footer small:first-child[data-status=estimated] {
    color: var(--peek-warn)
}

.semi-auto-peek-mppt-footer small:last-child:not(:first-child) {
    color: var(--peek-primary)
}

.semi-auto-peek-hardware {
    grid-area: hardware;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: var(--peek-font-label)
}

.semi-auto-peek-hardware>strong,
.semi-auto-peek-hardware>span,
.semi-auto-peek-hardware>small,
.semi-auto-peek-power-summary span {
    padding: 3px 5px;
    white-space: nowrap;
    background: var(--peek-surface-2);
    border-radius: 5px;
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-hardware span {
    color: var(--peek-muted)
}

.semi-auto-peek-power-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px
}

.semi-auto-peek-power-summary span[data-over-limit=true] {
    color: var(--peek-danger);
    font-weight: 650
}

.semi-auto-peek-popover {
    position: absolute;
    z-index: 3;
    bottom: calc(100% + 8px);
    width: min(320px, calc(100vw - 24px));
    max-height: min(56vh, 420px);
    overflow-y: auto;
    padding: 10px;
    color: var(--peek-text);
    background: color-mix(in srgb, var(--peek-surface) 98%, transparent);
    border: 1px solid var(--peek-border);
    border-radius: var(--sup-r-md);
    box-shadow: var(--sup-shadow)
}

.semi-auto-peek-mppt-editor {
    right: 98px;
    width: min(380px, calc(100vw - 24px))
}

.semi-auto-peek-review-popover {
    left: 118px
}

.semi-auto-peek-settings-popover {
    right: 112px;
    width: min(350px, calc(100vw - 24px))
}

.semi-auto-peek-popover-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px
}

.semi-auto-peek-popover-header strong {
    font-size: var(--peek-font-heading)
}

.semi-auto-peek-popover-header span {
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-popover-header button {
    width: 26px;
    height: 26px;
    margin-left: auto;
    border-radius: 6px;
    color: var(--peek-muted)
}

.semi-auto-peek-recipe-toolbar {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(100px, auto);
    gap: 8px;
    align-items: end
}

.semi-auto-peek-recipe-toolbar label,
.semi-auto-peek-recipe-toolbar>div {
    display: grid;
    gap: 4px;
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-recipe-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.semi-auto-peek-recipe-field-label>strong {
    min-height: 0;
    padding: 2px 5px;
    color: var(--peek-muted);
    background: var(--peek-surface-2);
    border: 0;
    border-radius: 999px;
    font-size: var(--peek-font-caption);
    white-space: nowrap
}

.semi-auto-peek-count-stepper {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    overflow: hidden;
    border: 1px solid var(--peek-border);
    border-radius: 6px
}

.semi-auto-peek-count-stepper button,
.semi-auto-peek-count-stepper input {
    height: 30px;
    border: 0;
    border-radius: 0;
    color: var(--peek-text);
    background: var(--peek-bg)
}

.semi-auto-peek-count-stepper button {
    color: var(--peek-primary);
    font-size: 14px;
    font-weight: 700
}

.semi-auto-peek-count-stepper button:first-child,
.semi-auto-peek-count-stepper input {
    border-right: 1px solid var(--peek-border)
}

.semi-auto-peek-count-stepper button[aria-disabled=true] {
    cursor: not-allowed;
    color: var(--peek-faint);
    background: var(--peek-surface-2)
}

.semi-auto-peek-count-stepper input {
    width: 100%;
    padding: 0 4px;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.semi-auto-peek-count-stepper input::-webkit-inner-spin-button,
.semi-auto-peek-count-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.semi-auto-peek-recipe-toolbar input {
    width: 100%;
    height: 30px;
    padding: 0 7px;
    color: var(--peek-text);
    background: var(--peek-bg);
    border: 1px solid var(--peek-border);
    border-radius: 6px;
    font-size: var(--peek-font-control)
}

.semi-auto-peek-recipe-toolbar strong {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: var(--peek-text);
    background: var(--peek-surface-2);
    border: 1px solid var(--peek-border);
    border-radius: 6px;
    font-size: var(--peek-font-control)
}

.semi-auto-peek-recipe-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px
}

.semi-auto-peek-recipe-list label {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-recipe-list input {
    min-width: 0;
    width: 100%;
    height: 28px;
    padding: 0 7px;
    color: var(--peek-text);
    background: var(--peek-bg);
    border: 1px solid var(--peek-border);
    border-radius: 6px;
    font-size: var(--peek-font-control)
}

.semi-auto-peek-recipe-warning {
    margin-top: 6px;
    padding: 6px 7px;
    color: var(--peek-warn);
    background: color-mix(in srgb, var(--peek-warn) 12%, var(--peek-surface));
    border-radius: 6px;
    font-size: var(--peek-font-label);
    line-height: 1.4
}

.semi-auto-peek-editor-limits {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px
}

.semi-auto-peek-limit-chip {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    color: var(--peek-muted);
    background: var(--peek-surface-2);
    border: 1px solid var(--peek-border);
    border-radius: 6px;
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-limit-chip strong {
    color: var(--peek-text);
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-limit-chip[data-status=verified] {
    border-color: color-mix(in srgb, var(--peek-ok) 42%, var(--peek-border));
    background: color-mix(in srgb, var(--peek-ok) 10%, var(--peek-surface))
}

.semi-auto-peek-limit-chip[data-status=estimated],
.semi-auto-peek-limit-chip.is-warning {
    color: var(--peek-warn);
    border-color: color-mix(in srgb, var(--peek-warn) 42%, var(--peek-border));
    background: color-mix(in srgb, var(--peek-warn) 10%, var(--peek-surface))
}

.semi-auto-peek-limit-chip.is-warning strong {
    color: var(--peek-warn)
}

.semi-auto-peek-limit-chip:focus-visible {
    outline: 2px solid var(--peek-primary);
    outline-offset: 2px
}

.semi-auto-peek-field .semi-auto-peek-balance-note {
    color: var(--peek-warn)
}

.semi-auto-peek-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px
}

.semi-auto-peek-popover-actions button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--peek-border);
    border-radius: 7px;
    font-size: var(--peek-font-control);
    font-weight: 650
}

.semi-auto-peek-popover-actions .semi-auto-peek-primary-action {
    border-color: var(--peek-primary)
}

.semi-auto-peek-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px
}

.semi-auto-peek-metrics span {
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--peek-muted);
    background: var(--peek-surface-2);
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-review-list {
    display: grid;
    gap: 5px
}

.semi-auto-peek-review-list article {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 7px;
    padding: 7px;
    border: 1px solid var(--peek-border);
    border-radius: 7px;
    font-size: var(--peek-font-label)
}

.semi-auto-peek-review-list article[data-severity=block],
.semi-auto-peek-review-list article[data-severity=error] {
    border-color: color-mix(in srgb, var(--peek-danger) 42%, var(--peek-border));
    background: color-mix(in srgb, var(--peek-danger) 10%, var(--peek-surface))
}

.semi-auto-peek-review-list article small {
    grid-column: 2;
    margin-top: 2px;
    color: var(--peek-muted);
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-settings-group {
    display: grid;
    gap: 7px;
    margin-top: 9px;
    padding: 8px;
    border: 1px solid var(--peek-border);
    border-radius: 8px
}

.semi-auto-peek-settings-group legend {
    padding-inline: 4px;
    font-size: var(--peek-font-label);
    font-weight: 700
}

.semi-auto-peek-settings-group>label:not(.semi-auto-peek-settings-field) {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-settings-field {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-settings-field input,
.semi-auto-peek-settings-field select {
    min-width: 0;
    width: 100%;
    height: 30px;
    padding-inline: 7px;
    color: var(--peek-text);
    background: var(--peek-bg);
    border: 1px solid var(--peek-border);
    border-radius: 6px;
    font-size: var(--peek-font-control)
}

.semi-auto-peek-strategy-group {
    background: linear-gradient(145deg, color-mix(in srgb, var(--peek-primary) 8%, var(--peek-surface)) 0%, var(--peek-surface) 68%);
    border-color: color-mix(in srgb, var(--peek-primary) 36%, var(--peek-border))
}

.semi-auto-peek-strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px
}

.semi-auto-peek-strategy-range {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    color: var(--peek-muted);
    background: var(--peek-surface-2);
    border-radius: 6px;
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-strategy-range strong {
    color: var(--peek-ok)
}

.semi-auto-peek-strategy-outcome {
    display: grid;
    gap: 6px;
    padding: 7px;
    background: var(--peek-bg);
    border: 1px solid color-mix(in srgb, var(--peek-primary) 28%, var(--peek-border));
    border-radius: 7px
}

.semi-auto-peek-strategy-outcome-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--peek-font-label)
}

.semi-auto-peek-strategy-outcome-heading>span {
    padding: 2px 5px;
    color: color-mix(in srgb, var(--peek-primary) 72%, var(--peek-text));
    background: color-mix(in srgb, var(--peek-primary) 12%, var(--peek-surface));
    border-radius: 999px;
    font-size: var(--peek-font-caption);
    font-weight: 650
}

.semi-auto-peek-strategy-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px
}

.semi-auto-peek-strategy-metrics>span {
    min-width: 0;
    padding: 4px;
    color: var(--peek-muted);
    background: var(--peek-surface-2);
    border-radius: 5px;
    font-size: var(--peek-font-caption);
    text-align: center
}

.semi-auto-peek-strategy-metrics strong {
    display: block;
    overflow: hidden;
    color: var(--peek-text);
    font-size: var(--peek-font-control);
    text-overflow: ellipsis;
    white-space: nowrap
}

.semi-auto-peek-strategy-outcome ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-left: 15px;
    color: var(--peek-muted);
    font-size: var(--peek-font-caption);
    line-height: 1.35
}

.semi-auto-peek-settings-temperature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.semi-auto-peek-settings-temperature-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--peek-muted);
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-settings-temperature-meta button {
    color: var(--peek-primary);
    font-size: var(--peek-font-caption)
}

.semi-auto-peek-muted {
    color: var(--peek-muted);
    font-size: var(--peek-font-label)
}

.semi-auto-peek-field-error,
.semi-auto-peek-field .semi-auto-peek-field-error {
    color: var(--peek-danger);
    white-space: normal;
    overflow: visible;
    text-overflow: clip
}

.semi-auto-peek-error-strip {
    margin: 0;
    padding: 5px 10px;
    color: var(--peek-danger);
    background: color-mix(in srgb, var(--peek-danger) 10%, var(--peek-surface));
    border-top: 1px solid color-mix(in srgb, var(--peek-danger) 42%, var(--peek-border));
    font-size: var(--peek-font-label)
}

.semi-auto-peek-dock[data-presentation=compact] {
    width: min(680px, 100%)
}

.semi-auto-peek-dock[data-presentation=compact] .semi-auto-peek-body,
.semi-auto-peek-dock[data-presentation=compact] .semi-auto-peek-popover,
.semi-auto-peek-dock[data-presentation=compact] .semi-auto-peek-error-strip,
.semi-auto-peek-dock[data-presentation=compact] .semi-auto-peek-expanded-only {
    display: none
}

@media(max-width:1040px) {
    .semi-auto-peek-body {
        grid-template-areas: "inverter defaults" "hardware hardware" "mode mode" "mppts mppts";
        grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr)
    }
    .semi-auto-peek-hardware {
        justify-content: flex-start
    }
}

@media(max-width:760px) {
    .semi-auto-peek-header {
        flex-wrap: wrap
    }
    .semi-auto-peek-spacer {
        display: none
    }
    .semi-auto-peek-body {
        grid-template-areas: "inverter" "defaults" "hardware" "mode" "mppts";
        grid-template-columns: minmax(0, 1fr)
    }
    .semi-auto-peek-popover,
    .semi-auto-peek-mppt-editor,
    .semi-auto-peek-review-popover,
    .semi-auto-peek-settings-popover {
        right: 0;
        left: 0;
        width: 100%
    }
}

@media(max-width:760px),
(max-height:760px) {
    .semi-auto-dock-stage {
        transform: none;
        will-change: auto
    }
    .semi-auto-dock-stage>* {
        animation: none
    }
    .semi-auto-peek-dock {
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }
    .semi-auto-peek-popover,
    .semi-auto-peek-mppt-editor,
    .semi-auto-peek-review-popover,
    .semi-auto-peek-settings-popover {
        position: fixed;
        z-index: 30;
        bottom: max(8px, env(safe-area-inset-bottom));
        max-height: min(78vh, calc(100dvh - 24px), 520px)
    }
}

@media(max-width:760px) {
    .semi-auto-peek-popover,
    .semi-auto-peek-mppt-editor,
    .semi-auto-peek-review-popover,
    .semi-auto-peek-settings-popover {
        right: 8px;
        left: 8px;
        width: auto
    }
}

@media(min-width:761px)and (max-height:760px) {
    .semi-auto-peek-mppt-editor {
        position: absolute;
        right: 12px;
        bottom: calc(100% + 8px);
        max-height: min(56vh, 420px)
    }
}

@media(max-width:520px) {
    .semi-auto-peek-auto-adjust label {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px
    }
    .semi-auto-peek-auto-adjust small {
        white-space: normal
    }
    .semi-auto-peek-strategy-grid {
        grid-template-columns: minmax(0, 1fr)
    }
    .semi-auto-peek-header {
        gap: 5px;
        padding-inline: 8px
    }
    .semi-auto-peek-text-action,
    .semi-auto-peek-secondary-action,
    .semi-auto-peek-primary-action,
    .semi-auto-peek-apply-action {
        min-height: 28px;
        padding-inline: 8px
    }
    .semi-auto-peek-recipe-toolbar {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    .semi-auto-peek-dock,
    .semi-auto-peek-dock * {
        scroll-behavior: auto;
        transition: none !important;
        animation: none !important
    }
}

@media(min-width:481px) {
    .sup.has-dock .semi-auto-property-panel-width .sup-props,
    .semi-auto-property-panel-width .sup-props {
        --sup-props-w: max( 0px, min(460px, calc(100vw - var(--sup-rail-w) - var(--sup-dock) - 48px)));
        width: var(--sup-props-w);
        max-width: var(--sup-props-w)
    }
}

.sup .sup-semi-auto-routing-actions>.sup-semi-auto-routing-action {
    width: 100%;
    height: 28px;
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1
}

.sup-semi-auto-view-switch {
    overflow: hidden;
    border-radius: var(--sup-r-sm)
}

.sup .sup-semi-auto-view-switch>.sup-row-btn {
    width: auto;
    border-radius: 0
}

.sup .sup-semi-auto-view-switch>.sup-row-btn+.sup-row-btn {
    border-left: 0
}

.sup .sup-semi-auto-select-toggle {
    width: auto;
    flex-shrink: 0
}

.sup .sup-semi-auto-view-switch>.sup-row-btn[aria-selected=true],
.sup .sup-semi-auto-select-toggle[aria-pressed=true] {
    border-color: var(--sup-accent);
    background: color-mix(in srgb, var(--sup-accent) 18%, var(--sup-surface));
    color: var(--sup-text);
    font-weight: 700
}

.sup-semi-auto-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-md);
    background: var(--sup-surface);
    color: var(--sup-text)
}

.sup-semi-auto-card *,
.sup-semi-auto-card *:before,
.sup-semi-auto-card *:after {
    box-sizing: border-box
}

.sup-semi-auto-badge,
.sup-semi-auto-count,
.sup-semi-auto-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sup-r-pill);
    background: color-mix(in srgb, var(--sup-accent) 12%, var(--sup-surface));
    color: color-mix(in srgb, var(--sup-accent) 68%, var(--sup-text));
    font-weight: 650
}

.sup-semi-auto-badge {
    flex: none;
    padding: 2px 7px;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sup-semi-auto-badge.is-warning {
    background: color-mix(in srgb, var(--sup-warn) 12%, var(--sup-surface));
    color: var(--sup-warn);
    letter-spacing: normal;
    text-transform: none
}

.sup-semi-auto-count {
    min-width: 28px;
    min-height: 28px;
    padding: 4px 8px;
    background: var(--sup-surface);
    font-size: 12px
}

.sup-semi-auto-status {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg);
    color: var(--sup-text-dim);
    line-height: 1.45
}

.sup-semi-auto-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-bg)
}

.sup-semi-auto-section.is-capture {
    border-color: color-mix(in srgb, var(--sup-accent) 30%, var(--sup-border));
    background: color-mix(in srgb, var(--sup-accent) 7%, var(--sup-bg))
}

.sup-semi-auto-section-title {
    color: var(--sup-text);
    font-size: 12px;
    font-weight: 650
}

.sup-semi-auto-stat {
    min-width: 0;
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface);
    color: var(--sup-text-dim)
}

.sup-semi-auto-stat.is-success {
    background: color-mix(in srgb, var(--sup-ok) 10%, var(--sup-surface));
    color: var(--sup-ok)
}

.sup-semi-auto-stat.is-danger {
    background: color-mix(in srgb, var(--sup-danger) 10%, var(--sup-surface));
    color: var(--sup-danger)
}

.sup-semi-auto-operation,
.sup-semi-auto-tool,
.sup-semi-auto-warning-action,
.sup-semi-auto-roof-trigger,
.sup-semi-auto-link {
    cursor: pointer
}

.sup-semi-auto-operation {
    border: 0;
    background: transparent;
    color: var(--sup-text-dim)
}

.sup-semi-auto-operation:hover:not(:disabled) {
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-semi-auto-operation.is-add {
    background: color-mix(in srgb, var(--sup-ok) 22%, var(--sup-surface));
    color: var(--sup-ok)
}

.sup-semi-auto-operation.is-remove {
    background: color-mix(in srgb, var(--sup-danger) 18%, var(--sup-surface));
    color: var(--sup-danger)
}

.sup-semi-auto-tool {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface);
    color: var(--sup-text-dim)
}

.sup-semi-auto-tool:hover:not(:disabled) {
    border-color: var(--sup-border-strong);
    background: var(--sup-surface-2);
    color: var(--sup-text)
}

.sup-semi-auto-tool.is-active {
    border-color: color-mix(in srgb, var(--sup-accent) 55%, var(--sup-border));
    background: color-mix(in srgb, var(--sup-accent) 16%, var(--sup-surface));
    color: color-mix(in srgb, var(--sup-accent) 68%, var(--sup-text))
}

.sup-semi-auto-field {
    min-width: 0;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease
}

.sup-semi-auto-field:hover:not(:disabled) {
    border-color: var(--sup-border-strong)
}

.sup-semi-auto-field:focus {
    background: var(--sup-surface);
    border-color: var(--sup-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sup-accent) 22%, transparent)
}

.sup-semi-auto-subpanel,
.sup-semi-auto-roof {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface);
    color: var(--sup-text)
}

.sup-semi-auto-notice {
    border: 1px solid var(--sup-border);
    border-radius: var(--sup-r-sm);
    background: var(--sup-surface);
    color: var(--sup-text-dim)
}

.sup-semi-auto-notice.is-warning {
    border-color: color-mix(in srgb, var(--sup-warn) 34%, var(--sup-border));
    background: color-mix(in srgb, var(--sup-warn) 9%, var(--sup-surface));
    color: var(--sup-warn)
}

.sup-semi-auto-notice.is-danger {
    border-color: color-mix(in srgb, var(--sup-danger) 34%, var(--sup-border));
    background: color-mix(in srgb, var(--sup-danger) 9%, var(--sup-surface));
    color: var(--sup-danger)
}

.sup-semi-auto-warning-action {
    border: 1px solid var(--sup-warn);
    background: var(--sup-warn);
    color: var(--sup-surface)
}

.sup-semi-auto-inline-action {
    width: auto;
    flex: none
}

.sup-semi-auto-link {
    width: fit-content;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--sup-accent) 68%, var(--sup-text))
}

.sup-semi-auto-roof-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 0;
    border-radius: var(--sup-r-sm);
    background: transparent;
    color: var(--sup-text);
    text-align: left
}

.sup-semi-auto-roof-trigger:hover {
    background: var(--sup-surface-2)
}

.sup-semi-auto-operation:focus-visible,
.sup-semi-auto-tool:focus-visible,
.sup-semi-auto-warning-action:focus-visible,
.sup-semi-auto-roof-trigger:focus-visible,
.sup-semi-auto-link:focus-visible {
    outline: 2px solid var(--sup-accent);
    outline-offset: 2px
}

.sup-semi-auto-operation:disabled,
.sup-semi-auto-tool:disabled,
.sup-semi-auto-warning-action:disabled,
.sup-semi-auto-roof-trigger:disabled,
.sup-semi-auto-link:disabled,
.sup-semi-auto-card button[aria-disabled=true] {
    cursor: not-allowed;
    opacity: .55
}

.sup-semi-auto-new-group {
    min-width: 0;
    flex-wrap: wrap
}

.sup-semi-auto-new-group>input {
    flex: 1 1 140px
}