/* Room tiles follow an entity tile: toggle, more-info action, and brightness. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tablet-screen .room-tile{display:block;min-height:0;padding:12px;background:#eceeed;border-radius:14px}.tablet-screen .room-tile[data-on=true]{background:#f5e8b4}.room-tile-header{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:8px}.room-tile-header>button{border:0;background:transparent;padding:0;color:inherit}.room-tile-header>[data-room-toggle]{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#dde2de;display:grid;place-items:center;font-size:22px}.room-tile[data-on=true] [data-room-toggle]{background:#e5cb67;color:#5a4a16}.room-tile .room-more{flex:1;min-width:0;position:relative;text-align:left;padding:0 10px 0 1px;min-height:38px;display:flex;flex-direction:column;justify-content:center;gap:2px}.room-tile strong{font-size:13px;font-weight:600;line-height:1.3}.room-tile small{font-size:12px;line-height:1.4}.room-tile .more-mark{position:absolute;right:0;top:10px;font-size:17px;color:#6e7469}.room-tile input{width:100%;margin:0;padding:0;height:28px;accent-color:#a68b29}.tablet-screen .room-tile:hover{filter:none}.tablet-screen .tile-hint{font-size:12px;line-height:1.6;color:#74796f;margin:2px 0 0}.tablet-screen .dash-visual{height:155px}.tablet-screen .dash-photo-shade{background:linear-gradient(0deg,#10251ed9,transparent 85%)}.tablet-screen .dash-visual-bottom h3{font-size:16px}.tablet-screen .device-heading{min-height:34px}.tablet-screen .plug-state{font-size:14px}.tablet-screen .automation-explanation{margin:2px 0 6px}.demo-tool-buttons{display:flex;gap:8px;flex-shrink:0}#demo-fullscreen{background:transparent;border:1px solid #b9c0b7;border-radius:7px;font-size:12px;min-height:32px;padding:4px 10px;color:#374c3d;white-space:nowrap}.light-dialog{border:1px solid #dce2db;border-radius:20px;width:min(440px,calc(100% - 32px));padding:20px;background:#f8f9f6;color:#26332b;max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 25px 90px #10251e44}.light-dialog::backdrop{background:#12271dcc;backdrop-filter:blur(5px)}.light-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.light-dialog h2{font-size:23px}.light-dialog #close-light-details{width:40px;height:40px;border:0;border-radius:50%;background:#e8ece4;color:#435540;font-size:26px}.light-dialog .lighting-card{padding:20px;background:#f3efdc;border:0;border-radius:14px}.light-dialog .device-heading{gap:10px;display:flex;align-items:center;flex-wrap:wrap;margin-bottom:14px}.light-dialog .device-heading>div{flex:1}.light-dialog .device-heading h4{font-size:16px}.light-dialog .device-heading p{font-size:13px;line-height:1.5;margin:2px 0 0}.light-dialog .device-icon{width:34px;height:34px;flex-basis:34px}.light-dialog .dash-rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:4px;margin:12px 0}.light-dialog .dash-rooms button{font-size:12px;min-height:40px;padding:4px}.light-dialog .device-slider-label{font-size:14px;margin:12px 0 3px}.light-dialog input[type=range]{width:100%;height:32px;padding:0;accent-color:#a68b29}.light-dialog .light-tones{display:flex;gap:6px;margin-top:14px}.light-dialog .light-tones button{flex:1;min-height:42px;font-size:13px}.light-dialog .device-power{min-height:40px}.tablet-screen .room-tile button:focus-visible,.light-dialog button:focus-visible,.light-dialog input:focus-visible{outline:3px solid #447968;outline-offset:3px}
@media(min-width:901px) and (max-height:760px){.demo-navigation{padding-top:7px;padding-bottom:7px}.demo-intro{margin-bottom:8px}.demo-intro h1{font-size:23px}.tablet-screen{padding:12px 18px}.tablet-header{float:left;margin:0 22px 10px 0}.tablet-header h2{font-size:20px}.tablet-screen .dashboard-summary{min-height:26px;align-items:center;margin-bottom:10px}.tablet-screen .dash-scenes{clear:both;margin-bottom:10px}.tablet-screen .dash-visual{height:140px}.tablet-screen .device-card{padding:10px 12px}.tablet-column{gap:8px}.tablet-screen .device-heading p{margin:0}.tablet-screen .automation-explanation{margin:0 0 4px}.tablet-screen .temperature-control{margin:3px 0}.tablet-screen .climate-modes{margin:5px 0}.demo-disclosure{margin-bottom:2px}.demo-tools .dash-footer{padding-top:4px;padding-bottom:4px;min-height:36px}}
@media(min-width:901px) and (min-height:850px){.tablet-screen .dash-visual{height:205px}.tablet-screen .room-tile{padding:16px}.room-tile-header{margin-bottom:14px}.tablet-screen .device-card{padding:18px}.tablet-column{gap:15px}}
@media(max-width:900px){.tablet-column:last-child{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.tablet-column:last-child{grid-template-columns:1fr}.tablet-screen .dash-visual{height:180px}.demo-tools .dash-footer{flex-wrap:wrap;gap:8px}.demo-tool-buttons{margin-left:auto}.light-dialog{padding:16px}.light-dialog .lighting-card{padding:14px}.room-tile-header{gap:5px}.room-tile strong{font-size:13px}.tablet-screen .room-tile{padding:10px}}
.tablet-stage{width:100%;position:relative}.tablet-stage .tablet-frame{transform-origin:top center}.room-tile .room-tile-header .ui-icon{width:22px;height:22px}
.control-icon{width:22px;height:22px;display:block}.device-icon{display:grid;place-items:center}.room-tile-header>[data-room-toggle]{display:grid;place-items:center}.light-dialog .device-icon{display:grid;place-items:center}

/* Small screens retain readable controls without an intrinsic-width overflow. */
.tablet-stage,.tablet-frame,.tablet-column>*,.room-tile{min-width:0;max-width:100%}
.room-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tablet-screen input,.light-dialog input{min-width:0;max-width:100%}
.room-tile strong,.room-tile small,.demo-tools #dash-status{overflow-wrap:anywhere}
.light-dialog .dash-rooms{grid-template-columns:repeat(4,minmax(0,1fr))}
.light-dialog .dash-rooms button,.light-dialog .light-tones button{min-width:0;overflow-wrap:anywhere}
.tablet-screen .dash-scenes button{min-width:0}
@media(min-width:701px) and (max-width:900px){
 .tablet-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tablet-column:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .tablet-columns,.tablet-column:last-child{grid-template-columns:minmax(0,1fr)}
 .tablet-screen .room-tile-header>[data-room-toggle]{width:40px;height:40px;flex-basis:40px}
 .tablet-screen .room-tile-header{flex-wrap:wrap}
 .tablet-screen .room-more{flex-basis:60px}
 .tablet-screen .device-power,.tablet-screen .shade-actions button,.tablet-screen .climate-modes button,.tablet-screen #motion-test{min-height:44px}
 .tablet-screen .temperature-control button{width:44px;height:44px}
 .tablet-screen input[type=range]{height:36px}
 #demo-fullscreen,.demo-tools #dash-reset{min-height:44px}
}

.tablet-screen .climate-modes{grid-template-columns:repeat(5,minmax(0,1fr))}
.tablet-screen .dash-scenes button{min-height:44px;font-size:13px;white-space:normal}
.tablet-screen .security-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.tablet-screen .security-actions button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d1d8d0;background:#fff;color:#354a3c;border-radius:8px;min-height:40px;font-size:12px;padding:6px}
.tablet-screen .security-actions button[aria-pressed=true]{background:#dce6dc;border-color:#b8cbb9}
.tablet-screen .security-actions .control-icon{width:17px;height:17px;flex-shrink:0}
.tablet-screen .entertainment-card .device-heading{margin-bottom:0}
.tablet-screen .dashboard-summary span{border-radius:6px}
.tablet-screen .security-actions button:focus-visible,.demo-navigation a:focus-visible,.demo-tool-buttons button:focus-visible{outline:3px solid #447968;outline-offset:3px}
#demo-room-photo{transition:filter 1.1s ease;transform:none;animation:none}
@media(min-width:701px) and (max-width:900px){.tablet-column:last-child{grid-template-columns:repeat(3,minmax(0,1fr))}.tablet-screen .security-actions{grid-template-columns:1fr}}
@media(max-width:700px){
 .tablet-screen .dash-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .tablet-screen .dash-scenes button:last-child{grid-column:1/-1}
 .tablet-screen .room-tile-header>[data-room-toggle]{width:44px;height:44px;flex-basis:44px}
 .tablet-screen .room-more{min-height:44px}
 .tablet-screen .security-actions button{min-height:44px}
 .demo-navigation>a{min-height:44px;display:flex;align-items:center}
 .demo-navigation .demo-brand span{display:inline;font-size:12px}
 .demo-navigation .demo-brand{font-size:0;gap:0}
 .demo-navigation{gap:12px}
 .tablet-screen .dashboard-summary{gap:5px}
 .tablet-screen .dashboard-summary span{font-size:11px}
 .tablet-frame:is(:fullscreen,.is-expanded) .tablet-screen{padding-top:max(16px,env(safe-area-inset-top,0px));padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce){#demo-room-photo,.tablet-screen button{transition:none}}

/* Compact entity labels avoid mid-word wrapping inside a narrow tablet column. */
.room-tile strong,.room-tile small{overflow-wrap:normal;word-break:normal}
.tablet-screen .room-tile{padding:12px}
.tablet-screen .room-tile-header{align-items:center;gap:6px;margin-bottom:6px}
.tablet-screen .room-tile .room-more{padding-right:8px}
@media(min-width:901px) and (max-width:1100px){
 .tablet-screen .room-tile-header>[data-room-toggle]{width:28px;height:32px;flex-basis:28px}
 .tablet-screen .room-tile{padding:10px}
 .tablet-screen .room-tile strong{font-size:12px}
 .tablet-screen .room-tile small{font-size:12px}
 .tablet-screen .dash-visual{height:150px}
 .tablet-screen .device-card{padding:12px}
 .tablet-screen .security-actions{gap:5px}
 .tablet-screen .security-actions button{font-size:11px}
 .tablet-column{gap:10px}
}

.demo-intro-tools{display:flex;align-items:center;gap:16px;min-width:0}
.demo-intro-tools p{margin:0;font-size:12px;color:#59625d;line-height:1.5}
#demo-fullscreen{min-height:44px!important;cursor:pointer}
#demo-fullscreen:focus-visible{outline:3px solid #447968;outline-offset:3px}
@media(max-width:700px){.demo-intro-tools{margin-top:10px;justify-content:space-between;gap:10px}.demo-intro-tools p{font-size:11px;max-width:160px}}