/* Device wrappers retain their data subscriptions; their cards share one grid. */
.dashboard-shell{max-width:1800px}
.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;align-items:stretch;margin:18px 0;container:devices / inline-size}
.device-grid>.environment-devices,.device-grid>.ctl-ai,.device-grid>.link-devices,.device-grid>.valves{display:contents}
.device-grid>[hidden]{display:none!important}
.device-grid .environment-card,.device-grid .ctl-card,.device-grid .link-card{min-width:0;margin:0;grid-column:auto;border-radius:12px;container-type:inline-size}
.device-grid .environment-card{padding:20px}
.device-grid .environment-card,.device-grid .ctl-card{display:flex;flex-direction:column}
.device-grid .environment-values{margin-bottom:16px}
.device-grid .air-health{margin-top:auto}
.device-grid .ctl-card{padding:20px;border:1px solid #cadce9;border-top:4px solid #527748;background:#fff;color:#153351;box-shadow:0 8px 24px rgba(15,52,76,.05)}
.ctl-card-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,43%);margin:0;padding:0;align-items:start}
.ctl-card-header>div{min-width:0;overflow-wrap:anywhere}
.ctl-card-header .ctl-eyebrow{display:block;margin-bottom:8px}
.ctl-card-header h3{font-size:23px}
.device-grid .ctl-frame{position:relative;flex:1 0 auto;aspect-ratio:4/3;min-height:180px;max-height:none}
.device-grid .ctl-frame img{position:absolute;inset:0}
.ctl-camera-status{display:flex;gap:7px;align-items:flex-start;justify-self:end;max-width:100%;padding:8px 10px;border-radius:8px;background:#eaf5ef;color:#226747}
.ctl-status-icon{display:flex;flex:0 0 19px;margin-top:1px}
.ctl-status-icon svg{width:19px;height:19px}
.ctl-status-copy{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
.ctl-status-copy strong{font-size:12px;line-height:1.5}
.ctl-card-header .ctl-status-copy small{font-size:10px;line-height:1.5;color:inherit}
.ctl-camera-status[data-state="busy"]{background:#eaf3ff;color:#155da2}
.ctl-camera-status[data-state="warning"]{background:#fff3da;color:#8a6100}
.ctl-camera-status[data-state="error"]{background:#fff0ed;color:#a3372c}
.ctl-status-icon[data-icon="loader"] svg{animation:ctl-status-spin 1.2s linear infinite}
.ctl-camera-status[data-state="busy"] .ctl-status-icon[data-icon="camera"]{animation:ctl-status-pulse 1.3s ease-in-out infinite}
@keyframes ctl-status-spin{to{transform:rotate(360deg)}}
@keyframes ctl-status-pulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.ctl-status-icon,.ctl-status-icon svg{animation:none!important}}
.device-grid .ctl-controls{gap:8px}
.device-grid .ctl-controls button{min-height:42px;padding:9px 12px}
.device-grid .link-main-grid{grid-template-columns:1fr}
.device-grid .link-sensor-panel{border-right:0;border-bottom:1px solid #dce6ef}
.device-grid .link-sensor-title{flex-wrap:wrap}
.device-grid .link-main-grid .link-sensor-grid{grid-template-columns:1fr}
.device-grid .link-main-grid .link-sensor{display:grid;grid-template-columns:88px minmax(0,1fr)}
.device-grid .link-main-grid .link-sensor>div{flex-direction:column;align-items:flex-start;justify-content:center;border-bottom:0;border-right:1px solid #dce7ef}
.device-grid .link-main-grid .link-sensor:last-child{grid-column:auto}
.device-grid .link-main-grid .link-valve-control{grid-template-columns:102px minmax(0,1fr)}
.device-grid .link-main-grid .link-valve-control .switch{width:auto;min-width:0}
.device-grid .link-main-grid .link-valve-control .runtime{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.device-grid .link-main-grid .link-valve-control .runtime>div,.device-grid .link-main-grid .runtime-safety{min-width:0;overflow-wrap:anywhere}
body[data-dashboard-mode="easy"] .device-grid .link-card.no-output{display:block!important}
body[data-dashboard-mode="easy"] .device-grid .link-card.no-output .link-sensor-panel{display:flex!important}

/* Adapt to card width, including when browser zoom changes the column count. */
@container devices (min-width:778px){
  .device-grid .link-card{grid-column:span 2}
}
@container(min-width:740px){
  .device-grid .link-main-grid .link-control-slot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .device-grid .link-main-grid .link-sensor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .device-grid .link-main-grid .link-sensor{display:block}
  .device-grid .link-main-grid .link-sensor>div{flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid #dce7ef}
}
@container(max-width:620px){
  .environment-values{grid-template-columns:1fr;gap:10px}
  .environment-values>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);grid-template-rows:auto auto 1fr;gap:5px 12px;padding:14px;align-items:start}
  .environment-values span{grid-column:1;margin:0;font-size:12px}
  .air-reading{grid-column:1;justify-content:flex-start;gap:5px}
  .environment-values strong{font-size:30px}
  .air-unit{font-size:12px}
  .air-reading-hint{grid-column:1;margin:3px 0 0;font-size:10px}
  .environment-trend{grid-column:2;grid-row:1/4;margin:0;padding:0;border:0;align-self:center}
  .environment-values .air-measurement-error,.environment-values .air-measurement-warming{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .environment-values .air-measurement-error strong,.environment-values .air-measurement-warming strong{font-size:18px}
  .air-health{grid-template-columns:1fr;padding:12px;gap:10px}
  .air-health>div{justify-content:space-between;gap:8px}
  .air-updated{grid-column:auto}
  .environment-head h3{font-size:24px}
  .environment-location{margin-bottom:14px}
  .link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .link-grid div:nth-child(2){border-right:0}
  .link-grid div:nth-child(-n+2){border-bottom:1px solid #e2eaf1}
}
@container(max-width:340px){
  .environment-values>div,.environment-values .air-measurement-error,.environment-values .air-measurement-warming{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto}
  .air-reading{grid-column:2;grid-row:1;justify-content:flex-end}
  .air-reading-hint{grid-column:1/-1;grid-row:2}
  .environment-trend{grid-column:1/-1;grid-row:3;padding-top:10px;margin-top:5px;border-top:1px solid #e3ebf2}
  .air-measurement-error .air-reading,.air-measurement-warming .air-reading{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .air-measurement-error .air-reading-hint,.air-measurement-warming .air-reading-hint{grid-row:3}
  .air-measurement-error .environment-trend,.air-measurement-warming .environment-trend{grid-row:4}
}
@media(max-width:540px){.device-grid{gap:14px}.device-grid .environment-card,.device-grid .ctl-card{padding:16px}}