/* Home uses one responsive composition: illustration, reported readings and
   cameras. The shared Lighting system's house styles stay independent. */
.phone-app main.next-home { max-width:1440px; padding:12px 20px 20px; }
.next-home { --home-load:#59647c; --home-solar:#ffb800; --home-energy:#18a575; --home-water:#087bff; --home-climate:#ff4b2b; --home-spa:#6d5cff; --home-surface:#edf3f7; position:relative; }
:root[data-theme="command"] .next-home { --home-load:#bdc9df; --home-solar:#ffc52c; --home-energy:#42d6a4; --home-water:#48a4ff; --home-climate:#ff785a; --home-spa:#a69aff; --home-surface:var(--bg); }
.next-home .nx-home-actions { display:flex; align-items:center; gap:2px; }
.next-home .nx-home-settings { display:grid; place-items:center; width:44px; height:44px; color:var(--dim); border-radius:50%; }
.next-home .nx-home-settings .ic { width:25px; height:25px; }
.next-home .nx-home-actions .nx-icon { width:44px; height:44px; border:0; background:transparent; }
.next-home .nx-home-settings:hover,.next-home .nx-home-actions .nx-icon:hover { background:color-mix(in srgb,var(--panel) 65%,transparent); }
.next-home #nxContent { display:block; min-width:0; }
.next-home .nx-home-dashboard { display:grid; grid-template-areas:"house" "readings" "cameras"; gap:22px; min-width:0; }
.next-home .nx-home-top { display:contents; }
.next-home .nx-house { grid-area:house; min-width:0; margin:0; border:0; border-radius:14px; background:#d0e6fa; box-shadow:none; }
.next-home .nx-house img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 48%; }
.next-home .nx-house figcaption { padding:8px 12px; background:var(--panel); color:var(--muted); font-size:11px; line-height:1.4; }
.next-home .nx-home-groups { grid-area:readings; display:grid; gap:20px; min-width:0; }
.next-home .nx-home-groups>.nx-card { min-width:0; margin:0; padding:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.next-home .nx-home-groups h2 { margin:0 0 9px; font-size:19px; font-weight:750; line-height:1.3; letter-spacing:-.5px; }
.next-home .nx-home-groups .nx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.next-home .nx-home-metric {
  --metric-accent:var(--dim);
  --metric-tint:var(--panel);
  display:flex; align-items:center; gap:12px; min-width:0; min-height:79px; padding:12px;
  border:1px solid transparent; border-radius:9px;
  background:var(--metric-tint); color:var(--ink); text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.next-home .nx-home-metric:hover { border-color:color-mix(in srgb,var(--metric-accent) 38%,var(--line)); }
.next-home .nx-home-metric:focus-visible,.next-home .nx-camera:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.next-home .nx-metric-icon { display:grid; flex:0 0 38px; place-items:center; width:38px; height:42px; color:var(--metric-accent); }
.next-home .nx-metric-icon .ic { width:34px; height:36px; stroke-width:2; }
.next-home .nx-metric-icon .nx-symbol { stroke-width:2.3; }
.next-home .nx-metric-copy { display:block; min-width:0; flex:1; }
.next-home .nx-metric-label { display:block; margin:0 0 3px; color:var(--dim); font-size:12px; font-weight:500; line-height:1.25; }
.next-home .nx-metric-value { display:block; color:var(--ink); font-size:22px; font-weight:750; line-height:1.2; letter-spacing:-.55px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.next-home .nx-metric-subline { display:block; margin-top:4px; color:var(--dim); font-size:11px; line-height:1.35; }
.next-home .nx-home-metric[data-system="load"] { --metric-accent:var(--home-load); }
.next-home .nx-home-metric[data-system="solar"],.next-home .nx-home-metric[data-system="lighting"] { --metric-accent:var(--home-solar); }
.next-home .nx-home-metric[data-system="grid"],.next-home .nx-home-metric[data-system="battery"],.next-home .nx-home-metric[data-system="charging"] { --metric-accent:var(--home-energy); }
.next-home .nx-home-metric[data-system="water"],.next-home .nx-home-metric[data-system="pool"] { --metric-accent:var(--home-water); }
.next-home .nx-home-metric[data-system="climate"] { --metric-accent:var(--home-climate); }
.next-home .nx-home-metric[data-system="hotTub"] { --metric-accent:var(--home-spa); }
.next-home .nx-home-metric[data-system="garage"],.next-home .nx-home-metric[data-system="gate"] { --metric-accent:#7381a0; }
.next-home .nx-home-metric[data-available="false"] .nx-metric-value { color:var(--dim); }
.next-home .nx-home-charging { grid-column:1/-1; }
.next-home .nx-home-charging .nx-metric-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 10px; }
.next-home .nx-home-charging .nx-metric-label { margin:0; }
.next-home .nx-home-charging .nx-metric-value { grid-column:2; grid-row:1/3; }
.next-home .nx-home-charging .nx-metric-subline { margin:0; }
.next-home .nx-battery-track { display:block; height:3px; margin-top:7px; overflow:hidden; border-radius:3px; background:color-mix(in srgb,var(--metric-accent) 15%,var(--panel)); }
.next-home .nx-battery-fill { display:block; width:clamp(0%,var(--level,0%),100%); height:100%; border-radius:inherit; background:var(--metric-accent); }
.next-home .nx-home-groups p.nx-muted,.next-home .nx-home-charging-note { margin:8px 1px 0; color:var(--muted); font-size:11px; line-height:1.4; }
.next-home .nx-home-charging-note { display:flex; align-items:center; min-height:32px; text-decoration:none; }
.next-home .nx-home-charging-note:hover { text-decoration:underline; }
.next-home .nx-home-cameras { grid-area:cameras; min-width:0; }
.next-home .nx-section-header { margin:0 0 10px; gap:10px; }
.next-home .nx-section-header h2 { font-size:19px; font-weight:750; letter-spacing:-.5px; }
.next-home .nx-section-header a { display:flex; align-items:center; min-height:32px; flex:none; font-size:12px; }
.next-home .nx-home-cameras>.nx-row { min-height:46px; margin:0 0 9px; padding:8px 11px; border:1px solid var(--line2); border-radius:10px; background:var(--panel); font-size:12px; }
.next-home .nx-home-cameras>.nx-row small { margin-top:2px; font-size:11px; }
.next-home .nx-cameras { grid-template-columns:minmax(0,1fr); gap:12px; }
.next-home .nx-camera { min-width:0; border:1px solid var(--line2); border-radius:11px; background:var(--panel); }
.next-home .nx-camera img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.next-home .nx-camera>span { padding:9px; font-size:12px; font-weight:600; line-height:1.35; }
.next-home .nx-camera small { margin-top:3px; font-size:10px; font-weight:400; line-height:1.4; }
.next-home .nx-camera .nx-empty { padding:12px; border:0; border-radius:0; font-size:11px; }
.next-home .nx-home-cameras>.nx-muted { margin:8px 0 0; font-size:11px; line-height:1.4; }

/* Only fresh, confirmed positive activity receives a quiet animated cue. */
@media(prefers-reduced-motion:no-preference) {
  .next-home .nx-home-metric[data-active="true"][data-system="solar"] .nx-metric-icon .ic { animation:nx-home-sun 30s linear infinite; }
  .next-home .nx-home-metric[data-active="true"][data-system="water"] .nx-metric-icon .ic { animation:nx-home-water 3.6s ease-in-out infinite; }
  .next-home .nx-home-metric[data-active="true"]:is([data-system="load"],[data-system="battery"],[data-system="charging"],[data-system="lighting"]) .nx-metric-icon .ic { animation:nx-home-breathe 4s ease-in-out infinite; }
  .next-home .nx-home-metric[data-active="true"][data-system="climate"] .nx-metric-icon .ic { animation:nx-home-air 4s ease-in-out infinite; }
}
@keyframes nx-home-sun { to { transform:rotate(360deg); } }
@keyframes nx-home-water { 0%,100% { transform:translateY(-1px); opacity:.8; } 50% { transform:translateY(1px); opacity:1; } }
@keyframes nx-home-breathe { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@keyframes nx-home-air { 0%,100% { transform:translateX(-1px); opacity:.7; } 50% { transform:translateX(1px); opacity:1; } }

@media(max-width:759px) {
  .phone-app:has(.next-home)>.phone-top { display:none; }
  #page:has(.next-home) { padding-top:0; background:#edf3f7; scrollbar-width:none; }
  #page:has(.next-home)::-webkit-scrollbar { display:none; }
  :root[data-theme="command"] #page:has(.next-home) { background:var(--bg); }
  #page:has(.next-home)>.phone-footer { display:none; }
  .phone-app main.next-home { max-width:600px; padding:0 0 24px; background:var(--home-surface); }
  .next-home .next-heading { position:absolute; z-index:2; top:8px; left:18px; right:10px; margin:0; color:#0c1836; }
  .phone-app main.next-home .next-heading h1 { font-size:36px; font-weight:780; letter-spacing:-1.4px; line-height:1.2; }
  .next-home .nx-home-actions .nx-icon,.next-home .nx-home-settings { color:#53627b; }
  .next-home .nx-status { position:absolute; z-index:2; top:56px; left:19px; right:16px; margin:0; font-size:11px; line-height:1.4; color:#485a7b; }
  .next-home .nx-status.error { color:#923b24; }
  .next-home .nx-home-dashboard { gap:0; }
  .next-home .nx-house { padding-top:38px; border-radius:0; background:#c6e0f6; }
  .next-home .nx-house::before { content:""; position:absolute; z-index:1; top:0; left:0; right:0; height:110px; background:linear-gradient(#e1eff9,#d5e9fa 28%,transparent); pointer-events:none; }
  .next-home .nx-house img { max-height:none; aspect-ratio:4/3; object-fit:contain; }
  .next-home .nx-house figcaption { padding:5px 16px 7px; background:var(--home-surface); font-size:10px; }
  .next-home .nx-home-groups { padding:6px 14px 20px; gap:17px; }
  .next-home .nx-home-groups>.nx-card { padding:0; }
  .next-home .nx-home-cameras { padding:0 14px; }
  .next-home .nx-home-cameras .nx-section-header a,.next-home .nx-home-charging-note { min-height:44px; }
  /* Keep the Lighting system's smaller illustrative overview. */
  .next-lighting .nx-house { margin:0 0 11px; border:0; border-radius:10px; background:transparent; box-shadow:none; }
  .next-lighting .nx-house img { width:100%; height:180px; aspect-ratio:auto; object-fit:cover; object-position:50% 44%; }
  .next-lighting .nx-house figcaption { padding:5px 2px 0; background:transparent; color:var(--muted); font-size:10px; line-height:1.35; }
}
@media(max-width:359px) {
  .phone-app main.next-home .next-heading h1 { font-size:32px; }
  .next-home .nx-home-groups,.next-home .nx-home-cameras { padding-inline:10px; }
  .next-home .nx-home-metric { gap:7px; padding:10px 8px; }
  .next-home .nx-metric-icon { flex-basis:30px; width:30px; height:36px; }
  .next-home .nx-metric-icon .ic { width:29px; height:31px; }
  .next-home .nx-metric-value { font-size:18px; }
}
@media(min-width:760px) {
  #page:has(.next-home)>.phone-footer { display:none; }
  .next-home .next-heading { margin-bottom:0; }
  .next-home .next-heading .eyebrow { display:none; }
  .next-home .next-heading h1 { margin:0; font-size:28px; }
  .next-home .nx-status { margin:5px 0 14px; font-size:12px; line-height:1.4; }
  .next-home .nx-home-dashboard { grid-template-areas:"house cameras" "readings readings"; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; gap:20px; }
  .next-home .nx-house img { aspect-ratio:1.5; object-position:50% 52%; }
  .next-home .nx-home-groups { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .next-home .nx-home-groups>.nx-card { padding:13px; border:0; border-radius:12px; background:var(--home-surface); }
  .next-home .nx-home-metric { gap:8px; min-height:76px; padding:10px; }
  .next-home .nx-metric-icon { flex-basis:32px; width:32px; height:35px; }
  .next-home .nx-metric-icon .ic { width:30px; height:32px; }
  .next-home .nx-metric-value { font-size:19px; }
  .next-home .nx-home-charging { min-height:57px; }
  .next-home .nx-home-charging .nx-metric-value { font-size:17px; }
  .next-home .nx-home-access .nx-grid { grid-template-columns:1fr; }
  .next-home .nx-home-access .nx-home-metric { min-height:52px; padding-block:8px; }
  .next-home .nx-home-access .nx-metric-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .next-home .nx-home-access .nx-metric-label { margin:0; }
  .next-home .nx-home-access .nx-metric-value { font-size:17px; }
  /* One camera per row also keeps the tablet overview compact. */
  .next-home .nx-cameras { gap:8px; }
  .next-home .nx-camera { display:grid; grid-template-columns:128px minmax(0,1fr); align-items:center; }
  .next-home .nx-camera img { height:72px; aspect-ratio:auto; }
  .next-home .nx-camera>span { min-width:0; padding:8px 12px; overflow-wrap:anywhere; }
}
/* Narrow portrait tablets have room to stack icons above their readings. */
@media(min-width:760px) and (max-width:999px) {
  .next-home .nx-home-dashboard { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
  .next-home .nx-house { align-self:stretch; display:flex; flex-direction:column; }
  .next-home .nx-house img { flex:1; min-height:210px; aspect-ratio:auto; object-fit:cover; }
  .next-home .nx-home-groups { gap:12px; }
  .next-home .nx-home-metric { flex-direction:column; align-items:flex-start; gap:8px; min-height:108px; }
  .next-home .nx-home-metric .nx-metric-icon { flex:0 0 31px; height:31px; }
  .next-home .nx-metric-value { font-size:18px; }
  .next-home .nx-home-charging { flex-direction:row; min-height:68px; }
  .next-home .nx-home-charging .nx-metric-copy { display:block; }
  .next-home .nx-home-charging .nx-metric-label { margin-bottom:3px; }
  .next-home .nx-home-charging .nx-metric-subline { margin-top:3px; }
  .next-home .nx-home-access .nx-home-metric { flex-direction:row; min-height:70px; }
  .next-home .nx-home-access .nx-metric-copy { display:block; }
  .next-home .nx-home-access .nx-metric-label { margin-bottom:3px; }
  .next-home .nx-camera>span { padding:6px 8px; }
}
/* Fit tablet landscape without hiding a camera or shrinking the readings.
   Natural content sizing preserves scrolling for zoom and short windows. */
@media(min-width:1000px) and (max-width:1399px) and (min-height:720px) {
  .phone-app main.next-home { padding:8px 20px 0; }
  .next-home .next-heading h1 { font-size:26px; }
  .next-home .nx-status { margin:3px 0 10px; font-size:11px; }
  .next-home .nx-home-dashboard { gap:8px 20px; }
  .next-home .nx-house img { height:clamp(245px,36dvh,315px); aspect-ratio:auto; object-fit:cover; }
  .next-home .nx-house figcaption { padding:6px 11px; font-size:10px; }
  .next-home .nx-home-groups { gap:16px; }
  .next-home .nx-home-groups>.nx-card { padding-top:12px; }
  .next-home .nx-home-groups h2 { margin-bottom:7px; font-size:15px; }
  .next-home .nx-home-groups .nx-grid { gap:6px; }
  .next-home .nx-home-metric { min-height:68px; padding:9px; }
  .next-home .nx-metric-value { font-size:18px; }
  .next-home .nx-home-charging { min-height:51px; }
  .next-home .nx-home-charging .nx-metric-value { font-size:16px; }
  .next-home .nx-home-access .nx-home-metric { min-height:45px; padding-block:6px; }
  .next-home .nx-home-groups p.nx-muted { margin-top:7px; font-size:10px; }
  .next-home .nx-section-header { margin-bottom:6px; }
  .next-home .nx-home-cameras>.nx-row { min-height:40px; margin-bottom:7px; padding:5px 9px; }
  .next-home .nx-home-cameras>.nx-row small { display:inline; margin-left:8px; }
  .next-home .nx-cameras { gap:6px; }
  .next-home .nx-camera { grid-template-columns:100px minmax(0,1fr); }
  .next-home .nx-camera img { height:56.25px; }
  .next-home .nx-camera>span { padding:7px 8px; font-size:11px; }
  .next-home .nx-camera small { margin-top:2px; font-size:10px; }
  .next-home .nx-home-cameras>.nx-muted { margin-top:7px; font-size:10px; }
}
@media(min-width:1400px) {
  .phone-app:has(.next-home) .phone-top-inner { max-width:1280px; padding-inline:28px; }
  .phone-app main.next-home { max-width:1280px; padding:16px 28px 20px; }
  .next-home .nx-home-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .next-home .nx-house img { height:clamp(280px,35.5dvh,360px); aspect-ratio:auto; object-fit:cover; }
  .next-home .nx-home-groups { gap:24px; }
  .next-home .nx-home-groups>.nx-card { padding-top:20px; }
  .next-home .nx-home-metric { min-height:85px; padding:14px; gap:12px; }
  .next-home .nx-metric-icon { width:37px; flex-basis:37px; height:40px; }
  .next-home .nx-metric-value { font-size:22px; }
  .next-home .nx-home-charging { min-height:65px; }
  .next-home .nx-home-access .nx-home-metric { min-height:60px; }
  .next-home .nx-camera { grid-template-columns:120px minmax(0,1fr); }
  .next-home .nx-camera img { height:67.5px; }
}
@media(min-width:1400px) and (max-height:950px) {
  .phone-app main.next-home { padding-top:8px; padding-bottom:0; }
  .next-home .nx-home-dashboard { gap:12px 28px; }
  .next-home .nx-home-metric { min-height:76px; padding:12px; }
  .next-home .nx-home-charging { min-height:57px; }
  .next-home .nx-home-groups>.nx-card { padding-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .next-home .nx-home-metric,.next-home .nx-metric-icon .ic { animation:none; transition:none; }
}