/* A person's apps: a line each, its title, then when it was last written. An app itself
   has the whole window, laid out as an HTML page read on its own (article.artifact). */
article.apps {
  display: grid;
  gap: 1rem;
}

article.apps .lede,
article.apps .none {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
}

ul.apps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

ul.apps-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

ul.apps-list .meta {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* A draft an app asks to send, as Gmail holds it, above the app and out of its reach. */
dialog.sending {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  background: var(--sheet);
  color: var(--ink);
}

dialog.sending::backdrop {
  background: rgb(0 0 0 / 0.35);
}

dialog.sending form {
  display: grid;
  gap: 0.75rem;
}

dialog.sending h2,
dialog.sending p {
  margin: 0;
}

dialog.sending .lede {
  color: var(--muted);
}

dialog.sending dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}

dialog.sending dt {
  color: var(--muted);
}

dialog.sending dd {
  margin: 0;
  overflow-wrap: anywhere;
}

dialog.sending .body {
  white-space: pre-wrap;
  max-height: 40vh;
  overflow: auto;
  padding: 0.75rem;
  background: var(--wash);
  border-radius: 6px;
}

dialog.sending .error {
  color: var(--bad);
}

dialog.sending .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

dialog.sending .actions button:not(.primary) {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  background: var(--sheet);
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}

dialog.sending .actions button:disabled {
  opacity: 0.5;
  cursor: default;
}