/* Compact modular layout inspired by the supplied reference. */
:root{--tile-radius:26px;--tile-gap:12px}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;align-items:start}
.grid article{aspect-ratio:1;min-width:0;min-height:0;overflow:auto;border-radius:26px!important;padding:16px!important;box-shadow:0 4px 18px #0001;border:1px solid #ffffff30}
.grid article.grouped-card,.grid article.grouped-wide,.grid article.sonos-card,.grid article.aircon-tile{aspect-ratio:auto;grid-column:span 2}
.grid .card-heading{gap:8px;margin-bottom:12px}
.grid .card-heading h3{font-size:clamp(17px,1.8vw,22px);line-height:1.2;overflow-wrap:anywhere}
.grid .card-heading .object-icon{width:44px;height:44px;flex-basis:44px;padding:7px}
.grid .buttons{gap:6px;margin-top:4px}
.grid .buttons button{min-width:44px;min-height:44px;padding:8px 10px;font-size:15px;border-radius:14px}
.grid input[type=range]{min-height:36px;margin-top:8px;touch-action:pan-y}
.grid .reading{font-size:26px;margin:8px 0}
.grid .card-footer{padding-top:6px;gap:6px}
.grid .card-footer button{min-width:44px;min-height:44px;padding:6px}
.grid .request{font-size:12px;line-height:1.3;margin:6px 0}
#homeWidgets,#homeWidgets[data-layout]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;margin-bottom:18px}
#homeWidgets .home-clock{grid-column:span 2;min-height:210px;aspect-ratio:auto;padding:20px;border-radius:26px}
#homeWidgets .home-weather{min-height:210px;aspect-ratio:auto;padding:18px;border-radius:26px;overflow:auto}
#homeWidgets[data-layout=compact] .home-weather{display:block}
#homeWidgets[data-layout=compact] .weather-top,#homeWidgets[data-layout=compact] .weather-bottom{padding:0;background:transparent;grid-column:auto}
#homeWidgets .clock-time{font-size:clamp(48px,7vw,90px)}
#homeWidgets .clock-day{font-size:22px}#homeWidgets .clock-date{font-size:17px}
#rooms,#categories{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:12px}
#rooms button,#categories button{aspect-ratio:1;border-radius:26px}
button,input,select{min-height:44px}
:focus-visible{outline:3px solid #82baff!important;outline-offset:3px}
@media(max-width:640px){header,main{padding:14px!important}.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}#homeWidgets,#homeWidgets[data-layout]{grid-template-columns:repeat(2,minmax(0,1fr))}#homeWidgets .home-clock{grid-column:auto;min-height:160px;padding:12px}#homeWidgets .home-weather{min-height:160px;padding:12px}#homeWidgets .clock-time{font-size:clamp(30px,8vw,48px)}#homeWidgets .clock-day{font-size:17px}#homeWidgets .clock-date{font-size:13px}.grid article.grouped-card,.grid article.grouped-wide,.grid article.sonos-card,.grid article.aircon-tile{grid-column:1/-1}.filters input{min-width:0;width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.grid .card-heading{min-height:44px;margin-bottom:4px}
.grid .buttons{flex-wrap:nowrap}
.grid .buttons button{flex:1 1 0;min-width:0}
.grid fieldset{min-height:0;min-width:0}
.grid .card-name small{font-size:12px;opacity:.75}
body:has(#bottomNav [data-page=home][aria-current=page]) #content{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
body:has(#bottomNav [data-page=home][aria-current=page]) #content>section,
body:has(#bottomNav [data-page=home][aria-current=page]) #content>section>.grid{display:contents}
body:has(#bottomNav [data-page=home][aria-current=page]) #content>section>h2{display:none}
.grid .card-name small{display:block!important;margin-top:3px}
/* All interaction stays inside the card; there are no tile scroll containers. */
.grid article,#content article,#homeWidgets .home-weather{overflow:visible}
.grid article.grouped-card,.grid article.grouped-wide,.grid article.sonos-card,.grid article.aircon-tile{aspect-ratio:1}
.grid .icon-control-card .card-heading{justify-content:center;text-align:center;min-height:40px;margin-bottom:0}
.grid .icon-control-card fieldset{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;gap:6px;margin:0;padding:0}
.grid .icon-control-card .buttons:empty{display:none}
.grid .icon-toggle{display:flex;align-items:center;justify-content:center;width:80px;height:80px;min-height:80px;padding:6px;border:0;border-radius:50%;background:transparent;flex:none;cursor:pointer}
.grid .icon-toggle .object-icon{width:72px;height:72px;flex:none;margin:0;padding:8px;border-radius:50%;background:transparent}
.grid .icon-toggle[aria-pressed=true]{background:var(--active);box-shadow:0 0 22px #e9cc6733}
.grid .icon-control-card input[type=range]{display:block;width:100%;height:36px;min-height:36px;margin:0!important;padding:0;flex:none}
.grid .icon-control-card .card-footer{margin-top:0!important;padding-top:0;min-height:44px}
.grid .icon-control-card .reading{font-size:22px;margin:0}
.grid .card-name small{line-height:1.15}
.grid .icon-toggle .object-icon{width:80px;height:80px;padding:0}
.grid article:not(.icon-control-card):not(.grouped-card):not(.sonos-card):not(.aircon-tile)>.card-heading{flex-direction:column-reverse;align-items:center;text-align:center;gap:4px;min-height:0;margin-bottom:8px}
.grid article:not(.icon-control-card)>.card-heading .object-icon{width:64px;height:64px;flex-basis:64px;padding:0;background:transparent}
#controlNotices{grid-column:1/-1;font-size:14px;line-height:1.4}
#controlNotices .request{padding:10px 14px;border-radius:12px;background:var(--surface);overflow-wrap:anywhere}
/* Large icons with a shared lower control row. */
.grid .icon-control-card fieldset{justify-content:flex-end;gap:0}
.grid .icon-toggle{width:112px;height:112px;min-height:112px;margin:auto auto 0;padding:0}
.grid .icon-toggle .object-icon{width:112px;height:112px;padding:0}
.grid .icon-control-card input[type=range]{height:44px;min-height:44px}
.grid article.blind-control-card{position:relative}
.grid article.blind-control-card>.card-heading{flex-direction:column;min-height:0;margin:0;text-align:center}
.grid article.blind-control-card>.card-heading .object-icon{width:112px;height:112px;flex-basis:112px;position:absolute;left:50%;top:calc(50% - 35px);transform:translate(-50%,-50%);padding:0;margin:0}
.grid article.blind-control-card>fieldset{margin-top:auto;min-height:44px;flex:none}
.grid article.blind-control-card>fieldset .buttons{margin:0;min-height:44px}
.grid article.blind-control-card>.card-footer{min-height:44px;margin-top:0!important;padding-top:0}
@media(min-width:641px){.grid .icon-control-card .card-heading{min-height:40px}.grid .icon-toggle{width:104px;height:104px;min-height:104px}.grid .icon-toggle .object-icon,.grid article.blind-control-card>.card-heading .object-icon{width:104px;height:104px}}
.grid .blind-control-card .reading{font-size:22px;margin:0}
.grid .icon-control-card>.card-footer,.grid .blind-control-card>.card-footer{height:44px;flex:none;box-sizing:border-box}
.grid .icon-toggle{width:88px;height:88px;min-height:88px}
.grid article.blind-control-card>.card-heading .object-icon{top:calc(50% - 25px)}
/* One shared icon anchor for switches, dimmers, blinds and scenes. */
.grid article{position:relative}
.grid article>.card-heading{flex-direction:column!important;align-items:center;text-align:center;min-height:40px!important;margin:0!important}
.grid article>.card-heading .object-icon{position:absolute;left:50%;top:calc(50% - 25px);transform:translate(-50%,-50%);width:104px!important;height:104px!important;flex-basis:104px!important;margin:0;padding:0;background:transparent}
.grid .icon-toggle{position:absolute;left:50%;top:calc(50% - 25px);transform:translate(-50%,-50%);width:104px;height:104px;min-height:104px;margin:0}
.grid .icon-toggle .object-icon{width:104px!important;height:104px!important}
.grid article>fieldset{margin-top:auto;flex:none}
.grid .icon-control-card fieldset{flex:1;justify-content:flex-end}
.grid article>fieldset .buttons{margin:0;min-height:44px}
.grid .icon-control-card fieldset .buttons:empty{display:none}
.grid article>.card-footer{height:44px;min-height:44px;flex:none;margin-top:0!important;padding-top:0}
.grid article>.card-footer .reading{font-size:22px;margin:0}
/* Information tiles use the same square module as the controls. */
#homeWidgets,#homeWidgets[data-layout]{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;align-items:start}
#homeWidgets .home-clock,#homeWidgets .home-weather{grid-column:auto;aspect-ratio:1;min-height:0;height:auto;padding:16px;box-sizing:border-box;overflow:visible;min-width:0}
#homeWidgets .home-clock{justify-content:center;text-align:center}
#homeWidgets .clock-time,#homeWidgets[data-layout] .clock-time{font-size:clamp(30px,4.3vw,48px);line-height:1.15}
#homeWidgets .clock-day,#homeWidgets[data-layout] .clock-day{font-size:18px}
#homeWidgets .clock-date,#homeWidgets[data-layout] .clock-date{font-size:14px}
#homeWidgets .weather-temperature{font-size:32px}
#homeWidgets .weather-now{gap:8px;flex-wrap:wrap}
#homeWidgets .weather-days{font-size:11px;gap:3px;margin-top:10px;padding-top:10px}
#homeWidgets .weather-days .weather-symbol{width:22px;height:22px;margin:4px auto}
#homeWidgets .weather-place{font-size:13px}
#homeWidgets .weather-credit,#homeWidgets .weather-status{font-size:11px}
@media(max-width:640px){#homeWidgets,#homeWidgets[data-layout]{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}}
/* Active colour belongs to the full tile and glyph, never an icon halo. */
.grid .icon-toggle,.grid .icon-toggle:hover,.grid .icon-toggle[aria-pressed=true]{background:transparent!important;box-shadow:none!important;border:0}
.grid .icon-toggle{z-index:2;top:calc(50% - 17px)}
.grid .icon-toggle .object-icon{pointer-events:none}
.grid article>.card-heading .object-icon{top:calc(50% - 17px)}
.grid article[data-on=true]{background:color-mix(in srgb,var(--accent) 24%,var(--surface))!important;border-color:var(--accent)}
.grid article[data-on=true] .object-icon{color:var(--accent)!important}
.grid article[data-on=false] .object-icon{color:var(--text)!important}
.grid .card-name{width:100%;text-align:center}
.grid .card-name h3{font-size:21px;line-height:1.1;text-align:center;margin:0}
.grid .card-name small{font-size:17px!important;line-height:1.1;text-align:center;opacity:1;margin-top:4px}
/* Avoid duplicate paths and enforce the same layout in favourites and pinned copies. */
html body .grid article>.favourite-room{display:none!important}
html body .grid article>.card-heading{height:54px;min-height:54px!important;flex:none;justify-content:flex-start}
html body .grid article .card-name h3{font-size:20px;line-height:1.15}
html body .grid article .card-name small{font-size:16px!important;line-height:1.15;margin-top:4px}
html body .grid article .icon-toggle,
html body .grid article .icon-toggle:hover,
html body .grid article .icon-toggle[aria-pressed=true]{background:transparent!important;box-shadow:none!important}
html body .grid article .icon-toggle,
html body .grid article>.card-heading .object-icon{top:calc(50% - 12px)}
#controlConnectionStatus{padding:12px 16px;border-radius:12px;background:var(--surface);font-size:14px}
/* Shared compact glyph and accessible icon button, independent of fieldset geometry. */
html body .grid article .icon-toggle{width:88px!important;height:88px!important;min-height:88px!important;z-index:5;pointer-events:auto;touch-action:manipulation}
html body .grid article .icon-toggle .object-icon,
html body .grid article>.card-heading .object-icon{width:88px!important;height:88px!important;flex-basis:88px!important}
html body .grid article .card-name{text-align:center!important;width:100%;margin:0}
html body .grid article .card-name h3,html body .grid article .card-name small{text-align:center!important}
html body .grid article.fan-control-card>fieldset{flex:none;display:block;margin-top:auto;width:100%;min-width:0}
html body .grid article .fan-speeds{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;gap:6px;min-height:44px;scrollbar-width:thin;touch-action:pan-x}
html body .grid article .fan-speeds button{flex:0 0 auto;min-width:64px;min-height:44px;white-space:nowrap}
html body .grid article .icon-toggle,
html body .grid article>.card-heading .object-icon{top:calc(50% - 24px)}
/* Reference layout: square clock plus weather occupying the remaining columns. */
html body #homeWidgets,html body #homeWidgets[data-layout]{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important;gap:12px!important;align-items:stretch!important;grid-auto-rows:auto}
html body #homeWidgets .home-clock{grid-column:1!important;aspect-ratio:1!important;height:auto!important;min-height:0!important;min-width:0;position:relative!important;overflow:visible}
html body #homeWidgets .home-weather{grid-column:2 / -1!important;aspect-ratio:auto!important;height:auto!important;min-height:0!important;min-width:0!important;max-width:100%;width:auto!important;position:relative!important;inset:auto!important;transform:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;align-content:start}
html body #homeWidgets .weather-top,html body #homeWidgets .weather-bottom{min-width:0;background:transparent!important;padding:0!important;position:relative;inset:auto;aspect-ratio:auto}
html body #homeWidgets .clock-face{max-width:65%;height:auto;flex-shrink:1}
html body #homeWidgets .weather-days{min-width:0;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:8px;padding-top:8px}
html body #homeWidgets .weather-days>div{min-width:0}
html body #homeWidgets #hourlyRain{grid-column:1/-1;min-width:0}
html body #homeWidgets .rain-hours{display:flex;overflow-x:auto;gap:12px;max-width:100%;min-width:0}
html body #homeWidgets .rain-hours>div{flex:0 0 70px}
@media(max-width:540px){html body #homeWidgets,html body #homeWidgets[data-layout]{grid-template-columns:1fr!important}html body #homeWidgets .home-weather{grid-column:1!important;min-height:220px!important}}
/* Centred headings/glyphs, slider at the right, actions below the glyph. */
html body .grid article>.card-heading{align-items:center!important;text-align:center!important;justify-content:flex-start!important;width:100%;padding:0 16px;height:54px}
html body .grid article.icon-control-card:has(.dimmer-range)>.card-heading{padding-right:38px}
html body .grid article.icon-control-card:has(.dimmer-range) .icon-toggle{left:calc(50% - 10px)}
html body .grid article input.dimmer-range{position:absolute!important;inset:16px 8px 16px auto!important;width:32px!important;height:calc(100% - 32px)!important;min-height:0!important;max-width:32px!important;margin:0!important;writing-mode:vertical-lr;direction:rtl;appearance:auto!important;-webkit-appearance:auto!important;background:transparent!important;border:0!important;touch-action:none}
html body .grid article input.dimmer-range::-webkit-slider-runnable-track{width:8px;height:100%;border-radius:6px;background:var(--edge)}
html body .grid article input.dimmer-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent);border:2px solid var(--text);margin:0}
html body .grid article input.dimmer-range::-moz-range-track{width:8px;height:100%;border-radius:6px;background:var(--edge)}
html body .grid article input.dimmer-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);border:2px solid var(--text)}
html body .grid article>.card-footer{position:static!important;height:44px!important;display:block;padding:0}
html body .grid article>.card-footer>.reading{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:22px;margin:0!important;text-align:center;max-width:48%;line-height:1.1}
html body .grid article:has(.dimmer-range)>.card-footer>.reading{left:calc(50% - 10px)}
html body .grid article .tile-personal-actions{position:absolute;bottom:4px;left:8px;right:auto;margin:0!important;display:flex;flex-direction:row-reverse;gap:0!important}
html body .grid article .tile-personal-actions button{padding:6px!important;width:40px;min-width:40px!important;min-height:44px; background:transparent!important;box-shadow:none!important;border:0!important}
html body .grid article .tile-personal-actions button:hover,html body .grid article .tile-personal-actions button[aria-pressed=true]{background:transparent!important;box-shadow:none!important}
html body .grid article .tile-personal-actions .theme-icon{width:24px;height:24px;margin:0!important;background:transparent!important}
html body .grid article .tile-personal-actions button[aria-pressed=true]{color:var(--accent)!important}
html body .grid article .tile-personal-actions button[aria-pressed=false]{color:var(--text)!important}
html body .grid article .action-strip{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;gap:6px;width:100%;min-width:0;max-width:100%;height:48px;scrollbar-width:thin;touch-action:pan-x}
html body .grid article .action-strip button{flex:0 0 auto;min-width:64px!important;white-space:nowrap}
html body .grid article>.card-heading .object-icon,html body .grid article .icon-toggle{top:45%;}
html body .grid article input.dimmer-range{appearance:none!important;-webkit-appearance:none!important}
html body .grid article>.card-heading .object-icon,html body .grid article .icon-toggle{top:42%}
html body .grid article.icon-control-card:has(.dimmer-range)>.card-heading{padding:0 16px!important}
html body .grid article.icon-control-card:has(.dimmer-range) .icon-toggle{left:50%!important}
html body .grid article:has(.dimmer-range)>.card-footer>.reading{left:50%}
/* Lower action rows and centre short sets without clipping long scrollable sets. */
html body .grid article:has(.action-strip)>fieldset{position:absolute;left:16px;right:16px;bottom:54px;margin:0!important;width:auto!important;flex:none!important}
html body .grid article .action-strip{justify-content:flex-start;gap:6px}
html body .grid article .action-strip>button:first-child{margin-left:auto}
html body .grid article .action-strip>button:last-child{margin-right:auto}
html body .grid article:has(.action-strip)>fieldset{bottom:48px}
/* Remove the legacy right-side icon reservation from every label block. */
html body .grid article[data-address]>.card-heading,
html body .grid article>.card-heading,
html body .grid .grouped-control>.card-heading{padding:0 12px!important;margin-left:0!important;margin-right:0!important;width:100%!important;box-sizing:border-box;align-items:center!important;text-align:center!important}
html body .grid .card-heading>.card-name{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;flex:none;text-align:center!important}
html body .grid .card-name>h3,html body .grid .card-name>small,html body .grid .grouped-tile>h3{width:100%;margin-left:0!important;margin-right:0!important;padding:0!important;text-align:center!important}
/* Return dimmers to the same lower action row as switch/blind/fan buttons. */
html body .grid article input.dimmer-range{writing-mode:horizontal-tb!important;direction:ltr!important;inset:auto 16px 48px 16px!important;width:calc(100% - 32px)!important;max-width:none!important;height:48px!important;min-height:0!important}
html body .grid article input.dimmer-range::-webkit-slider-runnable-track{width:100%;height:8px}
html body .grid article input.dimmer-range::-webkit-slider-thumb{margin-top:-8px}
html body .grid article input.dimmer-range::-moz-range-track{width:100%;height:8px}
/* Bound media cards instead of allowing the full-row rule to enlarge them. */
html body main .grid>.sonos-card:not([hidden]){grid-column:auto!important;width:min(100%,320px)!important;max-width:320px!important;aspect-ratio:1!important;height:auto!important;min-height:0!important;justify-self:center;padding:14px!important;position:relative;overflow:visible}
html body main .grid>.sonos-card.sonos-alone:not([hidden]),html body main .grid>.sonos-card:only-of-type:not([hidden]){grid-column:1/-1!important}
html body .grid .sonos-card>.card-heading{height:40px;min-height:40px!important;padding:0!important}
html body .grid .sonos-card .sonos-layout{display:flex;gap:8px;align-items:center;min-width:0;flex:1}
html body .grid .sonos-card .sonos-art{width:64px;max-width:28%;height:64px;max-height:64px;aspect-ratio:1;border-radius:12px;flex:none;margin:0}
html body .grid .sonos-card .sonos-controls{min-width:0;flex:1}
html body .grid .sonos-card .reading{font-size:14px;margin:4px 0!important}
html body .grid .sonos-card .sonos-track{font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .grid .sonos-card .sonos-artist{font-size:12px;line-height:1.2}
html body .grid .sonos-card .buttons{margin-top:4px;gap:4px}
html body .grid .sonos-card .buttons button{padding:4px;font-size:12px;min-width:0;min-height:40px}
html body .grid .sonos-card .sonos-volume-row{margin-top:4px;gap:6px;align-items:center}
html body .grid .sonos-card .sonos-volume-row label{font-size:12px}
html body .grid .sonos-card .sonos-volume-row button{min-width:48px;min-height:40px;font-size:12px;padding:4px}
html body .grid .sonos-card .sonos-volume-row input[type=range]{height:32px;min-height:32px;margin:0}
html body .grid .sonos-card>.card-footer{display:flex!important;position:relative!important;align-items:center;gap:6px;height:44px!important;margin-top:4px!important}
html body .grid .sonos-card .card-footer>button{font-size:12px;min-height:40px;padding:4px}
html body .grid .sonos-card .sonos-status{font-size:11px;line-height:1.2;margin:0;flex:1}
html body .grid .sonos-card .tile-personal-actions{position:static!important;flex:none;width:64px}
html body .grid .sonos-card .tile-personal-actions button{width:32px;min-width:32px!important;padding:4px!important}
/* Eliminate legacy dashboard dimensions and stack weather at narrower widths. */
html body main #homeWidgets[data-layout]{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important}
html body main #homeWidgets[data-layout]>.home-clock,html body main #homeWidgets[data-layout]>.home-weather{min-width:0!important;max-width:100%!important;width:auto!important;position:relative!important;inset:auto!important;transform:none!important;box-sizing:border-box;max-height:none!important}
html body main #homeWidgets[data-layout]>.home-clock{grid-column:1!important;align-self:start!important;aspect-ratio:1!important}
html body main #homeWidgets[data-layout]>.home-weather{grid-column:2/-1!important;align-self:start;aspect-ratio:auto!important;grid-template-columns:repeat(2,minmax(0,1fr));height:auto!important}
@media(max-width:760px){html body main #homeWidgets[data-layout]{grid-template-columns:minmax(0,1fr)!important}html body main #homeWidgets[data-layout]>.home-clock,html body main #homeWidgets[data-layout]>.home-weather{grid-column:1!important}html body main #homeWidgets[data-layout]>.home-clock{max-width:320px!important;width:100%!important;justify-self:center}html body main #homeWidgets[data-layout]>.home-weather{min-height:240px!important}}
@media(max-width:420px){html body main #homeWidgets[data-layout]>.home-weather{grid-template-columns:minmax(0,1fr)}html body main #homeWidgets[data-layout] .weather-days{font-size:13px}}
html body main .grid>.sonos-card:not([hidden]){grid-column:span 2!important;width:320px!important;max-width:100%!important;height:320px!important;aspect-ratio:1!important;display:flex;flex-direction:column}
html body main .grid>.sonos-card.sonos-alone:not([hidden]),html body main .grid>.sonos-card:only-of-type:not([hidden]){grid-column:1/-1!important}
html body .grid .sonos-card .sonos-layout{display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;min-height:0}
html body .grid .sonos-card .sonos-controls{min-width:0;width:100%;display:block}
html body .grid .sonos-card>.card-footer{flex:none;margin-top:auto!important;min-height:44px!important;max-height:44px}
html body .grid .sonos-card .card-footer>button{white-space:normal;flex:none;max-width:86px}
html body .grid .sonos-card .sonos-layout .buttons{flex-wrap:nowrap!important}
html body .grid .sonos-card .sonos-layout .buttons button{white-space:nowrap;font-size:11px;min-width:0}
@media(max-width:640px){html body main .grid>.sonos-card:not([hidden]){grid-column:1/-1!important;width:min(320px,100%)!important;height:auto!important}}
html body .grid .sonos-card .sonos-art{width:64px!important;min-width:64px;max-width:64px!important;height:64px!important;max-height:64px!important;object-fit:cover}
html body main #homeWidgets[hidden]{display:none!important}
html body main #homeWidgets>.home-clock[hidden],html body main #homeWidgets>.home-weather[hidden]{display:none!important}
/* Grid rows must reserve the complete tile height during width/zoom changes. */
html body .grid,html body #content{grid-auto-rows:auto;align-items:start;align-content:start}
html body .grid article{box-sizing:border-box;align-self:start;flex-shrink:0;aspect-ratio:1 / 1;transition-property:background-color,border-color,color;}
html body .grid article:not(.sonos-card){width:100%!important;max-width:100%!important;min-width:0!important}
/* Album art fills one normal control module; foreground controls stay readable. */
html body main .grid>.sonos-card:not([hidden]){grid-column:auto!important;width:100%!important;max-width:100%!important;isolation:isolate;color:white}
html body main .grid>.sonos-card.sonos-alone:not([hidden]),html body main .grid>.sonos-card:only-of-type:not([hidden]){grid-column:1/-1!important;justify-self:center}
html body .grid .sonos-card .sonos-layout{display:block!important;position:static;flex:1;min-height:0}
html body .grid .sonos-card .sonos-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;max-width:none!important;max-height:none!important;object-fit:cover;border-radius:inherit!important;clip-path:none;z-index:-2;pointer-events:none}
html body .grid .sonos-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#0009,#0006 40%,#000d);z-index:-1;pointer-events:none}
html body .grid .sonos-card>.card-heading{height:44px;min-height:44px!important;position:relative;flex:none}
html body .grid .sonos-card .card-name h3,html body .grid .sonos-card .card-name small{color:white!important}
html body .grid .sonos-card .sonos-controls{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
html body .grid .sonos-card .sonos-controls .reading{margin:3px 0!important;color:white;position:static;transform:none;max-width:100%}
html body .grid .sonos-card .sonos-track{font-size:15px;line-height:1.15}
html body .grid .sonos-card .sonos-artist{font-size:12px;line-height:1.15}
html body .grid .sonos-card .buttons button{font-size:20px!important;min-height:38px;height:38px;padding:2px!important;color:white;background:#0003}
html body .grid .sonos-card .sonos-volume-row{margin:2px 0 0!important}
html body .grid .sonos-card .sonos-volume-row label{font-size:11px;color:white}
html body .grid .sonos-card .sonos-volume-row button{height:38px;min-height:38px}
html body .grid .sonos-card>.card-footer{display:flex!important;justify-content:flex-end;min-height:40px!important;height:40px!important;margin-top:2px!important;gap:4px}
html body .grid .sonos-card .tile-personal-actions{position:absolute!important;left:0!important;bottom:0!important;width:72px!important;gap:0}
html body .grid .sonos-card .sonos-status{font-size:10px;text-align:right;flex:1;min-width:0;margin-left:74px}
html body .grid .sonos-card .card-footer>button{order:2;max-width:48px;font-size:11px;min-height:38px;height:38px}
html body .grid .sonos-card .sonos-art{border-radius:26px!important;clip-path:inset(0 round 26px)!important}
/* Stronger artwork filter and clear foreground controls. */
html body .grid .sonos-card::after{background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.63) 42%,rgba(0,0,0,.9))!important}
html body .grid .sonos-card .sonos-art{filter:brightness(.72) saturate(.75)}
html body .grid .sonos-card .card-name,html body .grid .sonos-card .reading,html body .grid .sonos-card .sonos-status{color:#fff!important;text-shadow:0 1px 3px #000}
html body .grid .sonos-card .buttons button,html body .grid .sonos-card .sonos-volume-row button,html body .grid .sonos-card .card-footer>button{background:rgba(0,0,0,.65)!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}
html body .grid .sonos-card .tile-personal-actions button[aria-pressed=false]{color:#fff!important}
/* Borderless tiles in every view, including active and pinned cards. */
html body main .grid article,html body main #content article,html body main #homeWidgets>.home-clock,html body main #homeWidgets>.home-weather,html body main #householdTiles>article,html body main .directory-tile,html body main .directory-open,html body main #rooms button,html body main #categories button{border-color:transparent!important;box-shadow:none!important}
/* A complete aircon group occupies one standard square module. */
html body main .grid>.aircon-tile{grid-column:auto!important;width:100%!important;min-height:0;position:relative;container-type:inline-size}
html body .aircon-tile>h3{text-align:center;margin:0;font-size:20px;line-height:1.15;font-weight:400;color:var(--accent)}
html body .aircon-tile>h3>small{display:block;font-size:15px;color:var(--text);margin-top:3px}
html body .aircon-tile .grouped-subtiles{display:contents!important}
html body .aircon-tile .grouped-control{position:static!important;padding:0!important;min-height:0!important}
html body .aircon-tile .aircon-setpoint>.card-heading{display:none!important}
html body .aircon-tile .aircon-setpoint>.reading{position:absolute!important;left:50%!important;top:48px!important;transform:translateX(-50%);width:120px!important;height:100px!important;max-width:none;aspect-ratio:auto;margin:0!important}
html body .aircon-tile .thermostat-gauge{display:block!important;width:120px!important;height:100px!important}
html body .aircon-tile .thermostat-value{position:absolute!important;inset:45% 0 auto!important;transform:translateY(-50%);font-size:23px!important;line-height:1.1}
html body .aircon-tile .setpoint-buttons{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);display:flex!important;width:120px;justify-content:space-between;gap:36px;margin:0!important}
html body .aircon-tile .setpoint-buttons input{display:none}
html body .aircon-tile .setpoint-buttons button{width:40px!important;height:36px;min-height:36px;flex:none!important;padding:2px!important;font-size:22px}
html body .aircon-tile .aircon-room{position:absolute!important;right:12px;top:50px;display:flex!important;flex-direction:column!important;gap:2px;font-size:11px;width:52px!important;min-width:52px!important;max-width:52px;left:auto!important;container-type:normal!important;text-align:center}
html body .aircon-tile .aircon-room>.card-heading{display:none!important}
html body .aircon-tile .aircon-room .reading{font-size:12px!important;margin:0!important}
html body .aircon-tile .grouped-control:not(.aircon-setpoint):not(.aircon-room){display:contents!important}
html body .aircon-tile .grouped-control:not(.aircon-setpoint):not(.aircon-room)>.card-heading,html body .aircon-tile .grouped-control:not(.aircon-setpoint):not(.aircon-room)>.reading,html body .aircon-tile .grouped-control>.icon-toggle{display:none!important}
html body .aircon-tile .aircon-actions{position:absolute;bottom:40px;left:12px;right:12px;height:38px;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;touch-action:pan-x}
html body .aircon-tile .aircon-actions fieldset{display:contents!important}
html body .aircon-tile .aircon-actions .buttons{display:flex!important;flex-wrap:nowrap!important;gap:6px;margin:0!important;flex:none}
html body .aircon-tile .aircon-actions button{flex:none!important;min-width:48px;min-height:34px;height:34px;padding:4px 8px!important;font-size:12px}
html body .aircon-tile .tile-personal-actions{bottom:0}

/* Aircon dial has its own middle band; fan and mode rows sit below it. */
html body .aircon-tile .aircon-setpoint>.reading{top:25%!important;width:42cqw!important;height:34cqw!important}
html body .aircon-tile .thermostat-gauge{width:42cqw!important;height:34cqw!important}
html body .aircon-tile .setpoint-buttons{inset:39% 12px auto!important;transform:none!important;width:auto!important;gap:0!important;pointer-events:none}
html body .aircon-tile .setpoint-buttons button{pointer-events:auto;width:34px!important;height:34px;min-height:34px}
html body .aircon-tile .aircon-room{top:24%!important;right:10px;font-size:10px}
html body .aircon-tile .aircon-actions{bottom:35px;height:34px}
html body .aircon-tile .aircon-fans{bottom:73px}
html body .aircon-tile .aircon-actions button{height:30px;min-height:30px;font-size:11px}
html body .grid .sonos-card::after{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 48%,transparent),color-mix(in srgb,var(--accent) 24%,transparent) 45%,rgba(0,0,0,.65))!important}
html body .grid .sonos-card .sonos-art{filter:brightness(.9) saturate(.85)}
html body .aircon-tile .aircon-actions .buttons{height:32px!important;min-height:32px!important;align-items:center}
html body .aircon-tile .aircon-actions button{height:30px!important;min-height:30px!important}

/* Selected artwork tint C. */
html body .grid .sonos-card::after{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 65%,transparent),color-mix(in srgb,var(--accent) 45.5%,transparent) 50%,rgba(0,0,0,.65))!important}
@media (min-width:360px) and (max-width:640px){
html body main .grid,html body:has(#bottomNav [data-page=home][aria-current=page]) main #content{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
html body main .grid article,html body main #content article{padding:10px!important;border-radius:20px!important;container-type:inline-size}
html body main .grid>.sonos-card.sonos-alone:not([hidden]),html body main .grid>.sonos-card:only-of-type:not([hidden]){grid-column:1/-1!important;width:calc((100% - 10px)/2)!important}
html body .grid article>.card-heading{min-height:32px!important;height:32px!important}
html body .grid .card-name h3,html body .aircon-tile>h3{font-size:15px!important;line-height:1.1}
html body .grid .card-name small,html body .aircon-tile>h3>small{font-size:12px!important;margin-top:2px}
html body .grid .icon-toggle,html body .grid .icon-toggle .object-icon,html body .grid article>.card-heading .object-icon{width:52px!important;height:52px!important;min-height:52px!important;top:44%!important}
html body .grid .icon-toggle .object-icon{position:static!important;transform:none!important}
html body .grid article>fieldset{position:absolute!important;left:10px;right:10px;bottom:29px;height:32px!important;min-height:0!important;flex:none!important}
html body .grid article>fieldset .buttons,html body .grid article>fieldset .buttons button{min-height:30px!important;height:30px!important}
html body .grid article>fieldset .buttons button{min-width:44px!important;padding:3px 8px!important;font-size:11px!important}
html body .grid article>.card-footer{height:26px!important;min-height:26px!important;position:absolute;left:8px;right:8px;bottom:2px}
html body .grid .tile-personal-actions{width:56px!important;height:26px!important;bottom:0!important}
html body .grid .tile-personal-actions button{width:28px!important;height:26px!important;min-height:26px!important;padding:4px!important}
html body .grid .tile-personal-actions img{width:18px!important;height:18px!important}
html body .grid article>.card-footer>.reading{font-size:15px!important}
html body .grid .sonos-card>.card-heading{height:30px!important;min-height:30px!important}
html body .grid .sonos-card .sonos-track{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .grid .sonos-card .sonos-artist{font-size:10px!important}
html body .grid .sonos-card .buttons button{height:26px!important;min-height:26px!important;font-size:17px!important}
html body .grid .sonos-card .sonos-volume-row{gap:3px!important}
html body .grid .sonos-card .sonos-volume-row label{display:none}
html body .grid .sonos-card .sonos-volume-row button,html body .grid .sonos-card .card-footer>button{height:26px!important;min-height:26px!important;font-size:9px!important;padding:2px 5px!important}
html body .grid .sonos-card .sonos-status{display:none}
html body .grid .sonos-card .sonos-controls{padding-bottom:24px}
html body .aircon-tile .aircon-setpoint>.reading{top:27%!important;width:30cqw!important;height:24cqw!important}
html body .aircon-tile .thermostat-gauge{width:30cqw!important;height:24cqw!important}
html body .aircon-tile .thermostat-value{font-size:15px!important}
html body .aircon-tile .setpoint-buttons{top:36%!important;left:7px!important;right:7px!important}
html body .aircon-tile .setpoint-buttons button{width:27px!important;height:27px!important;min-height:27px!important;font-size:18px}
html body .aircon-tile .aircon-actions{bottom:27px;left:8px;right:8px;height:27px}
html body .aircon-tile .aircon-fans{bottom:57px}
html body .aircon-tile .aircon-actions .buttons{height:26px!important;min-height:26px!important}
html body .aircon-tile .aircon-actions button{height:25px!important;min-height:25px!important;min-width:40px;font-size:10px;padding:2px 5px!important}
html body .aircon-tile .aircon-room{font-size:9px!important;width:38px!important;min-width:38px!important;right:4px;top:25%!important}
html body .aircon-tile .aircon-room .reading{font-size:9px!important}
}
@media (min-width:360px) and (max-width:640px){
html body :is(#content,#favouriteGrid,#homePins) article .icon-toggle,html body :is(#content,#favouriteGrid,#homePins) article .object-icon{width:50px!important;height:50px!important;min-height:50px!important;max-width:50px!important;max-height:50px!important}
html body :is(#content,#favouriteGrid,#homePins) article .icon-toggle{top:46%!important;left:50%!important}
html body .grid article input.dimmer-range{inset:auto 0 0 0!important;width:100%!important;height:30px!important}
html body #favouriteGrid .favourite-room{display:none!important}
html body #favouriteGrid .aircon-tile>h3{margin:0!important;padding:0!important}
html body .grid .tile-personal-actions .ctc-icon{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important}
}
@media (min-width:360px) and (max-width:640px){
html body .grid .sonos-card .sonos-controls{position:absolute;left:10px;right:10px;bottom:30px;width:auto;height:88px;padding:0;justify-content:flex-end;gap:1px}
html body .grid .sonos-card .sonos-volume-row label{display:block!important;font-size:0!important;min-width:0;flex:1}
html body .grid .sonos-card .sonos-volume-row input{height:24px!important;min-height:24px!important;margin:0!important;width:100%}
html body .grid .sonos-card .sonos-controls .reading{margin:0!important}
html body .grid .tile-personal-actions{left:5px!important}
}
@media (min-width:360px) and (max-width:640px){
html body .grid .sonos-card>.card-footer{height:26px!important;min-height:26px!important;max-height:26px!important;bottom:3px!important;top:auto!important;margin:0!important}
html body .grid .sonos-card .sonos-controls{bottom:36px!important}
}
/* Match music buttons to the shared transparent control style. */
html body .grid .sonos-card .buttons button,html body .grid .sonos-card .sonos-volume-row button,html body .grid .sonos-card .card-footer>button{background:transparent!important;border-color:var(--edge)!important;box-shadow:none!important}
html body .grid .sonos-card .card-footer>button{order:2}
html body .grid .sonos-card .card-footer>button[aria-label='Browse music']{order:3}
@media(min-width:360px) and (max-width:640px){
/* Use tile coordinates for every footer, with both icons inside its left edge. */
html body .grid article>.card-footer{left:10px!important;right:10px!important;bottom:4px!important;height:26px!important;min-height:26px!important;padding:0!important;display:flex!important;align-items:center}
html body .grid article .tile-personal-actions{position:absolute!important;left:0!important;bottom:0!important;width:56px!important;height:26px!important;justify-content:flex-start!important;gap:0!important}
html body .grid article .tile-personal-actions button{flex:0 0 28px!important;width:28px!important;min-width:28px!important;max-width:28px!important;height:26px!important;min-height:26px!important;padding:4px!important;margin:0!important}
html body .grid article input.dimmer-range{inset:auto 0 5px 0!important}
html body .grid .sonos-card .sonos-controls{top:44px!important;bottom:33px!important;height:auto!important;justify-content:flex-start!important;gap:2px!important}
html body .grid .sonos-card .sonos-track{font-size:11px!important;line-height:12px!important}
html body .grid .sonos-card .sonos-artist{font-size:10px!important;line-height:11px!important}
html body .grid .sonos-card .sonos-controls>.reading{margin:0 0 3px!important}
html body .grid .sonos-card .sonos-controls>.buttons{margin:0!important;min-height:25px!important;height:25px!important}
html body .grid .sonos-card .sonos-volume-row{display:block!important;width:100%!important;margin:2px 0 0!important}
html body .grid .sonos-card .sonos-volume-row label{display:block!important;width:100%!important}
html body .grid .sonos-card .sonos-volume-row input{width:100%!important}
html body .grid .sonos-card>.card-footer{gap:3px!important;justify-content:flex-end!important}
html body .grid .sonos-card .card-footer>button{min-width:0!important;width:auto!important;max-width:43px!important;font-size:9px!important;padding:2px 4px!important}
html body .grid .sonos-card .card-footer>button[aria-pressed]{order:2!important}
html body .grid .sonos-card .card-footer>button[aria-label='Browse music']{order:3!important}
/* Optical adjustments compensate for whitespace within existing SVG artwork. */
}
@media(min-width:360px) and (max-width:640px){
html body main .grid .sonos-card .sonos-controls{top:54px!important}
html body main .grid article>.card-footer{position:absolute!important;left:10px!important;right:10px!important;padding:0!important;margin:0!important}
html body main .grid article>.card-footer .tile-personal-actions{width:56px!important;min-width:56px!important;left:0!important;right:auto!important;justify-content:flex-start!important}
html body main .grid article>.card-footer .tile-personal-actions button{width:28px!important;min-width:28px!important;max-width:28px!important;flex:0 0 28px!important}
}
@media(min-width:360px) and (max-width:640px){html body .grid article input.dimmer-range{inset:auto 0 21px 0!important}}
/* Temporary icon diagnostics: cyan box = element bounds, pink = visible mask bounds. */


html body .aircon-tile .aircon-setpoint>.reading{top:17%!important;width:90cqw!important;height:75cqw!important;z-index:0;pointer-events:none!important}
html body .aircon-tile .thermostat-gauge{width:90cqw!important;height:75cqw!important;opacity:.22;pointer-events:none!important}
html body .aircon-tile .thermostat-value{white-space:nowrap!important;width:100%!important;top:37%!important;font-size:clamp(18px,10cqw,34px)!important;opacity:1}
html body .aircon-tile>h3,html body .aircon-tile .aircon-actions,html body .aircon-tile .setpoint-buttons,html body .aircon-tile>.card-footer{z-index:2}
html body .aircon-tile>h3{position:relative}
html body .aircon-tile .aircon-room{z-index:1}
html body .aircon-tile .aircon-row-label{flex:0 0 30px;font-size:11px;align-self:center;color:var(--text)}
html body .aircon-tile .aircon-actions{align-items:center;gap:4px}
html body .aircon-tile .aircon-actions button{min-width:32px!important;padding:2px 4px!important;color:var(--text);background:transparent!important}
html body .aircon-tile .aircon-actions button[aria-pressed=true]{color:var(--accent)!important;border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 18%,transparent)!important}
@media(min-width:360px) and (max-width:640px){
html body main .aircon-tile .aircon-setpoint>.reading{top:17%!important;width:90cqw!important;height:75cqw!important}
html body main .aircon-tile .thermostat-gauge{width:90cqw!important;height:75cqw!important}
html body main .aircon-tile .thermostat-value{top:37%!important;font-size:20px!important;white-space:nowrap!important}
html body main .aircon-tile .aircon-row-label{flex-basis:25px;font-size:10px}
html body main .aircon-tile .aircon-actions button{min-width:28px!important;width:28px!important;flex-basis:28px!important}
html body main .aircon-tile .aircon-actions .buttons{gap:3px!important}
html body main .aircon-tile .aircon-actions svg{width:18px;height:18px}
}

/* Fixed aircon row labels with independently scrolling options. */
html body .aircon-tile .aircon-actions{overflow:visible!important;display:flex!important;min-width:0}
html body .aircon-tile .aircon-row-label{position:static!important;flex:0 0 30px;white-space:nowrap}
html body .aircon-tile .aircon-options{display:flex;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;height:100%;align-items:center}
html body .aircon-tile .aircon-options::-webkit-scrollbar{display:none}
html body .aircon-tile .aircon-options fieldset{display:contents!important}
html body .aircon-tile .thermostat-value{top:37%!important;transform:translateY(-50%)!important;white-space:nowrap!important}
html body .aircon-tile .setpoint-buttons{top:calc(17% + 27.75cqw - 18px)!important;bottom:auto!important}
html body main .grid article.sonos-card{border:0!important;box-shadow:none!important;outline:0!important}
html body .grid .sonos-card .sonos-art{border:0!important;box-shadow:none!important;outline:0!important}
@media(min-width:360px) and (max-width:640px){
html body main .aircon-tile .aircon-setpoint>.reading{top:19%!important}
html body main .aircon-tile .setpoint-buttons{top:calc(19% + 27.75cqw - 13.5px)!important;bottom:auto!important}
html body main .aircon-tile .aircon-row-label{flex-basis:25px!important}
}
html body main .aircon-tile .aircon-options .buttons{width:max-content!important;min-width:max-content!important;max-width:none!important;overflow:visible!important;justify-content:flex-start!important;transform:none!important}
/* Dashboard touch handling: retain scrolling, suppress accidental zoom gestures. */
html,body{touch-action:pan-x pan-y}
button,[role=button],.icon-toggle,.setpoint-buttons{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}
@media(pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}
:root{--display-zoom:1!important}
html body .aircon-tile .aircon-actions{display:none!important}
html body .aircon-tile .aircon-picker-bar{position:absolute;left:12px;right:12px;bottom:40px;display:flex;gap:6px;justify-content:center;z-index:3}
html body .aircon-tile .aircon-picker-bar button{min-height:34px;flex:1;background:transparent;border-color:var(--edge);color:var(--text)}
.aircon-choice-dialog{width:min(440px,calc(100vw - 28px));box-sizing:border-box;padding:22px;border:0;border-radius:26px;background:var(--surface,#293b3a);color:var(--text,#fff);box-shadow:0 12px 60px #0008}
.aircon-choice-dialog::backdrop{background:#0008;backdrop-filter:blur(5px)}
.aircon-choice-dialog h2{margin:0 0 20px;font-size:23px}
.aircon-choice-dialog .aircon-options{display:block!important;overflow:visible!important;height:auto!important}
.aircon-choice-dialog fieldset{display:block!important;border:0;padding:0;margin:0}
.aircon-choice-dialog .buttons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px!important;overflow:visible!important;width:100%!important;min-width:0!important;height:auto!important}
.aircon-choice-dialog button[data-choice-value]{display:flex;align-items:center;justify-content:center;min-height:76px;color:var(--text);background:transparent;border:1px solid var(--edge);border-radius:18px}
.aircon-choice-dialog button[data-choice-value] svg{width:38px;height:38px}
.aircon-choice-dialog button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}
.aircon-choice-dialog>button{width:100%;touch-action:manipulation}
@media(min-width:360px) and (max-width:640px){
html body main .grid article>.card-footer>.reading{bottom:0!important;top:0!important;height:26px!important;line-height:26px!important;white-space:nowrap}
html body main .grid article>fieldset{bottom:31px!important}
html body main .grid article input.dimmer-range{inset:auto 0 0 0!important}
html body main .aircon-tile .aircon-picker-bar{left:10px;right:10px;bottom:31px;height:30px}
html body main .aircon-tile .aircon-picker-bar button{height:30px;min-height:30px;font-size:12px;padding:3px 6px}
}

/* A weather-free dashboard gives time and date one square each. */
html body main #homeWidgets[data-layout].clock-split{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important;align-items:start!important}
html body main #homeWidgets.clock-split>.home-clock,html body main #homeWidgets.clock-split>.home-date-tile{grid-column:auto!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;aspect-ratio:1!important;box-sizing:border-box;padding:20px;display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:0!important;border-radius:var(--tile-radius,26px);background:var(--surface);box-shadow:none;container-type:inline-size}
html body main #homeWidgets.clock-split #clockDay,html body main #homeWidgets.clock-split #clockDate{display:none!important}
html body main #homeWidgets.clock-split .clock-time{font-size:clamp(28px,19cqw,80px)!important;white-space:nowrap;line-height:1.1;margin:0!important;text-align:center}
html body main #homeWidgets.clock-split[data-clock-style=analog] .clock-face{width:92%!important;height:auto!important;max-height:none!important;aspect-ratio:1;display:block!important;margin:0!important}
html body main #homeWidgets.clock-split[data-clock-style=analog] #clockTime{display:none!important}
html body main #homeWidgets.clock-split[data-clock-style=digital] .clock-face{display:none!important}
html body main #homeWidgets .home-date-tile[hidden]{display:none!important}
html body main #homeWidgets .date-number{font-size:clamp(60px,53cqw,180px);line-height:1;color:#cf7772;font-weight:500;letter-spacing:-.05em}
html body main #homeWidgets .date-weekday{font-size:clamp(16px,10cqw,30px);line-height:1.1;color:var(--text);text-align:center}
html body main #homeWidgets .date-remainder{font-size:clamp(12px,7cqw,21px);line-height:1.2;color:var(--text);opacity:.8;text-align:center}
@media(max-width:760px){html body main #homeWidgets[data-layout].clock-split{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}html body main #homeWidgets.clock-split>.home-clock,html body main #homeWidgets.clock-split>.home-date-tile{padding:12px}}
html body main #homeWidgets.clock-split .clock-face{max-width:100%!important;flex-shrink:0!important}

html body main #homeWidgets.clock-split>.home-weather:not([hidden]){grid-column:1/-1!important;width:100%!important;max-width:100%!important}
html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}html body *{scrollbar-width:none}html body *::-webkit-scrollbar{display:none}
/* Compact music tile opens a full-width player. */
html body .grid .sonos-card .sonos-open{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;background:transparent!important;border:0!important;z-index:1;padding:0!important;border-radius:inherit}
html body .grid .sonos-card .sonos-controls{z-index:2;pointer-events:none}
html body .grid .sonos-card .sonos-controls button{pointer-events:auto}
html body .grid .sonos-card .sonos-volume-row,html body .grid .sonos-card>.card-footer>button{display:none!important}
html body main .grid .sonos-card>.card-footer{z-index:3;pointer-events:none}
html body main .grid .sonos-card .tile-personal-actions{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto}
.sonos-player{width:min(740px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;border:0;border-radius:26px;padding:24px;background:var(--surface,#293b3a);color:var(--text,#fff);box-shadow:0 16px 60px #0009}
.sonos-player::backdrop{background:#0009;backdrop-filter:blur(5px)}
.sonos-player h2{font-size:24px;margin:0 0 16px}
.sonos-player-art{display:block;width:min(100%,280px);aspect-ratio:1;object-fit:cover;border-radius:18px;margin:0 auto 20px}
.sonos-player .sonos-controls{position:static!important;display:block!important;width:100%!important;height:auto!important;padding:0!important;pointer-events:auto}
.sonos-player .reading{margin:0 0 18px;text-align:center}.sonos-player .sonos-track{font-size:24px}.sonos-player .sonos-artist{font-size:17px;opacity:.8}
.sonos-player fieldset{border:0;padding:0;margin:0}.sonos-player .buttons{display:flex;gap:10px;margin:0 0 18px}.sonos-player .buttons button{flex:1;min-height:56px;background:transparent;color:var(--text);border-color:var(--edge)}
.sonos-player .sonos-volume-row{display:block!important;margin-bottom:18px}.sonos-player .sonos-volume-row label{display:block;font-size:16px}.sonos-player input[type=range]{width:100%;height:44px}
.sonos-player>button{min-height:44px;margin:4px;background:transparent;color:var(--text);border-color:var(--edge)}
/* Scene artwork uses the same optical footprint, with a protected status area. */
html body main .grid article:has(.object-icon[src*='Scene'])>.card-footer>.reading{left:76px!important;right:8px!important;width:auto!important;max-width:none!important;transform:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
html body main #homeWidgets.clock-split .clock-time{font-size:clamp(30px,23cqw,96px)!important}
html body main #homeWidgets .home-weather{container-type:inline-size}
@container(min-width:450px){.home-weather #weatherNow .weather-symbol{width:100px!important;height:100px!important;min-width:100px!important}.home-weather .weather-temperature{font-size:clamp(54px,12cqw,88px)!important}.home-weather #weatherNow{font-size:20px!important;gap:20px!important}}
/* Artwork and tint are clipped by the same outer tile geometry. */
html body main .grid article.sonos-card{overflow:hidden!important;isolation:isolate}
html body main .grid article.sonos-card .sonos-art{inset:0!important;width:100%!important;height:100%!important;border-radius:inherit!important;clip-path:none!important}
html body main .grid article.sonos-card::after{border-radius:inherit!important}
html body main .grid article.sonos-card .sonos-controls>.reading{margin-bottom:12px!important}
/* Keep the temperature and +/- on one horizontal baseline, slightly lower. */
html body main .aircon-tile .aircon-setpoint>.reading{top:23%!important}
html body main .aircon-tile .setpoint-buttons{top:calc(23% + 27.75cqw - 18px)!important}
@media(min-width:360px) and (max-width:640px){
html body main .grid article.sonos-card .sonos-controls>.reading{margin-bottom:10px!important}
html body main .aircon-tile .aircon-setpoint>.reading{top:25%!important}
html body main .aircon-tile .setpoint-buttons{top:calc(25% + 27.75cqw - 13.5px)!important}
}
/* Artwork always needs a light footer, including in light colour themes. */
html body main .grid article.sonos-card>.card-footer .tile-personal-actions{z-index:5!important;pointer-events:auto!important;opacity:1!important;visibility:visible!important}
html body main .grid article.sonos-card>.card-footer .tile-personal-actions button,html body main .grid article.sonos-card>.card-footer .tile-personal-actions .theme-icon{color:#fff!important;opacity:1!important;filter:drop-shadow(0 1px 2px #000)!important}
html body main .grid article.sonos-card>.card-footer .tile-personal-actions button[aria-pressed=true]{color:var(--accent)!important}
.sonos-player>button:last-child{float:right;margin-left:auto}
.sonos-player>button:last-child:focus,.aircon-choice-dialog>button:focus{outline:none!important;box-shadow:none!important}
.sonos-player>button:last-child:focus-visible,.aircon-choice-dialog>button:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
html body main #homeWidgets .date-weekday{font-size:clamp(18px,11cqw,33px)!important}
html body main #homeWidgets .date-remainder{font-size:clamp(14px,8cqw,24px)!important}
html body main .grid article.sonos-card>.card-footer .tile-personal-actions .theme-icon{color:inherit!important}
/* Focus decoration disabled at the user's request. */
html body *:focus,html body *:focus-visible{outline:none!important;box-shadow:none!important}
html body main .grid{grid-auto-flow:row dense}
html body:has(#bottomNav [data-page=home][aria-current=page]) main #content{grid-auto-flow:row dense}
/* Room/category cards use the same column module as control cards. */
html body main #rooms,html body main #categories{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important;gap:12px!important}
html body main :is(#rooms,#categories)>.directory-tile{position:relative;aspect-ratio:1;min-width:0;overflow:hidden;background:var(--surface);border-radius:var(--tile-radius,26px);padding:0}
html body main :is(#rooms,#categories) .directory-open{width:100%!important;height:100%!important;aspect-ratio:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:8px;padding:12px 12px 65px!important;border:0!important;background:transparent!important;color:var(--text)!important}
html body main :is(#rooms,#categories) .directory-actions{position:absolute;bottom:12px;left:12px;right:12px;display:flex;justify-content:center;gap:8px;margin:0;padding:0}
html body main :is(#rooms,#categories) .directory-actions button{display:block!important;aspect-ratio:auto!important;width:auto!important;min-height:36px!important;padding:6px 12px!important;border:1px solid var(--edge)!important;border-radius:12px!important;background:transparent!important;color:var(--text)!important;font-size:13px!important}
html body main :is(#rooms,#categories) .directory-open[aria-pressed=false]{background:transparent!important;color:var(--text)!important}
@media(min-width:360px) and (max-width:640px){html body main #rooms,html body main #categories{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}html body main :is(#rooms,#categories) .directory-open{font-size:15px!important;padding-bottom:55px!important}html body main :is(#rooms,#categories) .directory-open .ctc-icon{width:50px!important;height:50px!important}html body main :is(#rooms,#categories) .directory-actions button{font-size:11px!important;min-height:30px!important;padding:4px 8px!important}}
/* Directory tiles share the control tiles' theme opacity and glass treatment. */
html body main :is(#rooms,#categories)>.directory-tile{background:var(--glass)!important;border-radius:var(--tile-radius)!important;-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%)}
html body main :is(#rooms,#categories) .directory-open .ctc-icon{width:90px!important;height:90px!important;min-width:90px!important;min-height:90px!important;flex:0 0 90px!important}
html body main :is(#rooms,#categories)>.directory-tile:not(:has(.directory-actions)) .directory-open{padding:12px!important;justify-content:center!important;align-items:center!important;text-align:center!important}
@media(min-width:360px) and (max-width:640px){html body main :is(#rooms,#categories) .directory-open .ctc-icon{width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important;flex-basis:68px!important}}

/* Forecast symbols must fit their own day, independent of current weather sizing. */
html body #homeWidgets .weather-days{grid-template-columns:repeat(5,minmax(0,1fr))!important;min-width:0!important;gap:6px!important}
html body #homeWidgets .weather-days>div{min-width:0!important;overflow:hidden}
html body #homeWidgets .weather-days .weather-symbol{display:block;width:min(100%,42px)!important;max-width:100%!important;min-width:0!important;height:42px!important;min-height:0!important;margin:6px auto!important}
html body #homeWidgets .weather-days .weather-symbol svg{display:block;width:100%!important;height:100%!important;max-width:100%!important}
/* Optional one-module current conditions card. */
html body main #homeWidgets>.home-current-weather{grid-column:auto!important;width:100%!important;min-width:0;aspect-ratio:1;box-sizing:border-box;padding:16px;border-radius:var(--tile-radius);background:var(--glass);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;container-type:inline-size}
html body main #homeWidgets>.home-current-weather[hidden]{display:none!important}
.home-current-weather h3{font-size:14px;text-align:center;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-current-weather>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;width:100%}
.home-current-weather .weather-symbol{display:block;width:clamp(38px,28cqw,85px);height:clamp(38px,28cqw,85px)}
.home-current-weather .weather-temperature{font-size:clamp(30px,22cqw,64px);line-height:1.05}
.home-current-weather .weather-range{font-size:12px;opacity:.8}
html body main #homeWidgets[data-current-weather=true]:not(.clock-split){grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important}
/* The forecast occupies a single row of the same height as the clock. */
html body main #homeWidgets[data-layout]>.home-weather{height:var(--weather-module-height,260px)!important;min-height:0!important;max-height:var(--weather-module-height,260px)!important;overflow:hidden!important;padding:14px!important;gap:8px!important;align-content:stretch!important;grid-template-rows:minmax(0,1fr) minmax(0,.8fr)}
html body main #homeWidgets .home-weather #weatherNow .weather-symbol{width:54px!important;height:54px!important;min-width:0!important}
html body main #homeWidgets .home-weather .weather-temperature{font-size:42px!important;line-height:1}
html body main #homeWidgets .home-weather #weatherNow{font-size:14px!important;gap:8px!important;min-width:0}
html body main #homeWidgets .home-weather .weather-place{font-size:12px;max-height:30px;overflow:hidden}
html body main #homeWidgets .home-weather .weather-days{margin:0!important;padding:0!important;font-size:12px;gap:4px!important}
html body main #homeWidgets .home-weather .weather-days .weather-symbol{height:30px!important;width:min(100%,30px)!important;margin:2px auto!important}
html body main #homeWidgets .home-weather #hourlyRain{grid-column:1/-1;min-height:0;overflow:hidden;margin:0;padding-top:6px}
html body main #homeWidgets .home-weather .hourly-heading{font-size:13px;margin:0 0 4px}
html body main #homeWidgets .home-weather .rain-hours{min-height:0;gap:12px;font-size:12px}
html body main #homeWidgets .home-weather .rain-hours .weather-symbol{width:26px!important;height:26px!important}
html body main #homeWidgets .home-weather .hourly-weather-hour small{display:none}
@media(max-width:760px){html body main #homeWidgets[data-current-weather=true]:not(.clock-split){grid-template-columns:repeat(2,minmax(0,1fr))!important}html body main #homeWidgets[data-layout]>.home-weather{grid-column:1/-1!important;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)!important}}
html body main #homeWidgets .home-current-weather .weather-symbol{font-size:clamp(38px,24cqw,76px);line-height:1}
html body main #homeWidgets .home-current-weather .weather-temperature{font-size:clamp(32px,22cqw,68px)!important;line-height:1.05}
/* Leave the compact hourly band for time, symbol and temperature. */
html body main #homeWidgets .home-weather .hourly-heading{display:none!important}
html body main #homeWidgets .home-weather #hourlyRain{padding-top:2px!important}
html body main #homeWidgets .home-weather .rain-hours{margin-top:0!important;align-items:start}
html body main #homeWidgets .home-weather .hourly-weather-hour{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;line-height:1.15}
html body main #homeWidgets .home-weather .hourly-weather-hour .weather-symbol{margin:0 auto!important;height:24px!important;width:24px!important}

html body main #homeWidgets[data-layout]>.home-date-tile,html body main #homeWidgets[data-layout]>.home-current-weather,html body main #homeWidgets[data-layout]>.home-clock{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;align-self:start!important;flex-shrink:0;overflow:hidden!important;aspect-ratio:1 / 1!important}
@media(min-width:641px){html body main #homeWidgets[data-layout].clock-split,html body main #homeWidgets[data-current-weather=true]{gap:12px!important}}

html body main #homeWidgets.has-artwork>.home-clock,html body main #homeWidgets.has-artwork>.home-date-tile,html body main #homeWidgets.has-artwork>.home-current-weather{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
#sonosRoomAssignments .sonos-assignment-row{margin-bottom:16px}

/* Pinned Home cards use the same short room label as ordinary cards. */
.home-pin-copy .favourite-room{display:none!important}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true]) .topbar{position:fixed!important;top:0;left:0;right:0;z-index:45;box-sizing:border-box;margin:0!important;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true])[data-toolbar-open=true] .topbar{transform:none;opacity:1;visibility:visible;pointer-events:auto}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true]){scroll-padding-top:12px}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true]) main{padding-top:max(12px,env(safe-area-inset-top))!important}
@media(prefers-reduced-motion:reduce){html[data-hide-toolbar=true] .topbar{transition:none!important}}

/* Touch reveals bottom navigation without consuming the original tile action. */
html[data-hide-toolbar=true]:not([data-toolbar-settings=true]) #bottomNav{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true])[data-navigation-open=true] #bottomNav{opacity:1;visibility:visible;pointer-events:auto}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true]) body{padding-bottom:env(safe-area-inset-bottom)!important}
@media(prefers-reduced-motion:reduce){html[data-hide-toolbar=true] #bottomNav{transition:none!important}}

/* Space at each end lets the first and last controls clear visible overlays. */
html[data-hide-toolbar=true]:not([data-toolbar-settings=true])[data-navigation-open=true] body{padding-bottom:calc(var(--navigation-height,110px) + 20px)!important}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true])[data-toolbar-open=true]{scroll-padding-top:calc(var(--header-height,100px) + 12px)}
html[data-hide-toolbar=true]:not([data-toolbar-settings=true])[data-navigation-open=true]{scroll-padding-bottom:calc(var(--navigation-height,110px) + 20px)}

/* Bars can fade or slide; bottom translation retains horizontal centring. */
html[data-hide-toolbar=true][data-bar-animation=slide]:not([data-toolbar-settings=true]) .topbar{transform:translateY(-110%);opacity:1;transition:transform .18s ease,visibility .18s}
html[data-hide-toolbar=true][data-bar-animation=slide]:not([data-toolbar-settings=true])[data-toolbar-open=true] .topbar{transform:translateY(0)}
html[data-hide-toolbar=true][data-bar-animation=slide]:not([data-toolbar-settings=true]) #bottomNav{transform:translate(-50%,calc(100% + 24px));opacity:1;transition:transform .18s ease,visibility .18s}
html[data-hide-toolbar=true][data-bar-animation=slide]:not([data-toolbar-settings=true])[data-navigation-open=true] #bottomNav{transform:translate(-50%,0)}
/* Forecast: protect the current conditions above the hourly divider. */
html body main #homeWidgets[data-layout]>.home-weather{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)!important;grid-template-rows:minmax(0,1fr)!important;column-gap:12px!important;row-gap:6px!important}
html body main #homeWidgets[data-layout]>.home-weather:has(#hourlyRain:not([hidden])){grid-template-rows:minmax(0,1fr) 66px!important}
html body main #homeWidgets .home-weather .weather-top{grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-rows:16px minmax(0,1fr);gap:3px;min-height:0;overflow:hidden}
html body main #homeWidgets .home-weather .weather-bottom{grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
html body main #homeWidgets .home-weather .weather-place{font-size:11px!important;line-height:16px;margin:0!important;white-space:nowrap;text-overflow:ellipsis;max-height:16px}
html body main #homeWidgets .home-weather #weatherNow{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;min-height:0;overflow:hidden;font-size:11px!important;line-height:1.15}
html body main #homeWidgets .home-weather #weatherNow>.weather-symbol{width:36px!important;height:36px!important;min-width:0!important;flex:0 0 36px!important;margin:0!important}
html body main #homeWidgets .home-weather #weatherNow>div{min-width:0;max-width:100%}
html body main #homeWidgets .home-weather #weatherNow .weather-temperature{font-size:32px!important;line-height:1.05!important;white-space:nowrap}
html body main #homeWidgets .home-weather #weatherNow .weather-range{font-size:9px!important;margin-top:2px;line-height:1.15}
html body main #homeWidgets .home-weather #weatherDays{border-top:0!important;margin:0!important;padding:0!important;font-size:10px!important;line-height:1.15;gap:2px!important}
html body main #homeWidgets .home-weather #weatherDays .weather-symbol{width:min(100%,24px)!important;height:24px!important;margin:2px auto!important}
html body main #homeWidgets .home-weather #weatherDays .weather-low{margin-top:2px!important;font-size:9px!important}
html body main #homeWidgets .home-weather #weatherStatus{font-size:9px!important;line-height:1.2;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body main #homeWidgets .home-weather #hourlyRain{grid-row:2!important;grid-column:1/-1!important;box-sizing:border-box;min-height:0;border-top:1px solid var(--edge);padding-top:5px!important;overflow:hidden}
html body main #homeWidgets .home-weather .rain-hours{font-size:11px!important;line-height:1.15;gap:12px!important}
html body main #homeWidgets .home-weather .hourly-weather-hour{gap:2px!important}
html body main #homeWidgets .home-weather .hourly-weather-hour .weather-symbol{width:20px!important;height:20px!important}
@container(min-width:600px){html body main #homeWidgets .home-weather #weatherNow>.weather-symbol{width:56px!important;height:56px!important;flex-basis:56px!important}html body main #homeWidgets .home-weather #weatherNow .weather-temperature{font-size:48px!important}html body main #homeWidgets .home-weather #weatherNow{font-size:15px!important}html body main #homeWidgets .home-weather #weatherNow .weather-range{font-size:11px!important}}

html body main #homeWidgets .weather-range,html body main #homeWidgets #weatherStatus{display:none!important}
html body main #homeWidgets .home-weather .hourly-weather-hour{font-size:11px!important;line-height:1.15!important}
/* Analog-only clock: remove the empty digital wrapper and its flex gap. */
html body main #homeWidgets[data-clock-style=analog]>.home-clock{align-items:center!important;justify-content:center!important;text-align:center}
html body main #homeWidgets.clock-split[data-clock-style=analog]>.home-clock{gap:0!important}
html body main #homeWidgets.clock-split[data-clock-style=analog]>.home-clock>.clock-face+div{display:none!important}
html body main #homeWidgets.clock-split[data-clock-style=analog]>.home-clock>.clock-face{flex:none!important;margin:0!important;width:92%!important;max-width:100%!important;max-height:100%!important;height:auto!important;align-self:center!important}

/* Scale current conditions and each forecast day to their own available area. */
html body main #homeWidgets .home-weather .weather-top{grid-template-rows:calc(16px * var(--weather-now-scale,1)) minmax(0,1fr)}
html body main #homeWidgets .home-weather .weather-place{font-size:calc(11px * var(--weather-now-scale,1))!important;line-height:calc(16px * var(--weather-now-scale,1));max-height:calc(16px * var(--weather-now-scale,1))}
html body main #homeWidgets .home-weather #weatherNow{font-size:calc(11px * var(--weather-now-scale,1))!important;gap:calc(6px * var(--weather-now-scale,1))!important}
html body main #homeWidgets .home-weather #weatherNow>.weather-symbol{width:calc(36px * var(--weather-now-scale,1))!important;height:calc(36px * var(--weather-now-scale,1))!important;flex-basis:calc(36px * var(--weather-now-scale,1))!important}
html body main #homeWidgets .home-weather #weatherNow .weather-temperature{font-size:calc(32px * var(--weather-now-scale,1))!important}
html body main #homeWidgets .home-weather #weatherDays{font-size:calc(10px * var(--weather-day-scale,1))!important;gap:calc(2px * var(--weather-day-scale,1))!important}
html body main #homeWidgets .home-weather #weatherDays .weather-symbol{width:min(100%,calc(24px * var(--weather-day-scale,1)))!important;height:calc(24px * var(--weather-day-scale,1))!important;margin:calc(2px * var(--weather-day-scale,1)) auto!important}
html body main #homeWidgets .home-weather #weatherDays .weather-low{font-size:calc(9px * var(--weather-day-scale,1))!important;margin-top:calc(2px * var(--weather-day-scale,1))!important}
/* Toolbar lower corners follow the profile's tile rounding. */
html body .topbar,html[data-fixed-header=true] body .topbar,html[data-hide-toolbar=true] body .topbar{border-radius:0 0 var(--tile-radius,32px) var(--tile-radius,32px)!important}
/* Keep wide track fittings and the blind pull inside their artwork box. */
html body main .grid article .object-icon[src*='Track']::before,
html body main .grid article .object-icon[src*='Blind']::before{-webkit-mask-size:contain!important;mask-size:contain!important;-webkit-mask-position:center!important;mask-position:center!important;transform:none!important}
/* Blind drawing has generous canvas margins; 120% keeps its full pull visible. */

/* One display box for the complete 68 × 68 canvas of every control icon. */
:root{--control-icon-size:34cqw}
html body main :is(#content,#favouriteGrid,#homePins) article .object-icon,
html body main :is(#content,#favouriteGrid,#homePins) article .icon-toggle{width:var(--control-icon-size)!important;height:var(--control-icon-size)!important;min-width:var(--control-icon-size)!important;min-height:var(--control-icon-size)!important;max-width:var(--control-icon-size)!important;max-height:var(--control-icon-size)!important;flex-basis:var(--control-icon-size)!important;padding:0!important}
html body main :is(#content,#favouriteGrid,#homePins) article .object-icon::before{inset:0!important;-webkit-mask-size:contain!important;mask-size:contain!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;transform:none!important}
html body main :is(#content,#favouriteGrid,#homePins) article{container-type:inline-size!important}

/* Collapsed expanders share the same borderless treatment at every level. */
html body #settingsPage summary{border:0!important;box-shadow:none!important}
html body #settingsPage .settings-panel:has(>.settings-fold:not([open])),html body #settingsPage details:not([open]){border-color:transparent!important;box-shadow:none!important}
html body #settingsPage .settings-panel:has(>.settings-fold:not([open])){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#guestAppearanceControls{margin:8px 0 18px}#guestAppearanceControls p{margin:6px 0 0}

/* Optional reading layout: larger square tiles and content on phones. */
@media(max-width:640px){
html[data-phone-columns="1"] body main :is(.grid,#content,#rooms,#categories),html[data-phone-columns="1"] body main #homeWidgets[data-layout],html[data-phone-columns="1"] body main #homeWidgets[data-layout].clock-split{grid-template-columns:minmax(0,1fr)!important}
html[data-phone-columns="1"] body main #homeWidgets>.home-clock{max-width:100%!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article{grid-column:auto!important;width:100%!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article .card-name h3,html[data-phone-columns="1"] body main .aircon-tile>h3{font-size:clamp(28px,8cqw,40px)!important;line-height:1.15!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article .card-name small,html[data-phone-columns="1"] body main .aircon-tile>h3>small{font-size:clamp(23px,6.5cqw,34px)!important;line-height:1.15!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>fieldset{bottom:52px!important;height:44px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>fieldset .buttons,html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>fieldset .buttons button{height:44px!important;min-height:44px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article .buttons button{font-size:clamp(21px,6cqw,30px)!important;padding:6px 12px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>.card-footer{height:40px!important;min-height:40px!important;bottom:6px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>.card-footer>.reading{font-size:clamp(28px,8cqw,40px)!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions{width:88px!important;height:40px!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions button{width:44px!important;height:40px!important;min-height:40px!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions .ctc-icon{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-controls{top:30%!important;bottom:54px!important;height:auto!important}
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-track{font-size:clamp(24px,7cqw,36px)!important;line-height:1.2!important}
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-artist{font-size:clamp(21px,6cqw,30px)!important;line-height:1.2!important}
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-controls>.buttons,html[data-phone-columns="1"] body main .grid .sonos-card .sonos-controls>.buttons button{height:44px!important;min-height:44px!important}
html[data-phone-columns="1"] body main .aircon-tile .thermostat-value{font-size:clamp(32px,10cqw,48px)!important}
html[data-phone-columns="1"] body main .aircon-tile .setpoint-buttons button{width:44px!important;height:44px!important;min-height:44px!important;font-size:28px!important}
html[data-phone-columns="1"] body main .aircon-tile .setpoint-buttons{top:calc(25% + 27.75cqw - 22px)!important}
html[data-phone-columns="1"] body main .aircon-tile .aircon-room{width:80px!important;max-width:80px!important;font-size:15px!important}
html[data-phone-columns="1"] body main .aircon-tile .aircon-room .reading{font-size:15px!important}
html[data-phone-columns="1"] body main .aircon-tile .aircon-picker-bar{bottom:52px!important;height:44px!important}
html[data-phone-columns="1"] body main .aircon-tile .aircon-picker-bar button{height:44px!important;min-height:44px!important;font-size:24px!important}
html[data-phone-columns="1"] body main :is(#rooms,#categories) .directory-tile{container-type:inline-size}
html[data-phone-columns="1"] body main :is(#rooms,#categories) .directory-open{font-size:clamp(28px,8cqw,40px)!important;padding-bottom:65px!important}
html[data-phone-columns="1"] body main :is(#rooms,#categories) .directory-open .ctc-icon{width:34cqw!important;height:34cqw!important;min-width:34cqw!important;min-height:34cqw!important;flex-basis:34cqw!important}
html[data-phone-columns="1"] body main :is(#rooms,#categories) .directory-actions button{font-size:21px!important;min-height:44px!important}
}
@media(max-width:640px){html[data-phone-columns="1"] body:has(#bottomNav [data-page][aria-current]) main #content{grid-template-columns:minmax(0,1fr)!important}}

/* Thicker, rounded slider rails across control tiles. */
html body .grid article input.dimmer-range::-webkit-slider-runnable-track{height:14px!important;border-radius:10px}
html body .grid article input.dimmer-range::-moz-range-track{height:14px!important;border-radius:10px}
html body .grid article input.dimmer-range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-7px!important}
html body .grid article input.dimmer-range::-moz-range-thumb{width:28px;height:28px}
/* Current conditions fill a square module at every size. */
html body main #homeWidgets>.home-current-weather{gap:3cqw!important;padding:6cqw!important}
html body main #homeWidgets>.home-current-weather h3{font-size:7cqw!important;line-height:1.15!important}
html body main #homeWidgets>.home-current-weather>div{gap:3cqw!important;font-size:7cqw!important;line-height:1.15}
html body main #homeWidgets>.home-current-weather .weather-symbol{width:36cqw!important;height:36cqw!important;font-size:36cqw!important}
html body main #homeWidgets>.home-current-weather .weather-temperature{font-size:30cqw!important}
@media(max-width:640px){
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article{--control-icon-size:44cqw}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article .card-name h3,html[data-phone-columns="1"] body main .aircon-tile>h3{font-size:clamp(30px,9cqw,48px)!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article .card-name small,html[data-phone-columns="1"] body main .aircon-tile>h3>small{font-size:clamp(26px,7.5cqw,40px)!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>fieldset{bottom:20%!important;height:52px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>fieldset .buttons,html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>fieldset .buttons button{height:52px!important;min-height:52px!important}
html[data-phone-columns="1"] body main .grid article input.dimmer-range{bottom:20%!important;height:52px!important}
html[data-phone-columns="1"] body main .aircon-tile .aircon-picker-bar{bottom:20%!important;height:52px!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions{width:112px!important;height:52px!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions button{width:56px!important;height:52px!important;min-height:52px!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions .ctc-icon{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article>.card-footer{bottom:10px!important;height:52px!important;min-height:52px!important}
html[data-phone-columns="1"] body main #homeWidgets[data-layout]>.home-weather{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1.2fr) minmax(0,1fr)!important;gap:8px!important}
html[data-phone-columns="1"] body main #homeWidgets[data-layout]>.home-weather:has(#hourlyRain:not([hidden])){grid-template-rows:minmax(0,1.2fr) minmax(0,1fr) 24cqw!important}
html[data-phone-columns="1"] body main #homeWidgets .home-weather .weather-top{grid-column:1!important;grid-row:1!important}
html[data-phone-columns="1"] body main #homeWidgets .home-weather .weather-bottom{grid-column:1!important;grid-row:2!important}
html[data-phone-columns="1"] body main #homeWidgets .home-weather #hourlyRain{grid-column:1!important;grid-row:3!important}
html[data-phone-columns="1"] body main #homeWidgets .home-weather .rain-hours,html[data-phone-columns="1"] body main #homeWidgets .home-weather .hourly-weather-hour{font-size:17px!important}
html[data-phone-columns="1"] body main #homeWidgets .home-weather .rain-hours .weather-symbol{width:32px!important;height:32px!important}
#homeWidgets.has-artwork[data-amstaff=true]{background-image:none;background-color:transparent}
html body main #homeWidgets.has-artwork[data-amstaff=true]>:is(.home-clock,.home-date-tile,.home-weather,.home-current-weather){background-image:linear-gradient(rgba(0,0,0,var(--art-shade)),rgba(0,0,0,var(--art-shade))),var(--dashboard-art)!important;background-size:cover!important;background-position:25% center!important;border-radius:var(--tile-radius)}
}
/* Keep the spacing preference effective across all tile grids. */
html body main :is(.grid,#content,#rooms,#categories,#homeWidgets){gap:var(--tile-gap,12px)!important}
html body main #content>section[data-room]{margin-bottom:var(--tile-gap,12px)}
/* Landscape tablets: reserve three square rows when the bars overlay the page. */
@media(min-width:768px) and (max-width:1400px) and (min-height:500px) and (orientation:landscape){
html[data-hide-toolbar=true] body main{max-width:none;width:100%}
html[data-hide-toolbar=true][data-tablet-rows="3"] body main :is(.grid,#content,#rooms,#categories){grid-template-columns:repeat(4,minmax(0,1fr))!important}
html[data-hide-toolbar=true] body main #homeWidgets:not(.clock-split):not([data-current-weather=true]){grid-template-columns:minmax(0,1fr) minmax(0,3fr)!important}
}
@media(max-width:640px){
html[data-phone-columns="1"] body main .grid .tile-personal-actions{width:132px!important;gap:20px!important}
html[data-phone-columns="1"] body main .grid .tile-personal-actions button{flex:0 0 56px!important}
/* Center SVG transport symbols inside their actual button hit areas. */
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-controls fieldset>.buttons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;height:52px!important;min-height:52px!important;overflow:visible!important;align-items:stretch!important}
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-controls fieldset>.buttons button{display:flex!important;align-items:center!important;justify-content:center!important;height:52px!important;min-height:52px!important;min-width:0!important;width:100%!important;padding:8px!important;line-height:1!important;box-sizing:border-box!important}
html[data-phone-columns="1"] body main .grid .sonos-card .sonos-controls fieldset>.buttons button svg{display:block!important;position:static!important;width:30px!important;height:30px!important;min-width:30px!important;flex:none!important;margin:0!important;transform:none!important}
}

/* Independent gaps for tile columns and rows. */
html body main :is(.grid,#content,#rooms,#categories,#homeWidgets){column-gap:var(--tile-gap-x,12px)!important;row-gap:var(--tile-gap-y,12px)!important}
html body main #homeWidgets,html body main #content>section[data-room]{margin-bottom:var(--tile-gap-y,12px)!important}
@media(min-width:768px) and (max-width:1400px) and (min-height:500px) and (orientation:landscape){html[data-hide-toolbar=true][data-tablet-rows="3"] body main :is(#rooms,#categories) .directory-tile{aspect-ratio:auto!important;height:calc((100dvh - 50px - var(--tile-gap-y,12px) * 2) / 3)!important}}
@media(max-width:640px){html[data-phone-columns="1"] body main .grid article .tile-personal-actions{left:20px!important}}

/* Import readiness is shown with both colour and explicit status text. */
html body #configurationTools .controller-import-row{padding:16px;border:2px solid;border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}
html body #configurationTools .controller-import-row[data-import-state=ready]{border-color:#3b9b62;background:color-mix(in srgb,#36a760 14%,var(--surface))}
html body #configurationTools .controller-import-row[data-import-state=review]{border-color:#dc6969;background:color-mix(in srgb,#d84d4d 14%,var(--surface))}
html body #configurationTools .import-row-status{grid-column:1/-1;margin:0;font-weight:600}
html body #configurationTools .import-options{grid-column:1/-1}
html body #configurationTools .import-selection{position:sticky;top:0;background:var(--surface);padding:10px 0;z-index:1}
@media(max-width:700px){html body #configurationTools .controller-import-row{grid-template-columns:1fr}html body #configurationTools .controller-import-row>*{grid-column:1!important}}

/* First-run setup shares the dashboard's theme, rounded tiles and buttons. */
#firstRunSetup{width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;padding:28px;border:0;border-radius:var(--tile-radius,28px);background:var(--surface,#494742);color:var(--text,#efeee8);box-shadow:0 16px 70px #0006;text-align:center;font:inherit}
#firstRunSetup::backdrop{background:#0008;backdrop-filter:blur(7px)}
#firstRunSetup .welcome-logo{width:68px;height:68px;border-radius:16px;display:block;margin:0 auto 18px}
#firstRunSetup h2{font-size:28px;line-height:1.15;margin:0 0 12px;color:var(--accent)}
#firstRunSetup p{font-size:16px;line-height:1.45;margin:0 0 22px}
#firstRunSetup .welcome-actions{display:flex;flex-direction:column;gap:12px}
#firstRunSetup button{width:100%;min-height:52px;border:1px solid var(--edge);border-radius:18px;background:transparent;color:var(--text);font:inherit;font-size:17px;padding:12px 18px;touch-action:manipulation}
#firstRunSetup button:hover{background:var(--active)}
#firstRunSetup .welcome-later{border-color:transparent}
#firstRunSetup .welcome-help{font-size:13px;opacity:.8;margin:20px 0 0}

html body #configurationTools .import-selection{background:transparent!important;position:static!important;padding:8px 0!important;display:flex;flex-wrap:wrap;gap:10px}
html body #configurationTools .import-selection button,html body #configurationTools .import-apply{background:transparent!important;color:var(--text)!important;border:1px solid var(--edge);box-shadow:none}
html body #configurationTools .import-cbus-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body #configurationTools .import-cbus-group>span{flex-basis:100%;font-weight:600}
html body #configurationTools datalist{display:none}

/* Standalone temperature instruments share the tile's available square. */
html body main :is(.card-name>h3,.grouped-tile>h3){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;min-width:0}
html body main article:is(.temperature-measurement,.temperature-setpoint)>.card-heading .object-icon{display:none!important}
html body main article:is(.temperature-measurement,.temperature-setpoint)>.reading{position:absolute!important;inset:25% 8% auto!important;width:84%!important;height:66%!important;max-width:none!important;aspect-ratio:auto!important;transform:none!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;display:block!important;letter-spacing:normal!important}
html body main article.temperature-measurement .measurement-gauge-svg,html body main article.temperature-setpoint .thermostat-gauge{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}
html body main article.temperature-measurement .measurement-value,html body main article.temperature-setpoint .thermostat-value{position:absolute!important;inset:53% 0 auto!important;transform:translateY(-50%)!important;text-align:center!important;font-size:clamp(24px,14cqw,80px)!important;line-height:1.1!important;white-space:nowrap!important;letter-spacing:normal!important}
html body main article.temperature-setpoint>fieldset{position:absolute!important;inset:53% 5% auto!important;margin:0!important;padding:0!important;border:0!important;z-index:2}
html body main article.temperature-setpoint .setpoint-buttons{display:flex!important;justify-content:space-between!important;width:100%!important;gap:0!important;margin:0!important}
html body main article.temperature-setpoint .setpoint-buttons input{display:none!important}
html body main article.temperature-setpoint .setpoint-buttons button{flex:none!important;width:clamp(32px,12cqw,58px)!important;height:clamp(32px,12cqw,58px)!important;min-height:0!important;padding:0!important;font-size:clamp(22px,8cqw,40px)!important;border-radius:50%!important}
html body main article.temperature-setpoint .setpoint-buttons button{min-width:0!important;width:clamp(28px,10cqw,58px)!important;height:clamp(28px,10cqw,58px)!important}

html body main .aircon-has-power .aircon-picker-bar button{min-width:0;white-space:nowrap;padding-left:2px;padding-right:2px}
html body main .aircon-power[aria-pressed=true]{color:var(--accent)!important;background:var(--active)!important}
@media(max-width:640px){html[data-phone-columns="1"] body main .aircon-has-power .aircon-picker-bar button{font-size:clamp(16px,5.5cqw,24px)!important}}

/* Home modules use the same corner setting as control tiles. */
html body main #homeWidgets>:is(.home-clock,.home-date-tile,.home-weather,.home-current-weather){border-radius:var(--tile-radius,32px)!important}
html body main #homeWidgets>.home-current-weather{padding:5cqw!important;gap:3cqw!important}
html body main #homeWidgets>.home-current-weather h3{flex:0 0 auto!important;line-height:1.3!important;font-size:6cqw!important;min-height:1.3em;padding-block:.08em;box-sizing:content-box}
html body main #homeWidgets>.home-current-weather>div{flex:0 0 auto!important;gap:2cqw!important;font-size:6cqw!important}
html body main #homeWidgets>.home-current-weather .weather-symbol{width:28cqw!important;height:28cqw!important;font-size:28cqw!important;flex:none}
html body main #homeWidgets>.home-current-weather .weather-temperature{font-size:25cqw!important}
html body main #homeWidgets[data-home-sizing=controls]>:is(.home-clock,.home-date-tile,.home-current-weather){grid-column:auto!important;min-width:0!important;width:100%!important}
html body main #homeWidgets[data-home-sizing=controls]>.home-weather{grid-column:span 2!important;height:var(--home-control-height)!important;min-height:var(--home-control-height)!important;max-height:var(--home-control-height)!important}
html body main #homeWidgets[data-home-material=glass]>:is(.home-clock,.home-date-tile,.home-current-weather,.home-weather){background-color:color-mix(in srgb,var(--surface) 45%,transparent)!important;border:1px solid #ffffff70!important;box-shadow:inset 0 1px 1px #ffffffb0,inset 0 -1px 1px #ffffff20,0 12px 36px #0002!important;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
@media(max-width:640px){html[data-phone-columns="1"] body main #homeWidgets[data-home-sizing=controls]>.home-weather{grid-column:1/-1!important}}
html body main #homeWidgets>.home-current-weather{padding:5%!important;gap:clamp(6px,1vw,12px)!important}
html body main #homeWidgets[data-home-sizing=controls]{background:none!important;border-radius:var(--tile-radius,32px)!important}

/* Keep town lettering outside generic heading and shrinking flex rules. */
html body main #homeWidgets>.home-current-weather>.current-weather-town{display:block!important;position:absolute!important;top:10%!important;left:6%!important;right:6%!important;width:auto!important;height:auto!important;min-height:1.5em!important;max-height:none!important;flex:none!important;margin:0!important;padding:.12em 0!important;box-sizing:content-box!important;font-size:6cqw!important;line-height:1.5!important;font-weight:600;color:var(--accent);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body main #homeWidgets>.home-current-weather>.current-weather-body{position:absolute!important;inset:30% 6% 10%!important;width:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2cqw!important;font-size:6cqw!important;line-height:1.25!important}
html body main #homeWidgets>.home-current-weather{position:relative!important}
html body main #homeTileDisplayOptions{display:grid;gap:14px;margin:16px 0 24px}
html body main #homeTileDisplayOptions>label{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Larger today marker, and selected days use the configured tile corners. */
html body #householdBoard .calendar-day.is-today>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:min(1.8em,100%)!important;min-width:0!important;height:auto!important;aspect-ratio:1!important;line-height:1!important;padding:0!important;border-radius:50%!important;flex:none!important;background:#c71921!important;color:#fff!important;align-self:center}
html body #householdBoard .calendar-day[aria-pressed=true]{border-radius:0!important;outline:2px solid var(--edge);outline-offset:-2px}
html body #householdBoard.blackboard .calendar-day[aria-pressed=true]{border-radius:0!important;outline:2px solid #8e928b!important;outline-offset:-2px!important}
.ctc-clock-decoration text{font-family:inherit;font-weight:500}.clock-pearl{background:#f1f5f3!important;color:#253b48!important;border-radius:50%;box-shadow:0 8px 20px #0002}
.ambient-settings{margin:12px 0 24px}.ambient-settings>label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0}.ambient-settings>p{font-size:14px;line-height:1.5}.ambient-settings>button{margin:12px 0}
html.ambient-active{overflow:hidden!important}.ambient-screen{position:fixed;inset:0;z-index:10000;padding:clamp(12px,3vmin,32px);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));background:var(--scene-background,var(--surface,#283d49));color:var(--text);font:inherit;overscroll-behavior:none;touch-action:none;display:flex;flex-direction:column;gap:10px;isolation:isolate}
.ambient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,2vmin,24px);flex:1;min-height:0}.ambient-screen[data-count="1"] .ambient-grid{grid-template-columns:1fr;grid-template-rows:1fr}.ambient-screen[data-count="2"] .ambient-grid{grid-template-rows:1fr}.ambient-screen[data-count="3"] .ambient-grid>.ambient-panel:last-child{grid-column:1/-1}
.ambient-panel{border-radius:var(--tile-radius,32px);background:var(--glass,var(--surface));color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.5vmin,20px);padding:clamp(12px,2vmin,28px);min-width:0;min-height:0;overflow:hidden;container-type:inline-size;text-align:center}.ambient-screen.has-artwork .ambient-panel{background-image:linear-gradient(#0005,#0005),var(--dashboard-art);background-position:center;background-size:cover;color:white}.ambient-screen[data-material=glass] .ambient-panel{background-color:#ffffff24;border:1px solid #ffffff70;box-shadow:inset 0 1px 1px #fff9,0 12px 36px #0002;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
.ambient-clock-face{height:min(100%,36vmin);width:min(100%,36vmin);flex:none}.ambient-time{font-size:clamp(28px,14cqw,120px);font-weight:300;letter-spacing:-.055em;line-height:1.1;white-space:nowrap}.ambient-date{font-size:clamp(14px,4cqw,32px);line-height:1.3}.ambient-panel h2{font-size:clamp(15px,5cqw,32px);line-height:1.2;margin:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ambient-conditions{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:0;font-size:clamp(14px,4cqw,26px)}.ambient-conditions .weather-symbol{width:clamp(40px,15cqw,110px);height:clamp(40px,15cqw,110px)}.ambient-conditions .weather-temperature{font-size:clamp(30px,18cqw,100px);line-height:1.1}.ambient-conditions .weather-range{display:none}.ambient-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:min(100%,420px);gap:clamp(2px,.8vmin,10px);font-size:clamp(12px,4cqw,24px);line-height:1.2}.ambient-month span{display:grid;place-items:center;aspect-ratio:1;max-height:4vmin}.ambient-month .today{background:#c71921;color:white;border-radius:50%}.ambient-events{font-size:clamp(11px,3cqw,18px);line-height:1.4;white-space:pre-line;max-width:100%;max-height:3em;overflow:hidden}.ambient-return{align-self:center;flex:none;border:1px solid var(--edge);background:var(--glass);color:var(--text);border-radius:30px;padding:6px 20px;min-height:34px;font:inherit;font-size:13px}
@media(max-width:500px) and (orientation:portrait){.ambient-panel{padding:10px}.ambient-panel h2{font-size:14px}.ambient-date{font-size:13px}.ambient-clock-face{height:34vmin;width:34vmin}.ambient-events{font-size:10px}.ambient-month{font-size:12px;gap:3px}.ambient-conditions .weather-symbol{width:48px;height:48px}}
/* Ambient panels must fit their row without inherited section margins. */
.ambient-screen,.ambient-panel{margin:0!important}.ambient-panel{container-type:size;padding:12px;gap:6px}.ambient-panel>h2{flex:none;font-size:clamp(14px,min(5cqw,8cqh),28px);line-height:1.3;min-height:1.3em;overflow:visible}.ambient-month{flex:none;gap:3px;font-size:clamp(10px,min(4cqw,6cqh),20px)}.ambient-month span{aspect-ratio:auto;height:clamp(14px,6cqh,24px);max-height:none}.ambient-month small{color:inherit;opacity:.75}.ambient-events{flex:none;font-size:clamp(10px,5cqh,16px);min-height:1.4em}.ambient-conditions{gap:4px;font-size:clamp(12px,6cqh,22px);flex:none}.ambient-conditions .weather-symbol{width:min(20cqw,22cqh);height:min(20cqw,22cqh)}.ambient-conditions .weather-temperature{font-size:clamp(26px,min(18cqw,25cqh),90px)}.ambient-clock-face{width:min(90cqw,85cqh);height:min(90cqw,85cqh)}
.ambient-month span{height:1.5em}.ambient-month .today{width:1.5em;height:1.5em;justify-self:center}.ambient-screen.has-artwork .ambient-conditions{--accent:#fff;color:white}

html body main #homeWidgets[data-home-sizing=fill]>:is(.home-clock,.home-date-tile,.home-current-weather){grid-column:auto!important;width:100%!important;min-width:0!important}
html body main #homeWidgets[data-home-sizing=fill]>.home-weather{grid-column:span var(--home-weather-span,2)!important}
/* Separate home tiles: artwork belongs to Time only. */
html body main #homeWidgets.has-artwork.clock-split{background:none!important;--text:inherit!important;--accent:inherit!important;color:var(--text)!important;text-shadow:none!important}
html body main #homeWidgets.has-artwork.clock-split>.home-clock{background-image:linear-gradient(rgba(0,0,0,var(--art-shade)),rgba(0,0,0,var(--art-shade))),var(--dashboard-art)!important;background-size:cover!important;background-position:center!important;--text:#fff;--accent:#fff;color:#fff!important;text-shadow:0 1px 4px #0009}
html body main #homeWidgets.has-artwork.clock-split[data-amstaff=true]>.home-clock{background-position:25% center!important}
html body main #homeWidgets.has-artwork.clock-split>:is(.home-date-tile,.home-current-weather,.home-weather){background:var(--glass)!important;color:var(--text)!important;text-shadow:none!important;-webkit-backdrop-filter:blur(18px) saturate(120%)!important;backdrop-filter:blur(18px) saturate(120%)!important}
html body main #homeWidgets.has-artwork.clock-split[data-home-material=glass]>:is(.home-date-tile,.home-current-weather,.home-weather){background:color-mix(in srgb,var(--surface) 45%,transparent)!important;border:1px solid #ffffff70!important;box-shadow:inset 0 1px 1px #ffffffb0,inset 0 -1px 1px #ffffff20,0 12px 36px #0002!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;backdrop-filter:blur(24px) saturate(150%)!important}
html body main #homeWidgets.has-artwork.clock-split:not([data-home-material=glass])>.home-date-tile{background:var(--surface)!important}
html body main #homeWidgets>.home-clock[hidden],html body main #homeWidgets>.home-date-tile[hidden]{display:none!important}
html body main #homeWidgets[data-date=false] :is(.clock-day,.clock-date){display:none!important}
#screenSaverSettings>.ambient-settings{margin:0}#screenSaverSettings>.ambient-settings>label{padding:6px 0}.ambient-screen[data-count="5"] .ambient-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.ambient-date-number{font-size:clamp(32px,min(30cqw,40cqh),130px);color:#cf7975;line-height:1}.ambient-date-weekday{font-size:clamp(15px,6cqw,32px)}
#homeWidgets[data-digital-style=classic] .clock-time,.ambient-screen[data-digital-style=classic] .ambient-time{font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-weight:400;letter-spacing:-.04em}
#homeWidgets[data-digital-style=thin] .clock-time,.ambient-screen[data-digital-style=thin] .ambient-time{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:200;letter-spacing:-.06em}
#homeWidgets[data-digital-style=rounded] .clock-time,.ambient-screen[data-digital-style=rounded] .ambient-time{font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;font-weight:650;letter-spacing:-.035em}
#homeWidgets[data-digital-style=mono] .clock-time,.ambient-screen[data-digital-style=mono] .ambient-time{font-family:ui-monospace,Menlo,monospace;font-weight:500;letter-spacing:-.07em;font-variant-numeric:tabular-nums;font-size:clamp(24px,15cqw,100px)!important}
#homeWidgets[data-digital-style=flip] .clock-time,.ambient-screen[data-digital-style=flip] .ambient-time{font-family:ui-monospace,Menlo,monospace;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.07em;background:linear-gradient(transparent 49%,#0004 49%,#0004 51%,transparent 51%),#000b;color:#fff;border-radius:.12em;padding:.16em .18em;box-shadow:0 .08em .12em #0003;font-size:clamp(24px,14cqw,94px)!important}
@media(max-width:600px){.ambient-screen[data-count="5"] .ambient-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.ambient-screen[data-count="5"] .ambient-grid>.ambient-panel:last-child{grid-column:1/-1}}
/* Clock text fits actual panel dimensions; LED and Flip own the whole tile. */
html body main #homeWidgets[data-clock-style=digital]>.home-clock>div{width:100%!important;height:100%!important;display:grid!important;place-items:center!important;min-width:0;min-height:0}
html body main #homeWidgets[data-clock-style=digital] .clock-time{max-width:100%;white-space:nowrap;text-align:center;flex:none}
html body main #homeWidgets[data-clock-style=digital]:is([data-digital-style=flip],[data-digital-style=led])>.home-clock,
html body main #homeWidgets.has-artwork.clock-split[data-clock-style=digital]:is([data-digital-style=flip],[data-digital-style=led])>.home-clock{background-image:none!important;background-color:#090909!important;color:white!important;text-shadow:none!important;padding:6%!important;box-shadow:inset 0 1px 1px #ffffff25!important}
html body main #homeWidgets[data-clock-style=digital][data-digital-style=flip]>.home-clock,
html body main #homeWidgets.has-artwork.clock-split[data-clock-style=digital][data-digital-style=flip]>.home-clock,
.ambient-screen[data-digital-style=flip] .ambient-digital{background:linear-gradient(#151515 0 49.5%,#444 49.5% 50.5%,#111 50.5% 100%)!important;color:#fff!important}
.ambient-screen[data-digital-style=led] .ambient-digital{background:#050505!important;color:#ff2420!important}
html body main #homeWidgets[data-digital-style=flip] .clock-time,.ambient-screen[data-digital-style=flip] .ambient-time{background:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
html body main #homeWidgets[data-digital-style=led] .clock-time,.ambient-screen[data-digital-style=led] .ambient-time{display:grid;place-items:center;min-width:0;min-height:0;background:none!important;color:#ff2420;text-shadow:none}
#homeWidgets[data-digital-style=led] .clock-time svg,.ambient-screen[data-digital-style=led] .ambient-time svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 2px var(--led-color,#ff2420))}
.ambient-screen[data-count="5"] .ambient-grid>.ambient-panel:last-child{grid-column:span 2}

/* Shared groups retain ordinary control cards and grow only to their contents. */
html body main :is(#content,#homePins,#favouriteGrid) article.standard-group{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;align-self:start!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px!important;box-sizing:border-box!important}
html body main article.standard-group>.grouped-subtiles.grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))!important;gap:10px!important;width:100%!important;height:auto!important;min-height:0!important;align-items:start!important;flex:none!important}
html body main article.standard-group>.grouped-subtiles.grid>article{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1!important;grid-column:auto!important;box-sizing:border-box!important;container-type:inline-size}
html body main article.standard-group>.card-footer{position:relative!important;inset:auto!important;height:32px!important;min-height:32px!important;margin:0!important;flex:none!important}
@media(max-width:640px){html body main article.standard-group>.grouped-subtiles.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}html[data-phone-columns="1"] body main article.standard-group>.grouped-subtiles.grid{grid-template-columns:minmax(0,1fr)!important}}
html body main :is(#content,#homePins,#favouriteGrid) article.standard-group[hidden]{display:none!important}

/* Blind position endpoints sit immediately above the slider ends. */
html body main .grid article.blind-slider-card>fieldset{position:absolute!important;inset:auto 6% 20% 6%!important;height:36px!important;margin:0!important;padding:0!important;display:block!important}
html body main .grid article.blind-slider-card>fieldset>input[type=range]{position:absolute!important;inset:0!important;width:100%!important;height:36px!important;margin:0!important}
html body main .grid article.blind-slider-card>fieldset>.buttons{position:absolute!important;left:0!important;right:0!important;bottom:calc(100% + 4px)!important;top:auto!important;height:32px!important;min-height:0!important;display:flex!important;justify-content:space-between!important;gap:8px!important;overflow:visible!important;margin:0!important}
html body main .grid article.blind-slider-card>fieldset>.buttons>button{flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:28px!important;height:32px!important;font-size:clamp(12px,5cqw,22px)!important;padding:2px 10px!important}
/* A single centred placeholder for missing measurements. */
html body main article.measurement-card.reading-unknown:not(.aircon-room):not(.aircon-setpoint)>.reading{position:absolute!important;inset:43% 8% auto!important;width:84%!important;height:auto!important;transform:none!important;text-align:center!important;font-size:clamp(28px,14cqw,64px)!important;line-height:1.2!important;margin:0!important;padding:0!important}
html body main article.measurement-card.reading-unknown .object-icon{visibility:hidden!important}
html body main .aircon-tile .reading-unknown.aircon-setpoint>.reading{display:block!important}
html body main .grid article.blind-slider-card>.card-heading .object-icon{position:absolute!important;left:50%!important;top:40%!important;transform:translate(-50%,-50%)!important;width:24cqw!important;height:24cqw!important;max-width:none!important;margin:0!important}
html body main .grid article.blind-slider-card>.card-heading .object-icon{top:36%!important;width:24cqw!important;height:24cqw!important;min-width:0!important;min-height:0!important;flex:none!important}
/* Directory widths follow their grid track when the viewport changes. */
html body main :is(#rooms,#categories)>.directory-tile{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;justify-self:stretch}
html body main :is(#rooms,#categories) .directory-open,html body main :is(#rooms,#categories) .directory-actions,html body main :is(#rooms,#categories) .directory-actions button{box-sizing:border-box!important;max-width:100%!important;min-width:0!important}

/* Humidity readings use the value alone in every measurement style. */
html body main .humidity-measurement .object-icon{display:none!important}

/* Aircon power and live mode/fan summaries share one compact control band. */
html body main .aircon-tile .aircon-picker-bar{display:flex!important;align-items:start!important;left:5%!important;right:5%!important;bottom:10%!important;height:auto!important;gap:8px!important}
html body main .aircon-tile .aircon-picker-slot{flex:1;min-width:0;text-align:center}
html body main .aircon-tile .aircon-picker-slot.aircon-power-slot{flex:.65}
html body main .aircon-tile .aircon-picker-slot>button{width:100%!important;height:12cqw!important;min-height:28px!important;max-height:58px!important;font-size:clamp(12px,4.5cqw,28px)!important;border-radius:30px!important;white-space:nowrap!important;padding:2px 4px!important}
html body main .aircon-tile .aircon-power>svg{width:6cqw;height:6cqw;max-width:30px;max-height:30px;vertical-align:middle}
html body main .aircon-tile .aircon-power[aria-pressed=true]{color:var(--accent)!important}
html body main .aircon-tile .aircon-current-state{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:5px;min-height:5cqw;font-size:clamp(9px,2.9cqw,17px);line-height:1.15;white-space:nowrap;color:var(--text)}
html body main .aircon-tile .aircon-current-state svg{width:4cqw;height:4cqw;min-width:12px;max-width:22px;max-height:22px;flex:none}

/* Group actions belong to the outer tile and use the ordinary tile footer. */
html body main article.standard-group>.card-footer{position:static!important;height:44px!important;min-height:44px!important}
html body main article.standard-group>.grouped-subtiles .tile-personal-actions,html body main article.standard-group>.grouped-subtiles .favourite,html body main article.standard-group>.grouped-subtiles .home-pin{display:none!important}

/* Aircon dials are always clean, independently of sensor tile preferences. */
html body main :is(.aircon-tile,.aircon-setpoint,.aircon-room) .reading{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;letter-spacing:normal!important}
html body main .aircon-setpoint .thermostat-gauge{display:block!important;background:none!important;border:0!important;box-shadow:none!important}

/* Keep reorder actions clear while the underlying favourite stays recognisable. */
html body #favouriteGrid .favourite-order-edit{position:relative;isolation:isolate}
html body #favouriteGrid .favourite-order-edit>:not(.favourite-move){opacity:.16!important;pointer-events:none!important}
html body #favouriteGrid .favourite-order-edit>.card-heading{opacity:.5!important}
html body #favouriteGrid .favourite-order-edit>.favourite-move:not([hidden]){position:absolute;inset:auto 6%;top:50%;transform:translateY(-50%);z-index:20;display:flex;gap:10px;margin:0;padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--text);box-shadow:0 6px 24px #0003;opacity:1;pointer-events:auto}
html body #favouriteGrid .favourite-order-edit>.favourite-move button{position:relative;min-width:0;min-height:48px;white-space:normal;font-weight:600;background:var(--surface);color:var(--text);border:1px solid var(--text)}
html body #favouriteGrid .favourite-order-edit>.favourite-move button:disabled{opacity:.4}

.home-only-setting{display:flex;gap:10px;align-items:center;margin:18px 0 8px}.home-only-setting input{width:22px;height:22px;flex:none}

.profile-pin-dialog{width:min(440px,94vw);border-radius:24px;padding:28px;background:var(--surface);color:var(--text);border:1px solid var(--text)}.profile-pin-dialog::backdrop{background:#0009}.profile-pin-dialog form{display:flex;flex-direction:column;gap:14px}.profile-pin-dialog input,#profileDialog input[type=password]{font-size:22px;letter-spacing:8px;max-width:100%;padding:12px;border-radius:12px}.profile-pin-dialog p{margin:0}

/* Today uses its red date circle; selection keeps the calendar cell square. */
html body #householdBoard .calendar-day{border-radius:0!important}

/* Calendar dates keep a modest radius; today retains its date-cell border. */
html body #householdBoard .calendar-day,
html body #householdBoard .calendar-day[aria-pressed=true],
html body #householdBoard.blackboard .calendar-day[aria-pressed=true]{border-radius:8px!important}
/* Aircon sensor and setpoint surfaces never inherit the measurement instrument panel. */
html body main .aircon-tile .grouped-control.aircon-setpoint,
html body main .aircon-tile .grouped-control.aircon-room{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}
html body main article.aircon-tile .grouped-control.measurement-card>.reading,
html body main article.aircon-setpoint.measurement-card>.reading,
html body main article.aircon-room.measurement-card>.reading{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body main .aircon-tile .aircon-power-slot .aircon-current-state{display:none!important}
html body main .grid article.aircon-tile>.card-footer{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;align-items:center!important;gap:10px!important}
html body main .grid article.aircon-tile>.card-footer>.tile-personal-actions{position:static!important;grid-column:1!important;margin:0!important;transform:none!important}
html body main .aircon-tile .aircon-status-bar{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;align-items:center}
html body main .aircon-tile .aircon-status-bar .aircon-current-state{min-width:0;min-height:0;margin:0;justify-content:center;font-size:clamp(9px,2.9cqw,17px)}
html body main .aircon-tile .aircon-status-bar .aircon-current-state span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Aircon footer is anchored to the same bottom baseline as ordinary tiles. */
html body main .grid article.aircon-tile>.card-footer{position:absolute!important;top:auto!important;bottom:4px!important;left:10px!important;right:10px!important;height:26px!important;min-height:26px!important;margin:0!important;padding:0!important;z-index:4}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article.aircon-tile>.card-footer{position:absolute!important;top:auto!important;bottom:10px!important;height:52px!important;min-height:52px!important}

/* Keep the clean dial extending behind the raised action buttons. */
html body main .aircon-tile .aircon-setpoint>.reading{height:90cqw!important;overflow:visible!important;z-index:0!important}
html body main .aircon-tile .aircon-setpoint .thermostat-gauge{height:90cqw!important;overflow:visible!important}
html body main .aircon-tile>.aircon-picker-bar{z-index:3!important}

/* Aircon positions belong to its own tile, independent of neighbouring tiles. */
html body main .grid article.aircon-tile>.card-footer{top:auto!important;bottom:calc(8.5% - 13px)!important;height:26px!important;min-height:26px!important}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article.aircon-tile>.card-footer{top:auto!important;bottom:calc(8.5% - 26px)!important;height:52px!important;min-height:52px!important}
html body main article.aircon-tile>.aircon-picker-bar,
html[data-phone-columns] body main article.aircon-tile>.aircon-picker-bar{top:auto!important;bottom:17%!important;height:12%!important;align-items:stretch!important}
html body main article.aircon-tile .aircon-picker-slot{height:100%!important}
html body main article.aircon-tile .aircon-picker-slot>button,
html[data-phone-columns] body main article.aircon-tile .aircon-picker-slot>button{height:100%!important;min-height:0!important;max-height:none!important}
html body main article.aircon-tile .aircon-setpoint>.reading{top:24%!important;left:10%!important;right:auto!important;bottom:auto!important;width:80%!important;height:46%!important;transform:none!important;overflow:visible!important}
html body main article.aircon-tile .aircon-setpoint .thermostat-gauge{width:100%!important;height:100%!important;overflow:visible!important}
html body main article.aircon-tile .aircon-setpoint .thermostat-value{top:45%!important;transform:translateY(-50%)!important}
html body main article.aircon-tile .grouped-control.aircon-setpoint{container-type:normal!important;contain:none!important}

/* Match the ordinary tile footer hit-area heights at each responsive size. */
html body main .grid article.aircon-tile>.card-footer{height:44px!important;min-height:44px!important;bottom:4px!important}
@media(min-width:360px) and (max-width:640px){html body main .grid article.aircon-tile>.card-footer{height:26px!important;min-height:26px!important;bottom:4px!important}}
html[data-phone-columns="1"] body main :is(#content,#favouriteGrid,#homePins) article.aircon-tile>.card-footer{height:52px!important;min-height:52px!important;bottom:10px!important}
html body main article.aircon-tile .aircon-setpoint .thermostat-value{top:50%!important}

/* Browse artwork without changing its assignments. */
.ctc-icon-library{margin-top:26px;padding-top:20px;border-top:1px solid currentColor}.icon-library-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.icon-library-toolbar label{display:flex;gap:10px;align-items:center}.icon-library-toolbar input{min-width:160px;flex:1}.icon-library-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.icon-library-tabs button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--accent)}.icon-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:14px 0}.icon-library-card{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:0;padding:12px!important;text-align:center;font-size:15px!important}.icon-library-art{display:flex;justify-content:center;gap:8px;background:#39444a;color:#fff;border-radius:14px;padding:10px}.icon-library-art>span{min-width:0;flex:1}.icon-library-art img{width:100%;max-width:84px;height:78px;object-fit:contain;display:block;margin:auto}.icon-library-art small{font-size:11px;line-height:1.5;color:#edf1f2}.icon-library-card>span:last-child{overflow-wrap:anywhere}.icon-library-count{font-size:14px}.icon-library-dialog{width:min(820px,94vw);max-height:90dvh;overflow:auto;border-radius:24px;padding:24px;background:var(--tile-bg,#39444a);color:var(--text,#f5f5f0)}.icon-library-dialog::backdrop{background:#0008}.icon-library-large{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.icon-library-large figure{margin:0;padding:14px;background:#39444a;color:white;border-radius:18px;text-align:center}.icon-library-large img{width:100%;max-width:300px;aspect-ratio:1;object-fit:contain}.icon-library-large figcaption{font-size:16px}

/* Profile ring reflects the AC2 connection; it does not imply every group has feedback. */
html[data-connection-state=connected]{--profile-connection-colour:#79b999;--profile-connection-colour:color-mix(in srgb,#6eae8d 80%,var(--text) 20%)}
html[data-connection-state=connecting]{--profile-connection-colour:#c5ab70;--profile-connection-colour:color-mix(in srgb,#b69a56 80%,var(--text) 20%)}
html[data-connection-state=disconnected]{--profile-connection-colour:#c6817b;--profile-connection-colour:color-mix(in srgb,#c37772 80%,var(--text) 20%)}
html body .topbar #profileButton{border:2px solid var(--profile-connection-colour,var(--edge))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--profile-connection-colour,var(--edge)) 16%,transparent);transition:border-color .25s ease,box-shadow .25s ease}
@media(prefers-reduced-motion:reduce){html body .topbar #profileButton{transition:none}}

/* Settings links remain readable, including visited links, on every theme. */
#settingsPage a[href],#settingsPage a[href]:visited{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--edge);border-radius:24px;background:var(--surface);color:var(--text);font:inherit;line-height:1.3;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
#settingsPage a[href]:hover{background:var(--active);color:var(--text)}
#settingsPage a[href]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.connection-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0}
#status,#itemCount{color:var(--text);opacity:1}

.profile-access-dialog{width:min(1000px,96vw);max-height:90dvh;overflow:auto;color:var(--text);background:var(--surface);border:1px solid var(--edge);border-radius:24px;padding:24px}.profile-access-dialog::backdrop{background:#0009}.profile-access-dialog>label{display:block;margin:14px 0}.profile-access-dialog select{max-width:100%}.profile-access-dialog details{margin:16px 0}.profile-access-table{width:100%;border-collapse:collapse;margin:12px 0}.profile-access-table th,.profile-access-table td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--edge);vertical-align:top}.profile-access-table small{display:block;overflow-wrap:anywhere;color:var(--text);opacity:.8}.profile-access-actions{display:flex;flex-wrap:wrap;gap:12px;position:sticky;bottom:-24px;background:var(--surface);padding:14px 0}.profile-access-dialog input[type=search]{width:100%;margin:12px 0}.profile-access-table select{width:100%;min-width:0}@media(max-width:550px){.profile-access-dialog{padding:16px}.profile-access-table th,.profile-access-table td{padding:8px 3px;font-size:.85em}.profile-access-table select{padding:7px;font-size:inherit}.profile-access-actions{bottom:-16px}}

/* Blind position rails reuse the light-slider track and thumb without moving the icon. */
html body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card{--blind-band-bottom:48px;--blind-band-height:48px;--blind-range-height:48px;--blind-range-gutter:16px;--blind-range-bottom:90px;--blind-button-font:15px;--blind-button-min:48px;--blind-button-padding:8px 10px}
html body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card>fieldset{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;pointer-events:none}
html body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card>fieldset>.buttons{position:absolute!important;inset:auto 16px var(--blind-band-bottom)!important;width:auto!important;height:var(--blind-band-height)!important;min-height:var(--blind-band-height)!important;display:flex!important;justify-content:center!important;gap:6px!important;margin:0!important;pointer-events:auto}
html body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card>fieldset>.buttons>button{flex:0 1 auto!important;width:auto!important;height:var(--blind-band-height)!important;min-height:var(--blind-band-height)!important;min-width:var(--blind-button-min)!important;font-size:var(--blind-button-font)!important;padding:var(--blind-button-padding)!important;pointer-events:auto}
html body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card>fieldset>input.blind-range{position:absolute!important;inset:auto var(--blind-range-gutter) var(--blind-range-bottom)!important;width:calc(100% - var(--blind-range-gutter)*2)!important;height:var(--blind-range-height)!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important;writing-mode:horizontal-tb!important;direction:ltr!important;pointer-events:auto;touch-action:pan-y}
html:not([data-blind-slider=horizontal]) body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card>fieldset>input.blind-range{inset:50% auto auto 90%!important;width:var(--blind-vertical-length,80cqw)!important;transform:translate(-50%,-50%) rotate(-90deg)!important;touch-action:pan-x}
@media(max-width:640px){
html body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card{--blind-band-bottom:31px;--blind-band-height:30px;--blind-range-height:30px;--blind-range-gutter:10px;--blind-range-bottom:64px;--blind-button-font:11px;--blind-button-min:44px;--blind-button-padding:3px 8px}
html[data-phone-columns="1"] body main :is(#content,#homePins,#favouriteGrid) article.blind-slider-card{--blind-band-bottom:20%;--blind-band-height:52px;--blind-range-height:52px;--blind-range-bottom:calc(20% + 44px);--blind-button-font:clamp(21px,6cqw,30px);--blind-button-padding:6px 12px}
}
/* Aircon dials never acquire the measurement tile's instrument background. */
html body main :is(.aircon-tile,.aircon-setpoint,.aircon-room) :is(.reading,.thermostat-gauge,.measurement-gauge-svg),html body main [data-gauge-style=clean]{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}

/* Whole-tile Liquid Glass honours the chosen tile opacity, including active tiles. */
html[data-tile-material=glass] body main :is(.grid article,#rooms>.directory-tile,#categories>.directory-tile,#homeWidgets>.home-clock,#homeWidgets>.home-date-tile,#homeWidgets>.home-current-weather,#homeWidgets>.home-weather){background:color-mix(in srgb,var(--surface) var(--tile-opacity,70%),transparent)!important;border:1px solid #ffffff70!important;box-shadow:inset 0 1px 1px #ffffffb0,inset 0 -1px 1px #ffffff20,0 12px 36px #0002!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;backdrop-filter:blur(24px) saturate(150%)!important}
html[data-tile-material=glass] body main .grid article[data-on=true]{background:color-mix(in srgb,var(--active) var(--tile-opacity,70%),transparent)!important}

/* Blinds share the ordinary control icon centre, including phone layouts. */
html body main .grid article.blind-control-card>.card-heading .object-icon{top:42%!important}
html body main .grid article .tile-personal-actions{gap:0!important}
html body main .grid article .tile-personal-actions .home-pin{transform:translateX(-6px)!important}
@media(max-width:640px){
html body main .grid article.blind-control-card>.card-heading .object-icon{top:46%!important}
html[data-phone-columns="1"] body main .grid article .tile-personal-actions{width:112px!important;gap:0!important}
html[data-phone-columns="1"] body main .grid article .tile-personal-actions .home-pin{transform:translateX(-10px)!important}
}

html body main .room-heading[hidden]{display:none!important}

#controlConnectionStatus{margin:12px 0;overflow-wrap:anywhere}
#controlConnectionStatus>summary{cursor:pointer;min-height:24px;line-height:1.5}
#controlConnectionStatus .waiting-controls{padding-left:20px;max-height:45vh;overflow:auto}
#controlConnectionStatus .waiting-controls li{margin:12px 0}
#controlConnectionStatus .waiting-controls :is(strong,span,code){display:block}
#controlConnectionStatus .waiting-controls code{font-size:.95em;user-select:text;-webkit-user-select:text}

#installerPanel section{margin:18px 0;padding:14px;border:1px solid var(--edge);border-radius:var(--tile-radius,20px)}
#installerPanel section label{margin:10px 0}
#installerPanel section input[type=checkbox]{width:22px;height:22px;min-height:22px;vertical-align:middle;margin-right:8px}
#installerPanel section small{display:block;margin:4px 0 12px;line-height:1.4}
#installerPanel section input[type=number]{max-width:150px}

.ctc-maintenance-dialog{box-sizing:border-box;width:min(640px,94vw);max-height:85dvh;overflow:auto;padding:26px;border:1px solid var(--edge,#888);border-radius:24px;background:var(--surface,#39444a);color:var(--text,#fff);box-shadow:0 16px 64px #0008}.ctc-maintenance-dialog::backdrop{background:#0008}.ctc-maintenance-dialog label{display:block;margin:18px 0}.ctc-maintenance-dialog input{display:block;width:100%;box-sizing:border-box;padding:12px;font-size:20px;margin-top:10px}.ctc-maintenance-dialog button{padding:12px 20px;margin:10px 10px 0 0;font:inherit}.ctc-maintenance-dialog li{overflow-wrap:anywhere}

.ctc-initialise-tools{position:sticky;top:0;z-index:3;padding:14px;border-radius:16px;background:var(--surface,#39444a);color:var(--text,#fff);border:1px solid var(--edge,#888)}.ctc-initialise-tools p{margin:8px 0;font-size:16px}.ctc-initialise-row{padding:16px 0;border-bottom:1px solid var(--edge,#888)}.ctc-initialise-row>label:first-child{display:flex;align-items:center;gap:10px}.ctc-initialise-row>input[type=number]{width:150px!important;max-width:100%;margin:8px 16px 8px 0}.ctc-initialise-row>small{display:block;font-size:14px;overflow-wrap:anywhere}html[data-toolbar-settings=true] #controlConnectionStatus{display:none!important}
/* Shared geometry for Home widgets, controls, grouped controls and directories. */
:root{--category-theme-surface:var(--surface);--category-theme-glass:var(--glass);--category-theme-active:var(--active)}
html body main :is(#content,#homePins,#favouriteGrid,.grid) article{border-radius:var(--tile-radius,32px)!important}
html body main #homeWidgets[data-layout],html body main #homeWidgets{gap:var(--tile-gap-y,12px) var(--tile-gap-x,12px)!important;margin-bottom:var(--tile-gap-y,12px)!important}
html body main #homePins{margin-top:var(--tile-gap-y,12px)!important;margin-bottom:var(--tile-gap-y,12px)!important}
html body main .grid .grid{gap:var(--tile-gap-y,12px) var(--tile-gap-x,12px)!important}
html[data-tile-material=glass] body main :is(.grid article,#rooms>.directory-tile,#categories>.directory-tile,#homeWidgets>.home-clock,#homeWidgets>.home-date-tile,#homeWidgets>.home-current-weather,#homeWidgets>.home-weather){background:linear-gradient(135deg,#ffffff35,#ffffff05 42%,#ffffff15),color-mix(in srgb,var(--surface) var(--glass-alpha,49%),transparent)!important;box-shadow:inset 0 2px 2px #ffffffb0,inset 0 -1px 2px #ffffff55,0 10px 30px #0002!important;backdrop-filter:blur(24px) saturate(170%)!important;-webkit-backdrop-filter:blur(24px) saturate(170%)!important}
html[data-tile-material=glass] body main .grid article[data-on=true]{background:linear-gradient(135deg,#ffffff30,#ffffff04 45%,#ffffff10),color-mix(in srgb,var(--active) var(--glass-alpha,49%),transparent)!important}
/* Top and bottom bars have independent modes; Settings keeps both accessible. */
html[data-top-bar=scroll]:not([data-toolbar-settings=true]) body .topbar{position:relative!important;top:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html[data-top-bar=fixed]:not([data-toolbar-settings=true]) body .topbar{position:fixed!important;inset:0 0 auto!important;z-index:45;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html[data-top-bar=hide]:not([data-toolbar-settings=true]) body .topbar{position:fixed!important;inset:0 0 auto!important;z-index:45;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-110%)!important;transition:opacity .18s,transform .18s,visibility .18s}
html[data-top-bar=hide][data-toolbar-open=true]:not([data-toolbar-settings=true]) body .topbar{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html[data-menu-bar=hide]:not([data-toolbar-settings=true]) body #bottomNav{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,calc(100% + 24px));transition:opacity .18s,transform .18s,visibility .18s}
html[data-menu-bar=hide][data-navigation-open=true]:not([data-toolbar-settings=true]) body #bottomNav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
html[data-menu-bar=hide]:not([data-navigation-open=true]):not([data-toolbar-settings=true]) body{padding-bottom:env(safe-area-inset-bottom)!important}
html[data-toolbar-settings=true] body .topbar{position:relative!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.directory-style-button{position:absolute!important;right:12px;top:12px;z-index:4;width:36px!important;height:36px!important;min-height:36px!important;padding:4px!important;border:1px solid var(--edge)!important;border-radius:50%!important;background:var(--surface)!important;aspect-ratio:1!important}
.directory-style-button svg{width:100%;height:100%;display:block}.directory-tile{position:relative;isolation:isolate}.directory-picture:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--surface) 55%,transparent),color-mix(in srgb,var(--surface) 75%,transparent)),var(--directory-image);background-size:cover;background-position:center;border-radius:inherit;pointer-events:none}
.directory-style-dialog{box-sizing:border-box;width:min(540px,94vw);max-height:85dvh;overflow:auto;border:1px solid var(--edge);border-radius:24px;padding:24px;background:var(--surface);color:var(--text)}.directory-style-dialog::backdrop{background:#0008}.directory-style-dialog label{display:block;margin:18px 0}.directory-style-dialog input[type=color]{width:70px;height:48px;padding:2px;vertical-align:middle}.directory-style-dialog button{font:inherit;padding:10px 16px;margin:6px;border-radius:20px}.directory-style-dialog input[type=file]{max-width:100%}
@media(prefers-reduced-motion:reduce){html body .topbar,html body #bottomNav{transition:none!important}}
html[data-tile-material=glass] body main #homeWidgets.has-artwork.clock-split:not([data-home-material=glass])>:is(.home-date-tile,.home-current-weather,.home-weather),html[data-tile-material=glass] body main #homeWidgets.has-artwork.clock-split[data-home-material=glass]>:is(.home-date-tile,.home-current-weather,.home-weather){background:linear-gradient(135deg,#ffffff35,#ffffff05 42%,#ffffff15),color-mix(in srgb,var(--surface) var(--glass-alpha,49%),transparent)!important;backdrop-filter:blur(24px) saturate(170%)!important;-webkit-backdrop-filter:blur(24px) saturate(170%)!important}
@media(min-width:768px) and (max-width:1400px) and (min-height:500px) and (orientation:landscape){html[data-top-bar=hide][data-tablet-rows="3"] body main :is(.grid,#content,#rooms,#categories){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
html[data-bar-animation=fade][data-top-bar=hide]:not([data-toolbar-settings=true]) body .topbar{transform:none!important}
html[data-bar-animation=fade][data-menu-bar=hide]:not([data-toolbar-settings=true]) body #bottomNav{transform:translate(-50%,0)!important}

/* Explicit appearance modes avoid inherited theme-variable cycles. */
html body main [data-custom-colour=true]{background:color-mix(in srgb,var(--tile-colour) 65%,var(--surface))!important}
html[data-tile-material=glass] body main [data-custom-colour=true]{background:linear-gradient(135deg,#ffffff35,#ffffff05 42%,#ffffff15),color-mix(in srgb,color-mix(in srgb,var(--tile-colour) 65%,var(--surface)) var(--glass-alpha,49%),transparent)!important}
.directory-style-button{opacity:.3;background:transparent!important;border-color:transparent!important;transition:opacity .2s ease}
.directory-style-button:hover,.directory-style-button:focus-visible{opacity:1}
.directory-style-dialog [hidden]{display:none!important}
/* A lower pill, with the Home end anchored during width changes. */
html body #bottomNav{--nav-height:78px;height:var(--nav-height)!important;box-sizing:border-box;padding:6px!important;border-radius:9999px!important;display:flex!important;gap:4px}
html body #bottomNav button{flex:1;min-width:0;min-height:0!important;height:100%;border-radius:9999px!important;font-size:15px!important;padding:2px 4px!important;gap:3px;overflow:hidden}
html body #bottomNav .nav-icon{width:40px!important;height:40px!important;flex-shrink:0}
html[data-menu-bar=shrink] body #bottomNav{left:12px!important;transform:none!important;width:calc(100% - 24px)!important;overflow:hidden;transition:width .45s cubic-bezier(.22,1,.36,1)!important}
html[data-menu-bar=shrink] body #bottomNav button{transition:flex .45s cubic-bezier(.22,1,.36,1),opacity .2s ease}
html[data-menu-bar=shrink]:not([data-toolbar-settings=true]):not([data-navigation-open=true]) body #bottomNav{width:var(--nav-height)!important}
html[data-menu-bar=shrink]:not([data-toolbar-settings=true]):not([data-navigation-open=true]) body #bottomNav button:not([data-page=home]){flex:0 0 0!important;width:0!important;padding:0!important;opacity:0;visibility:hidden;pointer-events:none}
html[data-menu-bar=shrink]:not([data-toolbar-settings=true]):not([data-navigation-open=true]) body #bottomNav{gap:0}
html[data-menu-bar=shrink]:not([data-toolbar-settings=true]):not([data-navigation-open=true]) body #bottomNav button[data-page=home]{font-size:0!important;gap:0;background:transparent!important}
@media(max-width:480px){html body #bottomNav{--nav-height:70px}html body #bottomNav button{font-size:12px!important}html body #bottomNav .nav-icon{width:34px!important;height:34px!important}}
@media(prefers-reduced-motion:reduce){html body #bottomNav,html body #bottomNav button{transition:none!important}}

html[data-top-bar=fixed]:not([data-toolbar-settings=true]) body:before{content:"";display:block;height:var(--title-bar-height,100px)}

/* Picture backgrounds share the tile material's alpha; contents remain readable. */
html body main .directory-picture:before{opacity:var(--tile-opacity,70%)}
html[data-tile-material=glass] body main .directory-picture:before{opacity:var(--glass-alpha,49%);background-image:linear-gradient(135deg,#ffffff35,#ffffff05 42%,#ffffff15),linear-gradient(color-mix(in srgb,var(--surface) 35%,transparent),color-mix(in srgb,var(--surface) 55%,transparent)),var(--directory-image);filter:saturate(1.15)}

.picture-library-dialog{width:min(960px,94vw);max-width:960px;max-height:90dvh;overflow:auto}.picture-library-dialog .artwork-gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.picture-library-dialog figure{margin:0;padding:8px}.picture-library-dialog figure img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.picture-library-dialog figcaption{font-size:14px;margin-top:8px}.picture-library-dialog button{margin:6px}.picture-library-dialog input[type=file]{max-width:100%}

html body main :is(#rooms,#categories)>.directory-picture.picture-name-only .directory-open{font-size:clamp(22px,3vw,40px)!important;font-weight:600;line-height:1.2;text-align:center;overflow-wrap:anywhere;text-wrap:balance}
html body main :is(#rooms,#categories)>.directory-picture.picture-name-only .directory-open .ctc-icon{display:none!important}
html body main :is(#rooms,#categories)>.directory-picture.picture-name-only .directory-open .location-context{font-size:clamp(11px,1.1vw,15px)!important;font-weight:400;line-height:1.4}

/* Picture clarity is independent of the glass tile border and optional tile transparency. */
html body main .directory-picture:before,html[data-tile-material=glass] body main .directory-picture:before{opacity:var(--picture-strength,1);background-image:linear-gradient(color-mix(in srgb,var(--surface) var(--picture-overlay,10%),transparent),color-mix(in srgb,var(--surface) var(--picture-overlay,10%),transparent)),var(--directory-image);filter:none}
html[data-picture-transparency=tile] body main .directory-picture:before{opacity:var(--tile-opacity,70%)}
html[data-picture-transparency=tile][data-tile-material=glass] body main .directory-picture:before{opacity:var(--glass-alpha,49%)}
html body main :is(#rooms,#categories)>.directory-picture.picture-name-only[data-picture-name-style=glass] .directory-open :is(.directory-picture-title,.picture-tile-name){color:#fff;background:linear-gradient(165deg,#fff 0%,#ffffffa3 36%,#ffffffed 49%,#ffffff7a 55%,#fff 90%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.55px #ffffff8c;filter:drop-shadow(0 2px 3px #0008);text-shadow:0 1px 0 #ffffff15}
html body main :is(#rooms,#categories)>.directory-picture .directory-open{text-shadow:0 2px 5px #0007}
.picture-library-dialog section label{display:block;margin:12px 0}.picture-library-dialog section input[type=range]{width:min(230px,45vw);vertical-align:middle;margin:0 12px}

.picture-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:-24px;z-index:2;background:var(--surface,#303b40);padding:12px 0;margin-bottom:12px}.picture-dialog-header h2{margin:0}.picture-dialog-header button{flex:none;margin-left:auto}.picture-pack-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.picture-library-dialog [role=status]:empty{display:none}

/* Home instruments fit both axes when landscape tiles are shorter than their width. */
html body main #homeWidgets>:is(.home-clock,.home-date-tile,.home-current-weather){--home-unit:1cqw;padding:calc(var(--home-unit)*5)!important;gap:calc(var(--home-unit)*2)!important;box-sizing:border-box}
html body main #homeWidgets.clock-split[data-clock-style=analog]>.home-clock>.clock-face{width:calc(var(--home-unit)*84)!important;height:calc(var(--home-unit)*84)!important;max-width:100%!important;max-height:100%!important;flex:none!important}
html body main #homeWidgets .date-number{font-size:clamp(24px,calc(var(--home-unit)*44),180px)!important}
html body main #homeWidgets .date-weekday{font-size:clamp(10px,calc(var(--home-unit)*10),33px)!important}
html body main #homeWidgets .date-remainder{font-size:clamp(9px,calc(var(--home-unit)*7),24px)!important}
html body main #homeWidgets>.home-current-weather>.current-weather-town{top:7%!important;font-size:clamp(9px,calc(var(--home-unit)*6),24px)!important}
html body main #homeWidgets>.home-current-weather>.current-weather-body{inset:25% 6% 8%!important;gap:calc(var(--home-unit)*1)!important;font-size:clamp(9px,calc(var(--home-unit)*6),24px)!important}
html body main #homeWidgets>.home-current-weather .weather-symbol{width:calc(var(--home-unit)*24)!important;height:calc(var(--home-unit)*24)!important;font-size:calc(var(--home-unit)*24)!important}
html body main #homeWidgets>.home-current-weather .weather-temperature{font-size:calc(var(--home-unit)*23)!important;line-height:1.1!important}
@media(max-width:900px) and (orientation:portrait){
html[data-phone-columns="3"] body main :is(#content,#homePins,#favouriteGrid,#rooms,#categories),html[data-phone-columns="3"] body main #content>section>.grid,html[data-phone-columns="3"] body main #homePins>.grid,html[data-phone-columns="3"] body main #homeWidgets[data-layout],html[data-phone-columns="3"] body main #homeWidgets[data-layout].clock-split{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html[data-phone-columns="3"] body main :is(#content,#homePins,#favouriteGrid) article{min-width:0!important}
html[data-phone-columns="3"] body main :is(#rooms,#categories) .directory-open{font-size:clamp(12px,2.6vw,20px)!important;padding:8px 6px 44px!important}
html[data-phone-columns="3"] body main :is(#rooms,#categories) .directory-open .ctc-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important}
html[data-phone-columns="3"] body main :is(#rooms,#categories) .location-context{font-size:clamp(9px,1.8vw,12px)!important}
html[data-phone-columns="3"] body main :is(#rooms,#categories) .directory-actions button{font-size:10px!important;min-height:26px!important;padding:3px!important}
html[data-phone-columns="3"] body main :is(#rooms,#categories)>.directory-picture.picture-name-only .directory-open{font-size:clamp(16px,3.4vw,28px)!important}
}
@media(max-width:480px) and (orientation:portrait){
html[data-phone-columns="3"] body main :is(#content,#homePins,#favouriteGrid) article:not(.aircon-tile):not(.sonos-card):not(.standard-group){--control-icon-size:24cqw;padding:6px!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .card-name h3{font-size:12px!important;line-height:1.15!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .card-name small{font-size:10px!important;line-height:1.15!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card)>.card-heading{height:30px!important;min-height:0!important;padding:0 2px!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card)>.card-heading>.object-icon,html[data-phone-columns="3"] body main .grid article .icon-toggle{top:44%!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card)>fieldset{bottom:23%!important;height:22px!important;min-height:0!important;left:4%!important;right:4%!important;width:92%!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .buttons{height:22px!important;min-height:0!important;gap:2px!important;display:flex!important;width:100%!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .buttons button{font-size:10px!important;min-width:0!important;min-height:22px!important;height:22px!important;padding:1px 3px!important;flex:1!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card)>.card-footer{height:20px!important;min-height:20px!important;bottom:2px!important;left:4px!important;right:4px!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card)>.card-footer>.reading{font-size:11px!important;left:auto!important;right:0!important;transform:none!important;width:calc(100% - 38px)!important;max-width:none!important;bottom:3px!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .tile-personal-actions{width:38px!important;left:0!important;bottom:0!important;height:20px!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .tile-personal-actions button{width:19px!important;min-width:19px!important;height:20px!important;min-height:20px!important;padding:0!important;transform:none!important}
html[data-phone-columns="3"] body main .grid article:not(.aircon-tile):not(.sonos-card) .tile-personal-actions .ctc-icon{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important}
html[data-phone-columns="3"] body main .grid article.blind-control-card{grid-column:1/-1!important}
}