/* Carry Home's visual language into each system, without changing its controls. */
:root { --sys-solar:#ffb800; --sys-water:#087bff; --sys-climate:#ff4b2b; --sys-green:#18a575; --sys-purple:#6d5cff; --sys-house:#59647c; }
:root[data-theme="command"] { --sys-solar:#ffc52c; --sys-water:#48a4ff; --sys-climate:#ff785a; --sys-green:#42d6a4; --sys-purple:#a69aff; --sys-house:#bdc9df; }
:root[data-theme="daylight"] .phone-app:has(main:not(.next-home)) {
  --bg:#edf3f7; --panel:#fff; --panel2:#f4f7fb; --inset:#e7eef6;
  --ink:#0c1836; --dim:#485a73; --muted:#62738d; --line:#dce5ef; --line2:#e8eef5;
  --water:#087bff; --irr:#18a575; --irr-dim:#128b66; --water-dim:#0872de;
  --solar:#ffb800; --load:#59647c; --grid:#18a575; --batt:#18a575; --battery:#18a575;
}
.phone-app:has(main:not(.next-home)) .phone-top { background:var(--bg); }
.phone-app main:not(.next-home) .nx-card,
.phone-app main:not(.next-home) .card { border:1px solid transparent; border-radius:12px; box-shadow:none; }
.phone-app main:not(.next-home) :is(.nx-card h2,.card-label,.water-section-heading h2) { color:var(--ink); font-weight:750; letter-spacing:-.35px; }
.phone-app main:not(.next-home) h1 { font-weight:750; }
.nx-title-wrap,.nx-section-title { display:flex; align-items:center; gap:12px; min-width:0; }
.nx-title-wrap h1 { margin:0!important; }
.nx-system-symbol { --symbol-color:var(--sys-house); display:inline-grid; place-items:center; flex:0 0 36px; width:36px; height:38px; color:var(--symbol-color); vertical-align:middle; }
.nx-system-symbol>.ic { display:block; width:32px; height:34px; stroke-width:2; }
.nx-system-symbol>.nx-symbol { stroke-width:2.3; }
.nx-system-symbol[data-symbol="solar"],.nx-system-symbol[data-symbol="lighting"],.nx-system-symbol[data-symbol="star"] { --symbol-color:var(--sys-solar); }
.nx-system-symbol[data-symbol="water"],.nx-system-symbol[data-symbol="pool"] { --symbol-color:var(--sys-water); }
.nx-system-symbol[data-symbol="climate"] { --symbol-color:var(--sys-climate); }
.nx-system-symbol:is([data-symbol="hotTub"],[data-symbol="camera"],[data-symbol="party"],[data-symbol="moon"]) { --symbol-color:var(--sys-purple); }
.nx-system-symbol:is([data-symbol="leaf"],[data-symbol="battery"],[data-symbol="car"],[data-symbol="welcome"]) { --symbol-color:var(--sys-green); }
.nx-system-symbol[data-symbol="dinner"] { --symbol-color:#e47e24; }
.nx-system-symbol[data-symbol="tv"] { --symbol-color:var(--sys-water); }
.nx-title-wrap>.nx-system-symbol { flex-basis:40px; width:40px; height:42px; }
.nx-title-wrap>.nx-system-symbol>.ic { width:36px; height:38px; }
.next-page:not(.next-home) .next-heading { margin-bottom:5px; }
.next-page:not(.next-home) .next-heading .eyebrow { display:none; }
.next-page:not(.next-home) .nx-status { font-size:11px; line-height:1.5; margin:6px 0 15px; }
.phone-app main:not(.next-home) .nx-icon { border-color:transparent; background:var(--panel); width:40px; height:40px; }
.phone-app main:not(.next-home) .nx-metric { background:var(--panel2); border-color:transparent; border-radius:9px; }
.phone-app main:not(.next-home) .nx-metric strong { color:var(--ink); font-size:24px; font-weight:750; }
.phone-app main:not(.next-home) .nx-button { border-radius:9px; font-weight:650; }
.phone-app main:not(.next-home) :is(.nx-button,.nx-chip):enabled:hover { border-color:var(--accent); }
/* A disabled control remains readable. Its actual disabled attribute and
   page-level read-only/source notices remain the authority for availability. */
.phone-app main:not(.next-home) :is(button:disabled,input:disabled,select:disabled) { opacity:1; cursor:not-allowed; }
.phone-app main:not(.next-home) button:disabled { color:var(--muted); border-color:var(--line); }
.phone-app main:not(.next-home) button:disabled[aria-pressed="true"] { color:var(--dim); border-color:var(--line); }
.phone-app main:not(.next-home) .nx-empty { background:var(--panel2); border:0; border-radius:9px; color:var(--dim); padding:15px; }
.phone-app main:not(.next-home) :is(a,button,input,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* Controls: one clear Lighting group, with bright, readable scene tiles. */
/* The tab already names Controls. Keep its heading and routine status available
   to assistive technology while reserving visible status for access/source issues. */
.next-controls>.next-heading,
.next-controls>.nx-status:not(.is-notice) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.phone-app main.next-controls { padding-top:6px; }
.phone-app main.next-controls .nx-controls-lighting { background:var(--panel); border:2px solid color-mix(in srgb,var(--sys-solar) 48%,var(--line)); border-radius:16px; padding:12px; }
.next-controls .nx-card-title { color:var(--ink); font-size:21px; font-weight:750; margin:0 0 10px; }
.next-controls .nx-control-group { border:0; border-radius:0; background:transparent; padding:0; margin:0; }
.next-controls .nx-control-group+.nx-control-group { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
.next-controls .nx-control-group:first-of-type>.nx-control-note { display:none; }
.next-controls .nx-control-group h3 { font-size:15px; font-weight:750; margin-bottom:8px; }
.next-controls .nx-controls-lighting :is(.nx-global-action,.nx-occasion,.nx-room:not(.on)) { background:var(--panel2); }
.next-controls .nx-controls-lighting .nx-room button[data-act] { min-height:72px; }
.next-controls .nx-controls-lighting .nx-control-note { margin-bottom:0; }
.next-controls .nx-control-group h3>.ic { color:var(--sys-solar); width:24px; height:24px; }
.nx-moods { gap:8px; margin:10px 0; }
.nx-moods .nx-chip { min-height:86px; border-color:transparent; font-size:12px; font-weight:650; gap:9px; }
.nx-moods .nx-chip>.ic { width:32px; height:34px; color:var(--sys-solar); }
.nx-moods .mood-very>.ic { color:#b59250; }
.nx-moods .mood-mid>.ic { color:#efac00; }
.nx-moods .nx-chip[aria-pressed="true"] { box-shadow:inset 0 0 0 1px var(--accent); background:var(--panel); }
.phone-app .nx-moods .nx-chip[aria-pressed="true"]:disabled { border-color:var(--accent); color:var(--ink); }
.nx-moods .nx-chip[aria-pressed="true"]>.ic { color:var(--sys-solar); }
.nx-power-actions .nx-button { min-height:44px; background:var(--panel); border-color:transparent; }
.nx-power-actions .nx-button[data-level="100"]>.ic { color:var(--sys-solar); stroke-width:2.2; }
.nx-power-actions .nx-button[data-level="0"]>.ic { color:var(--sys-house); stroke-width:2.2; }
.nx-occasions { gap:8px; }
.nx-occasions .nx-occasion { min-height:78px; padding:11px 5px; flex-direction:column; justify-content:center; gap:6px; text-align:center; font-size:12px; font-weight:600; border-color:transparent; }
.nx-occasion .nx-system-symbol { flex-basis:29px; width:29px; height:29px; }
.nx-occasion .nx-system-symbol>.ic { width:27px; height:29px; }
.nx-room { background:var(--panel); border-color:transparent; border-radius:10px; }
.nx-room.on { background:color-mix(in srgb,var(--sys-solar) 10%,var(--panel)); border-color:color-mix(in srgb,var(--sys-solar) 35%,var(--panel)); color:var(--ink); }
.nx-room button[data-act] { min-height:78px; padding:10px; gap:9px; }
.nx-room b { color:var(--ink); font-size:13px; font-weight:700; }
.nx-room small { font-size:11px; color:var(--dim); }
.nx-room .nx-system-symbol { flex-basis:28px; width:28px; height:31px; }
.nx-room .nx-system-symbol>.ic { width:27px; height:29px; }
.nx-room.on .nx-system-symbol { color:var(--sys-solar); }
.nx-system-heading { color:var(--ink); font-size:20px; font-weight:750; }
.next-controls .nx-control-system { padding:15px; }
.nx-zone { background:var(--panel2); border:0; border-radius:10px; padding:11px; }
.nx-zone .ic { color:var(--sys-green); }
.nx-zone strong { color:var(--ink); font-weight:700; }
.nx-zone .nx-button:disabled { background:var(--panel); }
.next-lighting .nx-house { border-radius:12px; }
.next-lighting .nx-house img { object-position:50% 48%; }
.next-lighting .nx-card h2 { font-size:18px; margin-bottom:11px; }
.next-lighting .nx-moods .nx-chip { min-height:76px; flex-direction:column; }
.next-lighting .nx-moods .ic { width:28px; height:30px; }
.next-lighting .nx-house figcaption { font-size:11px; }
.next-loads .nx-light { border-radius:10px; margin-bottom:8px; border:0; padding:14px; }
.next-loads .nx-light-top label { font-size:14px; font-weight:650; }
.next-loads .nx-load-heading { color:var(--ink); font-size:16px; letter-spacing:-.2px; }
.nx-toggle[aria-pressed="true"]:disabled { background:var(--accent-soft); color:var(--accent)!important; }

/* Systems is a directory of distinct, tappable cards. */
.next-systems #nxContent>.nx-card:first-child { padding:0; border:0; background:transparent; }
.next-systems .nx-search { margin:0 0 14px; background:var(--panel); border-color:transparent; border-radius:10px; min-height:48px; }
.next-systems .nx-systems-list { display:grid; grid-template-columns:1fr; gap:9px; }
.nx-system-link { display:flex; align-items:center; gap:15px; min-height:84px; padding:15px 17px; color:var(--ink); background:var(--panel); border:1px solid transparent; border-radius:10px; text-decoration:none; }
.nx-system-link:hover { border-color:var(--line); }
.nx-system-link>span:nth-child(2) { flex:1; min-width:0; }
.nx-system-link b { display:block; font-size:17px; font-weight:750; letter-spacing:-.3px; }
.nx-system-link small { display:block; margin-top:5px; color:var(--dim); font-size:12px; line-height:1.4; }
.next-systems #nxContent>.nx-card+ .nx-card { margin-top:20px; }

/* History: stronger heading icons and clearer series, keeping the smooth paths. */
.next-history .nx-history-card { padding:14px; margin-bottom:12px; border:0; border-radius:12px; }
.next-history .nx-chart-head { min-height:36px; margin-bottom:5px; }
.next-history .nx-chart-head b { font-size:18px; gap:9px; }
.next-history .nx-chart-head strong { font-size:22px; font-weight:750; }
.next-history .nx-chart-head small { font-size:11px; }
.next-history .nx-chart-head .nx-system-symbol { flex-basis:29px; width:29px; height:32px; color:var(--symbol-color); }
.next-history .nx-chart-head .ic { width:27px; height:29px; color:inherit; }
.next-history .nx-chart-legend { font-size:10px; margin-bottom:7px; gap:12px; }
.nx-energy-history { --accent:var(--sys-house); }
.nx-water-history { --accent:var(--sys-water); }
.nx-camera-history { --accent:var(--sys-purple); }
.nx-chart-legend .solar { background:#efac00; }
.nx-chart-legend .grid { background:#18a575; }
.next-history .nx-water-totals { margin-top:6px; padding-top:9px; }
.next-history .nx-water-totals>span { font-size:11px; }
.next-history .nx-water-totals b { font-size:17px; font-weight:750; }
.next-history .nx-history-filters .nx-chip { min-height:40px; border-color:transparent; font-size:12px; }
.next-history .nx-history-filters .nx-chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.next-history .nx-scrubber { min-height:52px; margin-bottom:6px; }
.next-history .nx-scrubber input[type="range"] { padding:0; border:0; background:transparent; }
.next-history .nx-date-field,.next-history .nx-time-control .nx-bar .nx-button { min-height:44px; border-color:transparent; }
.next-history .nx-moment { border:0; padding:12px 14px; }
.next-history .nx-chart .grid { stroke:var(--line2); }
.next-history .nx-chart .nx-grid-vertical { opacity:.4; }
.next-history .nx-chart path[stroke-width="2"] { stroke-width:2.5; }
.next-climate .nx-thermostat { border:0; background:var(--panel2); padding:20px 8px; }
.nx-section-title .nx-system-symbol { width:30px; flex-basis:30px; height:34px; }
.nx-section-title .nx-system-symbol>.ic { width:28px; height:31px; }
.nx-device-state .nx-system-symbol { width:90px; height:90px; margin-bottom:16px; }
.nx-device-state .nx-system-symbol>.ic { width:84px; height:84px; margin:0; stroke:currentColor; }
.next-pool .nx-card h2 { margin-bottom:14px; }

/* Retained Energy, Water and Camera tools use the same surfaces and typography. */
.phone-app .solar .card { padding:18px; }
.phone-app .solar .journey-heading { margin-bottom:0; }
.phone-app .solar .demo-banner { padding:10px 12px; margin:0 0 12px; font-size:11px; line-height:1.5; }
.phone-app .solar .card-label { display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; font-size:18px; margin-bottom:14px; }
.phone-app .solar .card-label .card-label-aux { flex-basis:100%; font-size:11px; font-weight:400; line-height:1.5; }
.phone-app .solar .card-label .nx-system-symbol { flex-basis:28px; width:28px; height:30px; }
.phone-app .solar .card-label .ic { width:27px; height:29px; }
.phone-app .solar .fnode-box { fill:var(--panel2); stroke:transparent; }
.phone-app .solar .fhub-box { fill:var(--panel); stroke:var(--line); }
.phone-app .solar .fnode-label { fill:var(--dim); font:600 13px var(--sans); letter-spacing:0; text-transform:none; }
.phone-app .solar .fnode-val { fill:var(--ink); font:750 24px var(--sans); }
.phone-app .solar .fnode-sub { font:10px var(--sans); letter-spacing:0; text-transform:none; fill:var(--dim); }
.phone-app .solar [data-flow-system="solar"] .fnode-icon { color:var(--sys-solar); }
.phone-app .solar [data-flow-system="battery"] .fnode-icon { color:var(--sys-green); }
.phone-app .solar [data-flow-system="systems"] .fnode-icon { color:var(--sys-green); }
.phone-app .solar [data-flow-system="dashboard"] .fnode-icon { color:var(--sys-house); }
.phone-app .solar .fpath.c-solar.on { stroke:var(--sys-solar); }
.phone-app .solar .fpath.c-grid.on,.phone-app .solar .fpath.c-batt.on { stroke:var(--sys-green); }
.phone-app .solar .fpath.c-load.on { stroke:var(--sys-house); }
.phone-app .solar .pf-meters { gap:8px; }
.phone-app .solar .pf-meter { background:var(--panel2); border-radius:9px; padding:10px; }
.phone-app .solar :is(.pf-meter-label,.batt-stat-label) { font-size:12px; text-transform:none; letter-spacing:0; }
.phone-app .solar .pf-meter-value { color:var(--ink); font-size:22px; font-weight:750; }
.phone-app .solar .batt-soc { font-weight:750; color:var(--ink); }
.phone-app .solar .batt-fill { background:var(--sys-green); }
.phone-app .solar .batt-fill.low { background:var(--warn); }
.phone-app .solar .batt-stats { gap:8px; }
.phone-app .solar .batt-stat { padding:10px; border-radius:8px; background:var(--panel2); }
.phone-app .solar .batt-state { text-transform:none; letter-spacing:0; font-size:12px; }
.phone-app .solar #charging .nx-row { background:var(--panel2); padding:12px; margin:7px 0; border:0; border-radius:9px; }
.phone-app .water-current { gap:8px; border:0; padding:0; margin-bottom:20px; grid-template-columns:1fr 1fr; }
.phone-app .water-current>div { padding:16px; border:0; background:var(--panel); border-radius:11px; }
.phone-app .water-current-flow { grid-column:1/-1; display:flex; align-items:center; gap:15px; }
.phone-app .water-current-flow>.nx-system-symbol { flex-basis:40px; width:40px; height:44px; }
.phone-app .water-current-flow>.nx-system-symbol .ic { width:38px; height:42px; }
.phone-app .water-current-average>span { font-size:13px; line-height:1.4; color:var(--dim); }
.phone-app .water-current-average>div { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:7px; }
.phone-app .water-current-average>div>span { font-size:13px; color:var(--dim); }
.phone-app .water-current strong { font-size:32px; font-weight:750; }
.phone-app .water-history { padding:17px; background:var(--panel); border-radius:12px; }
.phone-app .water-chart-bar { background:var(--sys-water); opacity:.8; border-radius:4px 4px 0 0; }
.phone-app .water-history-summary strong { font-weight:750; }
.phone-app .water-destinations { border:0; padding:4px; background:var(--inset); }
.phone-app .water-destinations a[aria-current="page"] { color:var(--accent); box-shadow:none; }
.phone-app .water-experience .water-more-details { margin-top:18px; }
.phone-app .garden-report { background:var(--panel); padding:16px; border-radius:12px; }
.phone-app .garden-report .irrigation-summary-line { gap:15px; }
.phone-app .garden-report .irrigation-summary-line strong { font-size:23px; }
.phone-app .irrigation .control-grid { gap:10px; border:0; background:transparent; border-radius:0; }
.phone-app .irrigation .ctl-zone { border:0; background:var(--panel); border-radius:12px; }
.phone-app .irrigation .ctl-zone.running { border-left:3px solid var(--sys-green); }
.phone-app .irrigation .ctl-zone-name { font-weight:750; }
.phone-app .irrigation .ctl-btn:disabled { background:var(--panel2); color:var(--muted); }
.phone-app .cx-page .cx-heading { margin:3px 0 20px; }
.phone-app .cx-page .cx-heading h1 { font-size:32px; font-weight:750; }
.phone-app .cx-page .cx-heading p { font-size:12px; margin-top:8px; }
.phone-app .cx-page .cx-modes { border:0; background:var(--inset); }
.phone-app .cx-page .cx-modes button[aria-pressed="true"] { color:var(--accent); box-shadow:none; }
.phone-app .cx-page .cx-event { border:0; background:var(--panel); border-radius:11px; margin:9px 0; overflow:hidden; }
.phone-app .cx-page .cx-event-button { padding:13px 12px; }
.phone-app .cx-page .cx-event-tile { color:var(--sys-purple); border:0; background:color-mix(in srgb,var(--sys-purple) 8%,var(--panel)); }
.phone-app .cx-page .cx-event-description strong { font-weight:750; }
.phone-app .cx-page .cx-camera { border-color:transparent; border-radius:12px; }

@media(min-width:760px) {
  .next-systems .nx-systems-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .next-controls #nxContent { gap:24px; align-items:start; }
  .phone-app main.next-controls .nx-controls-lighting { padding:16px; }
  .next-controls .nx-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .next-history #nxContent { max-width:860px; }
  .phone-app main.solar>[data-read-only-notice] { grid-column:1/-1; margin:0; }
  .phone-app .solar .demo-banner { margin:0; }
}
@media(max-width:759px) {
  .phone-app main:not(.next-home) { padding-inline:14px; }
  .phone-app .journey-heading { margin:4px 0 12px; }
  .phone-app .journey-heading h1 { font-size:32px; letter-spacing:-1px; }
  .next-lighting>.next-heading h1 { font-size:32px!important; }
  .phone-app .solar .card { padding:16px; margin-bottom:13px; }
  .phone-app .solar .pf-meters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-app .solar .batt-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .phone-app .solar .card-sflow { padding-inline:12px; }
  .phone-app .water-experience .water-date-controls { grid-template-columns:44px minmax(0,1fr) 44px; }
  .phone-app .water-experience #waterToday { grid-column:1/-1; min-height:36px; }
  .phone-app .water-history { padding:15px 12px; }
  .phone-app .water-current>div { padding:14px 12px; }
}
@media(max-width:359px) {
  .nx-room button[data-act] { padding:9px 6px; gap:5px; }
  .nx-room b { font-size:12px; }
  .nx-room .nx-system-symbol { flex-basis:24px; width:24px; }
  .nx-occasions .nx-occasion { font-size:11px; min-height:76px; }
  .next-history .nx-history-card { padding:12px 10px; }
  .next-history .nx-chart-head strong { font-size:19px; }
  .next-history .nx-chart-head b { font-size:16px; gap:6px; }
  .next-history .nx-history-filters .nx-chip { font-size:10px; }
  .phone-app .water-current strong { font-size:28px; }
}

/* Keep passive connection diagnostics out of the everyday views. Values still
   use explicit missing states; command dialogs, results and health details stay. */
.phone-app .next-page>.nx-status,
.phone-app .nx-report-note,
.phone-app .nx-home-charging-note,
.phone-app .connection-state span,
.phone-app #camNotice,
.phone-app #camFeedFreshness,
.phone-app #nowMeta,
.phone-app #waterReportTime,
.phone-app #waterCoverage,
.phone-app #waterHistoryMessage,
.phone-app #waterHistorySource,
.phone-app #irrigationReportTime,
.phone-app #irrigationStatus:not([data-feedback="true"]),
.phone-app .solar #flowMeta,
.phone-app .solar #panelsMeta { display:none!important; }
.phone-app .solar .card-anomaly:not(.normal):not(.attention) { display:none; }
.phone-app .nx-reading-placeholder { min-height:54px; display:grid; place-items:center; font-size:24px; }
.phone-app .next-page:not(.next-home)>.next-heading { margin-bottom:14px; }