/* Smart home demo — device tiles, test kit */

.tabs {
  justify-self: start;
}

.devices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-3);
}

.device {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4);
  background: var(--c-bg-2);
  border: var(--hair) solid var(--c-line);
  transition: border-color var(--dur-fast) var(--ease-soft);
}

.device.is-on {
  border-color: var(--c-accent);
}

.device__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}

.device__name {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  line-height: 1.1;
}

.device__value {
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.stepper button {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: var(--hair) solid var(--c-line-strong);
}

.stepper button:hover {
  border-color: var(--c-accent);
}

.kit-select {
  min-block-size: 2.5rem;
  padding: 0 var(--s-3);
  background: var(--c-bg-2);
  border: var(--hair) solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

.verdict {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1;
}

.verdict.is-pass {
  color: var(--c-accent);
}

.verdict.is-fail {
  color: var(--c-fault);
}

.res-pass {
  color: var(--c-accent);
}

.res-fail {
  color: var(--c-fault);
}