/* The shells card in "Not just an SSH terminal app.": one terminal after
   another - PowerShell 7, Command Prompt, Git Bash and WSL, the shells the
   desktop offers - each in its own prompt and colours, fading from one to the
   next. shells.js turns the slides; with no script, or with reduced motion,
   the first one stands. The terminal's frame and type are screens.css's. */

/* The slides sit on top of each other and cross-fade. */
.shell-slide {
  opacity: 0;
  transition: opacity 200ms var(--ease-out-soft);
}

.shell-slide.is-on {
  opacity: 1;
}

/* Which shell this is, in the corner, the way the app names a session. */
.shell-tag {
  position: absolute;
  top: 9px;
  left: 10px;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(245, 245, 247, 0.86);
  font-family: var(--font);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
}

.shell-tag::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

/* Where the slideshow is, top right. */
.shell-dots {
  position: absolute;
  top: 13px;
  right: 11px;
  z-index: 1;
  display: flex;
  gap: 4px;
}

.shell-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: background-color 100ms var(--ease-out-soft);
}

.shell-dots i.is-on {
  background: #2e9bff;
}

/* Each shell's own colours, from the Campbell palette the prompt uses. */
.sh-head {
  color: #16c60c;
  font-weight: 700;
}

.sh-red {
  color: #e74856;
}

.sh-green {
  color: #13a10e;
}

.sh-lgreen {
  color: #16c60c;
}

.sh-magenta {
  color: #b4009e;
}

.sh-yellow {
  color: #c19c00;
}

.sh-cyan {
  color: #3a96dd;
}

.sh-blue {
  color: #3b78ff;
}

.shells b {
  font-weight: 700;
}

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