/* Visual language: a printed technical reference for a terminal program.
   Structure comes from hairline rules, alignment, and small-caps monospace
   labels. No pills, no floating cards, no gradients competing with the
   screenshots, which are the only decorated objects on the page. */

:root {
	--bg: #0a0d10;
	--panel: #0e1317;
	--panel2: #12181d;
	--rule: #1b232b;
	--rule2: #2a3540;
	--text: #e9eef3;
	--muted: #b5c0ca;
	--dim: #a2aeba;
	--faint: #8996a3;
	--cyan: #3ec9f5;
	--green: #63d69f;
	--amber: #f0bd63;
	--red: #ff8087;
	--violet: #b39bff;
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Height of the sticky masthead; the scroll probe fails if this drifts. */
	--head-h: 113px;
}

* { box-sizing: border-box; }
/* No global smooth scrolling: nav links jump whole sections, and animating
   twenty thousand pixels feels like the page is running away. Short,
   deliberate moves opt in from script. */
html { scroll-padding-top: calc(var(--head-h) + 12px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; }
p { margin: 0; }

.wrap { width: min(1560px, calc(100% - 56px)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--panel2); padding: 10px 16px; }
.skip:focus { left: 0; }

/* Small-caps monospace label: the one recurring ornament on the page. */
.eyebrow,
.tabsec-head .count,
.grouphead,
.stat span,
.pipeline h2,
table.grid th,
.guide b,
.tag {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 400;
}

/* ---------- masthead ---------- */

.masthead {
	position: sticky; top: 0; z-index: 40;
	background: rgba(10, 13, 16, 0.9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule2);
}
.masthead-inner {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 28px; padding: 13px 0 11px;
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-mark { color: var(--cyan); font-size: 15px; line-height: 1; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text b { font-size: 15px; letter-spacing: -0.1px; }
.brand-text small { color: var(--faint); font-size: 11px; font-family: var(--mono); }

/* Underline, not a capsule: the field reads as a line on a form. */
.search {
	display: flex; align-items: center; gap: 9px;
	border-bottom: 1px solid var(--rule2); padding: 4px 1px 5px;
	min-width: 360px; min-height: 44px; color: var(--faint);
	transition: border-color 0.15s;
}
.search:focus-within { border-bottom-color: var(--cyan); }
.search span { font-size: 13px; }
.search input {
	flex: 1; background: none; border: 0; outline: none; padding: 0;
	color: var(--text); font-family: var(--mono); font-size: 12.5px; min-width: 0;
}
.search input::placeholder { color: var(--faint); }
.search kbd { border: 0; background: none; padding: 0; color: var(--faint); font-size: 10.5px; }

.tabnav {
	display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none;
	width: min(1560px, calc(100% - 56px)); margin-inline: auto;
}
.tabnav::-webkit-scrollbar { display: none; }
.tabnav a {
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
	min-height: 44px; padding: 9px 0 8px; border-bottom: 2px solid transparent;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.9px;
	text-transform: uppercase; color: var(--dim); text-decoration: none;
	transition: color 0.12s, border-color 0.12s;
}
.tabnav a:hover { color: var(--text); text-decoration: none; }
.tabnav a.active { color: var(--text); border-bottom-color: var(--cyan); }
.tabnav a.empty { opacity: 0.35; }
.tabnav a i { font-style: normal; font-size: 11px; opacity: 0.7; }
.tabnav a span { font-size: 10.5px; color: var(--faint); letter-spacing: 0.4px; }
.tabnav a.active span { color: var(--cyan); }

/* ---------- intro ---------- */

.intro {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
	gap: 52px; padding: 46px 0 38px; align-items: start;
}
.intro h1 { font-size: clamp(30px, 3.3vw, 44px); letter-spacing: -0.9px; margin-bottom: 16px; max-width: 26ch; }
.intro-copy p { color: var(--muted); font-size: 15.5px; max-width: 68ch; }
.intro-copy code { color: var(--cyan); }

.intro-stats { display: flex; flex-wrap: wrap; margin-top: 26px; border-top: 1px solid var(--rule2); }
.stat { display: flex; flex-direction: column; gap: 1px; padding: 12px 22px 0; border-left: 1px solid var(--rule); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { font-size: 21px; font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.stat span { font-size: 10px; }

.howto { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.howto li { font-size: 13.5px; color: var(--muted); padding-left: 17px; position: relative; }
.howto li::before { content: "→"; position: absolute; left: 0; color: var(--faint); font-family: var(--mono); }
.howto b { color: var(--text); font-weight: 600; }
kbd { font-family: var(--mono); font-size: 11.5px; color: var(--text); border-bottom: 1px solid var(--rule2); padding: 0 1px; }

.pipeline { border-top: 1px solid var(--rule2); padding-top: 15px; }
.pipeline h2 { margin-bottom: 8px; }
.pipe { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pipe li {
	display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline;
	padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.pipe li::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}
.pipe b { font-size: 13px; font-weight: 600; }
.pipe span { grid-column: 2; font-size: 12px; color: var(--dim); }
.pipe span code { color: var(--muted); }
.pipe-note { margin-top: 12px; font-size: 12px; color: var(--dim); max-width: 46ch; }
.pipe-note code { color: var(--muted); }

/* ---------- tab section ---------- */

.tabs { display: flex; flex-direction: column; }
.tabsec { padding: 32px 0 14px; border-top: 1px solid var(--rule2); }
.tabsec.hidden { display: none; }
.tabsec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.tabsec-head .idx { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.5px; }
.tabsec-head h2 { font-size: 26px; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 10px; }
.tabsec-head h2 i { font-style: normal; font-size: 17px; opacity: 0.75; }
.tabsec-head .groups { display: flex; gap: 15px; flex-wrap: wrap; margin-left: auto; }
.tabsec-head .groups button {
	background: none; border: 0; min-height: 44px; padding: 0 8px; cursor: pointer;
	font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.tabsec-head .groups button:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* 1099px is the 1x width of every capture; giving the column exactly that
   keeps the retina screenshot pixel-exact instead of resampled to mush. */
.split { display: grid; grid-template-columns: minmax(0, 1099px) minmax(340px, 1fr); gap: 34px; align-items: start; }

/* ---------- screenshot column ---------- */

.shotcol { position: sticky; top: calc(var(--head-h) + 14px); display: flex; flex-direction: column; min-width: 0; }
.shotbar { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.shotbar button {
	background: none; border: 0; border-bottom: 2px solid transparent; min-height: 44px; padding: 8px 4px 6px;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.3px;
	color: var(--dim); cursor: pointer;
}
.shotbar button:hover { color: var(--text); }
.shotbar button.on { color: var(--text); border-bottom-color: var(--cyan); }
.shotbar .scale { margin-left: auto; }
.shotbar .shotnote { font-size: 11px; color: var(--faint); font-family: var(--mono); }

.shotview {
	/* Scroll chains to the page on purpose: this pane covers most of the
	   viewport, so trapping the wheel here would strand the reader. */
	overflow: auto;
	max-height: calc(100vh - var(--head-h) - 150px);
	margin-top: 14px;
	border: 1px solid var(--rule2); background: #05070a;
	scrollbar-width: thin; scrollbar-color: var(--rule2) transparent;
}
.shotframe { position: relative; width: max-content; }
.shotframe img { display: block; width: var(--shot-w, 100%); height: auto; }
.shotview.fit { overflow: hidden; }
.shotview.fit .shotframe { width: 100%; }
.shotview.fit .shotframe img { width: 100%; }

.hotspot {
	position: absolute; border: 0; padding: 0; margin: 0; background: transparent;
	cursor: pointer; border-radius: 2px; transition: background 0.1s, box-shadow 0.1s;
}
.hotspot:hover { background: rgba(62, 201, 245, 0.14); }
.hotspot.on {
	background: rgba(62, 201, 245, 0.16);
	box-shadow: inset 0 0 0 1px rgba(62, 201, 245, 0.85), 0 0 22px rgba(62, 201, 245, 0.26);
}
.hotspot.peek { background: rgba(62, 201, 245, 0.09); box-shadow: inset 0 0 0 1px rgba(62, 201, 245, 0.4); }


/* ---------- settings list ---------- */

.listcol { display: flex; flex-direction: column; min-width: 0; }
.grouphead { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; padding-bottom: 7px; }
.grouphead::after { content: ""; flex: 1; height: 1px; background: var(--rule2); }
.grouphead:first-child { margin-top: 0; }

/* One continuous list separated by hairlines, not a stack of boxes. */
.setting { border-bottom: 1px solid var(--rule); }
.setting.hidden { display: none; }
.setting.hit { box-shadow: inset 2px 0 0 var(--green); }
.setting.sel { background: var(--panel); box-shadow: inset 2px 0 0 var(--cyan); }

.rowbtn {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
	width: 100%; min-height: 44px; text-align: left; cursor: pointer; font-family: inherit;
	background: none; border: 0; color: inherit; padding: 10px 10px 10px 12px;
}
.rowbtn:hover { background: var(--panel2); }
.rowbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.rowlabel { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rowlabel b { font-size: 13.5px; font-weight: 550; }
.rowlabel .path {
	flex: 1 1 auto; min-width: 3ch;
	font-family: var(--mono); font-size: 10.5px; color: var(--faint);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowmeta { display: flex; align-items: baseline; gap: 12px; }
.val {
	font-family: var(--mono); font-size: 11.5px; color: var(--green);
	max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.val.off { color: var(--faint); }
.chev { font-family: var(--mono); font-size: 12px; color: var(--faint); width: 8px; text-align: center; }
.chev::after { content: "+"; }
.setting.open .chev::after { content: "−"; }


.detail { display: none; padding: 0 12px 18px; }
.setting.open .detail { display: block; }
.detail p { font-size: 13.5px; color: var(--text); max-width: 76ch; }
.detail p.mech { color: var(--muted); margin-top: 9px; }

.detail .kv {
	display: flex; flex-wrap: wrap; gap: 4px 20px;
	margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--rule);
}
.tag { display: inline-flex; align-items: baseline; gap: 6px; color: var(--faint); }
.tag b { font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 400; }
.tag.cond b { color: var(--amber); }
.tag.secret b { color: var(--red); }
.tag.impact b { color: var(--violet); }

.opts { margin-top: 14px; border-top: 1px solid var(--rule); }
.opt {
	display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 16px;
	padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px;
}
.opt code { color: var(--muted); }
.opt span { color: var(--dim); }
.opt.is-default code { color: var(--green); }

/* Editorial judgment reads as a margin note, not an alert box. */
.guide { margin-top: 15px; border-left: 2px solid var(--rule2); padding-left: 13px; }
.guide b { display: block; }
.guide.keep { border-left-color: rgba(99, 214, 159, 0.5); }
.guide.keep b { color: var(--green); }
.guide.consider { border-left-color: rgba(240, 189, 99, 0.5); }
.guide.consider b { color: var(--amber); }
.guide.change { border-left-color: rgba(255, 128, 135, 0.5); }
.guide.change b { color: var(--red); }
.guide p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.guide code { color: var(--text); }

.notshown { margin-top: 14px; font-size: 12px; color: var(--dim); border-left: 2px solid var(--rule2); padding-left: 13px; }

.rowactions { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.rowactions button {
	background: none; border: 0; min-height: 44px; padding: 0 6px; cursor: pointer;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px;
	text-transform: uppercase; color: var(--dim);
}
.rowactions button:hover { color: var(--cyan); }

/* ---------- config-only table ---------- */

.section { padding: 46px 0 0; border-top: 1px solid var(--rule2); }
.section-head h2 { font-size: 22px; letter-spacing: -0.3px; margin-bottom: 7px; }
.section-head p { color: var(--muted); font-size: 14px; max-width: 80ch; }
.table-card { overflow-x: auto; margin-top: 18px; border-top: 1px solid var(--rule2); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { text-align: left; padding: 9px 16px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid th { padding-top: 10px; padding-bottom: 8px; }
table.grid code { color: var(--muted); }
table.grid td.t { font-family: var(--mono); color: var(--dim); font-size: 12px; }
table.grid td.d { color: var(--muted); max-width: 92ch; }

.footer { padding: 34px 0 64px; margin-top: 46px; border-top: 1px solid var(--rule2); color: var(--faint); font-size: 12px; display: grid; gap: 6px; }
.footer code { color: var(--dim); }
.footer-note { max-width: 78ch; }
.footer-links a { color: var(--muted); }

.toast {
	position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
	background: var(--panel2); border: 1px solid var(--rule2); color: var(--text);
	padding: 8px 15px; font-size: 12px; font-family: var(--mono);
	opacity: 0; pointer-events: none; transition: opacity 0.16s, transform 0.16s; z-index: 60;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.empty-state { color: var(--dim); font-size: 13px; padding: 22px 0; }

@media (max-width: 1520px) {
	.split { grid-template-columns: 1fr; }
	.shotcol { position: static; }
	.shotview { max-height: 78vh; }
	.intro { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 1180px) {
	.shotview { max-height: 70vh; }
}
@media (max-width: 720px) {
	:root { --head-h: 166px; }
	.wrap, .tabnav { width: calc(100% - 30px); }
	.masthead-inner { flex-direction: column; align-items: stretch; gap: 12px; }
	.search { min-width: 0; }
	.tabnav { gap: 18px; }
	.tabsec-head .groups { display: none; }
	.rowbtn { grid-template-columns: 1fr; gap: 4px; }
	.rowmeta { justify-content: flex-start; }
	.intro-stats .stat { padding-left: 0; border-left: 0; padding-right: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}