/* Generated by manage.py build_panel_assets. Edit source files, not this bundle. */

/* Source: css/panel-navigation-v2.css */
/* Persistent app navigation and compact local paging.
   Horizontal gestures only reveal more items in the current screen. */
.panel-body .panel-permanent-header .panel-top-actions > a[aria-current="page"] {
position: relative;
background: rgb(255 255 255 / 24%);
color: white;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
}
.panel-body .panel-permanent-header .panel-top-actions > a[aria-current="page"]::after {
position: absolute;
content: "";
left: 13px;
right: 13px;
bottom: 3px;
height: 2px;
border-radius: 2px;
background: currentColor;
}

/* A single non-interactive progress rail replaces large arrows and dots. */
.panel-body .panel-main.panel-app-screen > [data-pager] > .panel-pagination,
.panel-body .panel-main.energy-workspace > [data-pager] > .panel-pagination {
display: flex;
position: absolute;
z-index: 4;
left: 50%;
bottom: 2px;
width: auto;
flex: 0 0 0;
min-height: 0;
height: 3px;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
transform: translateX(-50%);
pointer-events: none;
}
.panel-body .panel-main.panel-app-screen > [data-pager],
.panel-body .panel-main.energy-workspace > [data-pager] {
position: relative;
}
.panel-body .panel-main.panel-app-screen > [data-pager] > .panel-pagination[hidden],
.panel-body .panel-main.energy-workspace > [data-pager] > .panel-pagination[hidden] {
display: none;
}
.panel-page-progress {
display: block;
width: 36px;
overflow: hidden;
border-radius: 999px;
background: #d8ded7;
}
.panel-page-progress-thumb {
display: block;
width: calc(100% / var(--page-count));
height: 100%;
border-radius: inherit;
background: var(--hm-green);
transform: translateX(calc(var(--page-index) * 100%));
transition: transform 160ms ease-out;
}
[data-page-items][tabindex="0"]:focus-visible {
outline: 2px solid var(--hm-focus);
outline-offset: 3px;
border-radius: 14px;
}

/* Pages always start on the same grid origin. A short final page no longer
   recentres itself or moves controls vertically. */
.panel-app-screen > [data-pager] > [data-page-items] {
align-content: stretch;
justify-content: center;
}
.panel-body .energy-workspace .energy-toolbar {
margin: 0 auto;
}

@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  :root {
    --panel-banner-height: 88px;
    --panel-tile-height: 68px;
    --panel-frame-gap: 4px;
  }
  .panel-body .panel-permanent-header > .panel-topbar {
    height: 44px;
    min-height: 44px;
    gap: 2px;
  }
  .panel-permanent-header .panel-top-actions { gap: 0; }
  .panel-body .panel-permanent-header .panel-top-actions > a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 11px;
    border-radius: 10px;
  }
  .panel-body .panel-permanent-header .panel-clock time {
    font-size: 16px;
    line-height: 18px;
  }
  .panel-body .panel-permanent-header .panel-clock span {
    font-size: 10px;
    line-height: 12px;
  }
  .panel-hero-context {
    padding: 2px max(16px, var(--panel-safe-right)) 3px max(16px, var(--panel-safe-left));
    gap: 2px 10px;
  }
  .panel-body .panel-permanent-header .panel-hero-heading h1 {
    font-size: 17px;
    line-height: 20px;
  }
  .panel-body .panel-permanent-header .panel-hero-heading p,
  .panel-weather [data-weather-condition] { display: none; }
  .panel-body .panel-permanent-header .panel-weather {
    grid-template-columns: 20px auto auto;
    grid-template-rows: auto;
    gap: 0 5px;
  }
  .panel-weather [data-environment-icon],
  .panel-body .panel-weather strong,
  .panel-body .panel-weather small { grid-row: 1; }
  .panel-weather [data-environment-icon] { grid-column: 1; }
  .panel-body .panel-weather strong { grid-column: 2; font-size: 15px; line-height: 18px; }
  .panel-body .panel-weather small { grid-column: 3; font-size: 10px; line-height: 12px; }
  .panel-body .panel-weather .panel-icon { width: 18px; height: 18px; }
  .panel-body .panel-permanent-header .panel-environment { gap: 4px; }
  .panel-body .panel-permanent-header .panel-environment > .panel-environment-metric {
    padding: 2px 6px;
    border-radius: 9px;
  }
  .panel-body .panel-permanent-header .panel-environment strong {
    font-size: 14px;
    line-height: 18px;
  }
  .panel-body .panel-permanent-header .panel-environment small {
    font-size: 10px;
    line-height: 11px;
  }
  .panel-body .panel-main.panel-app-screen {
    gap: 4px;
    padding-top: 4px;
    padding-bottom: max(4px, var(--panel-safe-bottom));
  }
  .panel-app-screen > .panel-form:not([data-wizard]) {
    max-height: 100%;
    padding: 8px 12px;
    gap: 6px;
    overflow: hidden;
  }
  .panel-app-screen > .panel-form:not([data-wizard]) > p:first-of-type {
    margin: 0;
    font-size: 11px;
    line-height: 14px;
  }
  .panel-favorite-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    min-height: 0;
  }
  .panel-favorite-option {
    min-height: 44px;
    height: 44px;
    padding: 0 3px 0 8px;
  }
  .panel-favorite-option .panel-check {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .panel-favorite-option .panel-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }
  .panel-app-screen > .panel-collection,
  .panel-app-screen > .kpi-collection,
  .panel-body .energy-workspace > .energy-card-deck,
  .panel-paged-screen > .applications {
    --panel-page-limit: 8;
  }
  .panel-room-screen > .panel-collection,
  .panel-module-screen > .panel-collection { --panel-page-limit: 4; }
  .panel-body .panel-main.panel-app-screen > [data-pager] > .panel-grid {
    --panel-columns: 4;
    grid-template-columns: repeat(4, minmax(0, var(--panel-tile-max)));
    grid-template-rows: repeat(var(--panel-grid-rows, 1), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px 8px;
  }
  .panel-body .panel-main.panel-app-screen .panel-tile,
  .panel-body .panel-main.panel-app-screen .panel-menu-tile {
    height: 100%;
    min-height: 0;
    border-radius: 14px;
  }
  .panel-body .panel-main.panel-app-screen .panel-tile > a {
    min-height: 44px;
    padding: 4px 8px;
    gap: 2px;
  }
  .panel-body .panel-main.panel-app-screen .panel-tile .panel-tile-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  .panel-body .panel-main.panel-app-screen .panel-tile-icon .panel-art-icon {
    width: 26px;
    height: 26px;
  }
  .panel-body .panel-main.panel-app-screen .panel-tile strong {
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .panel-body .panel-main.panel-app-screen .panel-room-count {
    top: 3px;
    right: 4px;
    min-width: 19px;
    padding: 0 5px;
    font-size: 10px;
  }
  /* House selection keeps the supplied photographic composition. The
     compact grid used to turn the photo into a full-card background and
     clip the name below the 68px card. */
  .panel-body .panel-main.panel-app-screen .houses .panel-tile {
    align-self: center;
    height: min(100%, 200px);
    min-height: 132px;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile > a {
    padding: 0 0 7px;
    justify-content: start;
    gap: 2px;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile.with-photo img {
    position: static;
    display: block;
    width: 100%;
    height: min(58%, 108px);
    min-height: 64px;
    opacity: 1;
    object-fit: cover;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile .panel-tile-icon {
    position: relative;
    width: 34px;
    height: 34px;
    margin: -18px 0 0;
    border: 3px solid white;
    border-radius: 11px;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile-icon .panel-art-icon {
    width: 25px;
    height: 25px;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile strong {
    width: calc(100% - 16px);
    margin: 0 8px;
    font-size: 13px;
    line-height: 16px;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile small {
    width: calc(100% - 16px);
    margin: 0 8px;
    overflow: hidden;
    font-size: 10px;
    line-height: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Device summaries carry more controls: two columns and two stable rows. */
  .panel-body .panel-main.panel-app-screen .panel-grid:has(> .panel-equipment-summary) {
    --panel-columns: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(94px, 1fr));
    grid-auto-rows: minmax(94px, 1fr);
  }
  .panel-body .panel-main.panel-app-screen .panel-equipment-summary {
    height: 100%;
    min-height: 94px;
    padding: 6px 8px;
  }

  /* Quick device actions keep 44px controls; navigation shortcuts become
     visibly secondary and stop consuming the central content area. */
  .panel-house-screen .panel-favorites {
    min-height: 0;
    max-height: 94px;
    padding-top: 3px;
    margin: 0;
    gap: 6px;
    align-items: end;
  }
  .panel-house-screen .panel-favorite-group { gap: 5px; }
  .panel-house-screen .panel-favorite-group + .panel-favorite-group {
    padding-left: 6px;
  }
  .panel-house-screen .panel-favorite-group > .panel-favorite {
    min-height: 56px;
    height: 56px;
    padding: 3px;
    border-radius: 12px;
  }
  .panel-house-screen .panel-favorite-group.is-actions > .panel-favorite {
    width: 132px;
    min-height: 56px;
    height: 56px;
  }
  .panel-house-screen .panel-favorite-group.is-actions > .panel-favorite:has(.panel-quick-adjustments form) {
    min-height: 92px;
    height: 92px;
  }
  .panel-house-screen .panel-favorite-group.is-actions > .panel-favorite:has([data-color-hue]) {
    width: 148px;
  }
  .panel-house-screen .panel-favorite-group.is-navigation .panel-art-icon {
    width: 24px;
    height: 24px;
  }
  .panel-house-screen .panel-favorite-group.is-navigation > .panel-favorite > span {
    font-size: 10px;
    line-height: 12px;
  }
  .panel-house-screen .panel-quick-name {
    font-size: 11px;
    -webkit-line-clamp: 1;
  }
  .panel-house-screen .panel-quick-adjustments input[type="range"] {
    height: 44px;
    min-height: 44px;
  }
  .panel-body .panel-house-screen .touch-power-button,
  .panel-house-screen .panel-quick-unavailable {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Energy selectors stay fixed above the grid; detail pages and cards share
     the same top origin while their compact dock remains at the bottom. */
  .energy-workspace .energy-toolbar { padding-bottom: 1px; }
  .panel-body .panel-main.energy-workspace { gap: 2px; }
  .panel-body .energy-workspace > .energy-deck > .energy-page-items {
    align-content: start;
  }
  .panel-body .energy-workspace .energy-dock {
    padding-top: 2px;
    gap: 6px;
  }
  .energy-dock-readings + .energy-dock-navigation { padding-left: 6px; }
  .energy-dock-reading,
  .energy-dock-navigation a {
    min-height: 44px;
    height: 44px;
  }
  .energy-dock-navigation a { min-width: 48px; }
  .energy-dock-navigation .panel-icon { width: 18px; height: 18px; }
  .energy-dock-navigation span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-page-progress-thumb { transition: none; }
}


/* Source: css/panel-adaptive-shell.css */
/* Final adaptive shell: one navigation language for phone, tablet and desktop. */
.panel-body .panel-permanent-header .panel-top-actions > a[aria-current="page"]::after,
.energy-dock-navigation a[aria-current]::after {
display: none;
}

.panel-body .panel-main.panel-app-screen {
overflow: hidden;
}

.panel-body .panel-main.panel-app-screen > [data-pager],
.panel-body .panel-main.panel-app-screen > .panel-collection {
flex: 1 1 auto;
min-height: 0;
}

.panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid {
--panel-row-min: 104px;
width: 100%;
height: 100%;
min-height: 0;
grid-template-rows: repeat(var(--panel-grid-rows, 1), minmax(0, 1fr));
grid-auto-rows: minmax(0, 1fr);
align-content: stretch;
justify-content: center;
}

.panel-body .panel-main.panel-app-screen > .houses > [data-page-items] {
--panel-row-min: 132px;
}

.panel-body .panel-main.panel-app-screen .panel-tile,
.panel-body .panel-main.panel-app-screen .panel-menu-tile,
.panel-body .panel-main.panel-app-screen .panel-equipment-summary {
width: 100%;
height: 100%;
min-height: 0;
max-height: none;
}

.panel-action-dock {
display: flex !important;
flex: 0 0 72px !important;
width: 100%;
min-width: 0;
max-width: 1120px;
height: 72px;
min-height: 72px;
margin: auto auto 0 !important;
padding: 6px 0 0 !important;
gap: 7px !important;
align-items: stretch !important;
justify-content: center !important;
flex-wrap: nowrap !important;
overflow: hidden;
border-top: 1px solid var(--hm-line);
}

.panel-action-dock .panel-favorite-group,
.panel-action-dock.energy-dock .energy-dock-readings,
.panel-action-dock.energy-dock .energy-dock-navigation {
display: flex !important;
min-width: 0;
height: 64px;
gap: 6px !important;
align-items: stretch;
justify-content: center;
flex: 0 0 auto;
flex-wrap: nowrap !important;
}

.panel-action-dock .panel-favorite-group + .panel-favorite-group,
.panel-action-dock.energy-dock .energy-dock-readings + .energy-dock-navigation {
padding-left: 7px !important;
border-left: 1px solid #cfd7cc !important;
}

.panel-action-dock .panel-favorite-group:not(:has([data-dock-item]:not([hidden]))),
.panel-action-dock.energy-dock > :not(:has([data-dock-item]:not([hidden]))) {
display: none !important;
}

.panel-action-dock [data-dock-item] {
flex: 0 0 70px;
width: 70px;
min-width: 70px !important;
max-width: 70px;
height: 60px;
min-height: 60px !important;
margin: 0 !important;
padding: 4px !important;
border: 1px solid transparent;
border-radius: 12px;
box-sizing: border-box;
background: transparent;
box-shadow: none;
color: var(--hm-green);
text-decoration: none;
overflow: hidden;
}

.panel-action-dock a[data-dock-item],
.panel-action-dock button[data-dock-item],
.panel-action-dock .panel-favorite[data-dock-item] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}

.panel-action-dock [data-dock-item][aria-current="page"] {
background: var(--hm-soft);
border-color: var(--hm-line);
color: var(--hm-green);
}

.panel-action-dock [data-dock-item] > :is(.panel-icon, .panel-art-icon),
.panel-action-dock [data-dock-item] .panel-icon {
width: 24px;
height: 24px;
flex: none;
}

.panel-action-dock [data-dock-item] > span,
.panel-action-dock [data-dock-item] .panel-quick-name {
display: block;
width: 100%;
max-width: 100%;
font-size: 9px;
line-height: 11px;
font-weight: 700;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.panel-action-dock .is-device[data-dock-item] {
display: grid;
grid-template-rows: 11px 44px;
align-items: center;
gap: 1px;
padding: 3px 2px 3px 5px !important;
}

.panel-action-dock .is-device .panel-quick-name {
white-space: nowrap;
}

.panel-action-dock .is-device .touch-control-console,
.panel-action-dock .is-device .touch-control-header,
.panel-action-dock .is-device .touch-power-form {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
margin: 0;
padding: 0;
}

.panel-action-dock .is-device .touch-power-button,
.panel-action-dock .panel-quick-unavailable {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
}

.panel-action-dock .panel-quick-adjustments {
display: none;
}

.panel-action-dock .is-device[data-dock-item] {
flex-basis: 70px;
width: 70px;
min-width: 70px !important;
max-width: 70px;
}

.panel-action-dock.energy-dock {
display: flex !important;
grid-template-columns: none;
}

.panel-action-dock.energy-dock .energy-dock-reading {
flex: 0 0 94px;
width: 94px;
min-width: 94px !important;
max-width: 94px;
flex-direction: column;
justify-content: center;
gap: 1px;
}

.panel-action-dock.energy-dock .energy-dock-reading strong {
font-size: 14px;
}

.panel-action-dock.energy-dock .energy-dock-navigation {
grid-column: auto;
}

.panel-action-dock.energy-dock .energy-dock-navigation a {
min-width: 62px !important;
width: 62px;
max-width: 62px;
}

.panel-body .panel-main.panel-app-screen > [data-pager] > .panel-pagination {
bottom: 0;
height: 2px;
}

.panel-page-progress {
width: 24px;
height: 2px;
opacity: .62;
}

.panel-module-screen .summary-collection > .panel-grid {
grid-template-columns: repeat(var(--panel-visible-columns, var(--panel-columns, 4)), minmax(0, 220px));
}

.panel-equipment-summary {
overflow: hidden;
}

@media (max-width: 699px) {
  .panel-body .panel-main.panel-app-screen {
    padding-inline: max(8px, var(--panel-safe-left)) max(8px, var(--panel-safe-right));
  }
  .panel-action-dock {
    flex-basis: 66px !important;
    height: 66px;
    min-height: 66px;
    gap: 3px !important;
    padding-top: 3px !important;
  }
  .panel-action-dock .panel-favorite-group,
  .panel-action-dock.energy-dock .energy-dock-readings,
  .panel-action-dock.energy-dock .energy-dock-navigation {
    height: 62px;
    gap: 2px !important;
  }
  .panel-action-dock [data-dock-item] {
    flex-basis: 58px;
    width: 58px;
    min-width: 58px !important;
    max-width: 58px;
    height: 58px;
    min-height: 58px !important;
    padding: 2px !important;
  }
  .panel-action-dock .is-device[data-dock-item] {
    flex-basis: 58px;
    width: 58px;
    min-width: 58px !important;
    max-width: 58px;
    grid-template-columns: 1fr;
    padding-left: 2px !important;
  }
  .panel-action-dock.energy-dock .energy-dock-reading {
    flex-basis: 76px;
    width: 76px;
    min-width: 76px !important;
    max-width: 76px;
  }
  .panel-action-dock.energy-dock .energy-dock-navigation a {
    min-width: 52px !important;
    width: 52px;
    max-width: 52px;
  }
  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid {
    --panel-row-min: 96px;
    gap: 8px;
  }
  .panel-body .panel-main.panel-app-screen > .houses > [data-page-items] {
    --panel-row-min: 122px;
  }
  .panel-body .panel-main.panel-app-screen .panel-tile strong,
  .panel-body .panel-main.panel-app-screen .panel-menu-tile strong {
    font-size: 14px;
    line-height: 17px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .panel-action-dock {
    flex-basis: 56px !important;
    height: 56px;
    min-height: 56px;
    padding-top: 2px !important;
  }
  .panel-action-dock .panel-favorite-group,
  .panel-action-dock.energy-dock .energy-dock-readings,
  .panel-action-dock.energy-dock .energy-dock-navigation {
    height: 52px;
  }
  .panel-action-dock [data-dock-item],
  .panel-action-dock .is-device[data-dock-item] {
    height: 50px;
    min-height: 50px !important;
  }
  .panel-action-dock [data-dock-item] {
    flex-basis: 54px;
    width: 54px;
    min-width: 54px !important;
    max-width: 54px;
  }
  .panel-action-dock .is-device[data-dock-item] {
    flex-basis: 54px;
    width: 54px;
    min-width: 54px !important;
    max-width: 54px;
  }
  .panel-action-dock.energy-dock .energy-dock-reading {
    height: 50px;
    min-height: 50px !important;
  }
  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid {
    --panel-row-min: 76px;
  }
  .panel-body .panel-main.panel-app-screen > .houses > [data-page-items] {
    --panel-row-min: 86px;
  }
  .panel-body .panel-main.panel-app-screen.panel-module-screen > .summary-collection > .panel-grid {
    --panel-columns: 4;
    --panel-visible-columns: 4;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-page-progress-thumb { transition: none; }
}

/* Secondary actions are a compact, touch-safe dock rather than a second menu.
   Fit complete controls only; never squeeze or crop a partially visible item. */
.panel-action-dock {
flex-basis: 92px !important;
height: 92px;
min-height: 92px;
gap: 8px !important;
padding: 8px 0 6px !important;
box-sizing: border-box;
align-items: center !important;
}

.panel-action-dock [data-dock-item][hidden],
.panel-action-dock form:has(> [data-dock-item][hidden]) {
display: none !important;
}

.panel-action-dock .panel-favorite-group,
.panel-action-dock.energy-dock .energy-dock-readings,
.panel-action-dock.energy-dock .energy-dock-navigation {
height: 78px;
gap: 8px !important;
align-items: center;
}

.panel-action-dock .panel-favorite-group + .panel-favorite-group,
.panel-action-dock.energy-dock .energy-dock-readings + .energy-dock-navigation {
padding-left: 8px !important;
/* The legacy mobile layout turns this divider into a second row by adding
     top padding.  This dock is always one row, so that offset would push the
     navigation controls past the clipped dock boundary. */
padding-top: 0 !important;
border-top: 0 !important;
}

.panel-action-dock [data-dock-item] {
flex: 0 0 64px;
width: 64px;
min-width: 64px !important;
max-width: 64px;
height: 64px;
min-height: 64px !important;
padding: 6px !important;
}

.panel-action-dock [data-dock-item] > :is(.panel-icon, .panel-art-icon),
.panel-action-dock [data-dock-item] .panel-icon {
width: 28px;
height: 28px;
}

.panel-action-dock .is-device[data-dock-item] {
display: grid !important;
flex-basis: 84px;
width: 84px;
min-width: 84px !important;
max-width: 84px;
height: 76px !important;
min-height: 76px !important;
max-height: 76px;
grid-template-columns: 1fr;
grid-template-rows: 22px 46px;
justify-items: center;
gap: 2px;
padding: 3px 4px !important;
border-color: var(--hm-line);
}

.panel-action-dock .is-device .panel-quick-name {
grid-column: 1;
grid-row: 1;
align-self: start;
display: block;
width: 100%;
font-size: 9.25px;
line-height: 10.5px;
text-align: center;
white-space: normal;
overflow: hidden;
text-overflow: clip;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}

.panel-action-dock .is-device .touch-control-console,
.panel-action-dock .panel-quick-unavailable {
grid-column: 1;
grid-row: 2;
justify-self: center;
align-self: center;
width: 46px;
min-width: 46px;
height: 46px;
min-height: 46px !important;
}

.panel-action-dock .is-device .touch-control-console {
display: grid;
place-items: center;
}

.panel-action-dock .is-device :is(.touch-control-header, .touch-power-form, .touch-power-button) {
position: static;
inset: auto;
grid-column: auto;
grid-row: auto;
justify-self: center;
align-self: center;
width: 46px;
min-width: 46px;
height: 46px;
min-height: 46px !important;
margin: 0;
}

/* Restore the graphic language of the mock-up: every destination has a
   quiet semantic color, while live controls use the same palette as their
   module.  Power state remains visible independently inside the button. */
.panel-action-dock .is-module-lighting,
.panel-action-dock .is-category-lighting {
background: #fff4d8;
border-color: #ead7a4;
color: #8a5a00;
}
.panel-action-dock .is-module-climate,
.panel-action-dock .is-category-climate {
background: #fbe9df;
border-color: #ebc9b8;
color: var(--hm-heat);
}
.panel-action-dock .is-category-energy {
background: #e6f2ea;
border-color: #c6dfce;
color: #236748;
}
.panel-action-dock :is(.is-category-media, .is-category-audio) {
background: #f0eaf8;
border-color: #d9cbea;
color: var(--hm-media);
}
.panel-action-dock .is-category-security {
background: #e8f1f8;
border-color: #cbdcea;
color: #215c8f;
}
.panel-action-dock .is-category-schedule {
background: #eaf0fb;
border-color: #cedaee;
color: #315f93;
}
.panel-action-dock .is-category-vacation {
background: #e6f4ef;
border-color: #c5e0d6;
color: #1f6f62;
}
.panel-action-dock .is-category-settings {
background: #eef0f4;
border-color: #d8dde5;
color: #4d5968;
}
.panel-action-dock [data-dock-item][aria-current="page"] {
border-color: currentColor !important;
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 24%, transparent);
}

.panel-action-dock.energy-dock .energy-dock-reading {
flex-basis: 104px;
width: 104px;
min-width: 104px !important;
max-width: 104px;
}

.panel-action-dock.energy-dock .energy-dock-navigation a {
width: 64px;
min-width: 64px !important;
max-width: 64px;
}

.panel-action-dock.panel-context-actions form {
flex: 0 0 auto;
width: auto;
margin: 0;
}

@media (max-width: 699px) {
  .panel-action-dock {
    flex-basis: 86px !important;
    height: 86px;
    min-height: 86px;
    gap: 6px !important;
    padding: 6px 0 5px !important;
  }
  .panel-action-dock .panel-favorite-group,
  .panel-action-dock.energy-dock .energy-dock-readings,
  .panel-action-dock.energy-dock .energy-dock-navigation {
    height: 76px;
    gap: 6px !important;
  }
  .panel-action-dock [data-dock-item],
  .panel-action-dock.energy-dock .energy-dock-navigation a {
    flex-basis: 62px;
    width: 62px;
    min-width: 62px !important;
    max-width: 62px;
    height: 62px;
    min-height: 62px !important;
  }
  .panel-action-dock .is-device[data-dock-item] {
    flex-basis: 84px;
    width: 84px;
    min-width: 84px !important;
    max-width: 84px;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px;
    grid-template-rows: 20px 46px;
    padding-block: 3px !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .panel-action-dock {
    flex-basis: 78px !important;
    height: 78px;
    min-height: 78px;
    padding: 4px 0 4px !important;
  }
  .panel-action-dock .panel-favorite-group,
  .panel-action-dock.energy-dock .energy-dock-readings,
  .panel-action-dock.energy-dock .energy-dock-navigation {
    height: 70px;
  }
  .panel-action-dock [data-dock-item],
  .panel-action-dock.energy-dock .energy-dock-navigation a {
    flex-basis: 60px;
    width: 60px;
    min-width: 60px !important;
    max-width: 60px;
    height: 60px;
    min-height: 60px !important;
  }
  .panel-action-dock .is-device[data-dock-item] {
    flex-basis: 80px;
    width: 80px;
    min-width: 80px !important;
    max-width: 80px;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px;
    grid-template-rows: 18px 44px;
    gap: 2px;
    padding: 2px 4px !important;
  }
  .panel-action-dock .is-device .panel-quick-name {
    font-size: 8.75px;
    line-height: 9px;
  }
  .panel-action-dock .is-device .touch-control-console,
  .panel-action-dock .is-device :is(.touch-control-header, .touch-power-form, .touch-power-button),
  .panel-action-dock .panel-quick-unavailable {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px !important;
  }
}

/* Keep the native hidden state stronger than every card layout override. */
.panel-action-dock .is-device[data-dock-item][hidden],
.panel-action-dock [data-dock-item][hidden],
.panel-action-dock form:has(> [data-dock-item][hidden]) {
display: none !important;
}


/* Source: css/panel-icon-system.css */
/* Unified icon language for primary and secondary touch navigation.
   Power is intentionally excluded: it communicates live state, not a section. */

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a) {
--panel-menu-icon: #315f93;
--panel-menu-icon-soft: #eaf0fb;
--panel-menu-icon-line: #cedaee;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-energy, .is-icon-chart, .is-icon-report)) {
--panel-menu-icon: #236748;
--panel-menu-icon-soft: #e6f2ea;
--panel-menu-icon-line: #c6dfce;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-lighting, .is-icon-lights)) {
--panel-menu-icon: #8a5a00;
--panel-menu-icon-soft: #fff4d8;
--panel-menu-icon-line: #ead7a4;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-climate, .is-icon-heater)) {
--panel-menu-icon: #9a4c2d;
--panel-menu-icon-soft: #fbe9df;
--panel-menu-icon-line: #ebc9b8;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-media, .is-icon-audio, .is-icon-tv)) {
--panel-menu-icon: #694596;
--panel-menu-icon-soft: #f0eaf8;
--panel-menu-icon-line: #d9cbea;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-appliances, .is-icon-washer, .is-icon-dishwasher, .is-icon-refrigerator, .is-icon-plug)) {
--panel-menu-icon: #146b78;
--panel-menu-icon-soft: #e6f3f5;
--panel-menu-icon-line: #c6e0e4;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-security, .is-icon-gas-sensor)) {
--panel-menu-icon: #215c8f;
--panel-menu-icon-soft: #e8f1f8;
--panel-menu-icon-line: #cbdcea;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-schedule, .is-icon-history)) {
--panel-menu-icon: #315f93;
--panel-menu-icon-soft: #eaf0fb;
--panel-menu-icon-line: #cedaee;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> .is-icon-vacation) {
--panel-menu-icon: #1f6f62;
--panel-menu-icon-soft: #e6f4ef;
--panel-menu-icon-line: #c5e0d6;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-scene, .is-icon-favorite)) {
--panel-menu-icon: #8a4770;
--panel-menu-icon-soft: #f7eaf2;
--panel-menu-icon-line: #e7cada;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-apps, .is-icon-plus)) {
--panel-menu-icon: #5b52a3;
--panel-menu-icon-soft: #eeecfa;
--panel-menu-icon-line: #d8d3ed;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-settings, .is-icon-gear, .is-icon-tools)) {
--panel-menu-icon: #4d5968;
--panel-menu-icon-soft: #eef0f4;
--panel-menu-icon-line: #d8dde5;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> :is(.is-icon-users, .is-icon-user)) {
--panel-menu-icon: #425d99;
--panel-menu-icon-soft: #e9eef9;
--panel-menu-icon-line: #cdd8ee;
}

:where(.panel-menu-tile, .panel-action-dock [data-dock-item], .panel-top-actions > a):has(> .is-icon-logout) {
--panel-menu-icon: #9c3f3f;
--panel-menu-icon-soft: #f9eaea;
--panel-menu-icon-line: #eacccc;
}

/* Central menu destinations use one consistent coloured icon badge. */
.panel-menu-tile > .panel-icon {
width: 46px;
height: 46px;
padding: 10px;
border: 1px solid var(--panel-menu-icon-line);
border-radius: 14px;
box-sizing: border-box;
background: var(--panel-menu-icon-soft);
color: var(--panel-menu-icon);
}

/* Every secondary destination receives a semantic surface, including menus
   whose templates do not carry category-specific classes. */
.panel-action-dock [data-dock-item]:not(.is-device, .energy-dock-reading) {
border-color: var(--panel-menu-icon-line) !important;
background: var(--panel-menu-icon-soft) !important;
color: var(--panel-menu-icon) !important;
}

.panel-action-dock [data-dock-item][aria-current="page"]:not(.is-device, .energy-dock-reading) {
border-color: var(--panel-menu-icon) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-menu-icon) 22%, transparent);
}

/* Banner navigation keeps its compact geometry but no longer renders as four
   identical green/white outlines. */
.panel-body .panel-permanent-header .panel-top-actions > a {
border-color: var(--panel-menu-icon-line);
background: color-mix(in srgb, var(--panel-menu-icon-soft) 90%, transparent);
color: var(--panel-menu-icon);
}

.panel-body .panel-permanent-header .panel-top-actions > a[aria-current="page"] {
border-color: var(--panel-menu-icon) !important;
background: var(--panel-menu-icon-soft) !important;
color: var(--panel-menu-icon) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-menu-icon) 25%, transparent);
}

/* Primary room/module/device tiles retain the shared outline family and gain
   semantic fills instead of falling back to green for unrelated categories. */
.panel-tile-icon:has(:is(.is-icon-lighting, .is-icon-lights)) {
color: #8a5a00 !important;
background: #fff4d8 !important;
}
.panel-tile-icon:has(:is(.is-icon-climate, .is-icon-heater)) {
color: #9a4c2d !important;
background: #fbe9df !important;
}
.panel-tile-icon:has(:is(.is-icon-media, .is-icon-audio, .is-icon-tv)) {
color: #694596 !important;
background: #f0eaf8 !important;
}
.panel-tile-icon:has(:is(.is-icon-appliances, .is-icon-washer, .is-icon-dishwasher, .is-icon-refrigerator, .is-icon-plug)) {
color: #146b78 !important;
background: #e6f3f5 !important;
}
.panel-tile-icon:has(:is(.is-icon-security, .is-icon-gas-sensor)) {
color: #215c8f !important;
background: #e8f1f8 !important;
}
.panel-tile-icon:has(:is(.is-icon-energy, .is-icon-chart, .is-icon-report)) {
color: #236748 !important;
background: #e6f2ea !important;
}
.panel-tile-icon:has(:is(.is-icon-scene, .is-icon-favorite)) {
color: #8a4770 !important;
background: #f7eaf2 !important;
}
.panel-tile-icon:has(:is(.is-icon-vacation, .is-icon-schedule, .is-icon-history)) {
color: #315f93 !important;
background: #eaf0fb !important;
}

/* Quick controls now use the self-contained V2.3 artwork. Their geometry and
   palettes live with the dock contract in panel-layout-integrity.css. */


/* Source: css/panel-iconography-v23.css */
/* Home Manager Iconography V2.3
   Each family has one job: banner, primary navigation, rooms, equipment,
   quick state, utilities, environment and general status. */

.panel-v23-icon,
.panel-art-icon {
display: block;
flex: none;
width: 52px;
height: 52px;
object-fit: contain;
background: transparent !important;
-webkit-mask: none !important;
mask: none !important;
}

/* Banner icons are drawn directly over the image. The SVG already contains
   its own soft halo, so no solid plate is needed. */
.panel-body .panel-permanent-header .panel-brand > .is-family-banner,
.panel-body .panel-permanent-header .panel-top-actions > a > .is-family-banner {
width: 36px;
height: 36px;
padding: 0;
}

.panel-body .panel-permanent-header .panel-top-actions > a {
position: relative;
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
border: 0 !important;
touch-action: manipulation;
}

.panel-body .panel-permanent-header .panel-top-actions > a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 18px;
height: 3px;
border-radius: 999px;
background: transparent;
transform: translateX(-50%);
transition: background-color 180ms ease, width 180ms ease;
}

.panel-body .panel-permanent-header .panel-top-actions > a[aria-current="page"]::after {
width: 28px;
background: #dff6ec;
}

.panel-body .panel-permanent-header .panel-top-actions > a:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}

.panel-body .panel-permanent-header .panel-top-actions > a:active > .panel-v23-icon,
.panel-body .panel-permanent-header .panel-brand:active > .panel-v23-icon {
opacity: .76;
}

/* Primary destinations and room tiles use their supplied, self-contained
   pastel surfaces. Do not add a second background behind them. */
.panel-body .panel-tile .panel-tile-icon:has(> .panel-art-icon),
.panel-body .panel-menu-tile:has(> .panel-v23-icon) > .panel-v23-icon {
border: 0;
background: transparent !important;
}

.panel-body .panel-tile .panel-tile-icon:has(> .panel-art-icon) {
width: 72px;
height: 72px;
padding: 0;
}

.panel-body .panel-tile .panel-tile-icon > .panel-art-icon {
width: 72px;
height: 72px;
}

.panel-menu-tile > .panel-v23-icon,
.panel-menu-tile > .panel-art-icon {
width: 54px;
height: 54px;
padding: 0;
}

/* Equipment cards use the dedicated V2.3 device family instead of mixing
   contextual photos and unrelated line icons. */
.panel-equipment-visual.is-v23-device {
width: 88px;
height: 88px;
padding: 0;
border-radius: 20px;
overflow: visible;
background: transparent !important;
}

.panel-equipment-visual.is-v23-device > img {
width: 100%;
height: 100%;
object-fit: contain;
}

.summary-collection .panel-equipment-visual.is-v23-device {
background: transparent !important;
}

/* The previous product-photo layout reserved a fixed 132px gutter.  V2.3
   equipment is square iconography, so keep icon and name in the same grid.
   This avoids narrow, broken words on landscape tablets while retaining a
   generous touch target for the whole card. */
.panel-body .summary-collection .panel-equipment-summary {
padding-left: 16px;
}

.panel-body .summary-collection .panel-equipment-open {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 72px;
padding: 4px;
}

.panel-body .summary-collection .panel-equipment-open .panel-equipment-visual.is-v23-device {
position: static;
width: 64px;
height: 64px;
margin: 0;
max-width: none;
}

.panel-body .summary-collection .panel-equipment-open h2 {
font-size: 16px;
line-height: 20px;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}

.energy-equipment-symbol > span:first-child {
display: grid;
place-items: center;
}

.energy-equipment-symbol .panel-v23-icon {
width: 56px;
height: 56px;
}

/* General status family: a small glyph plus text, never color alone. */
.panel-state:has(.panel-state-v23) {
gap: 5px;
}

.panel-state:has(.panel-state-v23)::before {
display: none;
}

.panel-state-v23 {
width: 22px;
height: 22px;
object-fit: contain;
flex: none;
}

/* Secondary destinations keep the same button geometry while their graphic
   is supplied by the main or utility family. */
.panel-action-dock [data-dock-item] > :is(.panel-art-icon, .panel-v23-icon) {
width: 42px;
height: 42px;
padding: 0;
}

.panel-action-dock [data-dock-item]:not(.is-device, .energy-dock-reading) {
min-width: 56px;
min-height: 56px;
}

/* Environment SVGs are intentionally unboxed. */
.panel-environment-metric .is-family-ambient {
width: 28px;
height: 28px;
}

.panel-environment-metric .is-family-main {
width: 30px;
height: 30px;
}

/* Dynamic controls and their state palettes are defined once, alongside the
   shared dock geometry, in panel-layout-integrity.css. */
@media (max-width: 699px) {
  .panel-body .panel-tile .panel-tile-icon:has(> .panel-art-icon),
  .panel-body .panel-tile .panel-tile-icon > .panel-art-icon {
    width: 62px;
    height: 62px;
  }

  .panel-body .panel-permanent-header .panel-brand > .is-family-banner,
  .panel-body .panel-permanent-header .panel-top-actions > a > .is-family-banner {
    width: 32px;
    height: 32px;
  }
}


/* Source: css/panel-layout-integrity.css */
/* Final geometry contract for the touch shell.
   Cards keep a useful proportion; spare viewport space stays spare instead of
   stretching content. This file intentionally loads last so old responsive
   experiments cannot reintroduce fractional-height cards. */

/* Dense editors and device detail cards share the remaining height with the
   permanent dock. If content cannot fit, scroll inside its bounded container;
   never push the dock past the viewport or shrink physical control targets. */
.panel-body .panel-main.panel-app-screen > :is(.panel-device-detail, .media-device-grid) {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
}

.panel-body .panel-main.panel-app-screen > .panel-form:has([data-favorite-order]) {
flex: 1 1 auto;
min-height: 0;
margin-block: 0;
overflow-y: auto;
}

.panel-body .panel-main.panel-app-screen > .panel-document-deck {
overflow: hidden;
}

.panel-body .panel-main.panel-app-screen > :is(.energy-navigation, .page-header) {
margin-block: 0;
}

/* The player uses the space actually left above the dock, not a 320px
   assumption. Container units also account for the installed banner height. */
.panel-body .panel-main.panel-app-screen > .panel-form.panel-automation-editor[data-wizard] { gap: 8px; }
@media (min-width: 700px) and (min-height: 501px) {
  .panel-body .panel-main.panel-app-screen > .media-device-grid:has(.has-spotify:only-child) {
    container-type: size;
  }
  .panel-body .panel-main.panel-app-screen .media-device-grid:has(> article:only-child) :is(.media-now-playing, .panel-media-library) {
    height: clamp(240px, calc(100cqh - 182px), 320px);
  }
  .panel-body .panel-main.panel-app-screen .has-spotify .spotify-item-grid > form > button { height: 60px; min-height: 60px; }
}

@media (orientation: landscape) and (min-width: 700px) {
  .panel-body .panel-main.panel-control-screen > .panel-device-detail:has(> .is-module-lighting) {
    width: min(100%, 960px);
    container-type: size;
  }
  .panel-body .panel-main.panel-control-screen .panel-device-card.is-module-lighting {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 12px;
    min-height: 0;
  }
  .panel-body .panel-main.panel-control-screen .is-module-lighting > header { grid-column: 1; grid-row: 1; margin: 0; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting > .panel-main-controls { grid-column: 2; grid-row: 1 / 4; min-width: 0; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting > .panel-detail-links { grid-column: 1; grid-row: 3; margin: 0; }
}

@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px) {
  .panel-body .panel-main.panel-control-screen .panel-device-card.is-module-lighting {
    height: 100%;
    padding: 8px;
  }
  .panel-body .panel-main.panel-control-screen .is-module-lighting > header { gap: 2px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting > header > .panel-equipment-visual { width: 44px; height: 44px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting h1 { font-size: 18px; line-height: 22px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .panel-equipment-room { margin: 0; line-height: 16px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting > .panel-main-controls {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .panel-control-tabs { flex-direction: column; margin: 0; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .panel-control-tabs button { min-height: 44px; padding: 8px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-list { padding: 0; border: 0; gap: 8px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment { padding: 4px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-color-wheel {
    width: clamp(80px, calc(100cqh - 32px), 224px);
    height: clamp(80px, calc(100cqh - 32px), 224px);
    max-width: 100%;
  }
  .panel-body .panel-main.panel-app-screen > .panel-form.panel-automation-editor[data-wizard] { position: relative; padding: 8px; gap: 4px; }
  .panel-body .panel-automation-editor[data-wizard] > [data-wizard-progress] { position: absolute; top: 10px; right: 12px; font-size: 12px; line-height: 16px; }
  .panel-body .panel-automation-editor [data-wizard-page] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 4px 12px; }
  .panel-body .panel-automation-editor [data-wizard-page] > legend { padding-right: 100px; font-size: 18px; line-height: 22px; }
  .panel-body .panel-automation-editor [data-wizard-page] > :is(p, .panel-warning, .panel-wizard-summary) { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 16px; }
  .panel-body .panel-automation-editor[data-wizard] .panel-form-field { margin: 0; gap: 2px; min-width: 0; }
  .panel-body .panel-automation-editor .panel-form-field > label { font-size: 13px; line-height: 18px; }
  .panel-body .panel-automation-editor .panel-form-field > :is(input, select) { min-height: 44px; height: 44px; padding-block: 6px; }
  .panel-body .panel-automation-editor[data-wizard] .panel-wizard-actions { margin: 0; padding: 0; }
  .panel-body .panel-automation-editor .panel-wizard-actions .panel-button { min-height: 44px; padding-block: 6px; }
  /* At phone landscape height, use the existing player/library switch instead
     of placing the player below three control rows. No controls are cloned. */
  .panel-body .panel-main.panel-app-screen > .media-device-grid:has(.has-spotify:only-child) { container-type: size; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify {
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    grid-template-rows: 44px 44px minmax(44px, 1fr);
    height: min(100cqh, 198px);
    align-content: start;
  }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .denon-source-panel {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / 4;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views { display: flex; gap: 8px; margin: 0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views button { flex: 1; min-height: 44px; border: 1px solid var(--hm-line); border-radius: 12px; background: var(--hm-surface); color: var(--hm-text); }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views button[aria-pressed="true"] { background: var(--hm-soft); border-color: var(--hm-green); }
  .panel-body .panel-main.panel-app-screen .denon-source-panel[data-media-view="library"] .media-now-playing,
  .panel-body .panel-main.panel-app-screen .denon-source-panel[data-media-view="player"] .panel-media-library { display: none !important; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-now-playing { margin: 0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-now-playing-copy { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-now-playing-copy strong { grid-column: 1 / -1; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-session-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .denon-playback-row > .media-seek { grid-template-columns: 32px minmax(44px, 1fr) 32px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-seek input { grid-column: 2; grid-row: 1; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-seek output { grid-row: 1; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .panel-media-library { flex: 1; height: auto; padding: 0; border: 0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .panel-library-pages { --panel-page-limit: 2; }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-library-pages > .panel-pagination { min-height: 16px; height: 16px; padding: 0; margin: 0; }
}

.panel-automation-editor .panel-wizard-cancel { margin-right: auto; }
.panel-body .panel-main.panel-app-screen .panel-user-help { overflow: auto; }
.panel-user-help summary { min-height: 44px; }

/* The compact player shares the actual frame with its controls and dock.
   Fixed 240px playback cards previously hid transport controls on phones. */
@media (max-width: 699px) {
  .panel-body .panel-main.panel-app-screen > .media-device-grid:has(.has-spotify:only-child) { container-type: size; overflow: hidden; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify { height: 100cqh; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .compact-device-header { min-height: 44px; height: 44px; margin: 0; grid-template-columns: minmax(0, 1fr) 44px auto; }
  .panel-body .panel-main.panel-app-screen .has-spotify .compact-device-header > .panel-equipment-visual { display: none; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-control-console { flex: 1; min-height: 0; margin: 0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-active-controls { height: 100%; min-height: 0; grid-template-rows: 44px 44px minmax(0, 1fr); gap: 4px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-source-select { padding: 0 4px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-source-panel { display: flex; flex-direction: column; min-height: 0; padding: 0; border: 0; gap: 4px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views { margin: 0; flex: none; }
  .panel-body .panel-main.panel-app-screen .media-device-grid:has(> article:only-child) :is(.media-now-playing, .panel-media-library) { height: auto; flex: 1; min-height: 0; margin: 0; padding: 4px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing { grid-template-columns: 40px minmax(0,1fr); grid-template-rows: minmax(0,1fr) 44px; gap: 4px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-art,
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-art img { width: 40px; height: 40px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-copy { gap: 0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-copy strong { font-size: 16px; line-height: 20px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-copy > :is(span,small) { font-size: 12px; line-height: 14px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-playback-row { grid-template-columns: 44px 44px minmax(44px,1fr) 44px; gap: 8px; margin: 0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-playback-row > form > button { width: 44px; height: 44px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-seek { min-width: 0; grid-template-columns: minmax(44px,1fr); }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-seek input { height: 44px; }
}

.panel-body .panel-main.panel-app-screen > [data-pager] {
flex: 1 1 0;
min-height: 0;
}

.panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid {
--panel-row-min: 160px;
--panel-row-max: 176px;
flex: 1 1 0;
height: auto;
grid-template-rows: repeat(var(--panel-grid-rows, 1), max-content) !important;
grid-auto-rows: max-content !important;
align-content: center !important;
align-items: start;
}

.panel-body .panel-main.panel-app-screen :is(.panel-tile, .panel-menu-tile) {
align-self: center;
height: var(--panel-fit-tile, var(--panel-tile-height)) !important;
min-height: 0 !important;
max-height: 176px !important;
aspect-ratio: 7 / 5;
overflow: hidden;
}

/* House covers are deliberately portrait, but never become full-height
   columns on large monitors. Width determines height within a bounded ratio. */
.panel-body .panel-main.panel-app-screen > [data-pager].houses > [data-page-items].panel-grid {
--panel-row-min: 232px;
--panel-row-max: 300px;
align-content: center !important;
}

.panel-body .panel-main.panel-app-screen .houses .panel-tile {
width: min(100%, var(--panel-tile-max));
height: var(--panel-fit-tile, 300px) !important;
min-height: 232px !important;
max-height: 300px !important;
aspect-ratio: 4 / 5 !important;
}

.panel-body .panel-main.panel-app-screen .houses .panel-tile > a {
height: 100%;
min-height: 0;
padding: 0 0 12px;
gap: 5px;
justify-content: flex-start;
}

.panel-body .panel-main.panel-app-screen .houses .panel-tile.with-photo > a > img {
flex: 1 1 auto;
width: 100%;
height: auto;
min-height: 0;
max-height: 70%;
object-fit: cover;
}

.panel-body .panel-main.panel-app-screen .houses .panel-tile .panel-tile-icon {
flex: 0 0 auto;
}

/* Room/house glyphs are also <img>. The legacy photo minimum must never make
   a 28px SVG at least 64px tall or stretch it like the photographic cover. */
.panel-body .panel-main.panel-app-screen .panel-tile .panel-tile-icon > .panel-art-icon {
min-height: 0;
max-height: 100%;
flex: 0 0 auto;
object-fit: contain;
}

.panel-body .panel-main.panel-app-screen .houses .panel-tile .panel-tile-icon > .panel-art-icon {
min-height: 0;
max-height: 100%;
}

/* Summary cards have an icon/power row and a full-width name underneath.
   Do not squeeze the title into the gap between two fixed-size touch targets. */
.panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid:has(> .panel-equipment-summary) {
--panel-row-min: 224px;
--panel-row-max: 224px;
grid-template-rows: repeat(var(--panel-grid-rows, 1), max-content) !important;
grid-auto-rows: max-content !important;
align-content: center !important;
align-items: stretch;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary {
--equipment-art: 52px;
--equipment-group-offset: 0px;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-auto-rows: max-content;
align-content: start;
gap: 4px;
align-self: center;
width: 100%;
height: var(--panel-fit-tile, 224px) !important;
min-height: var(--panel-row-min, 224px) !important;
max-height: 224px !important;
padding: 12px !important;
overflow: hidden;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(> .panel-device-group-label) {
--equipment-group-offset: 26px;
}

.panel-body .panel-main.panel-app-screen .panel-device-group-label {
height: 22px;
min-height: 22px;
margin: 0;
padding: 0;
font-size: 11px;
line-height: 16px;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary .panel-equipment-open {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--equipment-art) auto;
align-items: start;
min-width: 0;
min-height: 0;
max-height: none;
margin: 0 !important;
padding: 0;
gap: 6px;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-open .panel-equipment-visual.is-v23-device {
position: static;
width: var(--equipment-art);
height: var(--equipment-art);
max-width: var(--equipment-art);
margin: 0;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-open h2 {
display: -webkit-box;
margin: 0;
font-size: 16px;
line-height: 20px;
overflow: hidden;
overflow-wrap: anywhere;
word-break: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-room {
display: block;
margin: 2px 0 0;
font-size: 12px;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.panel-body .panel-main.panel-app-screen .panel-summary-power {
top: calc(12px + var(--equipment-group-offset));
right: 12px;
z-index: 2;
}

.panel-body .panel-main.panel-app-screen .panel-summary-power :is(
  .touch-control-console, .touch-control-header, .touch-power-form, .touch-power-button
) {
position: static;
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
width: var(--equipment-art);
min-width: 44px;
height: var(--equipment-art);
min-height: 44px;
margin: 0;
padding: 0;
}

.panel-body .panel-main.panel-app-screen .panel-summary-power .touch-control-console {
border: 0;
background: transparent;
box-shadow: none;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary > .panel-state {
justify-self: start;
max-width: 100%;
margin: 0;
font-size: 12px;
line-height: 18px;
}

.panel-body .panel-main.panel-app-screen .panel-summary-metrics {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 2px 12px;
}

.panel-body .panel-main.panel-app-screen .panel-summary-metrics[hidden] {
display: none;
}

.panel-body .panel-main.panel-app-screen .panel-summary-metrics > div {
display: flex;
align-items: baseline;
gap: 4px;
min-width: 0;
}

.panel-body .panel-main.panel-app-screen .panel-summary-metrics :is(dt, dd) {
margin: 0;
font-size: 12px;
line-height: 18px;
}

.panel-body .panel-main.panel-app-screen .panel-caption {
display: -webkit-box;
margin: 0;
font-size: 11px;
line-height: 16px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

/* A room heater can expose its temperature alongside the summary. Keep that
   editor in a separate column instead of compressing the name row to zero. */
.panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(.panel-summary-temperature) {
--equipment-controls: 164px;
grid-template-columns: minmax(0, 1fr) var(--equipment-controls);
column-gap: 12px;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(.panel-summary-temperature) > .panel-device-group-label {
grid-column: 1 / -1;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(.panel-summary-temperature) > :is(.panel-equipment-open, .panel-state, .panel-summary-metrics) {
grid-column: 1;
}

.panel-body .panel-main.panel-app-screen .panel-summary-temperature {
grid-column: 2;
grid-row: 2 / 5;
align-self: center;
min-width: 0;
}

.panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(.panel-summary-temperature) .panel-summary-power {
right: calc(var(--equipment-controls) + 24px);
}

.panel-body .panel-main.panel-room-screen .panel-equipment-room {
display: none;
}

.panel-body .panel-main.panel-app-screen .panel-summary-temperature :is(.touch-control-console, .touch-adjustment-list, .touch-adjustment) {
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}

.panel-body .panel-main.panel-app-screen .panel-summary-temperature .touch-adjustment-heading label {
font-size: 11px;
}

.panel-body .panel-main.panel-app-screen .panel-summary-temperature .touch-dial-control {
grid-template-columns: 44px minmax(0, 1fr) 44px;
gap: 4px;
}

.panel-body .panel-main.panel-app-screen .panel-summary-temperature .touch-step-button {
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
padding: 0;
}

.panel-body .panel-main.panel-app-screen .panel-summary-temperature .touch-dial-readout {
width: 60px;
height: 60px;
font-size: 24px;
}

/* Scene cards contain expandable effects and confirmations, not a navigation
   glyph. Never impose the small navigation-tile height on this content. */
.panel-body .panel-main.panel-app-screen .panel-tile.panel-program-tile {
height: auto !important;
max-height: none !important;
aspect-ratio: auto;
overflow: visible;
}

/* One icon target for actions and destinations. The rounded pastel surface
   belongs to the SVG artwork, never to a second CSS plate around the button. */
.panel-body .panel-action-dock {
--dock-target: 64px;
--dock-art: 48px;
}

.panel-body .panel-action-dock [data-dock-item]:not(.energy-dock-reading) {
position: relative;
display: grid !important;
place-items: center;
flex: 0 0 var(--dock-target);
grid-template: 1fr / 1fr;
gap: 0;
width: var(--dock-target) !important;
min-width: var(--dock-target) !important;
max-width: var(--dock-target);
height: var(--dock-target) !important;
min-height: var(--dock-target) !important;
max-height: var(--dock-target);
padding: 4px !important;
border: 0 !important;
border-radius: 12px;
background: transparent !important;
box-shadow: none !important;
overflow: visible;
transition: transform 160ms ease;
}

/* A stronger display rule must not unhide overflow items selected by fitDock. */
.panel-body .panel-action-dock [data-dock-item][hidden] {
display: none !important;
}

.panel-body .panel-action-dock [data-dock-item] > :is(.panel-art-icon, .panel-v23-icon),
.panel-body .panel-action-dock :is(.panel-quick-light-icon, .panel-quick-climate-icon, .panel-quick-power-icon) {
display: block;
width: var(--dock-art) !important;
height: var(--dock-art) !important;
max-width: var(--dock-art);
max-height: var(--dock-art);
padding: 0;
overflow: visible;
filter: none;
}

.panel-body .panel-action-dock .is-device .panel-quick-name {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}

.panel-body .panel-action-dock .is-device :is(
  .touch-control-console, .touch-control-header, .touch-power-form,
  .touch-power-button, .panel-quick-unavailable
) {
position: static;
display: grid;
place-items: center;
grid-template: 1fr / 1fr !important;
grid-area: 1 / 1 !important;
align-self: center;
justify-self: center;
width: calc(var(--dock-target) - 8px) !important;
min-width: calc(var(--dock-target) - 8px) !important;
height: calc(var(--dock-target) - 8px) !important;
min-height: calc(var(--dock-target) - 8px) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 10px;
background: transparent !important;
box-shadow: none !important;
overflow: visible;
}

.panel-body .panel-action-dock .is-device .touch-power-button.is-quick-status {
--quick-surface: #FEE8EE;
--quick-ink: #B4234D;
color: var(--quick-ink) !important;
touch-action: manipulation;
transition: transform 160ms ease;
}

/* Palette matches the supplied ICO-QUICK-*-on/off.svg files. Pending intent
   overrides confirmed state temporarily; an error restores the actual state. */
.panel-body .panel-action-dock .touch-power-button.is-quick-status[aria-checked="true"] {
--quick-surface: #DFF6EC;
--quick-ink: #1F7A59;
}

.panel-body .panel-action-dock .is-module-climate .touch-power-button.is-quick-status[aria-checked="true"] {
--quick-surface: #FFF0E8;
--quick-ink: #B45309;
}

.panel-body .panel-action-dock .is-device [aria-busy="true"] .touch-power-button.is-quick-status[data-pending-state="on"] {
--quick-surface: #DFF6EC;
--quick-ink: #1F7A59;
}

.panel-body .panel-action-dock .is-module-climate [aria-busy="true"] .touch-power-button.is-quick-status[data-pending-state="on"] {
--quick-surface: #FFF0E8;
--quick-ink: #B45309;
}

.panel-body .panel-action-dock .is-device [aria-busy="true"] .touch-power-button.is-quick-status[data-pending-state="off"] {
--quick-surface: #FEE8EE;
--quick-ink: #B4234D;
}

.panel-body .panel-action-dock .panel-quick-unavailable,
.panel-body .panel-action-dock .is-device .touch-power-button.is-quick-status:disabled:not([data-pending-state]) {
--quick-surface: #EEF1F5;
--quick-ink: #687386;
color: var(--quick-ink) !important;
}

.panel-body .panel-action-dock .panel-quick-surface {
fill: var(--quick-surface);
fill-opacity: 1;
stroke: none;
}

.panel-body .panel-action-dock .is-device [aria-busy="true"] .touch-power-button.is-quick-status {
animation: hm-v23-state-pulse 900ms ease-in-out infinite;
}

.panel-body .panel-action-dock :is(a, button):focus-visible {
outline: 2px solid #1F7A59;
outline-offset: 2px;
}

@keyframes hm-v23-state-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .58; }
}

.panel-permanent-header .panel-brand[aria-current="page"] {
color: white;
}

/* Energy uses the same measured row budget without changing any readings,
   tariffs or billing logic. Its selector and dock stay outside the grid. */
.panel-body .panel-main.energy-workspace > .energy-card-deck > .energy-page-items {
--panel-row-min: var(--energy-card-height);
--panel-row-max: var(--energy-card-height);
flex: 1 1 0;
height: auto;
grid-template-rows: repeat(var(--panel-grid-rows, 1), max-content);
align-content: start;
}

.panel-body .energy-workspace .energy-equipment-symbol > span:first-child,
.panel-body .energy-workspace .energy-equipment-symbol .panel-v23-icon {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}

/* Only exceptionally short viewports (keyboard/zoom) may need a local scroll.
   Never centre overflowing content above the reachable top edge. */
.panel-body .panel-main.panel-app-screen > [data-pager].panel-pager-overflow > [data-page-items]:not(.panel-page-preview) {
align-content: start !important;
overflow: auto;
}

@media (max-width: 699px) {
  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid {
    --panel-row-min: 144px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid {
    --panel-row-min: 80px;
    --panel-row-max: 88px;
  }

  .panel-body .panel-action-dock {
    --dock-target: 56px;
    --dock-art: 44px;
    flex-basis: 64px !important;
    height: 64px;
    min-height: 64px;
    padding-block: 3px !important;
  }

  .panel-body .panel-action-dock :is(.panel-favorite-group, .energy-dock-readings, .energy-dock-navigation) {
    height: 56px;
  }

  .panel-body .panel-main.panel-app-screen :is(.panel-tile, .panel-menu-tile) {
    height: var(--panel-fit-tile, 88px) !important;
    max-height: 88px !important;
    aspect-ratio: auto;
  }

  /* Bound the entire icon, including its intrinsic pastel surface, to the
     compact card. The desktop artwork must not outgrow an 80px touch tile. */
  .panel-body .panel-main.panel-app-screen .panel-tile:not(.panel-program-tile) > a {
    min-height: 0 !important;
    padding: 4px 8px;
    gap: 2px;
  }

  .panel-body .panel-main.panel-app-screen .panel-tile .panel-tile-icon,
  .panel-body .panel-main.panel-app-screen .panel-tile .panel-tile-icon > .panel-art-icon,
  .panel-body .panel-main.panel-app-screen .panel-menu-tile > :is(.panel-art-icon, .panel-v23-icon) {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin: 0;
  }

  .panel-body .panel-main.panel-app-screen .panel-menu-tile {
    gap: 2px;
    padding: 4px 8px;
  }

  .panel-body .panel-main.panel-app-screen :is(.panel-tile, .panel-menu-tile) strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
  }

  .panel-body .panel-main.panel-app-screen > [data-pager].houses > [data-page-items].panel-grid {
    --panel-row-min: 80px;
    --panel-row-max: 88px;
    --panel-columns: 3;
    grid-template-columns: repeat(var(--panel-visible-columns, 3), minmax(0, 156px)) !important;
    row-gap: 4px;
  }

  .panel-body .panel-main.panel-app-screen .houses .panel-tile {
    height: var(--panel-fit-tile, 88px) !important;
    min-height: 80px !important;
    max-height: 88px !important;
    aspect-ratio: auto !important;
  }

  .panel-body .panel-main.panel-app-screen .houses .panel-tile > a {
    position: relative;
    padding: 0 0 4px;
    justify-content: start;
  }

  .panel-body .panel-main.panel-app-screen .houses .panel-tile .panel-tile-icon {
    position: absolute;
    left: 6px;
    bottom: 4px;
    width: 24px;
    height: 24px;
    margin: 0;
  }

  .panel-body .panel-main.panel-app-screen .houses .panel-tile .panel-tile-icon > .panel-art-icon {
    width: 24px;
    height: 24px;
  }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile strong { padding-inline: 34px 6px; }
  .panel-body .panel-main.panel-app-screen .houses .panel-tile.with-photo > a > img { max-height: 66%; }

  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid:has(> .panel-equipment-summary) {
    --panel-columns: 2;
    --panel-row-min: 112px;
    --panel-row-max: 164px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid:has(.panel-device-group-label, .panel-protected-label) {
    --panel-row-min: 136px;
  }

  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid:has(.panel-device-group-label):has(.panel-protected-label) {
    --panel-row-min: 156px;
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-summary {
    --equipment-art: 44px;
    height: var(--panel-fit-tile, 164px) !important;
    min-height: var(--panel-row-min) !important;
    max-height: 164px !important;
    padding: 8px !important;
    gap: 2px;
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-summary .panel-equipment-open {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(.panel-summary-power) .panel-equipment-open {
    padding-right: 52px;
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-open h2 {
    font-size: 14px;
    line-height: 17px;
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-room {
    font-size: 11px;
    line-height: 14px;
  }

  .panel-body .panel-main.panel-app-screen .panel-summary-power {
    top: calc(8px + var(--equipment-group-offset));
    right: 8px;
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-summary:has(.panel-summary-temperature) .panel-summary-power {
    right: calc(var(--equipment-controls) + 20px);
  }

  .panel-body .panel-main.panel-app-screen .panel-equipment-summary > .panel-state {
    padding-block: 1px;
  }

  .panel-body .panel-main.panel-app-screen .panel-summary-metrics {
    flex-wrap: nowrap;
  }

  .panel-body .panel-main.panel-app-screen .panel-summary-metrics dt {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .panel-body .panel-main.panel-app-screen .panel-summary-metrics dd {
    white-space: nowrap;
  }

  /* Offline is already explicit in the state row; the identical explanatory
     sentence remains on the detail page, not below the compact card edge. */
  .panel-body .panel-main.panel-app-screen .panel-equipment-summary > .panel-caption {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .panel-body .panel-main.panel-app-screen > [data-pager] > [data-page-items].panel-grid:has(.panel-summary-temperature) {
    --panel-columns: 1;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-body .panel-action-dock .is-device [aria-busy="true"] .touch-power-button.is-quick-status {
    animation: none;
  }
  .panel-body .panel-action-dock .is-device .touch-power-button.is-quick-status {
    transition: none;
  }
}

html[data-reduced-motion] .panel-body .panel-action-dock .is-device [aria-busy="true"] .touch-power-button.is-quick-status {
animation: none;
}

html[data-reduced-motion] .panel-body .panel-action-dock .is-device .touch-power-button.is-quick-status {
transition: none;
}

/* Audit: readable data, distinct from decorative/status icon colors. */
.panel-body .touch-adjustment-heading strong {
color: #166534;
}

.panel-body .media-now-playing-copy .media-session-label,
.panel-body .appliance-readonly-note {
color: var(--hm-muted);
}

/* Banner: house-scoped navigation at left, global destinations at right.
   The house glyph labels a group; it is intentionally not a fifth action. */
.panel-body .panel-permanent-header > .panel-context-topbar {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
column-gap: 8px;
}
.panel-body .panel-permanent-header .panel-house-navigation { justify-self: start; align-items: center; gap: 8px; }
.panel-body .panel-permanent-header .panel-global-navigation { justify-self: end; align-items: center; gap: 12px; }
.panel-body .panel-permanent-header .panel-top-actions > a { width: 44px; height: 44px; padding: 4px; }
.panel-body .panel-permanent-header .panel-house-mark { display: grid; place-items: center; width: 32px; padding-left: 4px; }
.panel-body .panel-permanent-header .panel-house-mark > .is-family-banner { width: 28px; height: 28px; opacity: .9; }
.panel-body .panel-permanent-header .panel-top-actions > a::after { display: none; }
.panel-body .panel-permanent-header .panel-top-actions > a > .is-family-banner { width: 36px; height: 36px; }

/* Intrinsic icon size must not overrun the grid track. City + condition stay
   together as one unit, with explicit line heights in portrait and landscape. */
.panel-body .panel-permanent-header .panel-weather {
grid-template-columns: 32px max-content minmax(0, 1fr);
grid-template-rows: auto;
align-items: center;
gap: 10px;
width: auto;
max-width: 100%;
min-width: 0;
}
.panel-body .panel-weather > [data-environment-icon] { grid-column: 1; grid-row: 1; width: 32px; height: 32px; }
.panel-body .panel-weather > [data-environment-icon] > :is(img, svg) { width: 32px; height: 32px; }
.panel-body .panel-weather > strong { grid-column: 2; grid-row: 1; white-space: nowrap; }
.panel-body .panel-weather .panel-weather-copy { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.panel-body .panel-weather .panel-weather-copy > :is(small, span) { display: block; margin: 0; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-body .panel-permanent-header .panel-environment > .panel-environment-metric { grid-template-columns: 28px max-content; column-gap: 8px; }
.panel-body .panel-environment [data-environment-icon],
.panel-body .panel-environment [data-environment-icon] > :is(img, svg) { width: 28px; height: 28px; }
.panel-body .panel-permanent-header .is-house-selector { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; }
.panel-body .panel-permanent-header .is-house-selector .panel-weather { grid-column: 1; grid-row: 1; }

@media (max-width: 699px) {
  .panel-body .panel-permanent-header > .panel-context-topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: max(8px, var(--panel-safe-left)) max(8px, var(--panel-safe-right)); gap: 6px; }
  .panel-body .panel-permanent-header .panel-house-navigation { gap: 8px; }
  .panel-body .panel-permanent-header .panel-house-mark { width: 24px; padding-left: 2px; }
  .panel-body .panel-permanent-header .panel-house-mark > .is-family-banner { width: 24px; height: 24px; }
  .panel-body .panel-permanent-header .panel-global-navigation { gap: 8px; }
  .panel-body .panel-permanent-header .panel-clock time { font-size: 17px; line-height: 20px; }
  .panel-body .panel-permanent-header .panel-clock span { font-size: 10px; line-height: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .panel-body .panel-permanent-header .panel-hero-context { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-inline: 12px; }
  .panel-body .panel-permanent-header .panel-weather { grid-template-columns: 28px max-content minmax(0, 1fr); column-gap: 8px; }
  .panel-body .panel-weather > [data-environment-icon],
  .panel-body .panel-weather > [data-environment-icon] > :is(img, svg) { width: 28px; height: 28px; }
  .panel-body .panel-weather > strong { font-size: 18px; line-height: 22px; }
  .panel-body .panel-permanent-header .panel-environment > .panel-environment-metric { padding: 4px 6px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .panel-body .panel-permanent-header .panel-weather { grid-template-columns: 24px max-content minmax(0, 1fr); column-gap: 8px; }
  .panel-body .panel-weather > [data-environment-icon],
  .panel-body .panel-weather > [data-environment-icon] > :is(img, svg) { width: 24px; height: 24px; }
  .panel-body .panel-weather .panel-weather-copy > :is(small, span) { font-size: 10px; line-height: 12px; }
  .panel-body .panel-permanent-header .panel-environment > .panel-environment-metric { grid-template-columns: 24px max-content; }
  .panel-body .panel-environment [data-environment-icon],
  .panel-body .panel-environment [data-environment-icon] > :is(img, svg) { width: 24px; height: 24px; }
}

/* Dense data uses explicit pages; original fields and forms remain intact. */
html[data-effective-mode="tablet"] .panel-body { width:100%; max-width:none; margin-inline:0; }
.panel-body .panel-main.panel-control-screen > .panel-device-detail:has(> .panel-device-card:not(.is-module-lighting)) { container-type:size; width:100%; overflow:hidden; }
.panel-body .panel-device-card:not(.is-module-lighting) { display:flex; flex-direction:column; width:100%; height:100cqh; min-height:0; padding:8px; gap:4px; }
.panel-body .panel-device-card:not(.is-module-lighting) > header { min-height:56px; height:56px; flex:none; margin:0; padding-right:60px; }
.panel-body .panel-device-card:not(.is-module-lighting) > header :is(h1,.panel-equipment-visual) { display:none; }
.panel-body .panel-device-card:not(.is-module-lighting) .panel-equipment-room { font-size:12px; line-height:14px; margin:0; }
.panel-body .panel-device-card:not(.is-module-lighting) .panel-state { font-size:12px; line-height:18px; min-height:0; padding:2px 4px; }
.panel-body .panel-device-card:not(.is-module-lighting) .panel-state .hm-icon { width:16px; height:16px; }
.panel-body .panel-device-card:not(.is-module-lighting) > .panel-main-controls { display:flex; flex:1 1 0; min-height:0; margin:0; padding:0; }
.panel-body .panel-device-card:not(.is-module-lighting) > .panel-main-controls > .touch-control-console { display:flex; flex-direction:column; flex:1 1 0; min-height:0; margin:0; }
.panel-body .panel-device-card:not(.is-module-lighting) > .panel-detail-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; flex:none; margin:0; }
.panel-body .panel-device-card:not(.is-module-lighting) > .panel-detail-links a { min-height:44px; padding:4px; font-size:13px; }
.panel-body .panel-device-card:not(.is-module-lighting) > header .touch-control-header { top:8px; right:8px; }
.panel-body .panel-control-pages > [data-page-items] { display:flex; flex:1 1 0; min-height:0; padding:0; border:0; gap:0; overflow:hidden; }
.panel-body .panel-control-pane { width:100%; min-width:0; min-height:0; }
.panel-body .panel-control-pane > .touch-adjustment { margin:0; padding:8px; }
.panel-body .panel-control-pane .touch-mode-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.panel-body .panel-control-pane .touch-mode-button { height:64px; min-height:64px; padding:4px; }
.panel-body .panel-control-pane .touch-mode-button .panel-icon { width:28px; height:28px; }
.panel-body .panel-device-sheet :is(.touch-control-console,.touch-action-grid,.touch-adjustment-list) { display:flex; flex-direction:column; flex:1 1 0; min-height:0; margin:0; padding:0; }
.panel-body .panel-device-sheet .touch-control-header { position:static; }
.panel-body .panel-device-sheet .panel-control-pane:has(> .touch-control-console) { display:flex; }
@media (min-width:600px) and (max-height:500px) {
  .panel-body .panel-device-card:not(.is-module-lighting) { display:grid; grid-template-columns:200px minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:8px; }
  .panel-body .panel-device-card:not(.is-module-lighting) > header { grid-column:1; grid-row:1; align-self:start; }
  .panel-body .panel-device-card:not(.is-module-lighting) > .panel-main-controls { grid-column:2; grid-row:1; height:100%; }
  .panel-body .panel-device-card:not(.is-module-lighting) > .panel-detail-links { grid-column:1; grid-row:1; align-self:end; }
}
.panel-body .panel-document-page { display:flex; flex-direction:column; overflow:hidden; }
.panel-body .panel-document-page > :is(section,form,div,nav,header) { width:100%; min-height:0; }
@media (max-width:699px) {
  .panel-body .panel-document-page > .metrics { flex:1; grid-auto-rows:minmax(0,1fr); gap:8px; margin:0; }
  .panel-body .panel-document-page > .metrics article { min-height:0; padding:10px 16px; }
  .panel-body .panel-document-page > .metrics article > span { font-size:12px; line-height:16px; margin-bottom:6px; }
  .panel-body .panel-document-page > .metrics strong { font-size:24px; }
  .panel-body .panel-document-page > .metrics p { font-size:12px; line-height:16px; margin-top:6px; }
}
.panel-body .panel-touch-sequence { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }
.panel-body .panel-touch-sequence > [data-page-items] { flex:1 1 0; min-height:0; overflow:hidden; }
.panel-body .panel-touch-sequence [data-page-item] { margin:0; }
.panel-body .panel-touch-sequence [data-page-nav], .panel-body .panel-document-deck > [data-page-nav], .panel-body .panel-favorite-pages > [data-page-nav], .panel-body .panel-table-pages > [data-page-nav] { display:flex; align-items:center; gap:8px; flex:0 0 44px; height:44px; margin:0; }
.panel-body .panel-touch-page-button { width:44px; height:44px; min-width:44px; border:1px solid var(--hm-line); border-radius:12px; background:white; color:var(--hm-ink); font-size:20px; touch-action:manipulation; }
.panel-body .panel-touch-page-button:focus-visible { outline:3px solid var(--hm-accent); outline-offset:-3px; }
.panel-body .panel-touch-page-button:disabled { opacity:.4; }
.panel-body .panel-touch-page-count { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.panel-body .panel-main.panel-app-screen .panel-pagination .panel-touch-sections-button { width:auto; min-width:80px; padding:4px 8px; font-size:12px; }
.panel-body .panel-main.panel-app-screen > .panel-document-deck[data-pager] > [data-page-nav] { position:static; transform:none; pointer-events:auto; width:100%; height:44px; flex:0 0 44px; min-height:44px; }
.panel-body .panel-touch-sequence .panel-page-progress, .panel-body .panel-document-deck > nav .panel-page-progress, .panel-body .panel-favorite-pages > nav .panel-page-progress, .panel-body .panel-table-pages > nav .panel-page-progress { flex:1; }
.panel-body .panel-document-page > .inventory-results, .panel-body .panel-document-page > .inventory-filters, .panel-body .panel-document-page > .table-panel, .panel-body .panel-document-page > .appliance-setup-panel { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; padding:8px; gap:8px; }
.panel-body .panel-document-page .inventory-grid { display:flex; flex:1; min-height:0; }
.panel-body .panel-document-page .panel-inventory-pages > [data-page-items] { display:flex; align-items:flex-start; }
.panel-body .panel-document-page .panel-inventory-pages .inventory-card { width:100%; max-width:600px; padding:12px; }
.panel-body .panel-filter-pages > [data-page-items] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-content:start; }
.panel-body .panel-table-pages .responsive-table { flex:1 1 0; min-height:0; overflow:hidden; }
.panel-body .panel-table-pages table { table-layout:fixed; width:100%; min-width:0; }
.panel-body .panel-table-pages :is(th,td) { min-width:0; white-space:normal; overflow-wrap:anywhere; padding:4px; font-size:13px; line-height:16px; }
.panel-body .panel-table-pages th { font-size:12px; line-height:14px; }
@media (min-width:600px) and (max-height:500px) {
  .panel-body .panel-table-pages .cell-note { font-size:12px; line-height:14px; margin-left:0; }
}
.panel-body .panel-table-pages > .panel-heading { margin:0; padding:0; }
.panel-body .panel-table-pages > .panel-heading h2 { font-size:18px; line-height:22px; margin:0; }
.panel-body .panel-library-pages > [data-page-items] { flex:1 1 0; min-height:0; overflow:hidden; }
.panel-body .appliance-start-form { display:flex; flex-direction:column; flex:1; min-height:0; gap:8px; }
.panel-body .panel-field-pages label { display:flex; flex-direction:column; gap:8px; }
.panel-body .appliance-setup-panel .panel-heading { margin:0; padding:0; }
.panel-body .panel-field-pages label { gap:4px; }
.panel-body .panel-field-pages label small { font-size:12px; line-height:16px; }
.panel-body .panel-field-pages label > span { font-size:13px; line-height:16px; }
.panel-body .panel-field-hint { display:grid; gap:4px; font-size:12px; line-height:16px; }
.panel-body .panel-field-pages :is(input,select) { font-size:16px; height:44px!important; min-height:44px!important; padding:6px; }
.panel-body .panel-field-pages textarea { min-height:44px; max-height:80px; font-size:16px; }
.panel-body .panel-document-page .appliance-guide { display:flex; flex-direction:column; flex:1; min-height:0; margin:0; font-size:14px; line-height:1.4; padding:12px; }
.panel-body .panel-guide-pages p { margin:0; font-size:14px; line-height:18px; }
.panel-body .panel-document-page :is(h1,h2) { font-size:20px; line-height:1.2; margin:0 0 8px; }
.panel-body .panel-document-page > .page-header { padding:12px; }
@media (min-width:600px) and (max-width:760px) and (max-height:500px) {
  .panel-body .panel-document-page > .page-header.split { flex-direction:row; align-items:center; gap:12px; }
  .panel-body .panel-document-page > .page-header.split > div { flex:1; min-width:0; }
  .panel-body .panel-document-page > .page-header .back-link { margin-bottom:6px; }
  .panel-body .panel-document-page > .page-header p { font-size:12px; line-height:16px; }
}
.panel-body .panel-main.panel-app-screen > .panel-form:has([data-favorite-order]) { display:flex; flex-direction:column; overflow:hidden; }
.panel-body .panel-favorite-pages { display:flex; flex-direction:column; flex:1 1 0; min-height:0; max-height:none; overflow:hidden; }
.panel-body .panel-favorite-options { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; gap:8px; }
.panel-body .panel-favorite-option { min-height:48px; flex:0 0 auto; }
.panel-body .panel-favorite-option .panel-check { margin:0; min-height:44px; font-size:14px; }
.panel-body .panel-favorite-introduction { margin:0; font-size:12px; line-height:16px; }
.panel-body .panel-automation-editor [id$=weekdays] { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.panel-body .panel-automation-editor [id$=weekdays] label { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; height:48px; gap:2px; font-size:12px; line-height:16px; }
.panel-body .panel-automation-editor [id$=weekdays] input { width:24px; height:24px!important; min-height:24px!important; margin:0; padding:0; }
.panel-body .panel-automation-editor .panel-field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.panel-body .panel-automation-editor .panel-field-pair .panel-form-field { min-width:0; }
.panel-body .panel-automation-editor .panel-field-pair input { width:100%; min-width:0; }
.panel-body .panel-automation-editor .panel-form-field { gap:2px; margin:0 0 6px; }
.panel-body .panel-automation-editor .panel-form-field > label { font-size:14px; line-height:18px; }
.panel-body .panel-automation-editor .panel-form-field > small { font-size:12px; line-height:16px; }
.panel-body .panel-automation-editor .panel-form-field > :is(input,select) { min-height:44px; padding:6px; }
.panel-body .panel-automation-editor [data-wizard-page] > :is(p,.panel-caption) { font-size:12px; line-height:16px; margin:8px 0; }
.panel-body .panel-automation-editor .panel-review-page { display:flex; flex-direction:column; }
.panel-body .panel-automation-editor .panel-wizard-summary { display:flex; flex:1 1 0; min-height:0; margin:0; }
.panel-body .panel-summary-entry { display:grid; gap:4px; margin:0; }
.panel-body .panel-summary-entry dt { font-size:12px; line-height:16px; color:var(--hm-muted); }
.panel-body .panel-summary-entry dd { margin:0; font-size:16px; line-height:20px; overflow-wrap:anywhere; }
.panel-body .panel-main.panel-app-screen > [data-pager]:has(.panel-program-tile) > .panel-grid { --panel-columns:2; --panel-row-min:132; --panel-row-max:180; }
.panel-body .panel-main.panel-app-screen .panel-tile.panel-program-tile { min-height:132px; max-height:180px; height:var(--panel-fit-tile,180px)!important; padding:4px; display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:16px 12px 44px 44px; gap:2px 4px; align-content:center; }
.panel-body .panel-program-tile > .panel-tile-icon { grid-column:1; grid-row:1/3; width:24px; height:24px; margin:0; }
.panel-body .panel-program-tile > .panel-tile-icon .panel-icon { width:24px; height:24px; }
.panel-body .panel-program-tile > h2 { grid-column:2; grid-row:1; font-size:16px; line-height:16px; margin:0; }
.panel-body .panel-program-tile > small { grid-column:2; grid-row:2; font-size:11px; line-height:12px; }
.panel-body .panel-program-tile > small.panel-scene-warning { color:#a63f14; font-weight:600; font-size:10px; }
.panel-body .panel-program-tile > details { grid-column:1/-1; grid-row:3; margin:0; }
.panel-body .panel-program-tile > details > summary { min-height:44px; font-size:12px; display:flex; align-items:center; }
.panel-body .panel-program-tile > footer { grid-column:1/-1; grid-row:4; display:flex; align-items:center; justify-content:center; gap:8px; margin:0; }
.panel-body .panel-program-tile > footer :is(a,button) { min-height:44px; height:44px; display:inline-flex; align-items:center; padding:4px 8px; }
.panel-body .panel-scene-sheet { width:min(720px,calc(100vw - 24px)); height:min(560px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); padding:12px; border:1px solid var(--hm-line); border-radius:20px; overflow:hidden; background:var(--hm-surface,#fff); }
.panel-body .panel-scene-sheet[open] { display:flex; flex-direction:column; gap:12px; }
.panel-body .panel-scene-sheet::backdrop { background:#162c2870; }
.panel-body .panel-scene-sheet > header { display:flex; align-items:center; gap:12px; flex:none; }
.panel-body .panel-scene-sheet h2 { flex:1; margin:0; font-size:18px; line-height:22px; }
.panel-body .panel-scene-sheet > header button { width:44px; height:44px; flex:0 0 44px; font-size:24px; border:1px solid var(--hm-line); border-radius:12px; background:white; }
.panel-body .panel-scene-sheet p { margin:0; font-size:14px; line-height:20px; }
.panel-body .panel-section-pages > [data-page-items] { display:flex; flex-direction:column; gap:6px; }
.panel-body .panel-section-pages [data-page-item] { min-height:44px; padding:6px 12px; font-size:14px; line-height:18px; border:1px solid var(--hm-line); border-radius:12px; background:white; }
@media (max-width:699px) { .panel-body .panel-main.panel-app-screen > [data-pager]:has(.panel-program-tile) > .panel-grid { --panel-columns:1; } }
.panel-body .panel-main.panel-app-screen > .panel-form:has([data-favorite-order]) > p { font-size:12px; line-height:16px; margin:0 0 8px; }
.panel-body .panel-main.panel-app-screen > .panel-form:has([data-favorite-order]) { gap:8px; padding:12px; }
@media (max-width:699px) {
  .panel-body .panel-table-pages .table-mobile-cards tr:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding:3px; margin:0; }
  .panel-body .panel-table-pages .table-mobile-cards td { display:flex; flex-direction:column; text-align:left!important; align-items:flex-start; min-width:0; padding:3px; gap:2px; font-size:13px; line-height:16px; overflow-wrap:anywhere; }
  .panel-body .panel-table-pages .table-mobile-cards td::before { font-size:11px; line-height:14px; }
  .panel-body .panel-table-pages .table-mobile-cards td .cell-note { font-size:11px; line-height:14px; }
  .panel-body .panel-main.panel-control-screen > .panel-device-detail:has(> .is-module-lighting) { container-type:size; overflow:hidden; width:100%; }
  .panel-body .panel-device-card.is-module-lighting { display:flex; flex-direction:column; width:100%; height:100cqh; padding:8px; gap:4px; min-height:0; }
  .panel-body .panel-device-card.is-module-lighting > header { display:flex; gap:8px; margin:0; }
  .panel-body .is-module-lighting > header .panel-equipment-visual { display:none; }
  .panel-body .panel-device-card.is-module-lighting > header { min-height:56px; height:56px; padding:0 60px 0 0; flex:none; }
  .panel-body .is-module-lighting > header .panel-state { min-height:0; height:20px; padding:0; font-size:12px; line-height:20px; }
  .panel-body .is-module-lighting > header h1 { font-size:18px; line-height:22px; margin:0; }
  .panel-body .is-module-lighting > header > div:not(.panel-detail-power) { flex:1; }
  .panel-body .is-module-lighting .panel-equipment-room { font-size:12px; margin:0; }
  .panel-body .is-module-lighting .panel-main-controls { flex:1; min-height:0; margin:0; padding:0; gap:4px; }
  .panel-body .is-module-lighting .panel-control-tabs { margin:0; }
  .panel-body .is-module-lighting .panel-control-tabs button { min-height:44px; padding:4px 12px; }
  .panel-body .is-module-lighting .touch-adjustment-list { padding:0; gap:4px; border:0; }
  .panel-body .is-module-lighting .touch-adjustment { padding:4px; }
  .panel-body .is-module-lighting .touch-adjustment.is-slider { display:grid; grid-template-columns:110px minmax(0,1fr); gap:4px; }
  .panel-body .is-module-lighting .touch-adjustment-heading { margin:0; min-height:24px; height:24px; line-height:24px; }
  .panel-body .is-module-lighting .touch-adjustment .touch-range { margin:0; height:44px!important; min-height:44px!important; }
  .panel-body .is-module-lighting .panel-main-controls > .touch-control-console { margin:0; }
  .panel-body .is-module-lighting .touch-control-feedback:empty { display:none; }
  .panel-body .is-module-lighting .touch-adjustment.is-slider .touch-adjustment-heading { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; height:44px; }
  .panel-body .is-module-lighting .touch-adjustment-heading strong { font-size:16px; line-height:20px; }
  .panel-body .is-module-lighting .touch-adjustment-heading label { font-size:12px; line-height:12px; }
  .panel-body .is-module-lighting .touch-adjustment-heading strong > :is(output,span) { font-size:14px; line-height:18px; }
  .panel-body .is-module-lighting .touch-adjustment.is-quick-white { min-height:0; height:52px; }
  .panel-body .is-module-lighting .touch-white-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0; height:44px; gap:8px; }
  .panel-body .is-module-lighting .touch-white-button { display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px; height:44px; padding:4px; font-size:14px; }
  .panel-body .is-module-lighting .touch-white-button .panel-icon { width:20px; height:20px; }
  .panel-body .is-module-lighting .touch-color-wheel { width:clamp(64px,calc(100cqh - 270px),224px); height:clamp(64px,calc(100cqh - 270px),224px); }
  .panel-body .is-module-lighting .panel-detail-links { margin:0; gap:4px; }
  .panel-body .is-module-lighting .panel-detail-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:none; }
  .panel-body .is-module-lighting .panel-detail-links a { min-height:44px; padding:4px; font-size:13px; }
}
@media (min-width:600px) and (max-height:500px) {
  .panel-body .panel-table-pages th { font-size:12px; line-height:12px; padding:2px; }
  .panel-body .panel-main.panel-app-screen .panel-rule-row { padding:8px; }
  .panel-body .panel-automation-editor [id$=weekdays] { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .panel-body .panel-automation-editor .panel-form-field:has([id$=weekdays]) { grid-column:1/-1; }
  .panel-body .panel-table-pages > .panel-heading .eyebrow { display:none; }
  .panel-body .panel-field-pages textarea { min-height:44px; height:44px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-list:has([data-action=white_temperature]:not([hidden])) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment { grid-column:auto; grid-row:auto; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-white-buttons { display:flex; min-height:0; height:64px; gap:4px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-white-button { flex:1; min-width:44px; height:64px; min-height:64px; padding:4px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-white-button .panel-icon { width:28px; height:28px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-heading label { font-size:12px; line-height:16px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-heading strong { font-size:16px; line-height:20px; }
}
@media (min-width:700px) and (min-height:501px) {
  .panel-body .panel-main.panel-app-screen > .media-device-grid:has(.has-spotify:only-child) { flex:1 1 0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify { display:flex; flex-direction:column; height:100cqh; min-height:0; gap:8px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-control-console { flex:1; min-height:0; margin:0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-active-controls { height:100%; min-height:0; grid-template-rows:56px minmax(0,1fr); gap:8px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .denon-source-panel { display:flex; flex-direction:column; grid-column:1/-1; grid-row:2; align-self:stretch; height:100%; min-height:0; padding:8px; gap:8px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views { display:flex; flex:none; gap:8px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views button { flex:1; min-height:44px; border:1px solid var(--hm-line); border-radius:12px; background:white; }
  .panel-body .panel-main.panel-app-screen .has-spotify .panel-media-views button[aria-pressed=true] { background:var(--hm-soft); border-color:var(--hm-green); }
  .panel-body .panel-main.panel-app-screen .denon-source-panel[data-media-view=library] .media-now-playing,
  .panel-body .panel-main.panel-app-screen .denon-source-panel[data-media-view=player] .panel-media-library { display:none!important; }
  .panel-body .panel-main.panel-app-screen .media-device-grid:has(> article:only-child) .media-now-playing,
  .panel-body .panel-main.panel-app-screen .media-device-grid:has(> article:only-child) .panel-media-library { height:auto; flex:1; min-height:0; margin:0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-now-playing { display:grid; grid-template-columns:80px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 48px; gap:12px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-art,
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-art img { width:80px; height:80px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-copy { grid-column:2; min-width:0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-now-playing-art { margin:0; grid-row:1; align-self:start; }
  .panel-body .panel-main.panel-app-screen .has-spotify .denon-playback-row { grid-column:1/-1; grid-row:2; min-height:0; height:48px; margin:0; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-seek { grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-seek input { grid-column:2; grid-row:1; min-height:44px; height:44px; }
  .panel-body .panel-main.panel-app-screen .has-spotify .media-seek output { grid-row:1; font-size:12px; }
  .panel-body .panel-main.panel-app-screen .has-spotify [data-seek-position] { grid-column:1; }
  .panel-body .panel-main.panel-app-screen .has-spotify [data-seek-duration] { grid-column:3; }
}
.panel-body .panel-control-pages > .touch-adjustment-list { flex-direction:column; align-items:stretch; }
.panel-body .panel-control-pane { flex:1 1 0; }
@media (max-height:500px) {
  .panel-body .panel-control-pane > .touch-adjustment.is-dial { grid-template-columns:minmax(0,1fr) minmax(140px,1fr); gap:4px; padding:4px; }
  .panel-body .panel-control-pane .touch-dial-control { height:48px; }
  .panel-body .panel-control-pane .touch-dial-readout { width:48px; height:48px; }
  .panel-body .panel-control-pane .touch-dial-range { grid-column:1/-1; height:44px; min-height:44px; }
}
.panel-body .panel-control-pane .touch-adjustment-heading { min-width:0; }
.panel-body .panel-control-pane .touch-adjustment-heading label { overflow-wrap:anywhere; }
@media (max-height:500px) {
  .panel-body .panel-control-pane > .touch-adjustment.is-dial { grid-template-columns:minmax(0,1fr) 144px; }
  .panel-body .panel-control-pane .touch-adjustment-heading label { font-size:12px; line-height:14px; }
}
@media (max-height:500px) {
  .panel-body .panel-control-pane .touch-dial-control { grid-template-columns:48px 48px 48px; gap:0; }
}
@media (max-height:500px) {
  .panel-body .panel-control-pane > .touch-adjustment.is-icon-modes { padding:4px; gap:4px; }
  .panel-body .panel-control-pane .touch-mode-button { height:48px; min-height:48px; display:flex; flex-direction:row; gap:4px; font-size:12px; }
  .panel-body .panel-control-pane .touch-mode-button .panel-icon { width:20px; height:20px; }
}
@media (min-width:600px) and (max-height:500px) {
  .panel-body .panel-device-detail > .panel-device-card:not(.is-module-lighting) > .panel-device-heading { grid-column:1; grid-row:1; }
  .panel-body .panel-device-detail > .panel-device-card:not(.is-module-lighting) > header { grid-column:1; grid-row:1; }
  .panel-body .panel-device-detail > .panel-device-card:not(.is-module-lighting) > .panel-detail-links { grid-column:1; grid-row:1; grid-template-columns:1fr; height:92px; }
  .panel-body .panel-device-detail > .panel-device-card:not(.is-module-lighting) > .panel-main-controls { grid-column:2; grid-row:1; width:100%; display:flex; }
  .panel-body .panel-control-pages, .panel-body .panel-main-controls > .touch-control-console { width:100%; }
}
@media (min-width:600px) and (max-height:500px) {
  .panel-body .panel-main.panel-control-screen .panel-device-detail > .panel-device-card:not(.is-module-lighting) { grid-template-columns:200px minmax(0,1fr); }
  .panel-body .panel-main.panel-control-screen .panel-device-detail > .panel-device-card:not(.is-module-lighting) > header { grid-column:1; }
  .panel-body .panel-main.panel-control-screen .panel-device-detail > .panel-device-card:not(.is-module-lighting) > .panel-detail-links { grid-column:1; }
  .panel-body .panel-main.panel-control-screen .panel-device-detail > .panel-device-card:not(.is-module-lighting) > .panel-main-controls { grid-column:2; }
}
.panel-body .panel-measurement-history tbody td:first-child strong { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; line-height:20px; }
.panel-body .panel-measurement-history .panel-button { min-height:44px; padding:4px 8px; font-size:13px; }
.panel-body .panel-measurement-sheet .panel-summary-entry dd { font-size:16px; line-height:20px; }
.panel-body .panel-measurement-sheet .cell-note { display:block; font-size:13px; line-height:18px; }
.panel-body .panel-measurement-sheet .experiment-notes summary { min-height:44px; display:flex; align-items:center; }
.panel-body .panel-measurement-note { white-space:pre-wrap; overflow-wrap:anywhere; }
/* Native keyboard space is temporary. Preserve fields, validation and zoom;
   return the quick dock only once the visual viewport has expanded again. */
.panel-body .panel-wizard-identity { grid-column:1/-1; min-width:0; width:100%; }
.panel-body[data-panel-keyboard] { --panel-banner-height:calc(56px + var(--panel-safe-top)); --panel-safe-bottom:0px; --panel-frame-gap:4px; }
.panel-body[data-panel-keyboard] :is(.panel-banner-body,.panel-action-dock) { display:none!important; }
.panel-body[data-panel-keyboard] .panel-main.panel-app-screen { padding-block:4px; }
.panel-body[data-panel-keyboard] .panel-automation-editor { padding:8px; gap:4px; }
.panel-body[data-panel-keyboard] .panel-automation-editor [data-wizard-page] { min-width:0; }
.panel-body[data-panel-keyboard] .panel-automation-editor [data-wizard-page]:first-of-type { display:block; }
.panel-body[data-panel-keyboard] .panel-automation-editor .panel-form-field { min-width:0; }
.panel-body[data-panel-keyboard] .panel-automation-editor .panel-form-field :is(input,select,textarea) { min-width:0; width:100%; max-width:100%; }
.panel-body[data-panel-keyboard] .panel-wizard-identity { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.panel-body[data-panel-keyboard] .panel-wizard-identity:has(> :only-child) { grid-template-columns:1fr; }
@media (orientation:portrait) {
  .panel-body[data-panel-keyboard] .panel-wizard-identity { display:block; }
}
.panel-body .panel-effect-summary { display:flex; flex-direction:column; flex:1 1 0; min-height:0; margin:0; }
.panel-body .panel-effect-pages { grid-column:1/-1; }
.panel-body .panel-effect-pages p { margin:0; font-size:14px; line-height:18px; overflow-wrap:anywhere; }
.panel-body .panel-effect-pages .panel-summary-entry { min-height:0; }
@media (min-width:600px) and (max-height:500px) {
  .panel-body .panel-wizard-identity { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .panel-body .panel-wizard-identity:has(> :only-child) { grid-template-columns:1fr; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-color-wheel { width:min(160px,calc(100cqh - 32px),100%); height:auto; aspect-ratio:1; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment.is-slider { grid-template-columns:minmax(0,1fr); grid-template-rows:32px 44px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment.is-slider .touch-adjustment-heading { flex-direction:row; align-items:center; justify-content:space-between; height:32px; gap:4px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-heading label { min-width:0; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-heading strong { flex:none; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment-list:has([data-action=white_temperature]:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment.is-quick-white { grid-column:1/-1; grid-row:2; height:74px; }
  .panel-body .panel-main.panel-control-screen .is-module-lighting .touch-adjustment[data-action=white_temperature] { grid-column:2; grid-row:1; }
}
@media (min-width:600px) and (max-width:699px) and (max-height:500px) {
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr); grid-template-rows:44px 44px minmax(44px,1fr); gap:4px 12px; padding:6px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify :is(.denon-control-console,.denon-active-controls) { display:contents; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .denon-source-panel { display:flex; flex-direction:column; grid-column:2; grid-row:1/-1; height:100%; padding:0; gap:0; border:0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify :is(.media-now-playing,.panel-media-library) { grid-column:auto; grid-row:auto; height:auto; flex:1 1 0; min-height:0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .panel-media-library { padding:0; gap:0; border:0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .spotify-library-tabs { margin:0; min-height:44px; flex:none; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .panel-library-pages { gap:0; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .panel-library-pages > .panel-pagination { height:44px; min-height:44px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-seek { grid-template-columns:auto minmax(44px,1fr) auto; align-items:center; gap:4px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-seek :is(input,output) { grid-row:1; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify [data-seek-position] { grid-column:1; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .media-seek input { grid-column:2; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify [data-seek-duration] { grid-column:3; }
}
/* Narrow landscape has enough width for the original table, but not for
   multi-row mobile cards. Keep every column and the row navigation. */
@media (min-width:600px) and (max-width:699px) and (max-height:500px) {
  .panel-body .panel-table-pages .table-mobile-cards thead { display:table-header-group; position:static; width:auto; height:auto; clip:auto; clip-path:none; overflow:visible; }
  .panel-body .panel-table-pages .table-mobile-cards tbody { display:table-row-group; }
  .panel-body .panel-table-pages .table-mobile-cards tr:not([hidden]) { display:table-row; margin:0; padding:0; }
  .panel-body .panel-table-pages .table-mobile-cards :is(th,td) { display:table-cell; vertical-align:middle; padding:2px; font-size:12px; line-height:14px; }
  .panel-body .panel-table-pages .table-mobile-cards th { font-size:11px; line-height:12px; }
  .panel-body .panel-table-pages .table-mobile-cards td::before { display:none; }
}
@media (min-width:600px) and (max-width:699px) and (max-height:500px) {
  .panel-body .panel-table-pages .table-mobile-cards { display:table; width:100%; }
  .panel-body .panel-table-pages .table-mobile-cards thead { margin:0; white-space:normal; }
  .panel-body .panel-table-pages .table-mobile-cards :is(tr,th,td) { width:auto; }
}
@media (min-width:600px) and (max-width:699px) and (max-height:500px) {
  .panel-body .panel-main.panel-app-screen .panel-rule-row { padding:6px; }
}
@media (min-width:600px) and (max-width:699px) and (max-height:500px) {
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify { grid-template-rows:68px 44px minmax(44px,1fr); }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .compact-device-header { height:68px; min-height:68px; }
  .panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .compact-device-state { font-size:12px; line-height:16px; }
}

/* Wrapped billing status badges must contribute their full height to table rows. */
@media (min-width:600px) and (max-width:699px) and (max-height:500px) {
  .panel-body .panel-table-pages .period-table .badge { display:inline-block; max-width:100%; white-space:normal; vertical-align:middle; line-height:14px; }
}


/* Source: css/icon-definition.css */
/* Approved 2026-10-08 icon contract. Artwork contains its own surface.
   Navigation identity never implies state; only existing control state does. */
.hm-icon { object-fit: contain; flex-shrink: 0; }
.hm-icon[hidden] { display: none !important; }
.hm-icon--lineal { width: 24px; height: 24px; }
/* The reference groups banner navigation over a shared dark scrim. Keep the
   verified V2.5 SVGs untouched: no individual white plates or layout changes. */
.panel-body .panel-permanent-header .panel-house-navigation {
background: rgb(8 27 23 / 88%);
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgb(214 237 226 / 25%);
}
.panel-body .panel-permanent-header .panel-global-navigation {
background: transparent; box-shadow: none;
}
.panel-body .panel-permanent-header .panel-top-actions > a {
background: transparent !important;
box-shadow: none !important;
}
.panel-body .panel-permanent-header .panel-global-navigation > a {
background: rgb(8 27 23 / 88%) !important;
box-shadow: inset 0 0 0 1px rgb(214 237 226 / 25%) !important;
}
.panel-body .panel-permanent-header .panel-top-actions > a:is(:hover, [aria-current="page"]) {
color: white !important;
background: rgb(12 48 38 / 30%) !important;
box-shadow: inset 0 0 0 1px rgb(185 223 208 / 65%) !important;
}
.panel-body .panel-permanent-header .panel-brand[aria-current="page"] {
box-shadow: inset 0 0 0 1px rgb(185 223 208 / 65%);
}
.panel-body .panel-permanent-header :is(.panel-brand, .panel-top-actions > a):focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
.panel-body :is(.panel-tile-icon, .home-launcher-icon, .module-icon,
  .household-space-icon, .household-group-icon, .household-device-icon,
  .household-record-icon, .inventory-engine-icon, .inventory-setup-icon,
  .house-mode-icon, .login-mark, .quick-scene-icon):has(> .hm-icon) {
background: transparent !important;
border-color: transparent;
box-shadow: none;
}
.panel-body .panel-menu-tile > .hm-icon--principal { width: 64px; height: 64px; padding: 0; border: 0; background: transparent; }
.panel-body .panel-main.panel-app-screen > [data-pager]:not(.houses) .panel-tile:not(.panel-equipment-summary) .panel-tile-icon:has(> .hm-icon--principal),
.panel-body .panel-main.panel-app-screen > [data-pager]:not(.houses) .panel-tile:not(.panel-equipment-summary) .panel-tile-icon > .hm-icon--principal { width: 64px; height: 64px; }
.panel-body .panel-action-dock [data-dock-item] > .hm-icon--secundaria {
width: 36px !important; height: 36px !important;
padding: 0; border: 0; background: transparent !important;
}
.panel-body .panel-action-dock [data-dock-item][aria-current="page"]:not(.is-device, .energy-dock-reading) {
box-shadow: inset 0 0 0 1px rgb(38 91 77 / 40%) !important;
}

/* CSS chooses the supplied file, never a filter or speculative target state.
   Only the displayed background image is downloaded. */
.hm-control-icon {
--control-on: url("../panel/icons/proposal-20261008/control/power-on.aa90246c56dd.svg");
--control-off: url("../panel/icons/proposal-20261008/control/power-off.6f4ec3417d74.svg");
--control-offline: url("../panel/icons/proposal-20261008/control/power-offline.08465a88355c.svg");
--control-unknown: url("../panel/icons/proposal-20261008/control/power-unknown.f181dd851b29.svg");
--control-pending: url("../panel/icons/proposal-20261008/control/power-pending.dc849014034c.svg");
--control-error: url("../panel/icons/proposal-20261008/control/power-error.9adbe919c0cd.svg");
--control-locked: url("../panel/icons/proposal-20261008/control/power-locked.b59e9c412fe8.svg");
--control-stale: url("../panel/icons/proposal-20261008/control/power-stale.0404edf1bc1f.svg");
--control-visual: var(--control-unknown);
display: block;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: center / contain no-repeat var(--control-visual);
filter: none;
}
.hm-control-icon[data-control-family="light"] {
--control-on: url("../panel/icons/proposal-20261008/control/light-on.372a10f1c381.svg");
--control-off: url("../panel/icons/proposal-20261008/control/light-off.f497c27ace1d.svg");
--control-offline: url("../panel/icons/proposal-20261008/control/light-offline.f06438bde9b1.svg");
--control-unknown: url("../panel/icons/proposal-20261008/control/light-unknown.5cd8426ed88c.svg");
--control-pending: url("../panel/icons/proposal-20261008/control/light-pending.6e3e7bd2efef.svg");
--control-error: url("../panel/icons/proposal-20261008/control/light-error.c298fafa04a4.svg");
--control-locked: url("../panel/icons/proposal-20261008/control/light-locked.82dda1621069.svg");
--control-stale: url("../panel/icons/proposal-20261008/control/light-stale.7fee44e017d2.svg");
}
:where([data-state-kind="off"], [aria-checked="false"], [data-control-state="off"]) .hm-control-icon,
.hm-control-icon[data-control-state="off"] { --control-visual: var(--control-off); }
:where([data-state-kind="on"], [aria-checked="true"], [data-control-state="on"]) .hm-control-icon,
.hm-control-icon[data-control-state="on"] { --control-visual: var(--control-on); }
:where([data-state-kind="unknown"], [data-state-kind="idle"]) .hm-control-icon { --control-visual: var(--control-unknown); }
:where([data-state-kind="unavailable"], [data-state-kind="offline"], .media-device-card.is-unavailable, .media-device-card.is-offline) .hm-control-icon { --control-visual: var(--control-offline); }
:where([data-state-kind="stale"], [data-control-state="stale"]) .hm-control-icon,
.hm-control-icon[data-control-state="stale"] { --control-visual: var(--control-stale); }
:where([data-panel-connection="checking"]) .hm-control-icon { --control-visual: var(--control-stale); }
:where([data-panel-connection="offline"], [data-panel-connection="unavailable"]) .hm-control-icon { --control-visual: var(--control-offline); }
:where([data-device-console]:has([data-control-feedback][data-kind="error"]:not(:empty)), .media-device-card:has([data-spotify-feedback][data-kind="error"]:not(:empty)), [data-control-state="error"]) .hm-control-icon,
.hm-control-icon[data-control-state="error"] { --control-visual: var(--control-error); }
:where([aria-busy="true"], .denon-power.is-pending, [data-control-state="pending"]) .hm-control-icon,
.hm-control-icon[data-control-state="pending"] { --control-visual: var(--control-pending); }
:where([data-control-state="unknown"]) .hm-control-icon,
.hm-control-icon[data-control-state="unknown"] { --control-visual: var(--control-unknown); }
:where([data-control-state="offline"]) .hm-control-icon,
.hm-control-icon[data-control-state="offline"] { --control-visual: var(--control-offline); }
:where([data-control-state="locked"]) .hm-control-icon,
.hm-control-icon[data-control-state="locked"] { --control-visual: var(--control-locked); }

/* Preserve the original hit box/focus; do not gray or double-plate the asset. */
.panel-body :is(.touch-power-button, .denon-power > button, .webos-power > button):has(.hm-control-icon) {
min-width: 44px; min-height: 44px;
padding: 0 !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
filter: none !important;
opacity: 1;
}
.panel-body :is(.touch-power-button, .denon-power > button, .webos-power > button):has(.hm-control-icon):disabled { opacity: 1; filter: none; }
.panel-body :is(.touch-power-button, .denon-power > button, .webos-power > button):has(.hm-control-icon):focus-visible { outline: 3px solid var(--hm-green); outline-offset: 2px; }
.panel-body .panel-main.panel-app-screen .media-device-grid .media-device-card.has-spotify .denon-mute button [data-denon-mute-icon] { display: block; }
.hm-quick-indicator { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; width: 100%; height: 100%; gap: 0; }
.panel-body .panel-action-dock .hm-quick-indicator .hm-control-icon {
width: calc(var(--dock-art) - 12px); height: calc(var(--dock-art) - 12px);
}
.hm-quick-metadata { display: flex; justify-content: center; align-items: center; gap: 2px; max-width: 100%; color: var(--hm-text); font-size: 11px; font-weight: 600; line-height: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-body .panel-action-dock .is-device .touch-power-button:has(.hm-control-icon) { animation: none; }

@media (orientation: landscape) and (max-height: 500px) {
  .panel-body .panel-main.panel-app-screen > [data-pager].houses .panel-tile .panel-tile-icon > .hm-icon--principal {
    width: 24px; height: 24px; min-height: 24px; max-height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
  }
  .panel-body .panel-menu-tile > .hm-icon--principal { width: 44px; height: 44px; }
  .panel-body .panel-main.panel-app-screen > [data-pager]:not(.houses) .panel-tile:not(.panel-equipment-summary) .panel-tile-icon:has(> .hm-icon--principal),
  .panel-body .panel-main.panel-app-screen > [data-pager]:not(.houses) .panel-tile:not(.panel-equipment-summary) .panel-tile-icon > .hm-icon--principal { width: 40px; height: 40px; }
  .panel-body .panel-action-dock [data-dock-item] > .hm-icon--secundaria { width: 32px !important; height: 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-icon, .hm-control-icon { animation: none !important; transition: none !important; }
}