:root {
    --ground: #0d1016;
    --card: #161b23;
    --panel: #1b212b;
    --line: #252c37;
    --ink: #e8ebf1;
    --muted: #a2acbd;
    --solar: #f08a2a;
    --green: #4bc07a;
    --red: #e5697b;
    --yellow: #e8c655;
    --blue: #5eb9ea;
    --violet: #9a7cf0;
    --ember: #ff6a1f;
    color-scheme: dark
}

    :root[data-theme=light] {
        --ground: #eef0f4;
        --card: #fff;
        --panel: #f6f7f9;
        --line: #dce1e8;
        --ink: #1b2130;
        --muted: #5a6376;
        --solar: #c8600b;
        --green: #248349;
        --red: #c93b51;
        --yellow: #927006;
        --blue: #168abf;
        --violet: #7b52d6;
        --ember: #dd4a10;
        color-scheme: light
    }

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 15px 'IBM Plex Sans',Arial,sans-serif
}

main {
    max-width: 1920px;
    margin: auto;
    padding: 25px 32px 16px
}

button, input, select {
    font: inherit
}

button, a, input, select {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px
}

    button:hover {
        border-color: var(--solar);
        color: var(--solar)
    }

    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px
    }

    button:disabled {
        opacity: .35;
        cursor: default
    }

header {
    position: relative;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 28px;
    padding-bottom: 22px
}

.brand {
    font: 700 43px 'Barlow Semi Condensed',Arial,sans-serif;
    letter-spacing: -2px;
    color: var(--ink);
    text-decoration: none
}

    .brand span {
        color: var(--blue)
    }

    .brand em {
        font-style: normal;
        color: var(--solar)
    }

    .brand sup {
        font: 11px Arial;
        vertical-align: top;
        letter-spacing: 0
    }

.company {
    border-left: 1px solid var(--line);
    padding-left: 28px
}

    .company h1 {
        font-size: 22px;
        letter-spacing: .2px;
        margin: 0 0 6px;
        font-weight: 600
    }

    .company p {
        color: var(--muted);
        margin: 0;
        font-size: 14px
    }

.header-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px
}

.preview {
    font-size: 11px;
    letter-spacing: 1px;
    margin-right: 13px;
    color: var(--muted)
}

    .preview i {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--solar);
        margin-right: 7px
    }

.icon-button {
    width: 36px;
    height: 36px;
    font-size: 21px;
    background: var(--card)
}

.context {
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 20px;
    color: var(--muted);
    font-size: 12.5px;
    letter-spacing: .1px
}

    .context b {
        color: var(--solar);
        padding: 0 12px
    }

#capture {
    letter-spacing: 0
}

.metrics {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 14px
}

.metric, .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px
}

.metric {
    position: relative;
    padding: 20px;
    overflow: hidden
}

    .metric:before {
        content: '';
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 2px;
        background: color-mix(in srgb,var(--solar) 55%,transparent)
    }

.metric-label {
    color: var(--muted);
    font-size: 14px;
    display: flex;
    justify-content: space-between
}

    .metric-label i {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: color-mix(in srgb,var(--ember) 14%,transparent);
        color: var(--ember);
        font-style: normal;
        font-size: 18px
    }

        .metric-label i svg {
            display: block;
            width: 20px;
            height: 20px
        }

.metric strong {
    display: block;
    font: 600 clamp(30px,2.8vw,48px) 'Barlow Semi Condensed',Arial,sans-serif;
    margin: 9px 0;
    color: var(--solar);
    white-space: nowrap
}

    .metric strong small {
        font: 400 15px 'IBM Plex Sans',Arial;
        color: var(--muted)
    }

.metric p {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    min-height: 16px
}

    .metric p b {
        font-weight: 600;
        color: var(--ink)
    }

.overview {
    display: grid;
    grid-template-columns: 1.1fr 1.25fr 1fr;
    gap: 16px;
    margin: 16px 0 24px
}

.panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px 22px 0
}

h2 {
    font-size: 17px;
    font-weight: 600;
    margin: 0
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .1px;
    color: var(--muted)
}

.power-layout {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px 20px 0;
    gap: 15px
}

.gauge {
    position: relative;
    width: 48%;
    max-width: 220px;
    flex-shrink: 0
}

    .gauge svg {
        display: block;
        width: 100%;
        fill: none;
        stroke-width: 12;
        stroke-linecap: round
    }

.gauge-track {
    stroke: var(--line)
}

#gauge-value {
    stroke: var(--solar);
    stroke-dasharray: 46 100
}

.gauge > div {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    text-align: center
}

.gauge strong {
    font: 600 24px 'Barlow Semi Condensed',Arial;
    white-space: nowrap
}

.gauge span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px
}

.power-reading > span, .impact-line div > span {
    font-size: 13px;
    color: var(--muted)
}

.power-reading strong {
    display: block;
    font: 600 28px 'Barlow Semi Condensed',Arial;
    color: var(--solar);
    margin: 7px 0
}

.power-reading small {
    font-size: 10px;
    color: var(--muted)
}

.source-note {
    font-size: 11px;
    line-height: 1.6;
    color: var(--muted);
    margin: 8px 22px 16px
}

.health-numbers {
    display: grid;
    grid-template-columns: 1.15fr 1.3fr .8fr;
    margin: 25px 16px 22px;
    gap: 4px
}

    .health-numbers button {
        border: 0;
        background: none;
        text-align: left;
        padding: 0 8px;
        border-radius: 3px
    }

        .health-numbers button + button {
            padding-left: 16px
        }

    .health-numbers strong {
        display: block;
        font: 600 40px 'Barlow Semi Condensed',Arial;
        margin-bottom: 9px
    }

    .health-numbers span {
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap
    }

.green {
    color: var(--green)
}

.red {
    color: var(--red)
}

.yellow {
    color: var(--yellow)
}

.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px
}

.green-bg {
    background: var(--green)
}

.red-bg {
    background: var(--red)
}

.yellow-bg {
    background: var(--yellow)
}

.health-bar {
    margin: 0 24px;
    height: 5px;
    border-radius: 8px;
    background: var(--red);
    overflow: hidden
}

    .health-bar span {
        display: block;
        height: 100%;
        background: var(--green);
        width: 87%
    }

.health-foot {
    display: flex;
    justify-content: space-between;
    margin: 12px 24px 18px;
    font-size: 11px;
    color: var(--muted)
}

.impact-line {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 17px 22px
}

.impact-icon {
    font-size: 30px;
    color: var(--green)
}

.impact-line strong {
    display: block;
    font: 600 27px 'Barlow Semi Condensed',Arial;
    margin-top: 3px
}

    .impact-line strong small {
        font: 12px Arial;
        color: var(--muted)
    }

.impact .source-note {
    font-size: 10px
}

.installations {
    overflow: visible
}

.installations-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px
}

    .installations-heading p {
        color: var(--muted);
        font-size: 13px;
        margin: 7px 0 0
    }

.badge {
    font-size: 12px;
    border: 1px solid var(--line);
    background: var(--panel);
    padding: 3px 7px;
    border-radius: 5px;
    margin-left: 7px;
    color: var(--muted)
}

.text-button {
    padding: 9px 13px;
    font-size: 13px;
    background: transparent
}

.toolbar {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 0 22px 19px
}

.filters {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

    .filters button {
        padding: 8px 12px;
        background: transparent;
        border-color: transparent;
        font-size: 12px;
        white-space: nowrap
    }

        .filters button.active {
            background: color-mix(in srgb,var(--solar) 12%,transparent);
            color: var(--solar);
            border-color: color-mix(in srgb,var(--solar) 25%,transparent)
        }

    .filters span {
        margin-left: 6px
    }

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 11px;
    background: var(--ground)
}

    .search > span {
        color: var(--muted);
        font-size: 21px
    }

    .search input {
        width: 195px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-size: 12px;
        padding: 10px 0
    }

.table-wrap {
    overflow-x: auto;
    border-radius: 0 0 14px 14px
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    white-space: nowrap
}

thead {
    background: var(--panel)
}

th {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--ink);
    padding: 14px 14px 12px;
    vertical-align: top
}

    th:first-child, td:first-child {
        padding-left: 22px
    }

    th span {
        display: block;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--muted);
        margin-top: 3px;
        white-space: nowrap
    }

    th button {
        background: none;
        border: 0;
        text-align: left;
        padding: 0;
        font: inherit;
        color: inherit;
        letter-spacing: inherit
    }

        th button:hover {
            color: var(--solar)
        }

abbr {
    text-decoration: none
}

td {
    border-bottom: 1px solid var(--line);
    padding: 15px 14px;
    font-size: 13px
}

tbody tr:hover {
    background: var(--panel)
}

.plant-title {
    font-size: 13px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-weight: 500
}

.plant-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 6px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis
}

.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 7px;
    border-radius: 5px;
    background: color-mix(in srgb,var(--green) 8%,transparent);
    font-size: 11px;
    color: var(--green)
}

    .status-chip.offline {
        color: var(--red);
        background: color-mix(in srgb,var(--red) 8%,transparent)
    }

    .status-chip.alert {
        color: var(--yellow);
        background: color-mix(in srgb,var(--yellow) 8%,transparent)
    }

.secondary {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 6px
}

.power-cell {
    color: var(--solar)
}

.mini-bar {
    height: 3px;
    background: var(--line);
    margin-top: 8px;
    max-width: 75px;
    border-radius: 3px
}

    .mini-bar span {
        height: 100%;
        display: block;
        background: var(--solar);
        border-radius: 3px
    }

.table-footer {
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted)
}

.pagination {
    display: flex;
    align-items: center;
    gap: 14px
}

    .pagination button {
        width: 28px;
        height: 28px;
        font-size: 20px
    }

    .pagination select {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 5px;
        padding: 4px;
        margin-left: 6px;
        color: var(--ink);
        font-size: 12px
    }

footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 0;
    color: var(--muted);
    font-size: 11px
}

    footer b {
        color: var(--ink);
        font-weight: 500
    }

.empty {
    text-align: center;
    padding: 45px;
    color: var(--muted)
}

@media(min-width:1650px) {
    main {
        padding: 30px 40px
    }

    .metric {
        padding: 24px
    }

    .overview {
        margin-bottom: 26px
    }

    .power-layout {
        padding-top: 18px
    }

    .health-numbers {
        margin-top: 32px;
        margin-bottom: 28px
    }

    td {
        padding-top: 19px;
        padding-bottom: 19px
    }
}

@media(max-width:1150px) {
    main {
        padding: 20px
    }

    .overview {
        grid-template-columns: 1fr 1fr
    }

    .impact {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

        .impact .panel-title {
            padding: 18px
        }

    .impact-line {
        margin: 15px
    }

    .toolbar {
        flex-wrap: wrap
    }

    .metrics {
        gap: 10px
    }

    .metric {
        padding: 15px
    }

        .metric strong {
            font-size: 32px
        }
}

@media(max-width:720px) {
    main {
        padding: 14px
    }

    header {
        flex-wrap: wrap;
        gap: 14px
    }

    .brand {
        font-size: 34px
    }

    .company {
        padding-left: 14px;
        flex: 1
    }

        .company h1 {
            font-size: 17px
        }

        .company p {
            font-size: 12px
        }

    .header-tools {
        width: 100%;
        justify-content: flex-end
    }

    .preview {
        margin-right: auto
    }

    .context {
        font-size: 10px;
        line-height: 1.6
    }

    .metrics {
        grid-template-columns: repeat(2,1fr)
    }

    .metric:last-child {
        grid-column: 1/-1
    }

    .metric strong {
        font-size: 36px
    }

    .overview {
        grid-template-columns: 1fr
    }

    .impact {
        display: block
    }

        .impact .panel-title {
            padding: 20px 22px 0
        }

    .impact-line {
        margin: 18px 22px
    }

    .health-numbers {
        margin-top: 23px
    }

    .installations-heading {
        padding: 18px;
        gap: 10px
    }

        .installations-heading p {
            line-height: 1.5
        }

    .toolbar {
        padding: 0 14px 15px
    }

    .filters {
        gap: 2px
    }

        .filters button {
            padding: 8px
        }

    .search {
        width: 100%
    }

        .search input {
            width: 100%
        }

    .table-footer {
        padding: 14px;
        gap: 14px;
        flex-wrap: wrap
    }

    footer {
        gap: 20px;
        line-height: 1.6
    }

    .eyebrow {
        font-size: 11px
    }

    .text-button {
        white-space: nowrap
    }
}

@media(max-width:720px) {
    .metric strong small {
        display: block;
        margin-top: 5px
    }

    .metric strong {
        font-size: 32px
    }

    .metric p {
        line-height: 1.5
    }
}

.brand-mark {
    display: block;
    width: 152px;
    height: 44px;
    background: url(/images/logoEsenzDark.png) no-repeat left center;
    background-size: contain
}

:root[data-theme=light] .brand-mark {
    background-image: url(/images/logoCompany.png)
}

@media(max-width:720px) {
    .brand-mark {
        width: 126px;
        height: 36px
    }
}

.customer-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    margin-right: 6px;
    color: var(--muted);
    background: var(--card);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap
}

    .customer-link:hover, .customer-link:focus-visible {
        color: var(--solar);
        border-color: var(--solar)
    }

.downloads {
    margin-top: 18px
}

.download-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-top: 14px;
    padding: 0 22px
}

    .download-form label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 12px;
        letter-spacing: .1px;
        color: var(--muted)
    }

    .download-form select, .download-form input {
        height: 38px;
        margin: 0;
        padding: 0 10px;
        min-width: 150px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--ink);
        font: 14px 'IBM Plex Sans',Arial,sans-serif;
        text-transform: none;
        letter-spacing: 0
    }

    .download-form .text-button {
        height: 38px
    }

.download-result {
    margin: 14px 0 0;
    padding: 0 22px 20px;
    color: var(--muted);
    font-size: 14px
}

    .download-result a {
        color: var(--solar);
        font-weight: 600
    }

.view-actions {
    display: flex;
    gap: 10px;
    align-items: center
}







.panel {
    position: relative
}

:root[data-theme=light] .panel, :root[data-theme=light] .metric {
    box-shadow: 0 6px 18px rgba(31,68,132,.05)
}

.panel-title {
    align-items: center;
    gap: 11px;
    padding: 16px 18px 0
}

.panel-ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb,var(--pi) 14%,transparent);
    color: var(--pi)
}

    .panel-ic svg {
        width: 18px;
        height: 18px;
        display: block
    }

.panel-ic--sun {
    --pi: var(--solar)
}

.panel-ic--heart {
    --pi: var(--violet)
}

.panel-ic--leaf {
    --pi: var(--green)
}

.panel-title h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .1px;
    margin-right: auto
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1px;
    color: var(--muted);
    white-space: nowrap
}

    .eyebrow svg {
        width: 14px;
        height: 14px;
        flex: none;
        color: var(--accent2,var(--blue))
    }

.output .eyebrow svg {
    color: var(--blue)
}

.health .eyebrow svg {
    color: var(--violet)
}

.impact .eyebrow svg {
    color: var(--green)
}

/* Solar power */
.power-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 14px 18px 20px
}

.gauge {
    position: relative;
    flex: none;
    width: 152px;
    max-width: none;
    padding-bottom: 15px
}

    .gauge svg {
        display: block;
        width: 100%;
        fill: none;
        stroke-width: 11;
        stroke-linecap: round
    }

.gauge-track {
    stroke: color-mix(in srgb,var(--line) 85%,transparent)
}

#gauge-value {
    stroke: var(--solar);
    stroke-dasharray: 46 100
}

.gauge > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    text-align: center
}

.gauge strong {
    font: 700 19px'Barlow Semi Condensed',Arial,sans-serif;
    white-space: nowrap
}

    .gauge strong small {
        display: block;
        font: 600 10.5px'IBM Plex Sans',Arial,sans-serif;
        color: var(--muted);
        margin: 1px 0 0;
        letter-spacing: .4px
    }

.gauge > div span {
    display: block;
    font-size: 9.5px;
    color: var(--muted);
    margin-top: 1px
}

.gauge-min, .gauge-max {
    position: absolute;
    bottom: 0;
    font-size: 9.5px;
    color: var(--muted);
    white-space: nowrap
}

.gauge-min {
    left: 8px
}

.gauge-max {
    right: 2px
}

.power-reading {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 22px;
    border-left: 1px solid var(--line);
    text-align: center
}

    .power-reading .pr-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 500;
        color: var(--blue)
    }

        .power-reading .pr-label svg {
            width: 15px;
            height: 15px;
            flex: none;
            color: var(--green)
        }

    .power-reading strong {
        display: block;
        font: 700 27px'Barlow Semi Condensed',Arial,sans-serif;
        color: var(--ink);
        margin: 6px 0 4px;
        white-space: nowrap
    }

    .power-reading small {
        font-size: 11px;
        color: var(--muted)
    }

/* Portfolio health */
.health-numbers {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin: 16px 18px 14px;
    gap: 14px
}

    .health-numbers button {
        border: 0;
        background: none;
        text-align: left;
        padding: 0 10px;
        border-radius: 6px
    }

        .health-numbers button:first-child {
            padding-left: 0
        }

.hn-top {
    display: flex;
    align-items: center;
    gap: 7px
}

.health-numbers strong {
    display: block;
    font: 700 26px'Barlow Semi Condensed',Arial,sans-serif;
    margin: 0
}

.hn-label {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.dot {
    width: 7px;
    height: 7px;
    margin: 0;
    flex: none
}

.health-bar {
    display: flex;
    margin: 0 18px;
    height: 8px;
    border-radius: 6px;
    background: var(--red);
    overflow: hidden
}

    .health-bar span {
        display: block;
        height: 100%;
        background: var(--green)
    }

    .health-bar i {
        display: block;
        height: 100%;
        margin-left: auto;
        background: color-mix(in srgb,var(--yellow) 65%,#ffc93f)
    }

.health-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 18px 16px;
    font-size: 11px;
    color: var(--muted)
}

/* Environmental impact */
.impact {
    overflow: hidden
}

.impact-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 18px 18px 0
}

.impact-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0
}

.impact-ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb,var(--green) 14%,transparent);
    color: var(--green)
}

    .impact-ic svg {
        width: 24px;
        height: 24px;
        display: block
    }

.impact-figure {
    min-width: 0
}

    .impact-figure > span {
        display: block;
        font-size: 11.5px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .impact-figure strong {
        display: block;
        margin-top: 6px;
        font: 700 20px'Barlow Semi Condensed',Arial,sans-serif;
        white-space: nowrap
    }

        .impact-figure strong small {
            font: 600 11px'IBM Plex Sans',Arial;
            color: var(--muted);
            margin-left: 4px
        }

.impact .source-note {
    font-size: 10.5px;
    margin: 16px 18px 18px
}

@media(max-width:1150px) {
    .overview {
        grid-template-columns: 1fr 1fr
    }

    .impact {
        grid-column: 1/-1;
        display: block
    }

    .impact-stats {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:720px) {
    .overview {
        grid-template-columns: 1fr
    }

    .power-layout {
        gap: 14px;
        padding: 14px
    }

    .gauge {
        width: 132px
    }

    .power-reading {
        padding-left: 14px
    }

    .health-numbers {
        margin: 14px;
        gap: 0
    }

        .health-numbers strong {
            font-size: 23px
        }

    .hn-label {
        font-size: 10.5px
    }

    .health-bar, .health-foot {
        margin-left: 14px;
        margin-right: 14px
    }

    .impact-stats {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 14px 0
    }

    .impact .source-note {
        margin: 12px 14px 14px
    }
}

/* Infinite scroll sentinel under the installation list. */
.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 22px 22px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .4px
}

    .load-more[hidden] {
        display: none
    }

.load-more-dot {
    width: 14px;
    height: 14px;
    border: 2px solid var(--line);
    border-top-color: var(--solar);
    border-radius: 50%;
    animation: load-spin .9s linear infinite
}

@keyframes load-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .load-more-dot {
        animation: none;
        border-top-color: var(--line)
    }
}

/* View switch: a segmented control beside Export CSV. */
.view-row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px
}

.view-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s,background .15s,box-shadow .15s
}

    .view-chip svg {
        flex: none;
        opacity: .6;
        transition: opacity .15s
    }

    .view-chip:hover {
        color: var(--ink);
        background: color-mix(in srgb,var(--ink) 7%,transparent)
    }

        .view-chip:hover svg {
            opacity: .85
        }

    .view-chip:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: -2px
    }

    .view-chip.active {
        background: var(--card);
        color: var(--solar);
        font-weight: 500;
        box-shadow: 0 1px 2px rgba(16,38,64,.10),0 2px 6px rgba(16,38,64,.06)
    }

        .view-chip.active svg {
            opacity: 1
        }

:root:not([data-theme=light]) .view-chip.active {
    box-shadow: 0 1px 2px rgba(0,0,0,.45)
}

@media(max-width:1100px) {
    .view-chip span {
        display: none
    }

    .view-chip {
        padding: 8px 10px
    }
}

/* Rows and cards open their system dashboard. */
tbody tr.plant-row {
    cursor: pointer
}

    tbody tr.plant-row:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: -2px
    }

.plant-card[data-open] {
    cursor: pointer
}

    .plant-card[data-open]:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px
    }

.card-detail {
    color: var(--solar);
    font-size: 12px;
    white-space: nowrap
}

.plant-card:hover .card-detail {
    text-decoration: underline
}