/* Short Frosted tiles: minimum 2:1. Identity first; details expand without clipping. */
.modular-grid.grid-in-motion{background-size:var(--grid-step) var(--grid-row-step)}
.modular-card .light-swipe{display:none}
.modular-card[data-shallow=true][data-kind=device]>.widget-content,
.modular-card[data-shallow=true][data-kind=device]>.room-card-body{
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
 align-content:center;gap:3px;padding:12px 27px 12px 68px!important;overflow:hidden;
}
.modular-card[data-shallow=true][data-kind=device] .widget-device-heading,
.modular-card[data-shallow=true][data-kind=device] .widget-device-heading>div{display:contents}
.modular-card[data-shallow=true][data-kind=device] .widget-device-heading h3{
 grid-column:1;grid-row:1;align-self:end;font-size:12px;line-height:1.25;letter-spacing:0;
 -webkit-line-clamp:2;position:relative;z-index:2;pointer-events:none;overflow-wrap:anywhere;
}
.modular-card[data-shallow=true][data-kind=device] .widget-symbol{
 position:absolute;left:11px;top:50%;transform:translateY(-50%);width:46px;height:46px;
 min-width:46px;min-height:46px;padding:8px;border-radius:14px;z-index:4;
 background:var(--fg-control-hover);color:var(--fg-text);border:1px solid var(--fg-line-strong);
}
.modular-card[data-shallow=true][data-kind=device] .widget-symbol svg{width:30px;height:30px;stroke-width:1.8}
.modular-card[data-shallow=true][data-kind=device].is-on .widget-symbol{color:var(--fg-accent);background:rgba(var(--fg-accent-rgb),.17);border-color:rgba(var(--fg-accent-rgb),.34)}
.modular-card[data-shallow=true][data-kind=device] .widget-reading{
 display:flex;grid-column:1;grid-row:2;align-self:start;align-items:baseline;gap:3px;margin:0;
 position:relative;z-index:2;pointer-events:none;min-height:16px;color:var(--fg-muted);
}
.modular-card[data-shallow=true][data-kind=device] .widget-reading strong{font-size:13px;line-height:1.2;letter-spacing:0;font-weight:500;white-space:nowrap}
.modular-card[data-shallow=true][data-kind=device] .widget-reading small{font-size:10px}
.modular-card[data-shallow=true][data-kind=device] :is(.tile-controls,.quick-controls,.widget-values,.shutter-graphic,.widget-device-heading p),
.modular-card[data-shallow=true][data-kind=device] :is(.widget-content,.room-card-body)>.text-button{display:none}
.modular-card[data-shallow=true][data-kind=device] .pending-message:not([hidden]){position:absolute;left:66px;right:25px;bottom:2px;font-size:8px;line-height:1;z-index:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.modular-card[data-shallow=true][data-kind=device] .has-light-swipe>.widget-reading{visibility:hidden}
.modular-card[data-shallow=true][data-kind=device] .light-swipe{display:block;position:absolute;inset:0;z-index:1;border-radius:inherit;--light-level:0%}
.light-swipe::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(var(--fg-accent-rgb),.25),rgba(var(--fg-accent-rgb),.10));clip-path:inset(0 calc(100% - var(--light-level)) 0 0);pointer-events:none}
.light-swipe::after{content:'';position:absolute;left:clamp(0px,var(--light-level),calc(100% - 2px));top:8px;bottom:8px;width:2px;background:rgba(var(--fg-accent-rgb),.34);border-radius:2px;pointer-events:none}
.light-swipe.is-pending::before{opacity:.65}
.light-swipe:focus-within{outline:2px solid var(--fg-accent);outline-offset:-3px}
.light-swipe>.live-setting{display:contents}
.light-swipe .live-setting-head{position:absolute;left:68px;right:27px;bottom:12px;display:flex;pointer-events:none;line-height:1.2}
.light-swipe .live-setting-head>span{display:none}
.light-swipe .live-setting-head>strong{font-size:13px;font-weight:500;color:var(--fg-text)}
.light-swipe.is-draft .live-setting-head>strong::before{content:'↔ ';color:var(--fg-accent)}
.light-swipe .live-actual{display:none!important}
.light-swipe.has-error .live-setting-head>strong::after{content:' !';color:var(--fg-danger)}
.modular-card .light-swipe input[type=range]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:.01;cursor:ew-resize;touch-action:none;z-index:1}
.modular-card .light-swipe input:disabled{cursor:default}
.modular-card[data-shallow=true][data-tight=true][data-kind=device]>.widget-content,
.modular-card[data-shallow=true][data-tight=true][data-kind=device]>.room-card-body{padding:9px 19px 9px 57px!important;gap:2px}
.modular-card[data-shallow=true][data-tight=true][data-kind=device] .widget-symbol{left:8px;width:40px;height:40px;min-width:40px;min-height:40px;padding:6px;border-radius:12px}
.modular-card[data-shallow=true][data-tight=true][data-kind=device] .widget-symbol svg{width:28px;height:28px}
.modular-card[data-shallow=true][data-tight=true][data-kind=device] .widget-device-heading h3{font-size:11px}
.modular-card[data-shallow=true][data-tight=true] .light-swipe .live-setting-head{left:57px;right:19px;bottom:9px}
.modular-card[data-shallow=true][data-tight=true] .tile-expand{width:23px;height:23px;right:1px;top:2px;padding:5px}
/* Larger tiles retain the standard controls and shutter visualization. */
.modular-card[data-tile=column] .widget-reading{margin:0}
.modular-card[data-tile=column] .shutter-window{height:90px}
.modular-card[data-tile=column] .widget-device-heading h3{-webkit-line-clamp:2}
/* Compact non-device widgets retain an explicit route to their full content. */
.modular-card[data-shallow=true][data-kind=clock]>.widget-content{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;gap:2px 10px;padding:11px!important}
.modular-card[data-shallow=true][data-kind=clock] .widget-content>svg{grid-column:1;grid-row:1/3;width:29px;height:29px}
.modular-card[data-shallow=true][data-kind=clock] .widget-clock{grid-column:2;grid-row:1;margin:0;align-self:end;font-size:28px}
.modular-card[data-shallow=true][data-kind=clock] .muted{grid-column:2;grid-row:2;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;align-self:start}
.modular-card[data-shallow=true][data-kind=room] .widget-room-link{flex-direction:row;gap:10px;justify-content:flex-start;font-size:12px;padding-right:16px}
.modular-card[data-shallow=true][data-kind=room] .widget-room-link svg{width:34px;height:34px;flex-shrink:0}
.modular-card[data-shallow=true][data-kind=weather]>.widget-content{gap:2px;padding:9px 12px!important}
.modular-card[data-shallow=true][data-kind=weather] .weather-heading h3{font-size:10px;line-height:1.2}
.modular-card[data-shallow=true][data-kind=weather] .weather-summary{flex-wrap:nowrap;gap:8px;overflow:hidden}
.modular-card[data-shallow=true][data-kind=weather] .weather-summary>strong{font-size:25px!important}
.modular-card[data-shallow=true][data-kind=weather] .weather-summary>svg{width:26px;height:26px;flex-shrink:0}
.modular-card[data-shallow=true][data-kind=weather] .weather-summary>small,.modular-card[data-shallow=true][data-kind=weather] .weather-source{display:none}
.modular-card[data-shallow=true] .premium-title{font-size:11px;line-height:1.2}
.modular-card[data-shallow=true] .premium-body+.fine{display:none}
.modular-card[data-shallow=true] .suggestion-device{padding:3px;margin:0;min-height:32px}
.modular-card[data-shallow=true] .suggestion-device:nth-child(n+2){display:none}
.modular-card[data-shallow=true][data-kind=scene] .scene-heading h3{font-size:11px}
.modular-card[data-shallow=true][data-kind=scene] .scene-heading .primary{min-height:28px;padding:4px 8px;font-size:10px}
.modular-card[data-shallow=true][data-kind=scene] .scene-status{display:none}
.modular-card[data-shallow=true] :is(.widget-toolbar,.room-card-toolbar){left:3px;bottom:3px;padding:2px;gap:0}
.modular-card[data-shallow=true] :is(.widget-toolbar,.room-card-toolbar) button{width:25px;min-width:25px;height:25px;min-height:25px;padding:5px}
.modular-card[data-shallow=true] :is(.widget-resize,.room-card-resize){bottom:3px;right:3px;width:28px;height:28px;min-width:28px;min-height:28px;padding:6px}
.modular-card[data-shallow=true] .tile-size{top:3px;left:5px;font-size:9px;padding:2px 4px}
.modular-card[data-shallow=true].layout-editing>.room-card-body,
.dashboard-editing .modular-card[data-shallow=true]>.widget-content{opacity:.52}

.modular-card :is(.tile-controls,.room-card-body>.quick-controls){flex-shrink:0}

.modular-card[data-shallow=true][data-command-status=confirmed] .pending-message{display:none}

/* Keep native page zoom available; 16px fields prevent focus zoom on iOS. */
@media(pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}
#room-view{touch-action:pan-y pinch-zoom}
.room-card-toolbar .room-icon-choice{width:44px;min-width:44px;padding:4px;font-size:12px;pointer-events:auto}
.control-dialog.dimmer-only{width:400px;max-width:calc(100vw - 24px);min-height:0;padding:20px}
.dimmer-only .sheet-grid{display:block;margin-top:10px}
.dimmer-only .control-unit{padding:12px;min-height:0}
.dimmer-only .control-unit>h3,.dimmer-only .sensor-values,.dimmer-only .control-value{display:none}
.dimmer-only .quick-controls{display:grid;gap:10px;min-height:0}
.dimmer-only .live-setting{padding:12px;margin:0;min-height:0}
.dimmer-only .quick-switch{min-height:40px}
.dimmer-only .raw-details{margin-top:10px;font-size:12px}
.dimmer-only .pending-message:empty{display:none}
@media(max-width:700px){.control-dialog.dimmer-only{left:12px;right:12px;width:auto;max-width:none}}
#room-view{min-height:calc(100dvh - 170px)}

body{overflow-x:clip}
#room-view.room-swiping{will-change:transform;user-select:none}
.settings-connections{margin-bottom:18px}

.room-device .widget-symbol{-webkit-touch-callout:none;user-select:none;touch-action:none}
.room-grid-tools:has(#room-layout-edit[hidden]){display:none}

.room-card-toolbar.room-toolbar-hidden{display:none!important}
.room-device.layout-editing{animation:room-wiggle .27s ease-in-out infinite alternate;transform-origin:center}
.room-device.layout-editing:nth-child(even){animation-delay:-.13s}
.room-device.layout-editing .room-card-body{pointer-events:none}
@keyframes room-wiggle{from{rotate:-.65deg}to{rotate:.65deg}}
.room-card-settings{width:380px;display:flex;flex-direction:column;gap:16px}
.room-card-settings:not([open]){display:none}
.room-card-settings label{display:grid;gap:8px;font-size:14px}
.room-card-settings input,.room-card-settings select{width:100%;font-size:16px;min-height:44px}
.room-carousel-host{position:relative;overflow-x:clip}
.room-neighbor{position:absolute;pointer-events:none;z-index:1;min-height:300px}
.room-device{ -webkit-touch-callout:none;user-select:none }
@media(prefers-reduced-motion:reduce){.room-device.layout-editing{animation:none;outline:1px dashed var(--fg-accent)}}

/* Room navigation owns the card surface; brightness owns a visible bottom strip. */
.room-device .light-swipe{pointer-events:none}
.room-device.modular-card .light-swipe input[type=range]{inset:auto 0 0;height:26px;pointer-events:auto}
.room-device .light-swipe::after{left:10px;right:10px;top:auto;bottom:8px;width:auto;height:3px;background:linear-gradient(to right,rgba(var(--fg-accent-rgb),.85) var(--light-level),rgba(var(--fg-accent-rgb),.18) var(--light-level))}
.room-device .light-swipe .live-setting-head{bottom:28px!important}
.room-neighbor .room-grid-tools{display:none}

/* Carousel panels must never run the general view-in transform animation. */
#room-view,.room-neighbor{animation:none!important}
/* Keep card shadows visible below the last row throughout the swipe.
   Horizontal clipping belongs to the carousel host, not individual panels. */
.room-neighbor{overflow:visible;contain:layout}
/* The card body is a scroll container: touch-action on the room alone is insufficient. */
#room-view .room-device:not(.layout-editing),
#room-view .room-device:not(.layout-editing) .room-card-body,
#room-view .room-device:not(.layout-editing) button{touch-action:pan-y pinch-zoom}
.room-device.modular-card[data-shallow=true][data-kind=device]>.room-card-body.has-light-swipe{padding-top:8px!important;padding-bottom:32px!important;grid-template-rows:minmax(0,1fr) 16px;gap:2px}
.room-device.modular-card[data-shallow=true] .has-light-swipe .widget-device-heading h3{align-self:end;-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block}
.room-device.modular-card[data-shallow=true] .has-light-swipe>.widget-reading{visibility:hidden;height:16px}
.room-device.modular-card .light-swipe .live-setting-head{bottom:32px!important;height:16px;line-height:16px;white-space:nowrap}
.room-device.modular-card .light-swipe input[type=range]{height:28px;touch-action:none}

/* One editing language for rooms, dashboard and comfort. */
.dashboard-editing .modular-card{animation:room-wiggle .27s ease-in-out infinite alternate;transform-origin:center}
.dashboard-editing .modular-card:nth-child(even){animation-delay:-.13s}
.dashboard-editing .widget-toolbar{display:none!important}
.tile-settings-dialog{width:380px;max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto;padding:20px}
.tile-settings-dialog .dashboard-inspector{position:static;width:auto;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.tile-settings-dialog .dashboard-inspector>p.fine{display:none}
.device-picker{width:480px;max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto;padding:20px}
.device-picker-list{display:grid;gap:8px;margin:14px 0;max-height:55dvh;overflow:auto}
.device-picker-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 10px;align-items:center;text-align:left;padding:12px;border:1px solid var(--fg-line);border-radius:12px;background:var(--fg-surface);color:var(--fg-text)}
.device-picker-row svg{grid-row:1/3;width:28px;height:28px}.device-picker-row small{grid-column:2;color:var(--fg-muted)}
.room-add{flex-shrink:0}.room-page-heading{justify-content:space-between}
.dashboard-widget:not(.layout-editing)>.widget-content{touch-action:pan-y pinch-zoom}
@media(prefers-reduced-motion:reduce){.dashboard-editing .modular-card{animation:none;outline:1px dashed var(--fg-accent)}}

/* Quiet add controls; keep a 44px touch target and keyboard focus. */
button.room-add,#dashboard-edit,#comfort-dashboard-edit{
 background:transparent;border-color:transparent;box-shadow:none;color:var(--fg-muted);
 min-width:44px;min-height:44px;padding:8px 10px;border-radius:12px;
 transition:color .15s,background-color .15s;
}
button.room-add,#dashboard-edit[aria-label="Dodaj kafelek"],#comfort-dashboard-edit[aria-label="Dodaj kafelek"]{
 width:44px;height:44px;font-size:26px;font-weight:300;line-height:1;
}
@media(hover:hover){button.room-add:hover,#dashboard-edit:hover,#comfort-dashboard-edit:hover{background:rgba(var(--fg-accent-rgb),.06);color:var(--fg-text);box-shadow:none}}
button.room-add:active,#dashboard-edit:active,#comfort-dashboard-edit:active{background:rgba(var(--fg-accent-rgb),.10);color:var(--fg-text)}
button.room-add:focus-visible,#dashboard-edit:focus-visible,#comfort-dashboard-edit:focus-visible{outline:2px solid var(--fg-accent);outline-offset:2px}