/* orgcomputers — shared stylesheet
   plaintext-terminal genre: tokens, chrome, prose, forms. */

:root {
	--bg: #f7f7f5;
	--fg: #16171a;
	--dim: #61636b;
	--faint: #9c9ea5;
	--rule: color-mix(in oklab, var(--fg) 22%, transparent);
	--ok: #1a7a4c;
	--accent: #b9682a;
	--mono:
		ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	/* product-screenshot cards stay a fixed light theme regardless of page
	   theme, like an embedded screenshot of the real UI */
	--card-bg: #fbfaf8;
	--card-bg-2: #f2f1ec;
	--card-text: #23262c;
	--card-text-dim: #767b85;
	--card-rule: #e7e5df;
}

[data-theme='dark'] {
	--bg: #0e0f11;
	--fg: #e9e9e4;
	--dim: #93959c;
	--faint: #55565c;
	--ok: #4fd190;
	--accent: #e0954b;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg: #0e0f11;
		--fg: #e9e9e4;
		--dim: #93959c;
		--faint: #55565c;
		--ok: #4fd190;
		--accent: #e0954b;
	}
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
	padding: 44px;
	margin: 0;
	font-variant-ligatures: none;
}

@media (max-width: 600px) {
	body { padding: 26px 18px 72px; }
}

::selection { background: var(--fg); color: var(--bg); }
a { color: var(--fg); }
:focus-visible { outline: 1px dashed var(--fg); outline-offset: 3px; }

main { max-width: 680px; }

/* ── brand ─────────────────────────────────────────── */

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	margin-bottom: 2px;
}

.brand .mark { color: var(--fg); flex: 0 0 auto; }
.brand .mark rect { fill: none; stroke: currentColor; stroke-width: 1.3; }
.brand .mark circle { fill: currentColor; }

/* ── rules ─────────────────────────────────────────── */

.rule {
	margin: 26px 0;
	color: var(--faint);
	user-select: none;
	font-size: 12px;
}

/* ── hero ──────────────────────────────────────────── */

.hero-h {
	font-size: clamp(15px, 2.1vw, 18px);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 14px;
	max-width: 42ch;
}

.hero-p { margin: 0 0 10px; max-width: 58ch; }
.hero-sub { color: var(--dim); margin: 0 0 20px; max-width: 58ch; }

.btn {
	display: inline-block;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	background: transparent;
	border: 1px solid var(--fg);
	padding: 6px 14px;
	color: var(--fg);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: var(--fg); color: var(--bg); }

.arr {
	display: inline-block;
	transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn:hover .arr, .alink:hover .arr { transform: translateX(4px); }

.alink {
	display: inline-block;
	color: var(--dim);
	text-decoration: none;
	margin-top: 2px;
}
.alink:hover { color: var(--fg); }

/* ── product block ─────────────────────────────────── */

.sect {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0 0 18px;
}
.sect::before { content: '┌─'; font-weight: 400; color: var(--dim); }
.sect::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--rule);
	transform: translateY(1px);
}

.product {
	margin: 0 0 22px;
	max-width: 58ch;
}
.product-name {
	font-weight: 700;
	text-decoration: none;
	color: var(--fg);
}
.product-name:hover { text-decoration: underline; }
.product-name:hover .arr { transform: translateX(4px); }
.product-desc { color: var(--dim); margin: 6px 0 0; }

.diagram {
	color: var(--dim);
	font-size: 12px;
	line-height: 1.6;
	white-space: pre;
	overflow-x: auto;
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--rule);
}

/* ── status ────────────────────────────────────────── */

.status { margin: 4px 0 0; }
.status .led {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ok);
	margin-right: 6px;
	animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.status .meta { color: var(--dim); }

.cursor {
	display: inline-block;
	width: 0.55em; height: 1em;
	background: var(--fg);
	vertical-align: -2px;
	margin-left: 3px;
	animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
	.cursor, .status .led { animation: none; }
}

/* ── footer ────────────────────────────────────────── */

.site-footer {
	margin-top: 64px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	color: var(--dim);
	max-width: 680px;
}
.site-footer a { color: var(--dim); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer .sep { user-select: none; color: var(--faint); }

/* ── back link (subpages) ─────────────────────────── */

.back-link { margin-bottom: 28px; }
.back-link a { color: var(--dim); text-decoration: none; font-size: 12px; }
.back-link a:hover { color: var(--fg); }

.page-h {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	font-family: var(--sans);
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.page-lede {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--dim);
	max-width: 58ch;
	margin: 0 0 8px;
}
.section-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 40px 0 10px;
}

/* ── git vs handoff contrast ───────────────────────── */

.contrast {
	font-family: var(--sans);
	max-width: 58ch;
	border: 1px solid var(--rule);
	margin: 14px 0;
}
.contrast-row {
	display: flex;
	gap: 14px;
	padding: 12px 16px;
	align-items: baseline;
}
.contrast-row + .contrast-row { border-top: 1px solid var(--rule); }
.contrast-row.alt { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.contrast-label {
	flex: 0 0 108px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dim);
}
.contrast-row.alt .contrast-label { color: var(--accent); }
.contrast-value { font-size: 13.5px; color: var(--fg); line-height: 1.5; }

/* ── possibility list ──────────────────────────────── */

.poss-list {
	font-family: var(--sans);
	list-style: none;
	margin: 14px 0;
	padding: 0;
	max-width: 58ch;
}
.poss-list li {
	position: relative;
	padding-left: 22px;
	margin: 0 0 9px;
	font-size: 13.5px;
	line-height: 1.5;
}
.poss-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--accent);
}

/* ── Slack-style thread mockup (product screenshot) ─── */

.chat-card {
	font-family: var(--sans);
	background: var(--card-bg);
	border-radius: 10px;
	overflow: hidden;
	max-width: 42rem;
	box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.45);
	border: 1px solid var(--card-rule);
	margin: 14px 0 6px;
}
.chat-top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--card-rule);
	background: var(--card-bg-2);
}
.chat-top .hash { color: var(--card-text-dim); font-weight: 600; font-size: 13px; }
.chat-top .name { color: var(--card-text); font-weight: 700; font-size: 14px; }
.chat-body { padding: 14px 18px 10px; }
.msg { display: flex; gap: 10px; padding: 6px 0; }
.avatar {
	width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; color: #fff;
}
.av-k { background: var(--accent); }
.av-m { background: #4f7a9e; }
.av-a { background: #565b64; }
.msg-name { font-weight: 700; font-size: 13px; color: var(--card-text); }
.msg-time { font-weight: 400; font-size: 11px; color: var(--card-text-dim); margin-left: 6px; }
.msg-text { font-size: 13.5px; color: #383c43; line-height: 1.5; margin-top: 2px; }
.msg-text code {
	font-family: var(--mono); background: var(--card-bg-2);
	padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
.tag {
	display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px;
	background: color-mix(in oklab, var(--accent) 16%, transparent);
	color: var(--accent); margin-left: 8px; vertical-align: middle;
}
.thread-indent { margin-left: 34px; padding-left: 13px; border-left: 2px solid var(--card-rule); }
.sys-note { font-size: 12px; color: var(--card-text-dim); padding: 5px 0 2px 34px; }
.chat-foot {
	border-top: 1px solid var(--card-rule); background: var(--card-bg-2);
	padding: 10px 18px; font-size: 12.5px; color: var(--card-text-dim); line-height: 1.45;
}
.chat-foot strong { color: var(--card-text); }
.chat-foot.muted { font-style: italic; }