/* About page: fake terminal (layouts/_default/shell.html + static/about.js).
   Colors track the site theme via the global CSS variables, so the light/dark
   toggle keeps working. */

.term {
  margin: 25px 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  font-size: 0.95rem;
}

.term__titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
  font-size: 0.85em;
  user-select: none;
}

.term__lights {
  display: inline-flex;
  gap: 6px;
}

.term__lights span {
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
}

/* macOS traffic lights */
.term__lights span:nth-child(1) {
  background: #ff5f57;
}

.term__lights span:nth-child(2) {
  background: #febc2e;
}

.term__lights span:nth-child(3) {
  background: #28c840;
}

.term__screen {
  padding: 18px 14px;
  max-height: 65vh;
  overflow-y: auto;
  cursor: text;
}

.term__entry {
  margin: 0 0 1.1em;
}

/* flex so whitespace-only text nodes between spans are never rendered —
   pre-wrap here would turn HTML source newlines into real line breaks. */
.term__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  word-break: break-word;
}

.term__prompt {
  color: var(--accent);
  font-weight: 600;
  margin-right: 1ch;
  user-select: none;
}

.term__output {
  margin-top: 0.15em;
}

/* Tighten the theme's generous spacing inside shell output */
.term__output p,
.term__output ul,
.term__output ol {
  margin: 0.35em 0;
}

.term__output ul,
.term__output ol {
  margin-left: 3ch;
}

.term__output pre {
  margin: 0.35em 0;
  padding: 0;
  border: none;
  background: transparent !important;
  white-space: pre;
  overflow-x: auto;
}

/* neofetch-style blocks: accent the header line ("visitor@turingine") */
.term__output pre:first-line {
  color: var(--accent);
  font-weight: 600;
}

.term__output img {
  border: none;
  padding: 0;
}

.term__dim {
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* Keep column alignment intact on narrow screens: scroll horizontally
   instead of wrapping (what a real terminal window would do). */
.term__pre {
  white-space: pre;
  overflow-x: auto;
}

/* Live prompt: hidden without JS, revealed when about.js adds .term--live.
   Without JS the page shows the full command transcript instead. */
.term__active {
  display: none;
  position: relative;
  margin: 0;
}

.term--live .term__active {
  display: block;
}

.term__buffer {
  white-space: pre-wrap;
  word-break: break-word;
}

.term__cursor {
  display: inline-block;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 1px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: term-blink 1.1s steps(1) infinite;
}

/* Real text entry happens in this visually hidden input (mobile keyboards
   work because focusing it opens them). */
.term__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}

.term__input:focus {
  outline: none;
  box-shadow: none;
}

@keyframes term-blink {
  50% {
    opacity: 0;
  }
}

.term--live .term__entry--new .term__output {
  animation: term-fade 0.18s ease-out;
}

@keyframes term-fade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .term__cursor,
  .term--live .term__entry--new .term__output {
    animation: none;
  }
}