/* Console — Full screen terminal */

:root {
	--color-bg: #0a0a0a;
	--color-fg: #c8c8c8;
	--color-primary: #666;
	--color-success: #4a9;
	--color-danger: #c44;
	--color-secondary: #68a;
	--color-hover: #e90;
	--font-mono: 'Consolas', 'Monaco', 'Menlo', 'Liberation Mono', monospace;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	background: var(--color-bg);
	color: var(--color-fg);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
}

/* Layout */

section.container.console {
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr;
	height: 100vh;
	padding: 12px;
}

/* Screen */

.screen {
	grid-row: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column-reverse;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #333 transparent;
}

.screen .line {
	padding: 3px 0;
}

.screen .line > .output {
	border-left: 3px solid var(--color-primary);
	padding-left: 3px;
	padding-right: 0;
	white-space: pre-wrap;
	min-height: 1.5em;
	animation: pulse 1.2s ease-in-out infinite;
}

.screen .line > .output.success {
	border-left-color: var(--color-success);
	min-height: 0;
	animation: none;
}

.screen .line > .output.error {
	border-left-color: var(--color-danger);
	min-height: 0;
	animation: none;
}

@keyframes pulse {
	0%, 100% { border-left-color: var(--color-primary); }
	50%      { border-left-color: transparent; }
}

/* Fullscreen editor (write <path>) */

.editor {
	display: none;
}

section.container.console.editing > .screen,
section.container.console.editing > .input {
	display: none;
}

section.container.console.editing > .editor {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 12px;
	gap: 6px;
}

.editor textarea {
	flex: 1;
	background: transparent;
	color: var(--color-fg);
	font: inherit;
	border: 1px solid var(--color-primary);
	padding: 6px;
	resize: none;
	outline: none;
	tab-size: 4;
}

.editor .status {
	flex: 0 0 auto;
	padding: 3px 6px;
	background: var(--color-primary);
	color: var(--color-bg);
}

/* Input */

.input {
	grid-row: 2;
	padding: 3px;
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	width: 100%;
}

.input .prompt {
	line-height: 1;
}

.input input {
	flex: 1;
	background: transparent;
	border: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	padding: 0;
	margin: 0;
}

.input input,
.input input:focus {
	outline: none;
	box-shadow: none;
}

/* Tables (ls -l output) */

table {
	width: 100%;
	border-collapse: collapse;
}

table td {
	white-space: nowrap;
	vertical-align: top;
	padding-right: 1em;
}

table td:last-child {
	width: 100%;
	padding-right: 0;
}

/* Command links */

[data-cmd] {
	color: var(--color-secondary);
	cursor: pointer;
	transition: color 0.2s ease;
}

[data-cmd]:hover {
	color: var(--color-hover);
}

/* Pre blocks */

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

/* Selection */

::selection {
	background: #334;
}