.pwa-install {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  row-gap: .5rem;
  box-sizing: border-box;
  width: min(calc(100% - 1.5rem), 54rem);
  margin: .5rem auto .75rem;
  padding: .375rem 1rem .375rem .1875rem;
  border: 1px solid var(--purple-100);
  border-radius: .75rem;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  color: var(--purple-950);
  font-size: .875rem;
  line-height: 1.25;
}
.pwa-install[hidden], .pwa-install [hidden] { display: none; }
.pwa-install-icon {
  width: 36px;
  height: 36px;
  margin-inline-end: .625rem;
  border-radius: .625rem;
}
.pwa-install-copy { margin-inline-end: .375rem; overflow-wrap: anywhere; }
.pwa-install-copy strong { display: block; font-weight: 700; }
.pwa-install-copy p { margin: .125rem 0 0; color: var(--fg-2); font-size: .8125rem; }
.pwa-install button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .625rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #3c3165;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
/* The button keeps a full touch target around the smaller filled face. */
.pwa-install .pwa-install-add {
  padding-inline: 0;
  color: var(--fg-inverse);
  font-size: .8125rem;
  font-weight: 700;
}
.pwa-install-add-face {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 32px;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: var(--purple-600);
}
.pwa-install-add-face svg { flex: none; }
.pwa-install-add:hover .pwa-install-add-face { background: var(--purple-700); }
.pwa-install .pwa-install-dismiss {
  min-width: 32px;
  padding-inline: 0;
  color: var(--fg-3);
}
.pwa-install-dismiss:hover { background: #eae5fb; }
.pwa-install button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.pwa-install button[aria-disabled="true"] { opacity: .65; cursor: default; }
.pwa-install-help {
  grid-column: 3 / -1;
  margin: 0 .625rem .25rem 0;
  padding-top: .5rem;
  border-top: 1px solid var(--purple-100);
  overflow-wrap: anywhere;
  line-height: 1.45;
}
@media (max-width: 360px) {
  .pwa-install-icon { width: 32px; height: 32px; margin-inline-end: .375rem; }
}
