/* PR review for humans: the web shell. The same tokens feed the shared review tab. */
:root {
	--background: #f6f2e9;
	--foreground: #1d2733;
	--muted-foreground: #6b7480;
	--card: #fffdf8;
	--panel: #fbf8f1;
	--border: #e6dfd0;
	--hair: #ece6d8;
	--primary: #1e3a4f;
	--primary-foreground: #fff;
	--brass: #9a6b1f;
	--sea: #2f6f8f;
	--success: #2d6a3e;
	--danger: #9a3b2c;
	--warning: #a2541b;
	--radius: 10px;
	--font-display: 'Newsreader', Georgia, serif;
	--font-sans: 'Inter', system-ui, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--add-bg: #e7f1e6;
	--del-bg: #f6e5e1;
	--hunk-bg: #eef1f4;
	--shadow: 0 1px 2px rgb(29 39 51 / 6%), 0 8px 24px -12px rgb(29 39 51 / 18%);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--background: #121820;
		--foreground: #e7e3da;
		--muted-foreground: #9aa3ad;
		--card: #18202a;
		--panel: #1b2430;
		--border: #2a3542;
		--hair: #242e3a;
		--primary: #c99a4a;
		--primary-foreground: #121820;
		--brass: #d6a85a;
		--sea: #7fb4cf;
		--success: #7fbf8a;
		--danger: #e08b7b;
		--warning: #e0a46b;
		--add-bg: #17301f;
		--del-bg: #3a1f1b;
		--hunk-bg: #1e2a36;
		--shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -12px rgb(0 0 0 / 50%);
		color-scheme: dark;
	}
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
}
body {
	background: var(--background);
	color: var(--foreground);
	font: 15px/1.6 var(--font-sans);
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--sea);
}
code {
	font-family: var(--mono);
	font-size: 0.86em;
}
.dim {
	color: var(--muted-foreground);
}
.small {
	font-size: 13px;
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.add {
	color: var(--success);
}
.del {
	color: var(--danger);
}
.bad {
	color: var(--danger);
	font-weight: 600;
}
.error {
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	padding: 10px 12px;
	border-radius: 8px;
}
.ok {
	color: var(--success);
	background: color-mix(in srgb, var(--success) 10%, transparent);
	padding: 10px 12px;
	border-radius: 8px;
}

/* ---------- chrome ---------- */
.top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px clamp(16px, 4vw, 40px);
	border-bottom: 1px solid var(--hair);
}
.brand {
	font: 600 18px/1 var(--font-display);
	color: var(--foreground);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.brand em {
	font-style: italic;
	font-weight: 400;
	color: var(--brass);
}
.mark {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--primary);
	color: var(--primary-foreground);
	font: 600 14px/1 var(--font-sans);
}
.proto {
	font: 600 10px/1 var(--font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brass);
	border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
	padding: 4px 6px;
	border-radius: 4px;
}
.top nav {
	margin-left: auto;
	display: flex;
	gap: 14px;
	align-items: center;
}
.top nav a {
	color: var(--foreground);
	text-decoration: none;
	font-weight: 500;
}
.tag {
	font: 600 10px/1 var(--font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--brass) 16%, transparent);
	color: var(--brass);
	padding: 3px 5px;
	border-radius: 4px;
	vertical-align: middle;
}
.linkish {
	background: none;
	border: 0;
	padding: 0;
	color: var(--muted-foreground);
	font: inherit;
	cursor: pointer;
}
.linkish:hover {
	color: var(--foreground);
}
main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px) 64px;
}
main.wide {
	max-width: 1320px;
}
body.bare main {
	padding: 0;
	max-width: none;
}
.foot {
	border-top: 1px solid var(--hair);
	padding: 20px clamp(16px, 4vw, 40px);
	color: var(--muted-foreground);
	font-size: 13px;
}

.eyebrow {
	font: 600 11px/1 var(--font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass);
	margin: 0 0 12px;
}
h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	font: 600 14px/1 var(--font-sans);
	text-decoration: none;
	cursor: pointer;
}
.btn:hover {
	border-color: color-mix(in srgb, var(--foreground) 30%, var(--border));
}
.btn.primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.btn.primary:hover {
	filter: brightness(1.08);
}
.btn.ghost {
	background: transparent;
}
.btn.block {
	display: flex;
	width: 100%;
	margin-top: 10px;
}
.btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 22px;
	box-shadow: var(--shadow);
}
.pill {
	display: inline-block;
	font: 600 11px/1 var(--font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 999px;
	vertical-align: middle;
}
.pill.read {
	background: color-mix(in srgb, var(--brass) 18%, transparent);
	color: var(--brass);
}
.pill.skim {
	background: color-mix(in srgb, var(--sea) 15%, transparent);
	color: var(--sea);
}
.pill.gen {
	background: color-mix(in srgb, var(--muted-foreground) 16%, transparent);
	color: var(--muted-foreground);
}

/* ---------- marketing ---------- */
.hero {
	padding: clamp(40px, 9vw, 96px) 0 48px;
	max-width: 860px;
}
.hero h1 {
	font-size: clamp(38px, 6.4vw, 72px);
	line-height: 1.02;
	margin: 0 0 22px;
}
.hl {
	font-style: italic;
	color: var(--brass);
}
.hl2 {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--sea) 55%, transparent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
}
.lede {
	font-size: clamp(17px, 2vw, 20px);
	color: color-mix(in srgb, var(--foreground) 80%, transparent);
	max-width: 640px;
	margin: 0 0 32px;
}
.swap {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: var(--shadow);
	max-width: 760px;
}
.swap-label {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 13px;
	color: var(--muted-foreground);
}
.swap-row {
	display: grid;
	gap: 6px;
}
.url {
	display: block;
	font-size: clamp(12px, 1.9vw, 16px);
	overflow-wrap: anywhere;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--panel);
}
.url .scheme,
.url .path {
	color: var(--muted-foreground);
}
.dom {
	font-weight: 600;
	padding: 1px 4px;
	border-radius: 4px;
}
.dom.gh {
	text-decoration: line-through;
	text-decoration-color: var(--danger);
	color: var(--foreground);
}
.dom.us {
	background: color-mix(in srgb, var(--brass) 20%, transparent);
	color: var(--brass);
	animation: glow 2.4s ease-in-out infinite;
}
@keyframes glow {
	50% {
		background: color-mix(in srgb, var(--brass) 34%, transparent);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dom.us {
		animation: none;
	}
}
.arrow {
	color: var(--brass);
	font-weight: 700;
	padding-left: 14px;
	line-height: 1;
}
.go {
	display: flex;
	gap: 10px;
	margin: 26px 0 14px;
	max-width: 760px;
	flex-wrap: wrap;
}
.go input {
	flex: 1 1 320px;
	min-width: 0;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	font: 15px var(--mono);
}
.go input:focus {
	outline: 2px solid var(--sea);
	outline-offset: 1px;
}
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	margin: 0;
}
.band {
	padding: 48px 0;
	border-top: 1px solid var(--hair);
}
.band h2 {
	font-size: clamp(26px, 3.4vw, 36px);
	margin: 0 0 8px;
}
.band .sub {
	color: var(--muted-foreground);
	margin: 0 0 24px;
	max-width: 680px;
}
.band.tight {
	padding: 32px 0;
}
.cards.three {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}
.cards .card h3 {
	margin: 12px 0 6px;
	font-size: 21px;
}
.cards .card p {
	margin: 0;
	color: color-mix(in srgb, var(--foreground) 78%, transparent);
}
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 36px;
	align-items: center;
}
@media (max-width: 860px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}
}
.stages {
	padding-left: 20px;
	margin: 0 0 16px;
}
.stages li {
	margin-bottom: 8px;
}
.fine {
	font-size: 14px;
	color: var(--muted-foreground);
}
.shot {
	margin: 0;
}
.shot img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	display: block;
}
.shot figcaption {
	font-size: 13px;
	color: var(--muted-foreground);
	margin-top: 8px;
}
.bookmarklet {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--primary);
	color: var(--primary-foreground);
	text-decoration: none;
	font-weight: 600;
	cursor: grab;
}

/* ---------- PR page ---------- */
.prhead {
	padding: 32px 0 20px;
}
.crumbs {
	margin: 0 0 8px;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.crumbs a {
	color: var(--muted-foreground);
	text-decoration: none;
}
.crumbs .num {
	color: var(--brass);
	font-weight: 600;
}
.state {
	font: 600 11px/1 var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 5px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--success) 15%, transparent);
	color: var(--success);
}
.state.merged {
	background: color-mix(in srgb, #7a4fbf 16%, transparent);
	color: #7a4fbf;
}
.state.closed {
	background: color-mix(in srgb, var(--danger) 14%, transparent);
	color: var(--danger);
}
.prhead h1 {
	font-size: clamp(26px, 3.6vw, 40px);
	line-height: 1.15;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}
.meta {
	color: var(--muted-foreground);
	margin: 0;
	overflow-wrap: anywhere;
}
.meta b {
	color: var(--foreground);
}
.prgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 22px;
	align-items: start;
}
@media (max-width: 960px) {
	.prgrid {
		grid-template-columns: minmax(0, 1fr);
	}
	.side {
		order: -1;
	}
}
.primary,
.side {
	display: grid;
	gap: 18px;
	min-width: 0;
}
.side {
	position: sticky;
	top: 16px;
}
@media (max-width: 960px) {
	.side {
		position: static;
	}
}
.panel {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 20px;
	min-width: 0;
}
.panel h2 {
	font-size: 20px;
	margin: 0 0 12px;
}
.markdown {
	overflow-wrap: anywhere;
}
.markdown img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}
.markdown pre {
	background: var(--panel);
	padding: 12px;
	border-radius: 8px;
	overflow-x: auto;
}
.markdown table {
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}
.markdown td,
.markdown th {
	border: 1px solid var(--border);
	padding: 4px 8px;
}
.markdown > :first-child {
	margin-top: 0;
}
.planhead {
	display: flex;
	justify-content: space-between;
	gap: 6px 16px;
	flex-wrap: wrap;
	align-items: baseline;
}
.planhead p {
	margin: 0 0 8px;
}
h3.group {
	font: 600 15px/1.3 var(--font-sans);
	margin: 22px 0 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--muted-foreground);
}
.stop {
	border-left: 3px solid color-mix(in srgb, var(--brass) 45%, transparent);
	padding: 2px 0 2px 14px;
	margin-bottom: 18px;
}
.stop h4 {
	font: 500 18px/1.3 var(--font-display);
	margin: 0 0 2px;
	display: flex;
	gap: 10px;
	align-items: baseline;
}
.stop .num {
	font: 700 12px/1 var(--font-sans);
	color: var(--brass);
}
.stop .why {
	margin: 0 0 8px;
	color: var(--muted-foreground);
	font-size: 14px;
}
.skimgroup h4 {
	font: 600 13px/1 var(--font-sans);
	margin: 14px 0 6px;
}
.count {
	color: var(--muted-foreground);
	font-weight: 500;
}
details.file {
	border: 1px solid var(--border);
	border-radius: 8px;
	margin-bottom: 6px;
	background: var(--card);
	min-width: 0;
}
details.file > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	min-width: 0;
}
details.file > summary::-webkit-details-marker {
	display: none;
}
details.file > summary::before {
	content: '▸';
	color: var(--muted-foreground);
	font-size: 11px;
	transition: transform 0.15s;
}
details.file[open] > summary::before {
	transform: rotate(90deg);
}
details.file[open] > summary {
	border-bottom: 1px solid var(--border);
}
.path {
	font: 13px var(--mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1 1 auto;
	direction: rtl;
	text-align: left;
}
.st {
	font: 600 10px/1 var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 5px;
	border-radius: 4px;
	background: var(--panel);
	color: var(--muted-foreground);
	flex: none;
}
.st.added {
	color: var(--success);
}
.st.deleted {
	color: var(--danger);
}
.churn {
	font: 12px var(--mono);
	flex: none;
}
.diffwrap {
	overflow-x: auto;
	max-height: 560px;
	overflow-y: auto;
}
table.diff {
	border-collapse: collapse;
	width: 100%;
	font: 12px/1.5 var(--mono);
}
table.diff td {
	padding: 0 8px;
	vertical-align: top;
}
table.diff td.ln {
	color: var(--muted-foreground);
	text-align: right;
	user-select: none;
	width: 1%;
	white-space: nowrap;
	opacity: 0.7;
}
table.diff td.code {
	white-space: pre;
}
table.diff tr.a td {
	background: var(--add-bg);
}
table.diff tr.d td {
	background: var(--del-bg);
}
table.diff tr.hunk td {
	background: var(--hunk-bg);
	color: var(--muted-foreground);
	padding: 4px 8px;
}
.sign {
	display: inline-block;
	width: 1.2em;
	color: var(--muted-foreground);
	user-select: none;
}
.more {
	padding: 6px 12px;
	margin: 0;
}
.genlist summary {
	cursor: pointer;
	color: var(--muted-foreground);
}
.genlist ul {
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: 13px;
}
.review-cta {
	border-color: color-mix(in srgb, var(--brass) 45%, var(--border));
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--brass) 7%, var(--card)),
		var(--card)
	);
}
.review-cta h2 {
	font-size: 22px;
}
.review-cta p {
	margin: 0 0 8px;
}
.checksum {
	margin: 0 0 8px;
	font-weight: 500;
}
ul.checks {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	display: grid;
	gap: 4px;
}
ul.checks li {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
	overflow-wrap: anywhere;
}
ul.checks .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--muted-foreground);
	flex: none;
}
ul.checks .pass .dot {
	background: var(--success);
}
ul.checks .fail .dot {
	background: var(--danger);
}
ul.checks .pending .dot {
	background: var(--warning);
}
.glance {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 4px;
}
.glance b {
	font: 600 18px var(--font-display);
	margin-right: 4px;
}

/* ---------- sign-in, account ---------- */
.narrow {
	max-width: 560px;
	margin: 48px auto 0;
}
.narrow h1 {
	font-size: 32px;
	margin: 0 0 12px;
}
.narrow .card {
	margin-bottom: 16px;
}
.narrow .card h2 {
	font-size: 20px;
	margin: 0 0 8px;
}
.banner {
	background: color-mix(in srgb, var(--brass) 12%, transparent);
	border: 1px dashed color-mix(in srgb, var(--brass) 55%, transparent);
	color: var(--foreground);
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
}
.stack {
	display: grid;
	gap: 10px;
	margin-bottom: 10px;
}
.stack label {
	display: grid;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}
.stack input,
.stack select {
	padding: 9px 11px;
	border-radius: 7px;
	border: 1px solid var(--border);
	background: var(--background);
	color: var(--foreground);
	font: 14px var(--font-sans);
}
.meter {
	height: 8px;
	background: var(--panel);
	border-radius: 99px;
	overflow: hidden;
	border: 1px solid var(--border);
}
.meter span {
	display: block;
	height: 100%;
	background: var(--brass);
}

/* ---------- review shell ---------- */
.shellbar {
	display: flex;
	justify-content: space-between;
	gap: 6px 16px;
	flex-wrap: wrap;
	padding: 8px clamp(16px, 2vw, 20px);
	border-bottom: 1px solid var(--hair);
	font-size: 14px;
}
.shellbar a {
	text-decoration: none;
}
pr-review-tab {
	display: block;
}
.desc .markdown {
	max-height: 340px;
	overflow-y: auto;
	padding-right: 6px;
	mask-image: linear-gradient(180deg, #000 85%, transparent);
}
.desc .markdown:hover,
.desc .markdown:focus-within {
	mask-image: none;
}

@media (max-width: 560px) {
	.proto,
	.brand em,
	.top nav .tag {
		display: none;
	}
	.top {
		gap: 10px;
	}
	.brand,
	.top nav a {
		white-space: nowrap;
	}
}