@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.4 → 5.0.0-beta.40

package/homebridge-ui/public/app.css

@@ -107,6 +107,11 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  accent-color: var(--accent);
+}
+
+::selection {
+  background: color-mix(in srgb, var(--accent) 28%, transparent);
 }
 
 .shell {
@@ -263,7 +268,8 @@ h2 {
   color: var(--muted);
 }
 
-.diagnostics-panel select {
+.diagnostics-panel select,
+.wizard-setting select {
   width: 100%;
   min-height: 44px;
   margin-top: 8px;
@@ -274,7 +280,9 @@ h2 {
   padding: 8px 12px;
 }
 
-.diagnostics-actions {
+.diagnostics-actions:not([hidden]) {
+  display: flex;
+  gap: 8px;
   margin-top: 4px;
 }
 
@@ -290,42 +298,25 @@ h2 {
   padding: clamp(16px, 4vw, 24px);
 }
 
-.diagnostics-question,
-.diagnostics-direct,
-.diagnostics-frequency,
-.diagnostics-match {
+.diagnostics-question {
   display: grid;
   gap: 16px;
 }
 
-.diagnostics-question > strong,
-.diagnostics-frequency > strong,
-.diagnostics-match > strong {
-  font-size: clamp(17px, 4vw, 21px);
-  line-height: 1.35;
-  letter-spacing: -0.01em;
-  text-wrap: balance;
-}
-
-.diagnostics-match p {
-  margin-bottom: 0;
-}
-
-.diagnostics-choice-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+.diagnostics-question > h3,
+.diagnostics-guidance > h3 {
+  margin: 0;
 }
 
-.diagnostics-choice-actions button {
-  width: 100%;
-  padding-inline: 16px;
+.diagnostics-guidance > h3 {
+  font-size: inherit;
 }
 
-button.diagnostics-secondary-action {
-  border: 1px solid var(--line-strong);
-  background: transparent;
-  color: var(--ink);
+.diagnostics-question > h3 {
+  font-size: clamp(17px, 4vw, 21px);
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
 }
 
 button.diagnostics-quiet-action {
@@ -366,103 +357,83 @@ button.diagnostics-quiet-action {
   text-transform: uppercase;
 }
 
-.diagnostics-actions button {
-  width: 100%;
+.diagnostics-actions [data-diagnostics-reproduction] {
+  flex: 1 1 auto;
 }
 
+.diagnostics-result h2,
 .diagnostics-result p {
   margin-bottom: 0;
 }
 
-.diagnostics-privacy {
+.diagnostics-note {
+  margin-bottom: 0;
   color: var(--muted);
   font-size: 12px;
 }
 
-.diagnostics-result {
+.diagnostics-result[open] {
   display: grid;
+  max-width: 560px;
   gap: 8px;
 }
 
 /*
- * The two steps of the handoff share one shape, so the sequence reads as a sequence: same height, same
- * gap, same badge, and a colour each. The download is a button because it acts here; the report is an
- * anchor because it navigates to GitHub.
+ * The download is a button because it acts here; the two ways to report are anchors because they navigate to
+ * GitHub, side by side because either one finishes the handoff.
  */
 .diagnostics-result [data-diagnostics-export],
-.diagnostics-result [data-diagnostics-issue] {
+.diagnostics-handoff a {
   display: flex;
-  width: 100%;
   min-height: 44px;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  margin-top: 8px;
   border-radius: var(--radius-control);
+  padding: 8px 12px;
   font-weight: 600;
+  text-align: center;
   text-decoration: none;
 }
 
 /*
- * The step number is generated content rather than an element, because translation assigns `textContent`
- * on the control and would remove any child it had.
+ * The dialog sits in the top layer, which adds nothing to the page height Homebridge sizes its iframe by, so the
+ * stage keeps room for it rather than leaving it to scroll inside a sliver.
  */
-.diagnostics-result [data-diagnostics-export]::before,
-.diagnostics-result [data-diagnostics-issue]::before {
-  display: inline-flex;
-  width: 22px;
-  height: 22px;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
+.diagnostics-stage:has(> .diagnostics-result[open]) {
+  min-height: 320px;
 }
 
-/* Each badge inverts its own control's pair, so the digit keeps its contrast on either background. */
-.diagnostics-result [data-diagnostics-export]::before {
-  background: var(--on-accent);
-  color: var(--accent);
-  content: '1';
-}
-
-/*
- * Step two is the same progression as step one and is filled differently rather than coloured
- * differently: a success colour would claim the task is complete, and colour alone must not be what
- * tells two controls apart.
- */
-.diagnostics-result [data-diagnostics-issue] {
-  border: 1px solid var(--accent);
-  background: transparent;
-  color: var(--accent-ink);
+.diagnostics-handoff:not([hidden]) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 8px;
 }
 
-.diagnostics-result [data-diagnostics-issue]::before {
+.diagnostics-handoff [data-diagnostics-issue] {
   background: var(--accent);
   color: var(--on-accent);
-  content: '2';
 }
 
-/* Without an archive there is nothing to attach, so the step is present and not yet a link. */
-.diagnostics-result a[data-diagnostics-issue][aria-disabled='true'] {
-  border-color: var(--line);
-  color: var(--ink-disabled);
-  cursor: default;
+.diagnostics-handoff [data-diagnostics-existing-issue] {
+  border: 1px solid var(--line-strong);
+  color: var(--ink);
+}
+
+.diagnostics-result [data-diagnostics-result-status]:empty {
+  display: none;
 }
 
-.diagnostics-result a[data-diagnostics-issue][aria-disabled='true']::before {
-  background: var(--ink-disabled);
-  color: var(--panel);
+.diagnostics-result [data-diagnostics-download-again],
+.diagnostics-result [data-diagnostics-start-another] {
+  justify-self: center;
 }
 
 /*
- * The opening screen: every area at once, three to a row.
+ * The opening screen: every area at once, three to a row, each label over its one-line summary.
  *
- * Each tile carries a Material Symbols outline glyph (Apache-2.0) as a mask rather than an element, because
- * translation assigns `textContent` on the tile and would remove any child it had. A mask also lets the glyph
- * take the tile's own colour in every state instead of being baked into an image. The data URI is inline, so
+ * Each tile carries a Material Symbols outline glyph (Apache-2.0) as a mask rather than an element. A mask lets
+ * the glyph take the tile's own colour in every state instead of being baked into an image. The data URI is inline, so
  * the panel renders the same on a host with no route to the internet.
  */
 .diagnostics-tiles {
@@ -479,7 +450,7 @@ button.diagnostics-quiet-action {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 10px 6px;
+  padding: 12px 8px;
   border: 1px solid var(--line-strong);
   background: transparent;
   color: var(--ink);
@@ -501,6 +472,12 @@ button.diagnostics-quiet-action {
   mask-size: contain;
 }
 
+.diagnostics-tiles small {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+
 .diagnostics-tiles button:hover:not(:disabled) {
   border-color: var(--accent);
   background: var(--accent-soft);
@@ -535,107 +512,6 @@ button.diagnostics-quiet-action {
   mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M513.5-254.5Q528-269%20528-290t-14.5-35.5Q499-340%20478-340t-35.5%2014.5Q428-311%20428-290t14.5%2035.5Q457-240%20478-240t35.5-14.5ZM442-394h74q0-33%207.5-52t42.5-52q26-26%2041-49.5t15-56.5q0-56-41-86t-97-30q-57%200-92.5%2030T342-618l66%2026q5-18%2022.5-39t53.5-21q32%200%2048%2017.5t16%2038.5q0%2020-12%2037.5T506-526q-44%2039-54%2059t-10%2073Zm38%20314q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22/%3E%3C/svg%3E');
 }
 
-/* The same grid as the areas, so picking hardware reads as the same kind of act as picking an area. */
-.diagnostics-device-list {
-  display: grid;
-  max-height: 264px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
-  overflow-y: auto;
-  margin: 8px 0 12px;
-}
-
-.diagnostics-device-list button {
-  display: flex;
-  min-height: 104px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 6px;
-  border: 1px solid var(--line-strong);
-  background: transparent;
-  color: var(--ink);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.2;
-  overflow-wrap: break-word;
-  text-align: center;
-}
-
-.diagnostics-device-list img {
-  width: 24px;
-  height: 24px;
-  flex: none;
-}
-
-/*
- * The device's own artwork, contained rather than cropped and at half the tile.
- *
- * `contain` is how the devices view draws the same image, because it is a cutout of the hardware and not a
- * scene: cropping it to fill cuts the device out of its own picture. Half the tile keeps the name it belongs
- * to from competing with it. That view's darkening filter is not carried over — it exists to seat the image
- * under white text on a coloured tile, and these tiles read dark text on the panel.
- */
-.diagnostics-device-list img.device-photo {
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  max-height: 50%;
-  object-fit: contain;
-}
-
-.diagnostics-device-list button:hover {
-  border-color: var(--accent);
-  background: var(--accent-soft);
-}
-
-/* Pressed is the selection, so it is the border and the fill that say so rather than the colour alone. */
-.diagnostics-device-list button[aria-pressed='true'] {
-  border-color: var(--accent);
-  border-width: 2px;
-  background: var(--accent-soft);
-  color: var(--accent-ink);
-}
-
-.diagnostics-step-hint {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.diagnostics-local-note {
-  margin: 12px 0 0;
-  color: var(--ink-secondary);
-  font-size: 12px;
-}
-
-.diagnostics-result button {
-  width: 100%;
-}
-
-.diagnostics-manifest {
-  margin-top: 12px;
-  border-block: 1px solid var(--line);
-  padding-block: 8px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.diagnostics-manifest ul {
-  margin: 8px 0;
-  padding-left: 20px;
-}
-
-.diagnostics-review-confirm {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin-top: 12px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
 .advanced-fields {
   display: grid;
   grid-template-columns: 1fr;
@@ -670,6 +546,12 @@ button.diagnostics-quiet-action {
   font: inherit;
 }
 
+.advanced-fields input[type='checkbox'] {
+  justify-self: start;
+  width: auto;
+  min-height: 0;
+}
+
 .advanced-fields small,
 .advanced-device-help {
   color: var(--muted);
@@ -755,6 +637,7 @@ button.diagnostics-quiet-action {
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-control);
   background: var(--panel);
+  color: var(--ink);
   padding: 0;
 }
 
@@ -789,38 +672,84 @@ button.diagnostics-quiet-action {
     transform 150ms var(--ease-out);
 }
 
+.dashboard-action[data-collecting],
+.dashboard-action:has(.diagnostics-name) {
+  width: auto;
+  grid-auto-flow: column;
+  gap: 8px;
+  padding: 0 12px;
+}
+
 .dashboard-action[data-collecting] {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 16%, var(--panel));
 }
 
+/*
+ * The dashboard's diagnostics action is named in words at rest, and a capture under way replaces that name
+ * beside the icon, so neither rests on the icon or on colour alone.
+ */
+.diagnostics-name,
+.diagnostics-capturing {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.diagnostics-capturing,
+.dashboard-action[data-collecting] .diagnostics-name {
+  display: none;
+}
+
+.dashboard-action[data-collecting] .diagnostics-capturing {
+  display: inline;
+}
+
+/* A problem the dashboard shows: an alert ring, and a dot so the state does not rest on colour alone. */
+.dashboard-action[data-attention] {
+  border-color: var(--alert);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alert) 24%, transparent);
+}
+
+.dashboard-action[data-attention]::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--panel);
+  border-radius: var(--radius-pill);
+  background: var(--alert);
+}
+
 .dashboard-action:hover::after,
 .dashboard-action:focus-visible::after {
   opacity: 1;
   transform: translateY(0);
 }
 
-/*
- * The way into a diagnostic run, standing where a status pill used to. A pill saying "Connected" was decoration on
- * the healthy path and a dead end on every other; this appears only where a run would explain something.
- */
-.dashboard-diagnose {
-  flex: 0 0 auto;
-  /* Buttons are full width by default here, and this one sits inline beside the title. */
-  width: auto;
-  border: 1px solid var(--alert);
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--alert) 16%, var(--panel));
+.blocking-dialog {
+  max-width: 420px;
+  border: 0;
+  border-radius: var(--radius-panel);
+  background: var(--panel);
+  box-shadow: var(--shadow-overlay);
   color: var(--ink);
-  padding: 6px 12px;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
+  padding: 24px;
+}
+
+.blocking-dialog::backdrop {
+  background: rgb(0 0 0 / 30%);
+  backdrop-filter: blur(5px);
 }
 
-.dashboard-diagnose:hover {
-  background: color-mix(in srgb, var(--alert) 26%, var(--panel));
+.blocking-dialog h2 {
+  margin: 0 0 8px;
+}
+
+.blocking-dialog p {
+  margin: 0 0 20px;
+  color: var(--ink-secondary);
 }
 
 .device-group + .device-group {
@@ -899,7 +828,7 @@ button.diagnostics-quiet-action {
   padding: 12px;
 }
 
-.device-tile:not([data-device-class='camera']) /*
+/*
  * A device's settings are a page rather than a face on the tile, so they are read at the page's scale and have as
  * much room as the device needs. The tile is the summary and the way in; nothing about its size bounds this.
  */
@@ -944,7 +873,7 @@ button.diagnostics-quiet-action {
   }
 }
 
-.diagnostic-panel img {
+.device-tile:not([data-device-class='camera']) .diagnostic-panel img {
   display: none;
 }
 
@@ -962,7 +891,7 @@ button.diagnostics-quiet-action {
   width: 8px;
   height: 8px;
   border: 2px solid var(--tile-bg);
-  border-radius: 50%;
+  border-radius: var(--radius-pill);
   background: var(--alert);
   pointer-events: none;
 }
@@ -1368,6 +1297,127 @@ button.diagnostics-quiet-action {
   font-weight: 700;
 }
 
+/*
+ * The guard-mode map: four HomeKit states against nine station modes, one pairing per row.
+ *
+ * A table because the content is one, which also gives each select its own row label without a second element
+ * beside it. Row rules and no box: the panel's own surface encloses it, and the one control in the row is the
+ * select, which carries the only border here.
+ */
+.arming-setting {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.arming-setting > summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 12px;
+  align-items: center;
+  gap: 4px 8px;
+  cursor: pointer;
+}
+
+/* `display: grid` on a summary drops the native marker, so the affordance is drawn back in as a caret. */
+.arming-setting > summary::marker,
+.arming-setting > summary::-webkit-details-marker {
+  content: '';
+  display: none;
+}
+
+.arming-setting > summary::after {
+  content: '';
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(45deg);
+  transition: transform 140ms var(--ease-out);
+}
+
+.arming-setting[open] > summary::after {
+  transform: rotate(-135deg);
+}
+
+/* The map as one line, which is the answer most households only ever read. */
+.arming-summary {
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arming-setting[open] > summary {
+  margin-bottom: 8px;
+}
+
+.arming-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.arming-table thead th {
+  padding: 0 0 4px;
+  border-bottom: 1px solid var(--line-strong);
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.arming-table tbody tr + tr th,
+.arming-table tbody tr + tr td {
+  border-top: 1px solid var(--line);
+}
+
+.arming-table th[scope='row'] {
+  width: 38%;
+  padding: 4px 8px 4px 0;
+  color: var(--ink);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.arming-table th[scope='row'] label {
+  cursor: pointer;
+}
+
+.arming-table td {
+  padding: 4px 0;
+}
+
+.arming-table select {
+  width: 100%;
+  min-height: 28px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+/* The changed row carries the weight, so a pending map reads as which pairing moved rather than as a heavier table. */
+.arming-setting .snapshot-help {
+  margin-top: 8px;
+}
+
+.arming-table select.preference-control-changed {
+  border-color: var(--accent);
+  font-weight: 700;
+}
+
+@media (pointer: coarse) {
+  .arming-table select {
+    min-height: 44px;
+  }
+}
+
 .preference-grid .preference-changed .snapshot-description {
   font-weight: 400;
 }
@@ -1469,7 +1519,7 @@ button.diagnostics-quiet-action {
   left: 2px;
   width: 14px;
   height: 14px;
-  border-radius: 50%;
+  border-radius: var(--radius-pill);
   background: var(--panel);
   box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
   transition: transform 140ms var(--ease-out);
@@ -1541,8 +1591,7 @@ button.diagnostics-quiet-action {
   cursor: pointer;
 }
 
-.first-setup-confirmation input,
-.diagnostics-review-confirm input {
+.first-setup-confirmation input {
   appearance: none;
   display: grid;
   place-content: center;
@@ -1557,8 +1606,7 @@ button.diagnostics-quiet-action {
   padding: 0;
 }
 
-.first-setup-confirmation input::before,
-.diagnostics-review-confirm input::before {
+.first-setup-confirmation input::before {
   content: '';
   width: 8px;
   height: 4px;
@@ -1567,14 +1615,12 @@ button.diagnostics-quiet-action {
   transform: rotate(-45deg) scale(0);
 }
 
-.first-setup-confirmation input:checked,
-.diagnostics-review-confirm input:checked {
+.first-setup-confirmation input:checked {
   border-color: var(--accent);
   background: var(--accent);
 }
 
-.first-setup-confirmation input:checked::before,
-.diagnostics-review-confirm input:checked::before {
+.first-setup-confirmation input:checked::before {
   transform: rotate(-45deg) scale(1);
 }
 
@@ -1722,7 +1768,6 @@ button {
   text-align: center;
 }
 
-/* One setting per row, so a control that needs width gets it and nothing sits half-read beside it. */
 /*
  * Two lists with a column of transfer buttons between them, sharing the parent's rows so the three columns line up.
  *
@@ -1860,11 +1905,11 @@ button {
     transform 100ms var(--ease-out);
 }
 
-button:hover:not(:disabled) {
+button:hover:not(:disabled, .wizard-live-play) {
   background: color-mix(in srgb, var(--accent) 88%, var(--on-accent));
 }
 
-button:active:not(:disabled, .device-open-control) {
+button:active:not(:disabled, .device-open-control, .wizard-live-play) {
   transform: scale(0.97);
 }
 
@@ -1874,7 +1919,6 @@ button:disabled {
   cursor: not-allowed;
 }
 
-button.diagnostics-secondary-action:hover:not(:disabled),
 .dashboard-page-back:hover:not(:disabled),
 .warm-up-controls button:hover:not(:disabled),
 .warm-up-column button:hover:not(:disabled),
@@ -1897,6 +1941,21 @@ button.diagnostics-quiet-action:hover:not(:disabled) {
   background: transparent;
 }
 
+.wizard-map-device:hover:not(:disabled, [aria-current='step']) {
+  background: color-mix(in srgb, var(--ink) 5%, transparent);
+}
+
+.wizard-map-device[aria-current='step']:hover {
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+/* The frame is black in both themes, so the icon's fill is a fixed deep teal the white glyph reads against; the
+   button itself covers the whole frame and stays transparent. */
+.wizard-live-play:hover:not(:disabled) img,
+.wizard-live-play:focus-visible img {
+  background: color-mix(in srgb, var(--accent) 55%, #000000);
+}
+
 /*
  * The tile is the dashboard's primary target and artwork covers everything but its edge, so the edge carries the
  * hover. A step in `--line` alone was too quiet to register as feedback; the accent in the edge is not.
@@ -1906,8 +1965,7 @@ button.diagnostics-quiet-action:hover:not(:disabled) {
 }
 
 .warm-up-controls button:disabled,
-.warm-up-column button:disabled,
-button.diagnostics-secondary-action:disabled {
+.warm-up-column button:disabled {
   border-color: var(--line);
   background: var(--panel);
   color: var(--ink-disabled);
@@ -1961,11 +2019,11 @@ input:focus-visible {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .diagnostics-device-list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* The row keeps its three actions on one line by leaving the diagnostics action to its icon. */
+  .diagnostics-name {
+    display: none;
   }
 
-
   .status-row {
     display: grid;
   }
@@ -1979,11 +2037,11 @@ input:focus-visible {
   }
 
   .legacy-notice {
-    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
   }
 
   .legacy-notice button {
-    width: 100%;
+    grid-column: 1 / -1;
   }
 }
 
@@ -2030,22 +2088,18 @@ input:focus-visible {
 }
 
 @media (max-width: 520px) {
-  .advanced-fields {
-    grid-template-columns: 1fr;
-  }
-
   .diagnostics-actions button {
     width: 100%;
   }
 
-  .diagnostics-choice-actions {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* Two actions side by side leave each a sliver of a label at this width, so they stack. */
+  .diagnostics-handoff:not([hidden]) {
+    grid-template-columns: 1fr;
   }
 
-  .diagnostics-choice-actions button {
-    width: 100%;
-    min-width: 0;
+  .diagnostics-choice-actions {
+    display: grid;
+    gap: 8px;
   }
 
   .device-grid {
@@ -2080,7 +2134,6 @@ input:focus-visible {
     gap: 4px;
     padding: 32px 16px 8px;
   }
-
 }
 
 .shell[data-theme='dark'] {
@@ -2132,3 +2185,242 @@ input:focus-visible {
 .shell[data-theme='dark'] .eufy-logo .logo-dark {
   display: block;
 }
+
+/* Sized by its container alone, never by a picture, and never selected or dragged by a click on it. One 16:9 frame
+   split down the middle: the camera's left half beside the right half of the same view as HomeKit receives it. */
+.wizard-live {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--radius-card);
+  background: #000000;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.wizard-live figure {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  clip-path: inset(0 50% 0 0);
+}
+
+.wizard-live figure + figure {
+  clip-path: inset(0 0 0 50%);
+}
+
+/* Until the HomeKit side has a picture, the camera's picture shows whole, with no split and no labels. */
+.wizard-live:has(figure + figure > img[hidden]) figure {
+  clip-path: none;
+}
+
+.wizard-live:has(figure + figure > img[hidden]) :is(.wizard-live-label, figure + figure),
+.wizard-live:has(figure + figure > img[hidden])::after {
+  display: none;
+}
+
+.wizard-live::after {
+  position: absolute;
+  inset: 0 auto 0 50%;
+  width: 2px;
+  margin-left: -1px;
+  background: rgb(255 255 255 / 80%);
+  content: '';
+  pointer-events: none;
+}
+
+.wizard-live figure > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+/* The whole box plays and stops; the pill is the icon. */
+.wizard-live-play {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.wizard-live-play img {
+  box-sizing: border-box;
+  width: 72px;
+  height: 52px;
+  padding: 8px 18px;
+  border-radius: var(--radius-card);
+  background: rgb(0 0 0 / 70%);
+}
+
+/* Stop stays out of the picture until the pointer or the keyboard is on the video. */
+.wizard-live-stop {
+  opacity: 0;
+  transition: opacity 150ms var(--ease-out);
+}
+
+.wizard-live:hover .wizard-live-stop,
+.wizard-live-stop:focus-visible {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .wizard-live-stop {
+    opacity: 1;
+  }
+}
+
+/* The reason the box has no picture, centred and large; below the spinner or the play button when either shows. */
+.wizard-live-status {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  pointer-events: none;
+  padding: 24px;
+  color: var(--tile-scene-ink);
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: center;
+  background: rgb(0 0 0 / 45%);
+}
+
+.wizard-live:has(.wizard-live-spinner:not([hidden]), [data-wizard-live-play]:not([hidden])) .wizard-live-status {
+  padding-top: 120px;
+}
+
+.wizard-live-status:empty {
+  display: none;
+}
+
+/* Over the picture, so showing it does not move the play and stop buttons under the pointer. */
+.wizard-live-label {
+  position: absolute;
+  inset: 0 50% auto 0;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--tile-scene-ink);
+  background: linear-gradient(rgb(0 0 0 / 70%), transparent);
+}
+
+.wizard-live figure + figure .wizard-live-label {
+  inset: 0 0 auto 50%;
+  text-align: right;
+}
+
+.wizard-nav {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.wizard-map {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--panel);
+}
+
+.wizard-map-group {
+  flex: 1 1 180px;
+}
+
+.wizard-map-base {
+  margin: 0 0 4px;
+  font-weight: 600;
+}
+
+.wizard-map-members {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 12px;
+  border-left: 2px solid var(--line-strong);
+}
+
+.wizard-map-device {
+  padding: 4px 8px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* A HomeBase heading is a button and a standalone heading is not: the plain one takes the button's size. */
+p.wizard-map-base {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 4px 8px;
+}
+
+.wizard-map-device[aria-current='step'] {
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+
+.wizard-live figure + figure .wizard-live-spinner {
+  left: 75%;
+}
+
+.wizard-card {
+  padding: 12px 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--panel);
+}
+
+.wizard-card h3 {
+  margin: 0 0 4px;
+}
+
+.wizard-live-spinner {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 48px;
+  height: 48px;
+  margin: -24px 0 0 -24px;
+  border: 4px solid rgb(255 255 255 / 30%);
+  border-top-color: var(--tile-scene-ink);
+  border-radius: var(--radius-pill);
+  animation: wizard-live-spin 0.9s linear infinite;
+}
+
+@keyframes wizard-live-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wizard-live-spinner {
+    animation-duration: 2.4s;
+  }
+}
+
+.wizard-setting {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.wizard-setting select {
+  width: auto;
+  min-width: 160px;
+  margin-top: 0;
+}