/* Compact device details; leave a clear lane above the exploration dock. */
#ui-panel:has(#device-card:not([hidden])){--device-panel-top:100px;--device-panel-floor:112px;width:min(380px,calc(100vw - 32px));top:var(--device-panel-top);bottom:auto;height:auto;max-height:calc(100dvh - var(--device-panel-top) - var(--device-panel-floor));background:#fffcf8;border-radius:20px}
#ui-panel:has(#device-card) .panel-header{padding:10px 16px}
#ui-panel:has(#device-card) .panel-header .eyebrow{display:none}
#ui-panel:has(#device-card) .panel-header h2{font-size:17px;line-height:1.35;margin:0;letter-spacing:0}
#ui-panel:has(#device-card) #ui-panel-body{padding:14px 16px 18px;min-height:0;scrollbar-gutter:stable}
#ui-panel:has(#device-card) #ui-close{width:44px;min-width:44px;min-height:44px;font-size:24px;padding:10px}
#device-card #device-card-title{display:block;font-size:21px;font-weight:650;line-height:1.35;margin:0 0 5px;overflow-wrap:anywhere}
#ui-panel-body #device-card .device-room{display:block;font-size:13px;line-height:1.4;margin:0 0 10px;color:#665b50}
#device-card .device-state{font-size:13px;line-height:1.4;border-radius:100px;padding:5px 9px;background:#eee9e2;color:#5b534b;display:inline-flex;align-items:center;gap:6px}
#device-card .device-state:before{content:'';width:7px;height:7px;background:currentColor;border-radius:50%}
#device-card .device-state.online{color:#296448;background:#e9f3e9}
#device-card .device-state.offline,#device-card .device-state.unavailable{color:#80551e;background:#fff0dc}
#device-card .device-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;background:none;margin:12px 0}
#device-card .device-status-tile{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;gap:5px 6px;padding:10px 12px;border-radius:12px;background:#f2eee7;min-width:0;min-height:78px;overflow:hidden}
#device-card .device-status-icon{grid-column:1;grid-row:1;display:grid;place-items:center;color:#79664e}
#device-card .device-status-icon svg{width:20px;height:20px}
#device-card .device-status-tile dt{align-self:center;font-size:12px;line-height:1.4;color:#655b50;overflow-wrap:anywhere;z-index:1}
#device-card .device-status-tile dd{grid-column:1/-1;text-align:left;font-size:24px;line-height:1.2;font-weight:650;color:#302a23;margin:0;overflow-wrap:anywhere;min-width:0;z-index:1}
#device-card .device-status-tile[data-tone=on]{background:#e9f1e6}
#device-card .device-status-tile[data-tone=on] .device-status-icon,#device-card .device-status-tile[data-tone=on] dd{color:#2f6544}
#device-card .device-status-tile[data-tone=unknown] dd{color:#77716a}
#device-card .device-status-meter{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:conic-gradient(#c65b16 calc(var(--value)*1%),#e4d9ca 0);opacity:.65;mask:radial-gradient(transparent 54%,#000 56%)}
#device-card .has-meter dd{padding-right:34px}
#ui-panel-body #device-card .device-time{font-size:12px!important;line-height:1.5;margin:8px 0;color:#75685c}
#device-card .device-buy{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin:12px 0;background:#fff0de;border:1px solid #e7c5a0;border-radius:12px;text-decoration:none;color:#873d10;min-height:60px}
#device-card .device-buy>span:nth-child(2){flex:1;min-width:0}
#device-card .device-buy strong{display:block;font-size:16px;line-height:1.35}
#device-card .device-buy small{display:block;font-size:12px;margin-top:2px;color:#8d6345}
#device-card .device-buy-icon{font-size:18px;font-weight:750;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;background:#ed6b15;color:white;border-radius:10px}
#device-card .device-buy>span:last-child{font-size:22px}
#ui-panel-body #device-card>button{font-size:13px;min-height:44px;margin:4px 4px 4px 0;padding:8px 12px}
#ui-panel-body #device-card details{margin:10px 0;padding-top:8px}
#ui-panel-body #device-card summary{font-size:13px;min-height:44px;padding:8px 2px}
#ui-panel-body #device-card .device-purchase-note{font-size:12px!important}
#ui-panel:has(#device-card) :is(button,a,summary,input,select):focus-visible{outline:2px solid #d45c08;outline-offset:3px}
body:not(.mobile-ui) #device-card .device-more{display:block}
#device-card .device-more>summary{list-style:none;display:flex!important;align-items:center;justify-content:space-between;gap:10px}
#device-card .device-more>summary::-webkit-details-marker{display:none}
#device-card .device-more>summary::after{content:'⌄'}
#device-card .device-more[open]>summary::after{content:'⌃'}
@media(max-width:767px),(max-height:500px) and (max-width:1023px){
 #ui-panel:has(#device-card:not([hidden])){--device-panel-floor:calc(var(--mobile-context-bottom) + 8px);left:auto;right:12px;top:auto;bottom:var(--device-panel-floor);width:min(380px,calc(100vw - 24px));height:auto;max-height:min(60dvh,calc(var(--mobile-vh,100dvh) - var(--mobile-header) - var(--device-panel-floor) - 16px));border-radius:18px}
 #ui-panel:has(#device-card) #ui-panel-body{padding:12px 14px 14px}
 #device-card #device-card-title{font-size:19px}
 #device-card .device-status-tile{min-height:74px;padding:9px 10px}
 #device-card .device-status-tile dd{font-size:22px}
 #ui-panel-body #device-card>button:not([hidden]):not(.device-close){display:block;width:100%;margin:8px 0 0}
 .mobile-keyboard #ui-panel:has(#device-card:not([hidden])){top:calc(var(--mobile-top,0px) + 8px);bottom:calc(var(--mobile-bottom,0px) + 8px);max-height:calc(var(--mobile-vh,100dvh) - 16px)}
}
@media(max-height:500px) and (max-width:1023px){
 #ui-panel:has(#device-card:not([hidden])){left:auto;right:max(12px,env(safe-area-inset-right));width:min(360px,calc(100vw - 120px));max-height:calc(var(--mobile-vh,100dvh) - var(--mobile-header) - var(--device-panel-floor) - 16px)}
}

/* Only suppress a duplicate when this card was opened with its name in the header. */
#device-card[data-title-in-header=true] #device-card-title{display:none}