/* The frame, bar, tabs and copy button are the lesson prompt box's. This
   file draws only the New App input inside it and the line underneath. */

.nap .lesson-prompt { margin: 0; }

/* VS Code or Terminal is a choice about where the reader works, so it sits
   above the box rather than in it. The pills stay on a phone. */
.nap .nap-switch {
  display: inline-flex;
  margin-bottom: var(--space-3);
}

.nap-palette {
  padding: 1rem 1.25rem 0.875rem;
}

.nap-input {
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--ink);
  white-space: nowrap;
  overflow-x: auto;
}


.nap-how {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.nap .nap-how-icon {
  display: block;
  flex: none;
  margin-top: 0.1875rem;
}

/* VS Code's logo, as one colour like the other boxes' icons. The shape is
   the silhouette VS Code ships in its own app bundle. */
.lesson-prompt-icon.nap-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 6 84 84'%3E%3Cpath fill='black' fill-rule='evenodd' d='M65.566 89.426a5.228 5.228 0 0 0 4.167-.16l17.294-8.321A5.25 5.25 0 0 0 90 76.213V19.787a5.25 5.25 0 0 0-2.973-4.731L69.733 6.734a5.23 5.23 0 0 0-5.967 1.016L30.658 37.955l-14.42-10.947a3.496 3.496 0 0 0-4.468.199l-4.625 4.207a3.501 3.501 0 0 0-.004 5.176L19.648 48 7.14 59.41a3.502 3.502 0 0 0 .004 5.176l4.625 4.207a3.496 3.496 0 0 0 4.467.2l14.421-10.948L63.766 88.25a5.223 5.223 0 0 0 1.8 1.176Zm3.447-60.495-25.121 19.07 25.12 19.068V28.931Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 6 84 84'%3E%3Cpath fill='black' fill-rule='evenodd' d='M65.566 89.426a5.228 5.228 0 0 0 4.167-.16l17.294-8.321A5.25 5.25 0 0 0 90 76.213V19.787a5.25 5.25 0 0 0-2.973-4.731L69.733 6.734a5.23 5.23 0 0 0-5.967 1.016L30.658 37.955l-14.42-10.947a3.496 3.496 0 0 0-4.468.199l-4.625 4.207a3.501 3.501 0 0 0-.004 5.176L19.648 48 7.14 59.41a3.502 3.502 0 0 0 .004 5.176l4.625 4.207a3.496 3.496 0 0 0 4.467.2l14.421-10.948L63.766 88.25a5.223 5.223 0 0 0 1.8 1.176Zm3.447-60.495-25.121 19.07 25.12 19.068V28.931Z'/%3E%3C/svg%3E");
}