/* Terminal animation
   ------------------------------------------------------------------
   Replaces the old absolutely-positioned parallax overlay with a
   self-contained Materialize card that sits in the normal page flow.

   These rules were previously written with SCSS nesting (&:before) inside
   a plain .css file, so browsers dropped them and neither the ">" prompt
   nor the blinking caret ever appeared. They are plain CSS now. */

.terminal-card {
	background-color: #0d0d0d;
	border: 1px solid #262626;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
	margin: 0 0 24px;
}

/* ---- Title bar ---- */

.terminal-card__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: linear-gradient(#2b2b2b, #202020);
	border-bottom: 1px solid #000;
}

.terminal-card__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.terminal-card__dot--close { background-color: #ff5f57; }
.terminal-card__dot--min   { background-color: #febc2e; }
.terminal-card__dot--max   { background-color: #28c840; }

.terminal-card__title {
	flex: 1 1 auto;
	text-align: center;
	font-family: "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: #9e9e9e;
	margin-right: 34px; /* balance against the three dots */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Screen ---- */

.terminal-card__screen,
.terminal_emulator {
	padding: 18px 20px 22px;
	min-height: 340px;
	font-family: "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
	font-size: 0.95rem;
	line-height: 1.55;
	font-weight: 400;
	text-align: left;
	color: #33ff66;
	background-color: #0d0d0d;
	box-sizing: border-box;
	overflow-x: auto;
}

@media only screen and (max-width: 600px) {
	.terminal-card__screen,
	.terminal_emulator {
		font-size: 0.78rem;
		padding: 14px 14px 18px;
		min-height: 260px;
	}
}

/* Command lines and the live input line both carry a ">" prompt. */
.terminal_emulator__field,
.terminal_emulator__command {
	position: relative;
	padding: 0 0 0 1.1em;
	margin: 0 0 6px 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.terminal_emulator__field::before,
.terminal_emulator__command::before {
	position: absolute;
	left: 0;
	top: 0;
	content: ">";
	color: #ff7043;
}

/* Responses are output, so they get no prompt and a dimmer colour. */
.terminal_emulator__response {
	padding: 0 0 6px 1.1em;
	margin: 0;
	color: #b8f5c8;
	white-space: pre-wrap;
	word-break: break-word;
}

.terminal_emulator__command b {
	padding-bottom: 6px;
}

/* ---- Caret ---- */

.terminal_emulator__field {
	display: block;
	min-height: 1.5em;
	box-sizing: border-box;
}

.terminal_emulator__field::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 1.05em;
	margin-left: 2px;
	background-color: #33ff66;
	vertical-align: text-bottom;
	animation: caretBlink 1.05s step-end infinite;
}

/* While waiting on a "remote" step, drop the prompt and just blink. */
.terminal_emulator__field.waiting {
	padding-left: 0;
}

.terminal_emulator__field.waiting::before {
	display: none;
}

@keyframes caretBlink {
	0%, 50%   { opacity: 0; }
	51%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.terminal_emulator__field::after {
		animation: none;
		opacity: 1;
	}
}