/*
   2dev.nl — "serial monitor" theme.
   Monospace-only, single column, terminal chrome. Fixed dark palette
   by design (this is a terminal, not a themeable document).
*/

:root {
	--bg: #0b0f0e;
	--fg: #cfe9dc;
	--accent: #3ed598;
	--amber: #e2a23d;
	--dim: #5c6b64;
	--line: #1c2622;
	--mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.visuallyhidden.skip-link a {
	position: absolute;
	left: -9999px;
}
.visuallyhidden.skip-link a:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10;
	background: var(--accent);
	color: #06110c;
	padding: 0.5em 0.75em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent); color: #06110c; }

/* Subtle CRT scanlines over the whole page */
.term { position: relative; isolation: isolate; }
.term::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.32) 0px,
		rgba(0, 0, 0, 0.32) 1px,
		transparent 1px,
		transparent 3px
	);
	mix-blend-mode: multiply;
	z-index: 5;
}

.term-titlebar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
	max-width: 100%;
}
.term-dot { width: 9px; height: 9px; border-radius: 50%; background: #33413c; }
.term-titlebar-text { margin-left: 8px; font-size: 11px; color: var(--dim); }

.term-header,
.term-main,
.term-footer {
	max-width: 700px;
	margin: 0 auto;
	padding-left: 26px;
	padding-right: 26px;
}

.term-header { padding-top: 26px; }

.term-prompt { font-size: 12px; color: var(--dim); margin: 0 0 4px; }
.term-prompt .p { color: var(--accent); }

.term-site-title { font-size: 29px; font-weight: 500; margin: 0 0 2px; }
.term-site-title a { color: var(--fg); }
.term-site-title a:hover { text-decoration: none; }

.cursor {
	display: inline-block;
	width: 10px;
	height: 21px;
	background: var(--accent);
	margin-left: 5px;
	vertical-align: -4px;
	animation: term-blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
	.cursor { animation: none; }
}
@keyframes term-blink {
	50% { opacity: 0; }
}

.term-tagline { font-size: 15px; color: var(--dim); margin: 6px 0 20px; }

.term-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 15px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 26px;
}
.term-nav a { color: var(--accent); }
.term-nav a::before { content: "/"; color: var(--dim); margin-right: 2px; }
.term-nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.term-main { padding-bottom: 40px; min-height: 40vh; }

/* Headings / prose inside post + page content */
.term-main h1 { font-size: 25px; font-weight: 500; margin: 0 0 4px; color: var(--fg); }
.term-main h2 { font-size: 20px; font-weight: 500; margin: 1.8em 0 0.6em; color: var(--fg); }
.term-main h3 { font-size: 17px; font-weight: 700; margin: 1.6em 0 0.5em; color: var(--fg); }
.term-main p { margin: 0 0 1.2em; }
.term-main ul, .term-main ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.term-main li { margin-bottom: 0.4em; }
.term-main img { max-width: 100%; height: auto; display: block; margin: 1.4em 0; border: 1px solid var(--line); }
.term-main blockquote { margin: 0 0 1.2em; padding-left: 1em; border-left: 2px solid var(--accent); color: var(--dim); }
.term-main pre {
	background: #060908;
	border: 1px solid var(--line);
	padding: 14px 16px;
	overflow-x: auto;
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 1.4em;
}
.term-main code {
	font-family: var(--mono);
	font-size: 0.92em;
	background: #060908;
	padding: 0.1em 0.35em;
	border: 1px solid var(--line);
}
.term-main pre code { border: 0; padding: 0; background: none; }
.term-main table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.term-main th, .term-main td { border: 1px solid var(--line); padding: 0.5em 0.7em; text-align: left; }

/* Post meta */
.post-meta {
	font-size: 12px;
	color: var(--dim);
	margin: 0 0 1.6em;
	padding-bottom: 1.2em;
	border-bottom: 1px solid var(--line);
}
.post-meta .cat a { color: var(--amber); }
.post-meta .cat a::before { content: "#"; opacity: 0.7; }
.post-meta .tags { color: var(--dim); }
.post-meta .sep { margin: 0 0.5em; opacity: 0.5; }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
	font-size: 15px;
}
.post-nav .next { text-align: right; }
.post-nav a::before { content: "> "; color: var(--accent); }

/* Log-style listings: used for /posts/, /category/x/, /YYYY/MM/ */
.term-list-title { font-size: 12px; color: var(--dim); margin: 0 0 18px; }
.term-list-title .p { color: var(--accent); }
.log-list { display: flex; flex-direction: column; }
.log-row {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 14px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.log-row:first-child { padding-top: 0; }
.log-time { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-time::before { content: "["; } .log-time::after { content: "]"; }
.log-title { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.log-title a::before { content: "> "; color: var(--accent); }
.log-cat { font-size: 11px; color: var(--amber); text-align: right; white-space: nowrap; }
.log-cat::before { content: "#"; opacity: 0.7; }

/* /categories/ and /archive/ index grids */
.index-grid { display: flex; flex-direction: column; }
.index-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
}
.index-row:first-child { padding-top: 0; }
.index-row a::before { content: "> "; color: var(--accent); }
.index-count { color: var(--dim); font-size: 12px; white-space: nowrap; }

.term-footer {
	border-top: 1px solid var(--line);
	padding-top: 22px;
	padding-bottom: 30px;
}
.term-search { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.term-search label { color: var(--dim); white-space: nowrap; }
.term-search label .p { color: var(--accent); }
.term-search input[type="search"] {
	flex: 1;
	min-width: 140px;
	background: #060908;
	border: 1px solid var(--line);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 12px;
	padding: 6px 8px;
}
.term-search input[type="search"]::placeholder { color: var(--dim); }
.term-search input[type="search"]:focus,
.term-nav a:focus-visible,
.log-title a:focus-visible,
.index-row a:focus-visible,
.term-site-title a:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 2px;
}
.term-search button {
	background: none;
	border: 1px solid var(--line);
	color: var(--accent);
	font-family: var(--mono);
	padding: 6px 10px;
	cursor: pointer;
}
.term-search button:hover { border-color: var(--accent); }
.term-copyright { font-size: 12px; color: var(--dim); margin: 0; }
.term-copyright a { color: var(--dim); text-decoration: underline; }

@media (max-width: 520px) {
	.log-row { grid-template-columns: 1fr; gap: 2px; }
	.log-time { order: 1; }
	.log-title { order: 0; }
	.log-cat { order: 2; text-align: left; }
}