/* Responsive containers use the visible viewport, including tablet preview zoom. */
body{width:var(--app-width,100%);container-type:inline-size;container-name:screen}
/* Allocate height as well as width. Panels remain native, interactive components. */
@container screen (min-width:741px) {
  #dashboard {
    --panel-padding:clamp(9px,calc(var(--app-height,100dvh) * 0.013000000000000001),16px);
    --section-gap:clamp(7px,calc(var(--app-height,100dvh) * 0.012),12px);
    --distribution-height:clamp(136px,calc(var(--app-height,100dvh) * 0.2),190px);
    --edge-padding:20px;
    height:max(620px,calc(var(--app-height,100dvh) * 1));min-height:0;
    grid-template-rows:clamp(90px,calc(var(--app-height,100dvh) * 0.15),148px) minmax(0,1fr) clamp(54px,calc(var(--app-height,100dvh) * 0.09),90px);
    gap:var(--section-gap);align-content:stretch;
  }
  .masthead {min-height:0;height:100%;padding:8px 0;gap:12px}
  .weather,.clock {min-height:0;height:100%;max-height:104px;padding:8px 12px}
  .brand h1 {font-size:clamp(23px,min(2.85cqw,calc(var(--app-height,100dvh) * 0.054000000000000006)),61px)}
  .brand p {font-size:clamp(11px,min(1.25cqw,calc(var(--app-height,100dvh) * 0.0225)),25px);margin:6px 0;letter-spacing:2px}
  .clock strong {font-size:clamp(26px,calc(var(--app-height,100dvh) * 0.04),42px)}
  .weather-sun .icon {width:clamp(32px,calc(var(--app-height,100dvh) * 0.055),58px);height:clamp(32px,calc(var(--app-height,100dvh) * 0.055),58px)}
  .left-column,.right-column,.middle-column {height:100%;min-height:0;gap:var(--section-gap);align-self:stretch}
  .panel {padding:var(--panel-padding);min-height:0}
  .heading {min-height:27px;margin-bottom:8px;gap:6px}
  .heading h2,.trends h2 {font-size:clamp(15px,min(1.45cqw,calc(var(--app-height,100dvh) * 0.025)),28px)}
  .heading .icon {width:clamp(20px,calc(var(--app-height,100dvh) * 0.027999999999999997),29px);height:clamp(20px,calc(var(--app-height,100dvh) * 0.027999999999999997),29px)}
  .badge {padding:5px 8px;font-size:clamp(10px,min(.92cqw,calc(var(--app-height,100dvh) * 0.017)),17px)}
  .summary {padding:clamp(6px,calc(var(--app-height,100dvh) * 0.01),12px) 0}
  .summary [data-icon] .icon {width:clamp(22px,calc(var(--app-height,100dvh) * 0.033),31px);height:clamp(22px,calc(var(--app-height,100dvh) * 0.033),31px);margin:0}
  .summary strong {font-size:clamp(19px,min(1.8cqw,calc(var(--app-height,100dvh) * 0.036000000000000004)),34px)}
  .summary>div>span:last-child {font-size:clamp(9px,min(.95cqw,calc(var(--app-height,100dvh) * 0.017)),16px)}
  .overview,.master {flex:none}
  .trends {flex:1;min-height:0;gap:8px}
  .trends .heading {flex:none}
  .chart-block,.left-column .chart-block {display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
  .chart-block h3 {flex:none;font-size:clamp(12px,min(.99cqw,calc(var(--app-height,100dvh) * 0.019)),18px);margin:0 0 4px}
  .chart-block>div {flex:1;min-height:0}
  .chart-block svg,.left-column .chart-block svg,.distribution-panel .distribution svg {height:100%;max-height:none;aspect-ratio:auto}
  .master .summary {padding:6px 0}
  .master .summary strong {font-size:clamp(18px,min(1.5cqw,calc(var(--app-height,100dvh) * 0.032)),30px)}
  .master-control {min-height:clamp(56px,calc(var(--app-height,100dvh) * 0.08),83px);padding:6px 7px;margin-top:7px;gap:6px}
  .control-icon .icon {width:clamp(24px,calc(var(--app-height,100dvh) * 0.038),38px);height:clamp(24px,calc(var(--app-height,100dvh) * 0.038),38px)}
  .master-control b {font-size:clamp(11px,min(1cqw,calc(var(--app-height,100dvh) * 0.019)),18px)}
  .master-control small {font-size:clamp(9px,min(.78cqw,calc(var(--app-height,100dvh) * 0.015)),14px);margin-top:3px}
  .details {display:flex;flex-direction:column;flex:1;min-height:0}
  .detail-heading {flex:none;padding-bottom:7px;min-height:34px}
  .detail-heading h2 {font-size:clamp(14px,min(1.4cqw,calc(var(--app-height,100dvh) * 0.025)),27px)}
  .arrow {height:clamp(29px,calc(var(--app-height,100dvh) * 0.04),38px)}
  .detail-body {display:flex;flex:1;min-height:0;margin-top:8px;gap:7px}
  .photo-frame {height:auto;min-width:42px;width:28%;align-self:stretch}
  .detail-metrics {display:flex;flex-direction:column;min-height:0}
  .detail-metrics>div {flex:1;min-height:27px;gap:5px}
  .detail-metrics .icon {width:clamp(16px,calc(var(--app-height,100dvh) * 0.024),22px);height:clamp(16px,calc(var(--app-height,100dvh) * 0.024),22px)}
  .metric-label {font-size:clamp(10px,min(.92cqw,calc(var(--app-height,100dvh) * 0.017)),16px)}
  .detail-metrics b {font-size:clamp(14px,min(1.1cqw,calc(var(--app-height,100dvh) * 0.022000000000000002)),21px)}
  .remaining {padding:4px 0;row-gap:3px}
  .remaining .progress {margin-left:22px;height:7px}
  .detail-actions {flex:none;margin-top:8px;gap:6px;grid-template-columns:minmax(0,1.5fr) minmax(64px,.75fr)}
  .detail-actions>div {display:block}
  .local-control {min-height:clamp(34px,calc(var(--app-height,100dvh) * 0.048),52px);margin-bottom:0;padding:3px 0;gap:5px}
  .local-control .icon {width:clamp(20px,calc(var(--app-height,100dvh) * 0.027999999999999997),28px);height:clamp(20px,calc(var(--app-height,100dvh) * 0.027999999999999997),28px)}
  .local-control b {font-size:clamp(10px,min(.92cqw,calc(var(--app-height,100dvh) * 0.017)),17px)}
  .camera {min-height:0;flex-direction:column;gap:5px;font-size:clamp(10px,min(.9cqw,calc(var(--app-height,100dvh) * 0.0165)),17px);white-space:normal;text-align:center}
  .camera svg {width:24px;height:24px}
  footer {min-height:0;height:100%;margin:0 calc(-1 * var(--edge-padding));padding:10px 3%;gap:14px}
  .header-landscape {inset:0 calc(-1 * var(--edge-padding))}
  .footer-motto {font-size:clamp(11px,min(1.2cqw,calc(var(--app-height,100dvh) * 0.02)),23px);letter-spacing:1px}
  .middle-column.has-distribution .distribution-panel {display:flex;flex-direction:column;justify-content:center;flex:1;min-height:var(--distribution-height);padding:var(--panel-padding)}
  .distribution-panel .chart-block {flex:1;min-height:0}
}
@container screen (min-width:1800px) {#dashboard {--edge-padding:30px}}
@container screen (min-width:741px) and (max-width:1440px) {#dashboard {--edge-padding:12px}}
@container screen (min-width:741px) and (max-width:1440px) {
  .trend-tabs {padding:2px}.trend-tabs button {min-height:28px;padding:4px 6px}
  .switch,.local-control .switch {width:44px;height:27px}
  .switch:after,.local-control .switch:after {width:21px;height:21px}
  .switch[aria-checked=false]:after,.local-control .switch[aria-checked=false]:after {transform:translateX(-17px)}
  .weather-extra {font-size:10px;line-height:18px}
  .distribution-panel h3 {font-size:12px;margin-bottom:4px}
}
@container screen (min-width:741px) and (max-width:980px) {
  .detail-actions {grid-template-columns:1fr}
  .detail-actions>div {display:grid;grid-template-columns:1fr}
  .camera {flex-direction:row;min-height:29px}
  .detail-heading h2 {font-size:13px}
  .detail-metrics b {font-size:13px}
  .metric-label {font-size:9px}
  .detail-body .photo-frame {width:24%;min-width:38px}
  .photo-status {font-size:7px;left:2px;right:2px;padding:3px 0}
}
@container screen (min-width:741px) {
  .compact-height .master .heading {margin-bottom:6px}
  .compact-height .master .summary {padding:4px 0}
  .compact-height .master-control {min-height:50px;margin-top:6px;padding:5px 6px}
  .compact-height .detail-metrics>div {min-height:24px}
  .compact-height .remaining {flex:none;min-height:36px;padding:3px 0}
  .compact-height .local-control {min-height:32px;padding:1px 0}
}