/**
 * Projects.
 *
 * Inherits the theme's tokens where they exist and falls back to its own, so
 * the planner looks native inside Agriculture Novel but does not break if the
 * theme is swapped or a token is renamed.
 */

.an-pj {
	--pj-fg: var(--an-fg, #14181c);
	--pj-dim: var(--an-fg-dim, #5c6670);
	--pj-line: var(--an-line, #e3e7ea);
	--pj-card: var(--an-surface, #ffffff);
	--pj-bg: var(--an-bg, #fafbfc);
	--pj-accent: var(--an-accent, #1f7a3d);
	--pj-warn: #b45309;
	--pj-ok: #1f7a3d;

	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 20px 72px;
	color: var(--pj-fg);
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	.an-pj {
		--pj-fg: var(--an-fg, #eef1f3);
		--pj-dim: var(--an-fg-dim, #949ea7);
		--pj-line: var(--an-line, #2b3238);
		--pj-card: var(--an-surface, #171b1f);
		--pj-bg: var(--an-bg, #101316);
		--pj-accent: var(--an-accent, #5fc07f);
		--pj-warn: #f0a63a;
		--pj-ok: #5fc07f;
	}
}

/* ── header ────────────────────────────────────────────────── */

.an-pj-head { margin-bottom: 28px; }

.an-pj-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pj-accent);
	margin-bottom: 8px;
}

.an-pj-head h1 {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
}

.an-pj-head h1[contenteditable] {
	outline: none;
	border-bottom: 1px dashed transparent;
}

.an-pj-head h1[contenteditable]:hover,
.an-pj-head h1[contenteditable]:focus {
	border-bottom-color: var(--pj-line);
}

.an-pj-head p {
	color: var(--pj-dim);
	max-width: 68ch;
	margin: 0 0 16px;
	line-height: 1.55;
}

.an-pj-back {
	display: inline-block;
	color: var(--pj-dim);
	text-decoration: none;
	font-size: 13px;
	margin-bottom: 12px;
}

.an-pj-back:hover { color: var(--pj-accent); }

.an-pj-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── buttons ───────────────────────────────────────────────── */

.an-pj-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--pj-line);
	border-radius: 8px;
	background: var(--pj-card);
	color: var(--pj-fg);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
}

.an-pj-btn:hover { border-color: var(--pj-accent); color: var(--pj-accent); }

.an-pj-btn-p {
	background: var(--pj-accent);
	border-color: var(--pj-accent);
	color: #fff;
	font-weight: 600;
}

.an-pj-btn-p:hover { filter: brightness(1.08); color: #fff; }

.an-pj-btn-d:hover { border-color: #b32d2e; color: #b32d2e; }

/* ── project cards ─────────────────────────────────────────── */

.an-pj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.an-pj-card {
	display: block;
	padding: 18px;
	border: 1px solid var(--pj-line);
	border-radius: 12px;
	background: var(--pj-card);
	text-decoration: none;
	color: inherit;
}

.an-pj-card:hover { border-color: var(--pj-accent); }

.an-pj-card h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.25; }
.an-pj-card-m { margin: 0 0 10px; font-size: 13px; color: var(--pj-dim); }
.an-pj-card-n { margin: 0; font-size: 14px; color: var(--pj-fg); }

/* ── forms ─────────────────────────────────────────────────── */

.an-pj-panel {
	max-width: 460px;
	padding: 22px;
	border: 1px solid var(--pj-line);
	border-radius: 12px;
	background: var(--pj-card);
}

.an-pj label,
.an-pj-side label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--pj-dim);
	margin: 14px 0 5px;
}

.an-pj input,
.an-pj select,
.an-pj textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--pj-line);
	border-radius: 8px;
	background: var(--pj-bg);
	color: var(--pj-fg);
	font: inherit;
	font-size: 14px;
	box-sizing: border-box;
}

.an-pj input:focus,
.an-pj select:focus,
.an-pj textarea:focus {
	outline: 2px solid var(--pj-accent);
	outline-offset: -1px;
}

.an-pj-panel .an-pj-btn { margin-top: 20px; width: 100%; }

.an-pj-syshint {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--pj-dim);
	line-height: 1.5;
}

/* ── project layout ────────────────────────────────────────── */

.an-pj-cols {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	align-items: start;
}

@media (max-width: 860px) {
	.an-pj-cols { grid-template-columns: 1fr; }
}

.an-pj-side {
	position: sticky;
	top: 20px;
	padding: 18px;
	border: 1px solid var(--pj-line);
	border-radius: 12px;
	background: var(--pj-card);
}

@media (max-width: 860px) {
	.an-pj-side { position: static; }
}

.an-pj-side h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pj-dim);
}

/* ── artifacts ─────────────────────────────────────────────── */

.an-pj-arts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}

.an-pj-art {
	padding: 20px;
	border: 1px solid var(--pj-line);
	border-radius: 12px;
	background: var(--pj-card);
}

.an-pj-art h2 {
	margin: 0 0 14px;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.an-pj-rows { margin: 0; }

.an-pj-rows dt {
	font-size: 13px;
	color: var(--pj-dim);
	margin-top: 10px;
}

.an-pj-rows dd {
	margin: 2px 0 0;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.an-pj-rows dd b { font-weight: 600; }

.an-pj-note {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--pj-line);
	font-size: 13px;
	line-height: 1.55;
	color: var(--pj-dim);
}

/* ── provenance + verdicts ─────────────────────────────────── */

.an-pj-src {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid var(--pj-line);
	font-size: 11px;
	color: var(--pj-dim);
	vertical-align: middle;
}

.an-pj-src-c {
	border-color: var(--pj-accent);
	color: var(--pj-accent);
	font-weight: 600;
}

.an-pj-ok { color: var(--pj-ok); font-weight: 600; }
.an-pj-warn { color: var(--pj-warn); font-weight: 600; }

/* ── states ────────────────────────────────────────────────── */

.an-pj-empty,
.an-pj-loading {
	grid-column: 1 / -1;
	padding: 40px 0;
	color: var(--pj-dim);
	font-size: 15px;
	line-height: 1.6;
	max-width: 60ch;
}

.an-pj-warn:not(span) {
	margin-top: 28px;
	padding: 12px 16px;
	border-left: 3px solid var(--pj-warn);
	background: var(--pj-card);
	color: var(--pj-dim);
	font-size: 13px;
	line-height: 1.55;
}

.an-pj-noscript {
	padding: 40px 0;
	max-width: 60ch;
}