/* Standalone web app only: the Homey list and the Homey bar above the
   settings shell. Never loaded by the Homey settings page. */

.webapp-homey-list {
  display: grid;
  gap: var(--spacing-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.webapp-homey-row {
  display: grid;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  border: 1px solid var(--pels-surface-outline);
  border-radius: var(--radius-lg);
}

.webapp-homey-row__status {
  margin: 0;
  color: var(--pels-text-muted);
}

/* A Homey that cannot be opened as it is. */
.webapp-homey-row__status--problem {
  color: var(--color-state-warning-text);
}

.webapp-brand {
  margin: 0;
  padding: 0 var(--spacing-3);
}

/* Phone and computer get different guidance: a phone cannot make API keys,
   so it is pointed at a computer. Same hardware probe as the palette. */
@media (hover: hover) and (pointer: fine) {
  .webapp-touch-only {
    display: none;
  }
}

@media not ((hover: hover) and (pointer: fine)) {
  .webapp-computer-only {
    display: none;
  }
}

.webapp-homey-row__actions,
.webapp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.panel > .webapp-actions {
  margin-top: var(--spacing-2);
}

.webapp-homey-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: min(100%, 480px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--spacing-2) var(--spacing-3) 0;
  color: var(--pels-text-muted);
}

.webapp-homey-bar__busy {
  width: min(100%, 480px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--spacing-3);
  color: var(--pels-text-muted);
}

.webapp-homey-bar__name {
  color: var(--pels-text-card-title-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webapp-pair-codes {
  display: grid;
  gap: var(--spacing-3);
}

/* A code scans reliably only as dark modules on a light ground, in either
   theme. */
.webapp-pair-code {
  width: min(100%, 320px);
  box-sizing: border-box;
  margin: 0;
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  background: var(--color-base-white);
}

.webapp-pair-code figcaption {
  padding-top: var(--spacing-2);
  color: var(--color-base-black);
  text-align: center;
}

.webapp-pair-code svg {
  display: block;
  width: 100%;
  height: auto;
}