/* Home (#home): connecting Home Assistant and choosing the devices Zeo may change. */

main[data-page='home'] .page-inner > * + * {
  margin-top: var(--s16);
}
main[data-page='home'] h2 {
  font-size: var(--text-18);
  line-height: var(--leading-28);
  letter-spacing: var(--tracking-18);
}
main[data-page='home'] h3 {
  margin: var(--s24) 0 var(--s4);
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-16);
  letter-spacing: 0;
}
main[data-page='home'] .home-loading {
  padding: var(--s24) 0;
}
main[data-page='home'] .field-label {
  display: block;
  font-size: var(--text-14);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='home'] .external-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}
main[data-page='home'] .external-link svg {
  width: 14px;
  height: 14px;
}

/* ==== Not connected ==== */

main[data-page='home'] .home-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--s16);
  border-color: #d0ddf4;
  background: var(--sky);
}
main[data-page='home'] .home-intro-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--s48);
  height: var(--s48);
  border-radius: var(--radius-12);
  background: var(--white);
  color: var(--blue);
}
main[data-page='home'] .home-intro-icon svg {
  width: 26px;
  height: 26px;
}
main[data-page='home'] .home-intro p {
  margin-top: var(--s4);
  color: #4f5e80;
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
main[data-page='home'] .home-search {
  min-height: var(--leading-20);
  margin: var(--s4) 0 var(--s16);
  color: var(--subtle);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='home'] .home-address-row {
  display: flex;
  gap: var(--s8);
  margin-top: var(--s8);
}
main[data-page='home'] .home-address-row input {
  flex: 1;
  min-width: 0;
  margin: 0;
}
main[data-page='home'] .home-address-row .button {
  flex: none;
}
main[data-page='home'] .home-token {
  margin-top: var(--s8);
  padding-top: var(--s16);
  border-top: var(--border);
}
main[data-page='home'] .home-token summary,
main[data-page='home'] .home-guide summary {
  display: list-item;
  width: fit-content;
}
main[data-page='home'] .home-token summary {
  color: #657494;
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='home'] .home-guide summary h2 {
  display: inline;
}

/* Numbered steps: the setup guide and the checklist. */
main[data-page='home'] .home-steps {
  display: grid;
  gap: var(--s16);
  margin: var(--s16) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
main[data-page='home'] .home-steps > li {
  display: flex;
  gap: var(--s12);
  counter-increment: step;
}
main[data-page='home'] .home-guide .home-steps > li::before,
main[data-page='home'] .step-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #c9d6ee;
  border-radius: 50%;
  color: var(--blue);
  font-size: var(--text-14);
  font-weight: 700;
}
main[data-page='home'] .home-guide .home-steps > li::before {
  content: counter(step);
}
main[data-page='home'] .step-mark::before {
  content: counter(step);
}
main[data-page='home'] .home-steps .done .step-mark {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--on-blue);
}
main[data-page='home'] .home-steps .done .step-mark::before {
  content: none;
}
main[data-page='home'] .step-mark svg {
  width: 16px;
  height: 16px;
}
main[data-page='home'] .home-steps strong {
  display: block;
  font-size: var(--text-14);
  line-height: var(--leading-28);
}
main[data-page='home'] .home-steps .done strong {
  color: var(--muted);
}
main[data-page='home'] .home-steps p {
  margin: var(--s2) 0 var(--s8);
  color: var(--subtle);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='home'] .home-checklist > .button {
  margin-top: var(--s24);
}

/* ==== Connected ==== */

main[data-page='home'] .home-connection {
  display: flex;
  align-items: center;
  gap: var(--s16);
  padding-block: var(--s16);
}
main[data-page='home'] .home-connection > div {
  flex: 1;
  min-width: 0;
}
main[data-page='home'] .home-connection p {
  overflow-wrap: anywhere;
  color: var(--subtle);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='home'] .home-status-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px var(--warning-surface);
}
main[data-page='home'] .home-status-dot[data-ok='true'] {
  background: #3e9b62;
  box-shadow: 0 0 0 4px #dcefe2;
}
main[data-page='home'] .home-problem {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}
main[data-page='home'] .home-problem p {
  margin-top: var(--s4);
  color: var(--warning-ink);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}
main[data-page='home'] .home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
  margin-top: var(--s16);
}

/* ==== Devices ==== */

main[data-page='home'] .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s16);
}
main[data-page='home'] .card-head span {
  color: var(--muted);
  font-size: var(--text-14);
  white-space: nowrap;
}
main[data-page='home'] .home-devices > .field-help:first-of-type {
  margin: var(--s4) 0 0;
}
main[data-page='home'] .device-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
main[data-page='home'] .device-row {
  display: flex;
  align-items: center;
  gap: var(--s12);
  padding: var(--s12) 0;
  border-bottom: var(--border);
}
main[data-page='home'] .device-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-8);
  background: var(--tint);
  color: var(--blue);
}
main[data-page='home'] .device-icon svg {
  width: 20px;
  height: 20px;
}
main[data-page='home'] .device-text {
  flex: 1;
  min-width: 0;
}
main[data-page='home'] .device-name {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--text-14);
  line-height: var(--leading-20);
  font-weight: 600;
}
main[data-page='home'] .device-text small {
  display: block;
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
main[data-page='home'] .device-text .device-note {
  color: var(--warning-text);
}
main[data-page='home'] .device-row .switch-toggle {
  flex: none;
}
main[data-page='home'] .device-row.unusable .device-icon {
  background: var(--removed);
  color: var(--muted);
}
main[data-page='home'] .device-row.unusable .device-name,
main[data-page='home'] .device-row.missing .device-name {
  color: var(--muted);
}
main[data-page='home'] .home-devices > .field-help:last-child {
  margin: var(--s16) 0 0;
}

/* ==== Limits and examples ==== */

main[data-page='home'] .switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  padding: var(--s16) 0;
  border-bottom: var(--border);
}
main[data-page='home'] .switch-row .field-help {
  margin: var(--s4) 0 0;
}
main[data-page='home'] .switch-row .switch-toggle {
  flex: none;
}
main[data-page='home'] .home-hours {
  margin: var(--s16) 0 0;
  padding-bottom: var(--s16);
  border-bottom: var(--border);
}
main[data-page='home'] .home-volume {
  padding: var(--s16) 0;
  border-bottom: var(--border);
}
main[data-page='home'] .home-volume label {
  display: flex;
  justify-content: space-between;
}
main[data-page='home'] .home-volume output {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
main[data-page='home'] .home-volume input {
  width: 100%;
  margin-top: var(--s8);
}
main[data-page='home'] .home-volume .field-help {
  margin: var(--s4) 0 0;
}
main[data-page='home'] .home-limits .switch-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
main[data-page='home'] .home-examples ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  margin: var(--s12) 0 0;
  padding: 0;
  list-style: none;
}
main[data-page='home'] .home-examples li {
  padding: var(--s8) var(--s12);
  border-radius: var(--radius-pill);
  background: var(--idea);
  color: var(--idea-text);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}

@media (max-width: 620px) {
  main[data-page='home'] .home-address-row {
    flex-direction: column;
  }
  main[data-page='home'] .home-intro {
    flex-direction: column;
  }
}