@import "https://assets.elements.dev/assets/app/shared/styles/agent-prompt.a31186e8966d4a65.css";

/* A prompt to paste into an AI agent: a light input box under the agent's
   window bar. It matches the ```text Agent
   blocks lessons draw with pre.is-prompt. */
.lesson-prompt {
  position: relative;
  margin: 1.25rem 0;
  background: var(--bg, #ffffff);
  color: var(--ink, #10283d);
  border: 1px solid var(--rule, rgba(16, 40, 61, 0.12));
  /* Square, like the VS Code screenshots beside them, so every box on a
     page reads as one family. */
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(16, 40, 61, 0.06);
  overflow: hidden;
}

.lesson-prompt-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  /* The site's soft tint, the same as the step bars and panels around it. */
  background: var(--box-chrome);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.75rem;
  color: var(--ink-soft, #4b5d6e);
}
/* In dark mode the bar takes the raised navy the install panel's chrome
   uses; white is a light-mode colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-prompt-bar {
    background: #161f2a;
    border-bottom-color: rgba(255, 255, 255, 0.09);
  }
}
:root[data-theme="dark"] .lesson-prompt-bar {
  background: #161f2a;
  border-bottom-color: rgba(255, 255, 255, 0.09);
}


.lesson-prompt-title { flex: 1; min-width: 0; white-space: nowrap; }

.lesson-prompt-os { display: inline-flex; gap: 2px; }

.lesson-prompt-pill,
.lesson-prompt-pill:hover,
.lesson-prompt-pill:focus {
  height: 24px;
  min-height: 0;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--ink-soft, #4b5d6e);
  box-shadow: none;
}
.lesson-prompt-pill:hover { color: var(--ink, #10283d); }
.lesson-prompt-pill.is-on,
.lesson-prompt-pill.is-on:hover {
  background: var(--bg, #ffffff);
  border-color: var(--rule, rgba(16, 40, 61, 0.15));
  color: var(--ink, #10283d);
}

.lesson-prompt-copy,
.lesson-prompt-copy:hover,
.lesson-prompt-copy:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule, rgba(16, 40, 61, 0.18));
  border-radius: var(--radius-sm);
  color: var(--ink-soft, #4b5d6e);
  box-shadow: none;
}
/* View script: the script this box pipes into a shell, for the reader who
   reads before running. Quiet, in the bar's own colour, beside copy. */
.lesson-prompt-view {
  font-size: 0.75rem;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.lesson-prompt-view:hover { color: var(--link-hover); }

/* Only where there is hover: a phone keeps a tapped button's hover state,
   which reads as an outline left behind. */
@media (hover: hover) {
  .lesson-prompt-copy:hover { color: var(--ink, #10283d); border-color: var(--ink-soft, #4b5d6e); }
}
.lesson-prompt-copy.is-copied { color: var(--success); }
.lesson-prompt-copy svg { width: 14px; height: 14px; }

.post-body .lesson-prompt-text,
.lesson-prompt-text {
  margin: 0;
  /* The letters sit in the middle: the line box leaves room under them
     for descenders a command seldom has, so the padding above is that much
     more. The room below is still enough for an overlay scrollbar to land
     under a long line rather than over it. */
  padding: 1.375rem 1.25rem 1.125rem;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

/* One line stays one line and scrolls; a wrapped command reads as two. The
   fade on the right says there is more, the same as the install panel's. */
.lesson-prompt-text {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

/* The step comments in a terminal box: shown, never copied. */
.lesson-prompt-comment {
  color: #8a9199;
}

/* Click anywhere to copy. The box lifts off the page on hover to say so,
   like the install panel, without recolouring what you are reading. */
.lesson-prompt {
  cursor: pointer;
}
.lesson-prompt:hover {
  box-shadow: 0 2px 8px rgba(16, 40, 61, 0.10);
}
/* Selected text keeps an explicit colour; see the ::selection note in
   app/lib/copy-code-buttons.css. */
.lesson-prompt ::selection {
  background: var(--accent-soft, #ebf6fc);
  color: #10283d;
}
@media (prefers-reduced-motion: no-preference) {
  .lesson-prompt { transition: box-shadow 140ms ease-out; }
}


/* Terminal mode is the same box as the agent's, light or dark with the
   page, the way VS Code draws its terminal in either theme. Only the icon
   and the mono text say it is a shell. */

/* The bar holds what the box is and copy. The platform and View script sit
   in a row under the text, where three pills and a link never crowd the
   title. */
.lesson-prompt-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--rule-soft);
  /* The bar's tint, so the box reads as one frame around its body. */
  background: var(--box-chrome);
  font-size: 0.75rem;
  color: var(--ink-soft, #4b5d6e);
  cursor: default;
}

.lesson-prompt-get {
  margin-right: auto;
  color: var(--ink-soft, #4b5d6e);
}

/* On a phone the pills give way to a native select, which also gives a
   phone its own picker. */
.lesson-prompt-select { display: none; }

@media (max-width: 30rem) {
  .lesson-prompt-os { display: none; }

  /* The agent link drops to its own row under View script and the platform,
     rather than wrapping beside them. */
  .lesson-prompt-foot { flex-wrap: wrap; }

  .lesson-prompt-get {
    order: 1;
    flex-basis: 100%;
    margin-right: 0;
    text-align: right;
  }

  .lesson-prompt-select {
    display: block;
    height: 26px;
    min-height: 0;
    padding: 0 1.5rem 0 0.6rem;
    font-size: 0.75rem;
    color: var(--ink, #10283d);
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--rule, rgba(16, 40, 61, 0.15));
    border-radius: 999px;
    box-shadow: none;
    width: auto;
  }
}

/* Each box carries the icon of what it is, a speech bubble for the agent
   chat and a prompt for a terminal, rather than window dots. */
.lesson-prompt-icon {
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lesson-prompt-icon.is-terminal-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6.5 8 3 11.5M8.5 11.5h4.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6.5 8 3 11.5M8.5 11.5h4.5'/%3E%3C/svg%3E");
}

.lesson-prompt.is-signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: default;
}
.lesson-prompt.is-signup:hover {
  box-shadow: 0 1px 2px rgba(16, 40, 61, 0.06);
}
.lesson-prompt-signup-text {
  margin: 0;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .lesson-prompt.is-signup {
    flex-direction: column;
    align-items: stretch;
  }
}

/* The agent box's footer bar takes the title bar's colour, so the chat sits
   between two matching strips of app chrome. */
.lesson-prompt.is-agent .lesson-prompt-foot {
  background: var(--box-chrome);
  border-top-color: var(--rule-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-prompt .lesson-prompt-foot,
  :root:not([data-theme="light"]) .lesson-prompt.is-agent .lesson-prompt-foot {
    background: #161f2a;
    border-top-color: rgba(255, 255, 255, 0.09);
  }
}
:root[data-theme="dark"] .lesson-prompt .lesson-prompt-foot,
:root[data-theme="dark"] .lesson-prompt.is-agent .lesson-prompt-foot {
  background: #161f2a;
  border-top-color: rgba(255, 255, 255, 0.09);
}
/* On the off-white footer the selected platform keeps the footer's colour
   and stands out by a darker outline, not a white fill. */
.lesson-prompt.is-agent .lesson-prompt-pill.is-on,
.lesson-prompt.is-agent .lesson-prompt-pill.is-on:hover {
  background: transparent;
  border-color: rgba(31, 30, 27, 0.35);
}
.lesson-prompt.is-agent .lesson-prompt-select {
  background-color: transparent;
  border-color: rgba(31, 30, 27, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-prompt.is-agent .lesson-prompt-pill.is-on,
  :root:not([data-theme="light"]) .lesson-prompt.is-agent .lesson-prompt-select {
    border-color: rgba(255, 255, 255, 0.35);
  }
}
:root[data-theme="dark"] .lesson-prompt.is-agent .lesson-prompt-pill.is-on,
:root[data-theme="dark"] .lesson-prompt.is-agent .lesson-prompt-select {
  border-color: rgba(255, 255, 255, 0.35);
}

.lesson-prompt-get.is-below {
  display: block;
  margin: var(--space-3) 0 0;
  text-align: right;
  font-size: 0.875rem;
}

/* A tap or click focuses the copy button too; the ring is for keyboard
   focus only. */
.lesson-prompt-copy:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* The scroll bar draws over the bottom of a scrolled line; the room under
   the command keeps it clear of the text, and the same room above keeps the
   line centered. */
.lesson-prompt.is-copyable.is-agent .lesson-prompt-text {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}