/* App installation is offered as one quiet note at the start of each experience. */
.install-note-entry {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 18px 0 0;
  color: var(--muted, #9a9b91);
  font: 9px/1.6 var(--mono, monospace);
  letter-spacing: .055em;
}

.install-note {
  min-height: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px dotted currentColor;
  background: transparent;
  color: var(--install-green, #8eb5a2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}

.install-note:is(:hover, :focus-visible) {
  border-bottom-style: solid;
  color: var(--install-gold, #d7a66d);
}

.install-note:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.install-note[aria-busy="true"] {
  cursor: wait;
  opacity: .62;
}

.install-note-status {
  flex-basis: 100%;
  color: var(--muted, #9a9b91);
  font: inherit;
}

.install-note-status:empty {
  display: none;
}

html[data-theme="light"] .install-note-entry {
  color: #5f685e;
}

html[data-theme="light"] .install-note {
  color: #315e49;
}

html[data-theme="light"] .install-note:is(:hover, :focus-visible) {
  color: #8d5d28;
}

body[data-app-install="semantic-field"] > .install-note-entry {
  margin: 18px clamp(18px, 6vw, 84px) 0;
}

@media (max-width: 620px) {
  .install-note-entry {
    margin-top: 15px;
    font-size: 9px;
  }

  body[data-app-install="semantic-field"] > .install-note-entry {
    margin: 14px 10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .install-note {
    transition: none;
  }
}