/* ==========================================================================
   Nerd mode CLI.

   Docked to the bottom, not overlaid — the point is navigating the site, so
   the site has to stay visible.
   ========================================================================== */

/* Anchored flush to the bottom edge, full width — a terminal drawer, not a
   floating card. Rounded on the top corners only, because the bottom edge is
   the viewport edge. Shadow points upward for the same reason. */
.cli {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	max-height: min(46vh, 24rem);
	background: var(--surface);
	border-top: 1px solid var(--rule);
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0 -14px 34px -18px color-mix(in srgb, var(--ink) 40%, transparent);
	overflow: hidden;
}

.cli[hidden] { display: none; }

/* Keep the dock clear of the panel while nerd mode is on. */
.is-nerd .dock { inset-block-end: calc(min(46vh, 24rem) + var(--s-3)); }

/* And keep the page clear of both. The panel is fixed, so without this it
   simply covers whatever is at the bottom of the document — which is the
   footer. Reserving the space is the fix, not raising the z-index. */
.is-nerd .colophon { padding-block-end: calc(min(46vh, 24rem) + var(--s-9)); }

.cli__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-2) var(--gutter);
	border-bottom: 1px solid var(--rule);
	color: var(--muted);
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

.cli__close {
	border: 0;
	background: none;
	padding: 0;
	color: var(--muted);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.cli__close:hover { color: var(--signal); }

.cli__out {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--s-4) var(--gutter);
	color: var(--muted);
	font-size: var(--mono-data);
	line-height: 1.55;
}

.cli__line {
	margin: 0;
	max-width: none;
	white-space: pre-wrap;
	word-break: break-word;
}

.cli__line.is-echo { color: var(--ink); }
.cli__line.is-err  { color: var(--alert); }

.cli__form {
	display: flex;
	align-items: baseline;
	gap: 0.7ch;
	padding: var(--s-3) var(--gutter);
	border-top: 1px solid var(--rule);
}

.cli__prompt { color: var(--signal); white-space: nowrap; }

.cli__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-data);
	font-size: var(--mono-data);
	padding: 0;
}

.cli__input:focus { outline: none; }
.cli__form:focus-within { box-shadow: inset 0 1px 0 0 var(--signal); }

@media (max-width: 47.99em) {
	.cli { max-height: 50vh; }
	.is-nerd .dock { inset-block-end: calc(50vh + var(--s-2)); }
	.is-nerd .colophon { padding-block-end: calc(50vh + var(--s-8)); }
}

/* Title bar icon */
.cli__title { display: inline-flex; align-items: center; gap: 0.6ch; }
.ico--cli { color: var(--signal); flex: 0 0 auto; }

/* Log structure -------------------------------------------------------------
   Only the typed command carries a timestamp — it is the event. Everything
   after it is that command's output, indented to the width of the timestamp
   column so it reads as belonging to the line above. */

:root { --cli-gutter: 9.4ch; }

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

/* Command echo: stamped, flush left. */
.cli__line--in {
	display: flex;
	gap: 1ch;
	align-items: baseline;
	margin-block-start: var(--s-3);
}

.cli__line--in:first-child { margin-block-start: 0; }

.cli__ts {
	flex: 0 0 auto;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	user-select: none;
}

/* Output: no stamp, indented under the command. */
.cli__line--out {
	padding-inline-start: var(--cli-gutter);
	color: var(--muted);
}

/* A hairline marks the run of output belonging to one command. */
.cli__line--out {
	border-inline-start: 1px solid var(--rule);
	margin-inline-start: 0.6ch;
	padding-inline-start: calc(var(--cli-gutter) - 0.6ch);
}

.cli__line--out.is-err { color: var(--alert); border-inline-start-color: var(--alert); }

/* The welcome banner is not a command result, so it carries no indent or rule.
   It is also the first thing anyone reads in nerd mode, so it must not be
   painted in --rule: that token is a hairline colour at roughly 1.3:1 and is
   unreadable as text. */
.cli__line--out.is-banner {
	border-inline-start: 0;
	padding-inline-start: 0;
	margin-inline-start: 0;
	color: var(--ink);
	padding-block-end: var(--s-2);
}

@media (max-width: 47.99em) {
	:root { --cli-gutter: 2.4ch; }
}

/* The host label is split around the @ to defeat email obfuscation; keep it
   visually a single word. */
.cli__host { white-space: nowrap; }
.cli__at { color: var(--signal); }