/* v9.8.262 — canonical semantic + responsive device-card body.
   Resize is CSS-native: no per-card ResizeObserver, DOM measurement or forced
   reflow. Semantic formatters provide full/reduced/compact variants; container
   queries select geometry and precision from the real card-body width. */

/* --------------------------------------------------------------------------
   Device collection geometry
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
    /* v256: stable desktop card width. The collection decides how many cards
       fit, but a disappearing neighbour no longer lets the remaining card grow
       to 600-700 px. 310 px is compact but still usable with adaptive values;
       420 px is the preferred upper bound for the universal card body. */
    .device-card-grid:not(.admin-user-device-live-grid) {
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
        justify-content: start !important;
        justify-items: start !important;
        align-items: start !important;
        grid-auto-flow: row !important;
    }
    .device-card-grid:not(.admin-user-device-live-grid) > .device-card {
        width: 100% !important;
        max-width: 420px !important;
    }
}

/* --------------------------------------------------------------------------
   Canonical card-width container
   -------------------------------------------------------------------------- */
.device-card .device-card-frame {
    container-type: inline-size;
    container-name: device-card;
}

.device-card .device-card-live-values.device-card-body-v258 {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value {
    box-sizing: border-box;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    /* v9.8.262 — ordinary UI has no parameter-cell separators.
       Developer Mode gets a diagnostic frame via data-param-inspector. */
    box-shadow: none !important;
    overflow: visible !important;
}


/* v9.8.262 — canonical separator ownership. This rule deliberately does not
   depend on a particular layout profile (v258/priority/integrated/etc.). */
.device-card .device-card-live-values:not(.has-bqs-area-summary)
    > .device-card-live-value:not([data-param-inspector="1"]) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Unweighted / low-importance geometry. This also covers explicit importance=1
   frames, which intentionally do not enter the priority hierarchy.
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="1"] { grid-template-columns: minmax(0, 1fr) !important; }
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="2"],
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="3"],
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="5"] > .device-card-live-value:nth-child(-n+3) { grid-column: span 2 !important; }
.device-card .device-card-live-values.device-card-body-v258:not(.has-priority-hierarchy)[data-telemetry-count="5"] > .device-card-live-value:nth-child(n+4) { grid-column: span 3 !important; }

/* --------------------------------------------------------------------------
   Implicit importance uses exactly the same deterministic count-based grid as
   the low-importance case above. `has-auto-balanced-layout` remains metadata
   only; it no longer introduces a second, competing grid coordinate system.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Semantic importance hierarchy
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense !important;
    grid-auto-rows: minmax(40px, auto) !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value {
    grid-column: span 2 !important;
    min-height: 42px !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value.is-only-body-item { grid-column: 1 / -1 !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy[data-primary-count="1"] > .device-card-live-value.visual-priority-primary { grid-column: span 3 !important; min-height: 74px !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy[data-primary-count="2"] > .device-card-live-value.visual-priority-primary { grid-column: span 3 !important; min-height: 70px !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy:not([data-primary-count="1"]):not([data-primary-count="2"]) > .device-card-live-value.visual-priority-primary { grid-column: span 2 !important; min-height: 66px !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value.visual-priority-secondary { grid-column: span 3 !important; min-height: 52px !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value.visual-priority-peripheral { grid-column: span 2 !important; min-height: 42px !important; }

/* SOC tile stays semantic, importance still decides its level. */
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .semantic-battery-soc-tile {
    padding: var(--space-2) !important;
    opacity: 1 !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .semantic-battery-soc-tile .integrated-battery-status {
    justify-content: center !important;
    gap: 0 !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .semantic-battery-soc-tile .integrated-battery-visual {
    width: 64px !important;
    height: 34px !important;
    flex: 0 0 64px !important;
    margin: 0 auto !important;
}

/* Dominant SOC: use space beside the battery instead of an empty full-width row. */
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-hero-layout > .device-card-live-value.layout-battery-hero {
    grid-column: 1 / span 3 !important;
    grid-row: 1 / span 2 !important;
    min-height: 104px !important;
    padding: var(--space-3) !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-hero-layout > .device-card-live-value.layout-battery-side-top { grid-column: 4 / span 3 !important; grid-row: 1 !important; min-height: 52px !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-hero-layout > .device-card-live-value.layout-battery-side-bottom { grid-column: 4 / span 3 !important; grid-row: 2 !important; min-height: 52px !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-hero-layout > .device-card-live-value.layout-battery-hero .integrated-battery-visual { width: 78px !important; height: 42px !important; flex-basis: 78px !important; }

/* Equal importance battery trio: voltage | SOC | current. */
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-tie-layout > .device-card-live-value.layout-battery-tie-left { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-tie-layout > .device-card-live-value.layout-battery-tie-center { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-battery-tie-layout > .device-card-live-value.layout-battery-tie-right { grid-column: 5 / span 2 !important; grid-row: 1 !important; }

/* --------------------------------------------------------------------------
   Adaptive semantic variants — all candidates are rendered once. CSS switches
   visibility; resize never mutates DOM or measures scrollWidth/offsetWidth.
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.device-card-body-v258 .adaptive-value-variant {
    display: none;
    min-width: 0;
    max-width: 100%;
    align-items: baseline;
    justify-content: inherit;
    white-space: nowrap;
}
.device-card .device-card-live-values.device-card-body-v258 .adaptive-variant-full { display: inline-flex; }
.device-card .device-card-live-values.device-card-body-v258 .adaptive-value-unit { margin-left: 2px; white-space: nowrap; }
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value > strong.device-card-adaptive-value {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Companion values use the same profile but remain visually secondary. */
.device-card .device-card-live-values.device-card-body-v258 .adaptive-device-live-companion {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}
.device-card .device-card-live-values.device-card-body-v258 .adaptive-device-live-companion .device-live-companion-role {
    white-space: nowrap;
}
.device-card .device-card-live-values.device-card-body-v258 .adaptive-companion-value {
    min-width: 0;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy .device-live-companion {
    margin-top: 2px !important;
    color: var(--iot-card-muted) !important;
    font-size: .5rem !important;
    line-height: 1.1 !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* --------------------------------------------------------------------------
   Declarative presentation contract (v257)
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.presentation-visibility-hidden {
    display: none !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value[data-presentation-span="full"] {
    grid-column: 1 / -1 !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.presentation-size-dominant {
    min-height: 66px !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.presentation-size-compact {
    min-height: 36px !important;
}

/* Generic preferred-area trio. It is activated by JS only when left/center/right
   candidates have the same effective rank, so presentation never changes
   importance. */
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-presentation-area-layout > .device-card-live-value.layout-preferred-left {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-presentation-area-layout > .device-card-live-value.layout-preferred-center {
    grid-column: 3 / span 2 !important;
    grid-row: 1 !important;
}
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy.has-presentation-area-layout > .device-card-live-value.layout-preferred-right {
    grid-column: 5 / span 2 !important;
    grid-row: 1 !important;
}

/* --------------------------------------------------------------------------
   Unified MARKER + VALUE geometry (v9.8.259)

   A marker can be an icon, a label or an ID/address. Geometry never branches
   on marker type. The marker owns its real intrinsic box and the value starts
   only after that box. Text markers may shorten; measured values may not be
   character-clipped.

   Horizontal default:
       [ marker max-content ][ gap ][ value ]

   Centered VALUE (not centered pair):
       [ marker ][ flexible value column ][ invisible marker twin ]

   The hidden twin uses the same content and therefore the same intrinsic width.
   This preserves the value axis in the physical center for custom icons and
   text markers alike.
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 7px !important;
    row-gap: 1px !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker > .device-card-live-marker {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Text is allowed to yield space to the value. The value itself is never
   shortened by CSS. The label/ID is the expendable part of the pair. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker > .device-card-live-marker.marker-kind-text {
    max-width: 7.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker > .device-card-live-marker.marker-kind-text .device-card-live-label-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Icon dimensions come exclusively from the icon renderer. No 18/20/22 px
   assumptions are made here. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker .parameter-visual-icon,
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker > .device-card-marker-balance .parameter-visual-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    justify-self: stretch !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker > .device-live-companion {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
}

.device-card .device-card-live-values.device-card-body-v258 .device-card-marker-balance {
    display: none;
    width: max-content;
    min-width: 0;
    height: auto;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    align-items: center;
    gap: 4px;
}
.device-card .device-card-live-values.device-card-body-v258 .device-card-marker-balance.marker-kind-text {
    max-width: 7.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Exact value-axis centering, independent of marker type or width. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-center:not(.presentation-layout-vertical) {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-center:not(.presentation-layout-vertical) > .device-card-live-marker {
    justify-self: end !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-center:not(.presentation-layout-vertical) > strong {
    grid-column: 2 !important;
    justify-self: center !important;
    text-align: center !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-center:not(.presentation-layout-vertical) > .device-card-marker-balance {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-center:not(.presentation-layout-vertical) > .device-live-companion {
    grid-column: 2 !important;
    text-align: center !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-right:not(.presentation-layout-vertical) {
    grid-template-columns: max-content max-content !important;
    justify-content: end !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-right:not(.presentation-layout-vertical) > strong,
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-align-right:not(.presentation-layout-vertical) > .device-live-companion {
    width: auto !important;
    text-align: right !important;
}

/* Vertical presentation is also marker-agnostic. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    row-gap: 3px !important;
    min-height: 56px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical > .device-card-live-marker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 0 auto !important;
    max-width: 85% !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical > strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    width: auto !important;
    text-align: center !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical > .device-card-marker-balance {
    display: none !important;
}
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical > .device-live-companion {
    grid-column: 1 !important;
    grid-row: 3 !important;
    text-align: center !important;
}

/* Non-numeric/status values cannot lose precision semantically. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value > strong:not(.device-card-adaptive-value) {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Card-width adaptation. Geometry stays profile-stable through the normal
   desktop range. Container queries only choose precision/orientation; they do
   not measure DOM and do not assume an icon width.
   -------------------------------------------------------------------------- */
@container device-card (max-width: 420px) {
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-full { display: none; }
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-reduced { display: inline-flex; }

    /* AUTO orientation may move a wide parameter vertical. Explicit horizontal
       stays horizontal; explicit vertical was already handled above. */
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-wide {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        justify-items: center !important;
        align-content: center !important;
        row-gap: 3px !important;
        min-height: 56px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-wide > .device-card-live-marker { grid-column: 1 !important; grid-row: 1 !important; justify-self: center !important; margin: 0 auto !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-wide > strong { grid-column: 1 !important; grid-row: 2 !important; justify-self: center !important; width: auto !important; text-align: center !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-wide > .device-card-marker-balance { display: none !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-wide > .device-live-companion { grid-column: 1 !important; grid-row: 3 !important; text-align: center !important; }
}

@container device-card (max-width: 360px) {
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-reduced { display: none; }
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-compact { display: inline-flex; }
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-medium .adaptive-variant-full { display: none; }
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-medium .adaptive-variant-reduced { display: inline-flex; }

    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-medium {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        justify-items: center !important;
        align-content: center !important;
        row-gap: 3px !important;
        min-height: 56px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-medium > .device-card-live-marker { grid-column: 1 !important; grid-row: 1 !important; justify-self: center !important; margin: 0 auto !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-medium > strong { grid-column: 1 !important; grid-row: 2 !important; justify-self: center !important; width: auto !important; text-align: center !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-medium > .device-card-marker-balance { display: none !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-orientation-auto.value-width-medium > .device-live-companion { grid-column: 1 !important; grid-row: 3 !important; text-align: center !important; }
}

/* Emergency geometry fallback only for genuinely tiny cards. The icon track is
   still intrinsic max-content — there is no fixed 18/20/22 px assumption. */
@container device-card (max-width: 260px) {
    .device-card-live-values.device-card-body-v258,
    .device-card-live-values.device-card-body-v258.has-auto-balanced-layout,
    .device-card-live-values.device-card-body-v258.has-priority-hierarchy {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value,
    .device-card-live-values.device-card-body-v258.has-auto-balanced-layout > .device-card-live-value,
    .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .device-card-live-values.device-card-body-v258 .device-card-live-value .adaptive-value-variant { display: none; }
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-compact .adaptive-variant-full,
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-medium .adaptive-variant-full,
    .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-reduced { display: inline-flex; }

    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker:not(.presentation-layout-vertical) {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        justify-items: stretch !important;
        min-height: 38px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker:not(.presentation-layout-vertical) > .device-card-live-marker { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; margin: 0 !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker:not(.presentation-layout-vertical) > strong { grid-column: 2 !important; grid-row: 1 !important; justify-self: stretch !important; width: auto !important; text-align: left !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker:not(.presentation-layout-vertical) > .device-card-marker-balance { display: none !important; }
    .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker:not(.presentation-layout-vertical) > .device-live-companion { grid-column: 2 !important; grid-row: 2 !important; text-align: left !important; }
}
/* --------------------------------------------------------------------------
   Compatibility fallback: if container queries are unavailable, keep the
   deterministic semantic grid and prefer reduced variants for wide values.
   No JavaScript measurement loop is reintroduced.
   -------------------------------------------------------------------------- */
@supports not (container-type: inline-size) {
    .device-card .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-full { display: none; }
    .device-card .device-card-live-values.device-card-body-v258 .device-card-live-value.value-width-wide .adaptive-variant-reduced { display: inline-flex; }


}


/* --------------------------------------------------------------------------
   v9.8.271 — borderless parameter hierarchy

   After removing structural separators, grouping comes from proximity:
   tight inside one parameter, looser between neighbouring parameters.
   Short, recognisable metrics are presented as centered vertical micro-groups
   by card-presentation.js. Long labels/statuses retain the horizontal model.
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.device-card-body-v258 {
    column-gap: 14px !important;
    row-gap: 10px !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value {
    padding: 6px 4px !important;
}

/* Value is the primary information. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value > strong {
    color: var(--iot-card-text) !important;
    font-size: 1.05rem !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.08 !important;
    letter-spacing: -.012em;
}

/* Text marker/label is readable, but visibly subordinate to the value. */
.device-card .device-card-live-values.device-card-body-v258 .device-card-live-marker.marker-kind-text,
.device-card .device-card-live-values.device-card-body-v258 .device-card-live-label-text {
    color: var(--iot-card-muted) !important;
    font-size: .8rem !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.12 !important;
}

/* Metadata/companions remain tertiary, but no longer look like debug text. */
.device-card .device-card-live-values.device-card-body-v258 .device-live-companion,
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy .device-live-companion {
    color: var(--iot-card-muted) !important;
    font-size: .7rem !important;
    line-height: 1.12 !important;
    font-weight: var(--font-weight-medium) !important;
}

/* Tight relation inside a parameter. Spacing between parameters is owned by
   the parent grid above, not by extra cell padding. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker {
    column-gap: 4px !important;
    row-gap: 2px !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical {
    min-height: 60px !important;
    padding: 6px 4px !important;
    row-gap: 3px !important;
    justify-items: center !important;
    align-content: center !important;
    text-align: center !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.has-inline-marker.presentation-layout-vertical > .device-card-live-marker {
    max-width: 92% !important;
}

/* Visual hierarchy may intentionally break a regular grid. */
.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.presentation-size-dominant > strong,
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value.visual-priority-primary > strong {
    font-size: 1.15rem !important;
}

.device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.presentation-size-compact > strong,
.device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value.visual-priority-peripheral > strong {
    font-size: .98rem !important;
}

/* Larger system/browser text must not force the card back into a table-like
   layout. Mobile gets slightly more readable labels/values, not tighter text. */
@media (max-width: 700px) {
    .device-card .device-card-live-values.device-card-body-v258 {
        column-gap: 12px !important;
        row-gap: 10px !important;
    }
    .device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value {
        padding: 6px 3px !important;
    }
    .device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value > strong {
        font-size: 1.08rem !important;
    }
    .device-card .device-card-live-values.device-card-body-v258 .device-card-live-marker.marker-kind-text,
    .device-card .device-card-live-values.device-card-body-v258 .device-card-live-label-text {
        font-size: .82rem !important;
    }
    .device-card .device-card-live-values.device-card-body-v258 > .device-card-live-value.presentation-size-dominant > strong,
    .device-card .device-card-live-values.device-card-body-v258.has-priority-hierarchy > .device-card-live-value.visual-priority-primary > strong {
        font-size: 1.18rem !important;
    }
}

/* --------------------------------------------------------------------------
   v9.8.271 TEST — B38 virtual-parameter layout

   The B38 card remains composed from independent virtual parameters. Detailed
   alarm semantics are no longer rendered as seven card windows. They feed one
   aggregate battery-error state: an error overlay on the battery plus one
   horizontal summary row shown only while an alarm is active.
   -------------------------------------------------------------------------- */
.device-card .device-card-live-values.has-b38-virtual-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 35fr) minmax(0, 30fr) minmax(0, 35fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 12px 10px !important;
    margin: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
    background: transparent !important;
    --b38-main-value-size: 1.08rem;
    --b38-main-value-weight: 500;
}

.device-card .has-b38-virtual-layout > .card-virtual-parameter {
    box-sizing: border-box;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: var(--radius-sm, 6px) !important;
    background: transparent !important;
}

/* Top section: voltage/current left, battery centre, temperature right. */
.device-card .has-b38-virtual-layout > [data-virtual-slot="left-top"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.device-card .has-b38-virtual-layout > [data-virtual-slot="left-bottom"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
}
.device-card .has-b38-virtual-layout > [data-virtual-slot="center"] {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
}
.device-card .has-b38-virtual-layout > [data-virtual-slot="right-top"] {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
}
.device-card .has-b38-virtual-layout > [data-virtual-slot="error-summary"] {
    grid-column: 1 / 4 !important;
    grid-row: 3 !important;
}

/* ACT + EXTREME is one independent parameter. Its marker is explicitly kept
   to the LEFT of the value stack, regardless of generic card presentation. */
.device-card .has-b38-virtual-layout .virtual-metric-extreme {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 5px 2px !important;
    text-align: left !important;
}

.device-card .has-b38-virtual-layout .virtual-metric-extreme > .virtual-parameter-marker {
    order: 0 !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    color: var(--parameter-icon-color, var(--iot-card-muted));
}

/* Virtual-parameter markers are icons, never legacy text labels. Keep their
   geometry intrinsic; generic .device-card-live-value > span rules must not
   stretch them into a full-width strip. */
.device-card .card-virtual-parameter > .virtual-parameter-marker {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.device-card .has-b38-virtual-layout .virtual-parameter-marker svg {
    width: 100%;
    height: 100%;
}

.device-card .has-b38-virtual-layout .virtual-metric-copy {
    order: 1 !important;
    display: grid !important;
    width: auto !important;
    min-width: 0;
    flex: 0 1 auto;
    gap: 2px;
    align-content: center;
}

.device-card .has-b38-virtual-layout .virtual-metric-main-value {
    min-width: 0;
    color: var(--iot-card-text);
    font-size: var(--b38-main-value-size);
    line-height: 1.08;
    font-weight: var(--b38-main-value-weight);
    letter-spacing: -.012em;
    white-space: nowrap;
}

.device-card .has-b38-virtual-layout .virtual-metric-main-value small {
    font-size: .68em;
    font-weight: var(--b38-main-value-weight);
}

.device-card .has-b38-virtual-layout .virtual-metric-extreme-value {
    min-width: 0;
    color: var(--iot-card-muted);
    font-size: .7rem;
    line-height: 1.1;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.device-card .has-b38-virtual-layout .virtual-metric-extreme-role {
    margin-left: 2px;
    font-size: .94em;
    font-weight: var(--font-weight-semibold);
}

/* Presentation state is generic: the profile decides WHAT is alarming, while
   the renderer/CSS only decides HOW an alarming companion is shown. For B38
   overcurrent only the recorded EXTREME/PEAK is alarm-coloured; ACT remains
   neutral because the current may already have returned to a normal value. */
.device-card .card-virtual-parameter .virtual-metric-extreme-value.is-state-alarm {
    color: var(--state-alarm) !important;
    font-weight: var(--font-weight-bold);
}

/* SOC belongs to the battery renderer. Explicit rows guarantee that it is
   BELOW the battery symbol and can never be moved beside it by generic rules. */
.device-card .has-b38-virtual-layout .virtual-battery-parameter {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 2px !important;
}

.device-card .has-b38-virtual-layout .virtual-battery-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative;
    width: 58px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-card .has-b38-virtual-layout .virtual-battery-base {
    display: block;
    width: 58px;
    height: 108px;
    max-width: none;
}

/* Any semantic battery alarm changes the natural battery colour itself.
   Outline and SOC segments remain one colour, while the inner field stays
   neutral so the global error overlay keeps enough contrast. */
.device-card .card-virtual-parameter.virtual-battery-parameter.is-state-alarm .virtual-battery-base {
    --battery-base-outline: var(--battery-status-alarm);
    --battery-base-segment: var(--battery-status-alarm);
}

.device-card .has-b38-virtual-layout .virtual-battery-icon > .battery-status-overlay-svg {
    position: absolute;
    left: 50%;
    top: 53.90625%;
    width: 58%;
    height: 58%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.device-card .has-b38-virtual-layout .virtual-battery-soc {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: var(--iot-card-text);
    font-size: var(--b38-main-value-size);
    line-height: 1;
    font-weight: var(--b38-main-value-weight);
    letter-spacing: -.01em;
    text-align: center !important;
    white-space: nowrap;
}

/* The right-side field (currently battery temperature) spans both upper rows
   and centres its independent parameter window vertically. */
.device-card .has-b38-virtual-layout > [data-virtual-slot="right-top"].virtual-field-parameter,
.device-card .has-b38-virtual-layout .virtual-field-parameter {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    gap: 6px !important;
    padding: 6px 2px !important;
    text-align: center !important;
}

.device-card .has-b38-virtual-layout .virtual-field-parameter > strong {
    color: var(--iot-card-text);
    font-size: var(--b38-main-value-size);
    line-height: 1.08;
    font-weight: var(--b38-main-value-weight);
    white-space: nowrap;
}

.device-card .has-b38-virtual-layout .virtual-field-parameter > strong small {
    font-size: .68em;
    font-weight: var(--b38-main-value-weight);
}

/* A field-level alarm emphasizes the semantic value itself rather than adding
   another alarm tile. For B38 overtemperature this makes the thermometer and
   the temperature value the dominant alarm-coloured parts of the parameter. */
.device-card .card-virtual-parameter.virtual-field-parameter.is-state-alarm > .virtual-parameter-marker,
.device-card .card-virtual-parameter.virtual-field-parameter.is-state-alarm > strong {
    color: var(--state-alarm) !important;
}

/* One quiet horizontal error summary replaces seven alarm tiles. It is only
   present when at least one semantic B38 alarm is active. */
.device-card .has-b38-virtual-layout .virtual-error-summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--state-alarm) !important;
    background: var(--state-alarm-soft) !important;
    color: var(--state-alarm) !important;
    text-align: center !important;
}

.device-card .has-b38-virtual-layout .virtual-error-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: .82rem;
    line-height: 1;
    font-weight: var(--font-weight-bold);
}

.device-card .has-b38-virtual-layout .virtual-error-summary-label {
    min-width: 0;
    font-size: .78rem;
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
}

@container device-card (max-width: 350px) {
    .device-card .device-card-live-values.has-b38-virtual-layout {
        column-gap: 4px !important;
        row-gap: 6px !important;
        padding-inline: 7px !important;
        --b38-main-value-size: 1rem;
    }
    .device-card .has-b38-virtual-layout .virtual-battery-icon,
    .device-card .has-b38-virtual-layout .virtual-battery-base {
        width: 52px;
        height: 97px;
    }
    .device-card .has-b38-virtual-layout .virtual-metric-extreme {
        gap: 5px !important;
    }
    .device-card .has-b38-virtual-layout .virtual-metric-extreme > .virtual-parameter-marker {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
    }
    .device-card .has-b38-virtual-layout .virtual-error-summary {
        min-height: 28px !important;
        padding-block: 4px !important;
    }
    .device-card .has-b38-virtual-layout .virtual-error-summary-label { font-size: .72rem; }
}