/* Shared local-panel cards: TP4 and TP8 use the same renderer and visual language.
 * Responsive sheets change only density and layout, never the component. */
    html #breakerList .energy-card {
        --energy-ink: #172436;
        --energy-muted: #52647b;
        --energy-state: #288153;
        --energy-phase-tint: 236, 203, 45;
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-rows: 30px 5px minmax(0, 1fr) 22px;
        align-content: stretch;
        gap: 0;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: 1px solid #d3deea;
        border-radius: 11px;
        background: #ffffff;
        padding: 8px 12px;
        color: var(--energy-ink);
        box-shadow: none;
        font-variant-numeric: tabular-nums;
        text-align: left;
    }

    /* Phase colour is a quiet surface tint, separate from the state indicator.
     * Paint only the background: no overlay above text or touch targets. */
    html #breakerList .energy-card[data-supply-phase] {
        background-image: linear-gradient(150deg,
            rgba(var(--energy-phase-tint), 0.10) 0%,
            rgba(var(--energy-phase-tint), 0.035) 58%,
            rgba(var(--energy-phase-tint), 0.012) 100%);
    }

    html #breakerList .energy-card[data-supply-phase="L2"] {
        --energy-phase-tint: 64, 152, 106;
    }

    html #breakerList .energy-card[data-supply-phase="L3"] {
        --energy-phase-tint: 213, 84, 88;
    }

    html #breakerList .energy-card[data-supply-phase="three"] {
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 100%),
            linear-gradient(90deg,
                rgba(236, 203, 45, 0.11) 0%, rgba(236, 203, 45, 0.085) 25%,
                rgba(64, 152, 106, 0.085) 40%, rgba(64, 152, 106, 0.085) 60%,
                rgba(213, 84, 88, 0.075) 75%, rgba(213, 84, 88, 0.09) 100%);
    }

    html #breakerList .energy-card.is-unavailable {
        background-image: none;
    }

    html #breakerList .energy-card.selected {
        border-color: #7fadd7;
        box-shadow: inset 0 0 0 1px #7fadd7;
    }

    html #breakerList .energy-card [hidden] { display: none !important; }

    html #breakerList .energy-card.status-alarm {
        --energy-state: #b52c31;
        border-color: #dd8387;
    }

    html #breakerList .energy-card.status-warning {
        --energy-state: #9d630b;
        border-color: #d8b375;
    }

    /* Off needs attention, but remains distinct from a protection trip. */
    html #breakerList .energy-card.status-off .energy-state-dot {
        background: currentColor;
    }

    html #breakerList .energy-card.status-off {
        --energy-state: #b52c31;
    }

    html #breakerList .energy-card.status-offline,
    html #breakerList .energy-card.status-disabled,
    html #breakerList .energy-card.status-unknown {
        --energy-state: #64748b;
    }

    html #breakerList .energy-card.status-offline {
        --energy-muted: #65758a;
        background: #f7f9fc;
    }

    html #breakerList .energy-card-head {
        display: flex;
        grid-row: 1;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    html #breakerList .energy-card-indicators {
        display: grid;
        flex: 0 0 auto;
        grid-auto-flow: column;
        grid-auto-columns: 28px;
        grid-template-rows: 30px;
        align-items: center;
        justify-items: center;
        gap: 8px;
        height: 30px;
    }

    /* A miniature two-position selector reports the physical drive mode.
     * It is an indicator, not an on-screen control. */
    html #breakerList .energy-drive {
        display: block;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        margin: 0;
        color: #52799c;
        pointer-events: none;
    }

    html #breakerList .energy-drive svg {
        display: block;
        width: 26px;
        height: 26px;
        overflow: visible;
    }

    html #breakerList .energy-mode-body {
        fill: #f1f5f9;
        stroke: #95aabe;
        stroke-width: 1.3;
    }

    html #breakerList .energy-mode-divider {
        stroke: #becbd8;
        stroke-width: 1;
    }

    html #breakerList .energy-mode-thumb {
        fill: currentColor;
        stroke: #426684;
        stroke-width: 0.7;
        transform: translateY(0);
    }

    html #breakerList .energy-mode-glyph { transform: translateY(0); }
    html #breakerList .energy-mode-manual { fill: #ffffff; }
    html #breakerList .energy-mode-auto {
        display: block;
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    html #breakerList .energy-mode-manual { display: none; }
    html #breakerList .energy-drive[data-mode="manual"] { color: #a06b19; }
    html #breakerList .energy-drive[data-mode="manual"] .energy-mode-body { fill: #faf4e9; stroke: #b89b68; }
    html #breakerList .energy-drive[data-mode="manual"] .energy-mode-divider { stroke: #d4c19e; }
    html #breakerList .energy-drive[data-mode="manual"] .energy-mode-thumb { stroke: #825716; transform: translateY(10px); }
    html #breakerList .energy-drive[data-mode="manual"] .energy-mode-glyph { transform: translateY(10px); }
    html #breakerList .energy-drive[data-mode="manual"] .energy-mode-auto { display: none; }
    html #breakerList .energy-drive[data-mode="manual"] .energy-mode-manual { display: block; }

    html #breakerList .energy-card-heading {
        flex: 1 1 auto;
        min-width: 0;
    }

    html #breakerList .energy-card-name {
        display: block;
        overflow: hidden;
        margin: 0;
        color: var(--energy-ink);
        font-size: 23px;
        font-weight: 700;
        line-height: 26px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html #breakerList .energy-card-state {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        min-width: 0;
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        border: 0;
        border-radius: 9px;
        padding: 0;
        background: transparent;
        color: var(--energy-state);
    }

    html #breakerList .energy-card-state:active { background: #eaf2fa; }

    html #breakerList .energy-state-text { display: none; }

    html #breakerList .energy-state-dot {
        display: block;
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        border: 2.25px solid currentColor;
        border-radius: 50%;
        background: #edf0f3;
    }

    html #breakerList .energy-journal {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        border: 0;
        border-radius: 8px;
        padding: 0;
        background: transparent;
        color: #60738b;
    }

    html #breakerList .energy-journal > .energy-journal-outline {
        display: block;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    html #breakerList .energy-journal.is-fault[data-tone="alarm"] { color: #b52c31; }
    html #breakerList .energy-journal.is-fault[data-tone="warning"] { color: #9d630b; }
    html #breakerList .energy-journal-symbol {
        position: absolute;
        top: calc(50% - 1.5px);
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 17px;
        height: 17px;
        transform: translate(-50%, -50%);
        color: inherit;
        line-height: 0;
    }

    html #breakerList .energy-journal-symbol svg {
        display: block;
        width: 17px;
        height: 17px;
        fill: currentColor;
    }

    html #breakerList .energy-journal > small {
        position: absolute;
        top: calc(50% - 1.5px);
        left: 50%;
        min-width: 0;
        margin: 0;
        border: 0;
        padding: 0;
        transform: translate(-50%, -50%);
        background: transparent;
        color: inherit;
        font-size: 17px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        white-space: nowrap;
    }

    html #breakerList .energy-journal[data-count-size="double"] > small { font-size: 15px; }
    html #breakerList .energy-journal[data-count-size="long"] > small { font-size: 12px; }

    /* Treat live readings as one vertically centred group rather than two
     * independent rows with an expanding blank space between them. */
    html #breakerList .energy-card-content {
        display: flex;
        grid-row: 3;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        min-width: 0;
        min-height: 0;
    }

    html #breakerList .energy-card.is-three-phase .energy-card-content { gap: 12px; }
    html #breakerList .energy-card.has-alert .energy-card-content { gap: 4px; }

    html #breakerList .energy-card-primary {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: 0;
        color: var(--energy-ink);
    }

    /* The yellow / green / red rails identify phases, never alarm levels. */
    html #breakerList .energy-phase-rails {
        position: static;
        display: grid;
        grid-row: 2;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: 4px;
        height: 5px;
        pointer-events: none;
    }

    html #breakerList .energy-phase-rail {
        display: block;
        min-width: 0;
        height: 5px;
        border-radius: 2px;
    }

    html #breakerList .energy-rail-l1 { background: #eccb2d; }
    html #breakerList .energy-rail-l2 { background: #40986a; }
    html #breakerList .energy-rail-l3 { background: #d55458; }

    html #breakerList .energy-measurements {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: center;
        align-items: start;
        gap: 2px 4px;
        min-width: 0;
    }

    html #breakerList .energy-phase-reading {
        display: grid;
        grid-template-rows: auto auto auto;
        align-items: start;
        justify-items: start;
        gap: 4px;
        min-width: 0;
        text-align: left;
    }

    html #breakerList .energy-measure {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 3px;
        min-width: 0;
        min-height: 34px;
        color: var(--energy-ink);
        white-space: nowrap;
    }

    html #breakerList .energy-measure > strong {
        color: inherit;
        font-size: 30px;
        font-weight: 650;
        letter-spacing: -0.7px;
        line-height: 34px;
        white-space: nowrap;
    }

    html #breakerList .energy-measure > small {
        color: inherit;
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        white-space: nowrap;
    }

    /* Only a verified, adjustable current limit occupies the second row. */
    html #breakerList .energy-current-block {
        display: grid;
        grid-template-rows: 34px auto;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    html #breakerList .energy-current-limit {
        min-width: 0;
        color: var(--energy-muted);
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        white-space: nowrap;
    }

    html #breakerList .energy-power-block {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 3px;
        min-width: 0;
        min-height: 34px;
    }

    html #breakerList .energy-card:not(.is-three-phase) .energy-phase-reading { display: contents; }
    html #breakerList .energy-card:not(.is-three-phase) .energy-voltage-block { grid-column: 1; grid-row: 1; }
    html #breakerList .energy-card:not(.is-three-phase) .energy-current-block { grid-column: 2; grid-row: 1; }
    html #breakerList .energy-card:not(.is-three-phase) .energy-power-block { grid-column: 3; grid-row: 1; justify-content: flex-start; }

    html #breakerList .energy-alert {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: center;
        align-items: center;
        gap: 2px 5px;
        min-width: 0;
    }

    html #breakerList .energy-primary-label {
        grid-column: 1;
        grid-row: 1;
        color: var(--energy-muted);
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
    }

    html #breakerList .energy-primary-reading {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        align-items: baseline;
        justify-content: flex-end;
        gap: 3px;
        min-width: 0;
        white-space: nowrap;
    }

    html #breakerList .energy-primary-value {
        color: inherit;
        font-size: 30px;
        font-weight: 650;
        line-height: 34px;
        white-space: nowrap;
    }

    html #breakerList .energy-primary-unit {
        color: inherit;
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
    }

    html #breakerList .energy-alert-context {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
    }

    html #breakerList .energy-primary-hint {
        color: var(--energy-muted);
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        white-space: nowrap;
    }

    html #breakerList .energy-primary-hint {
        flex: 1 1 auto;
        margin: 0;
        text-align: left;
    }

    html #breakerList .energy-status-note {
        grid-column: 1 / -1;
        color: var(--energy-muted);
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        white-space: normal;
        text-align: left;
    }
    html #breakerList .energy-event-network {
        display: flex;
        grid-column: 1 / -1;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0 8px;
        color: #33465f;
        font-size: 22px;
        font-weight: 600;
        line-height: 25px;
    }

    html #breakerList .energy-event-voltage-block {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        white-space: nowrap;
    }

    html #breakerList .energy-card-primary[data-tone="alarm"] .energy-primary-label,
    html #breakerList .energy-card-primary[data-tone="alarm"] .energy-primary-value,
    html #breakerList .energy-card-primary[data-tone="alarm"] .energy-primary-unit { color: #b52c31; }
    html #breakerList .energy-card-primary[data-tone="warning"] .energy-primary-label,
    html #breakerList .energy-card-primary[data-tone="warning"] .energy-primary-value,
    html #breakerList .energy-card-primary[data-tone="warning"] .energy-primary-unit { color: #9d630b; }

    html #breakerList .energy-card-metrics {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(52px, auto);
        align-content: start;
        align-items: start;
        gap: 0 4px;
        min-width: 0;
        min-height: 52px;
        padding: 0;
    }

    /* Device-wide readings form a content-sized group around the card centre,
     * independent of the phase columns. Whitespace is the only separator. */
    html #breakerList .energy-card.is-three-phase .energy-card-metrics {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 0 16px;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

    html #breakerList .energy-card.is-three-phase .energy-card-metrics > div {
        flex: 0 1 auto;
        justify-items: center;
        text-align: center;
    }

    html #breakerList .energy-card.is-three-phase .energy-card-metrics .energy-measure,
    html #breakerList .energy-card.is-three-phase .energy-frequency-limit {
        justify-content: center;
    }

    /* Single-phase cards retain fixed lower positions for frequency/leakage;
     * their first cell stays empty because power is already beside U and I.
     * Three-phase cards override this grid with the centred group above. */
    html #breakerList .energy-total-power-block,
    html #breakerList .energy-frequency-block,
    html #breakerList .energy-leakage-row {
        display: grid;
        grid-row: 1;
        grid-template-rows: 34px 18px;
        align-content: start;
        align-items: start;
        justify-items: start;
        gap: 0;
        min-width: 0;
        min-height: 52px;
        text-align: left;
    }

    html #breakerList .energy-total-power-block { grid-column: 1; }
    html #breakerList .energy-frequency-block {
        grid-column: 2;
        grid-template-rows: 34px auto;
    }
    html #breakerList .energy-leakage-row { grid-column: 3; }

    html #breakerList .energy-voltage-limit {
        min-width: 0;
        color: var(--energy-muted);
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        white-space: nowrap;
    }

    html #breakerList .energy-voltage-block {
        min-width: 0;
        text-align: left;
    }

    html #breakerList .energy-frequency-limit,
    html #breakerList .energy-leakage-threshold {
        grid-row: 2;
        min-width: 0;
        color: var(--energy-muted);
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        white-space: nowrap;
    }

    /* Exact fractional limits may use two lines, but never smaller type or
     * a break within a numeric value. A range separator is a valid break. */
    html #breakerList .energy-frequency-limit {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    html #breakerList .energy-frequency-limit-low,
    html #breakerList .energy-frequency-limit-high { white-space: nowrap; }

    html #breakerList .energy-total-power,
    html #breakerList .energy-frequency,
    html #breakerList .energy-leakage-reading {
        grid-row: 1;
        justify-content: flex-start;
    }

    /* Estimated power may be wider than a three-column cell. Only its unit
     * wraps; the approximation mark and normal-range value fit together.
     * The unused threshold row provides space without enlarging the card. */
    html #breakerList .energy-power,
    html #breakerList .energy-total-power {
        flex-wrap: wrap;
        align-content: start;
        gap: 0 3px;
        max-width: 100%;
    }

    html #breakerList .energy-total-power { grid-row: 1 / -1; }
    html #breakerList .energy-power > .energy-power-unit,
    html #breakerList .energy-total-power > .energy-total-power-unit { line-height: 18px; }

    html #breakerList .energy-card-footer {
        display: flex;
        grid-row: 4;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
        min-height: 22px;
        margin: 0;
        color: var(--energy-muted);
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
    }

    html #breakerList .energy-rating {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html #breakerList .energy-temperature {
        display: block;
        flex: 0 0 auto;
        margin-left: auto;
        color: var(--energy-muted);
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
        text-align: right;
        white-space: nowrap;
    }

    html #breakerList .energy-card-open {
        /* The shared component also runs without the panel's app.css.
         * Keep its full-card hit target here, below the journal button. */
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: inherit;
        padding: 0;
        background: transparent;
    }

    html #breakerList .energy-card-open:active {
        transform: none;
        background: rgba(48, 111, 167, 0.045);
    }

    html #breakerList .energy-journal:active { background: #eaf2fa; }
    html #breakerList .energy-card-open:focus-visible,
    html #breakerList .energy-card-state:focus-visible,
    html #breakerList .energy-journal:focus-visible {
        outline: 3px solid #367db8;
        outline-offset: -3px;
    }

    html #breakerList .energy-card.is-unavailable .energy-alert,
    html #breakerList .energy-card.is-unavailable .energy-measure,
    html #breakerList .energy-card.is-unavailable .energy-leakage-row { color: #738297; }

@media (orientation: landscape) and (min-width: 850px) and (max-width: 1050px) {
    /* Three live rows per phase plus totals must fit the same six-card grid.
     * Keep U / I / P equal in size; secondary limits use a quieter line. */
    html #breakerList .energy-card.is-three-phase .energy-card-content { gap: 8px; }
    html #breakerList .energy-card.is-three-phase .energy-phase-reading { gap: 2px; }
    html #breakerList .energy-card.is-three-phase .energy-measure { min-height: 30px; gap: 2px; }
    html #breakerList .energy-card.is-three-phase .energy-measure > strong { font-size: 27px; line-height: 30px; }
    html #breakerList .energy-card.is-three-phase .energy-measure > small { font-size: 16px; line-height: 20px; }
    html #breakerList .energy-card.is-three-phase .energy-current-block,
    html #breakerList .energy-card.is-three-phase .energy-total-power-block,
    html #breakerList .energy-card.is-three-phase .energy-frequency-block,
    html #breakerList .energy-card.is-three-phase .energy-leakage-row { grid-template-rows: 30px auto; }
    html #breakerList .energy-card.is-three-phase .energy-card-metrics { min-height: 46px; column-gap: 12px; }
    html #breakerList .energy-card.is-three-phase .energy-total-power-block,
    html #breakerList .energy-card.is-three-phase .energy-frequency-block,
    html #breakerList .energy-card.is-three-phase .energy-leakage-row { min-height: 46px; }
    html #breakerList .energy-card.is-three-phase .energy-voltage-limit,
    html #breakerList .energy-card.is-three-phase .energy-current-limit,
    html #breakerList .energy-card.is-three-phase .energy-frequency-limit,
    html #breakerList .energy-card.is-three-phase .energy-leakage-threshold { font-size: 14px; line-height: 16px; }

    /* Six readable cards remain visible; further devices scroll into view. */
    html #breakerList.energy-dashboard[data-layout="eight"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: calc((100% - var(--app-gap)) / 2);
        align-content: start;
        overflow-y: auto;
    }

    html #breakerList[data-layout="one"] .energy-card,
    html #breakerList[data-layout="two"] .energy-card {
        grid-template-rows: 36px 5px minmax(0, 1fr) 22px;
        padding: 12px 16px 8px;
    }

    html #breakerList[data-layout="one"] .energy-card-name,
    html #breakerList[data-layout="two"] .energy-card-name { font-size: 24px; line-height: 28px; }

}