/*
 * Custom themes: load an extra stylesheet after this one that redefines
 * the same --pgw-* (optional --pgw-hljs-*, --d2h-*) variables on :root.
 * Example: <link rel="stylesheet" href="static/themes/solarized.css">
 */

:root {
	color-scheme: light;

	/* Theme colors */
	--pgw-theme-wheat: #d1caa1;
	--pgw-theme-slate: #66717e;
	--pgw-theme-mist: #d4d6b9;
	--pgw-theme-ink: #0f1218;
	--pgw-theme-ink-soft: #1a1f2e;

	/* Surfaces */
	--pgw-bg: #fafafa;
	--pgw-bg-raised: #ffffff;
	--pgw-bg-muted: #f4f4f5;
	--pgw-border: #e4e4e7;
	--pgw-border-muted: #d4d4d8;

	--pgw-text: #18181b;
	--pgw-text-muted: #52525b;
	--pgw-text-dim: #71717a;

	--pgw-link: #2563eb;
	--pgw-link-visited: #7c3aed;
	--pgw-link-hover: #2641dc;

	--pgw-btn-bg: var(--pgw-theme-mist);
	--pgw-btn-text: var(--pgw-theme-ink);
	--pgw-btn-hover-bg: var(--pgw-theme-wheat);
	--pgw-btn-hover-text: var(--pgw-theme-ink);

	--pgw-accent-bg: #e4e4e7;
	--pgw-accent-text: #18181b;
	--pgw-title-bg: #f4f4f5;
	--pgw-title-hover-bg: #e4e4e7;

	--pgw-code-bg: #f4f4f5;
	--pgw-code-border: #e4e4e7;

	/* highlight.js (github-light palette via pgw / Tabler) */
	--pgw-hljs-fg: var(--pgw-text);
	--pgw-hljs-bg: transparent;
	--pgw-hljs-comment: var(--pgw-text-muted);
	--pgw-hljs-keyword: var(--tblr-pink, #a71d5d);
	--pgw-hljs-type: var(--tblr-red, #cf222e);
	--pgw-hljs-string: var(--pgw-link);
	--pgw-hljs-title: var(--tblr-purple, #8250df);
	--pgw-hljs-attr: var(--tblr-cyan, #0550ae);
	--pgw-hljs-name: var(--tblr-orange, #953800);
	--pgw-hljs-built_in: var(--pgw-link);
	--pgw-hljs-tag: var(--pgw-add-fg);
	--pgw-hljs-meta: var(--pgw-hljs-fg);
	--pgw-hljs-addition-fg: var(--pgw-add-fg);
	--pgw-hljs-addition-bg: var(--pgw-add-bg);
	--pgw-hljs-deletion-fg: var(--pgw-rem-fg);
	--pgw-hljs-deletion-bg: var(--pgw-rem-bg);

	--pgw-table-stripe: #fafafa;
	--pgw-table-hover: #f4f4f5;

	--pgw-add-fg: #166534;
	--pgw-add-bg: #dcfce7;
	--pgw-rem-fg: #991b1b;
	--pgw-rem-bg: #fee2e2;
	--pgw-info-fg: #52525b;

	--pgw-warn-fg: #92400e;
	--pgw-warn-bg: #fffbeb;
	--pgw-warn-border: #fcd34d;
	--pgw-warn-accent: #d97706;

	--pgw-blob-selection-bg: rgba(193, 173, 0, 0.35);

	--pgw-navbar-bg: #e2e8f0;
	--pgw-navbar-text: #1e293b;
	--pgw-navbar-text-muted: #64748b;
	--pgw-navbar-link-hover-bg: #cbd5e1;
	--pgw-navbar-active-bg: #94a3b8;
	--pgw-navbar-active-text: #ffffff;
	--pgw-navbar-border: #cbd5e1;
	--pgw-navbar-toggler-border: #94a3b8;
	--pgw-navbar-toggler-icon: #475569;

	/* diff2html (optional overrides) */
	--d2h-info-bg-color: #f0f0f0;
	--d2h-file-header-bg-color: rgb(220, 220, 255);
	--d2h-empty-placeholder-bg-color: #f5f5f5;
	--d2h-del-bg-color: rgb(255, 220, 220);
	--d2h-ins-bg-color: rgb(220, 255, 220);
	--d2h-dim-color: #666;
	--d2h-bg-color: #fff;
	--d2h-selected-color: rgba(255, 255, 255, 0.3);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--pgw-bg: #1a1a1e;
		--pgw-bg-raised: #25252c;
		--pgw-bg-muted: #2d2d36;
		--pgw-border: #3d3d48;
		--pgw-border-muted: #35353d;

		--pgw-text: #e4e4e7;
		--pgw-text-muted: #a1a1aa;
		--pgw-text-dim: #71717a;

		--pgw-link: #7dd3fc;
		--pgw-link-visited: #c4b5fd;
		--pgw-link-hover: #fda4af;

		--pgw-btn-bg: #2d2d4a;
		--pgw-btn-text: var(--pgw-text);
		--pgw-btn-hover-bg: #4f4f7a;
		--pgw-btn-hover-text: var(--pgw-text);

		--pgw-accent-bg: #27272a;
		--pgw-accent-text: #fafafa;
		--pgw-title-bg: #2d2d36;
		--pgw-title-hover-bg: #3d3d48;

		--pgw-code-bg: #18181b;
		--pgw-code-border: #27272a;

		--pgw-hljs-fg: var(--pgw-text);
		--pgw-hljs-comment: var(--pgw-text-dim);
		--pgw-hljs-keyword: var(--tblr-red, #ff7b72);
		--pgw-hljs-type: var(--pgw-hljs-keyword);
		--pgw-hljs-string: var(--pgw-link);
		--pgw-hljs-title: var(--tblr-purple, #d2a8ff);
		--pgw-hljs-attr: var(--tblr-cyan, #79c0ff);
		--pgw-hljs-name: var(--tblr-green, #7ee787);
		--pgw-hljs-built_in: var(--tblr-orange, #ffa657);
		--pgw-hljs-tag: var(--pgw-hljs-name);
		--pgw-hljs-meta: var(--pgw-hljs-fg);

		--pgw-table-stripe: #222226;
		--pgw-table-hover: #2d2d36;

		--pgw-add-fg: #86efac;
		--pgw-add-bg: #14532d;
		--pgw-rem-fg: #fca5a5;
		--pgw-rem-bg: #7f1d1d;
		--pgw-info-fg: #a1a1aa;

		--pgw-warn-fg: #fde68a;
		--pgw-warn-bg: #422006;
		--pgw-warn-border: #92400e;
		--pgw-warn-accent: #f59e0b;

		--pgw-blob-selection-bg: rgba(193, 173, 0, 0.4);

		--pgw-navbar-bg: #2d2d4a;
		--pgw-navbar-text: #e2e8f0;
		--pgw-navbar-text-muted: #94a3b8;
		--pgw-navbar-link-hover-bg: #3d3d5c;
		--pgw-navbar-active-bg: #4f4f7a;
		--pgw-navbar-active-text: #f1f5f9;
		--pgw-navbar-border: #3d3d48;
		--pgw-navbar-toggler-border: #64748b;
		--pgw-navbar-toggler-icon: #94a3b8;

		--d2h-info-bg-color: #222;
		--d2h-file-header-bg-color: rgb(38, 38, 98);
		--d2h-empty-placeholder-bg-color: #222;
		--d2h-del-bg-color: rgb(98, 38, 38);
		--d2h-ins-bg-color: rgb(38, 98, 38);
		--d2h-dim-color: #b0b0b0;
		--d2h-bg-color: #222;
	}
}

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	padding: 0.75rem 1rem;
	background-color: var(--pgw-bg);
	color: var(--pgw-text);
	border: 1px solid var(--pgw-border);
	height: auto;

	&:has(.page) {
		padding: 0;
	}
}

/* Card: override Tabler so cards use color-scheme variables */
.card {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	.card-header {
		background-color: var(--pgw-accent-bg);
		border-bottom-color: var(--pgw-border);
		color: var(--pgw-accent-text);
	}

	.card-title {
		color: var(--pgw-accent-text);
	}

	.card-body {
		background-color: var(--pgw-bg-raised);
		color: var(--pgw-text);
	}
}

.summary-section {
	& > summary {
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}

		&::before {
			content: "▸";
			display: inline-block;
			margin-right: 0.5rem;
			transition: transform 0.15s ease;
		}
	}

	&[open] > summary::before {
		transform: rotate(90deg);
	}

	& .summary-tree-table:has(.table) {
		padding: 0;
	}
}

/* Table: override Tabler .table / .card-table so tables use color-scheme variables */
.table,
.table.card-table {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	thead th,
	th {
		background-color: var(--pgw-accent-bg);
		border-bottom-color: var(--pgw-border-muted);
		color: var(--pgw-accent-text);
	}

	td {
		border-top-color: var(--pgw-border-muted);
		border-bottom-color: var(--pgw-border-muted);
		color: var(--pgw-text);
	}

	tbody tr {
		&:nth-child(even) {
			background-color: var(--pgw-table-stripe);
		}

		&:hover {
			background-color: var(--pgw-table-hover);

			td {
				background-color: var(--pgw-table-hover);
			}
		}
	}
}

/* Form: override Tabler form controls so they use color-scheme variables */
.form-label,
.form-check-label {
	color: var(--pgw-text);
}

.form-label.required::after {
	color: var(--pgw-text-muted);
}

.form-hint {
	color: var(--pgw-text-muted);

	code {
		background-color: var(--pgw-code-bg);
		border-color: var(--pgw-code-border);
		color: var(--pgw-text);
	}
}

.form-control,
.form-select {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	&::placeholder {
		color: var(--pgw-text-muted);
	}

	&:focus {
		background-color: var(--pgw-bg-raised);
		border-color: var(--pgw-link);
		color: var(--pgw-text);
	}

	&:disabled {
		background-color: var(--pgw-bg-muted);
		color: var(--pgw-text-muted);
	}
}

.form-check-input {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);

	&:checked {
		background-color: var(--pgw-link);
		border-color: var(--pgw-link);
	}

	&:focus {
		border-color: var(--pgw-link);
	}
}

.form-footer {
	border-top-color: var(--pgw-border);
}

/* Buttons: primary and ghost variants */
.btn-primary {
	background-color: var(--pgw-btn-bg);
	border-color: var(--pgw-border-muted);
	color: var(--pgw-btn-text);

	&:hover {
		background-color: var(--pgw-btn-hover-bg);
		border-color: var(--pgw-border);
		color: var(--pgw-btn-hover-text);
	}
}

.btn-ghost-secondary {
	background-color: transparent;
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	&:hover {
		background-color: var(--pgw-bg-muted);
		border-color: var(--pgw-border);
		color: var(--pgw-text);
	}
}

/* Dropzone (file upload area) */
.dropzone {
	background-color: var(--pgw-bg-muted);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	.dropzone-placeholder,
	.text-muted {
		color: var(--pgw-text-muted);
	}

	&.border-primary {
		border-color: var(--pgw-link);
	}
}

radio-picker {
	display: flex;

	label {
		box-shadow: inset 0 0 1.2px 0 #000;
		padding: 0.5rem;
		cursor: pointer;
		background: #0002;

		&:has(input:checked) {
			box-shadow: inset 0 0 0.2rem 0 #888;
		}

		&:has(input:focus-visible) {
			outline: 2px solid #000;
		}

		&:hover {
			background: #0004;
		}

		&:active {
			background: #0006;
		}
	}

	input {
		opacity: 0;
		position: absolute;
		pointer-events: none;
	}
}

body:has(.page.page-center) {
	border: 0;
	background-color: var(--tblr-body-bg);
	color: var(--tblr-body-color);
	font-family: var(--tblr-font-sans-serif);
	font-size: var(--tblr-body-font-size);
	line-height: var(--tblr-body-line-height);
}

.page.page-center {
	min-height: 100vh;

	.navbar-brand-image {
		height: 7.5rem;
		width: auto;
	}

	h1,
	h2,
	h3 {
		margin: 0;
		color: inherit;
		font-weight: var(--tblr-font-weight-bold);
	}

	p {
		color: inherit;
	}

	a:not(.btn) {
		color: var(--tblr-link-color, var(--tblr-primary));

		&:hover,
		&:visited {
			color: var(--tblr-link-hover-color, var(--tblr-primary));
		}
	}

	.card,
	.card .card-body {
		background-color: var(--tblr-bg-surface, var(--tblr-card-bg));
		border-color: var(--tblr-border-color);
		color: inherit;
	}

	.form-label {
		color: var(--tblr-body-color);
	}

	.form-control {
		background-color: var(--tblr-bg-forms);
		border-color: var(--tblr-border-color);
		color: var(--tblr-body-color);

		&::placeholder {
			color: var(--tblr-secondary);
		}

		&:focus {
			background-color: var(--tblr-bg-forms);
			border-color: var(--tblr-primary);
			color: var(--tblr-body-color);
		}
	}

	.form-footer {
		border-top-color: transparent;
	}

	.btn-primary {
		background-color: var(--tblr-primary);
		border-color: var(--tblr-primary);
		color: var(--tblr-light);

		&:hover {
			background-color: color-mix(in srgb, var(--tblr-primary) 88%, black);
			border-color: color-mix(in srgb, var(--tblr-primary) 88%, black);
			color: var(--tblr-light);
		}
	}

	code {
		background-color: var(--tblr-bg-surface-secondary, var(--tblr-gray-100));
		border-color: var(--tblr-border-color);
		color: inherit;
	}

	.link-secondary {
		color: var(--tblr-secondary-text) !important;

		&:hover,
		&:focus {
			color: var(--tblr-body-color) !important;
		}
	}

	.hr-text {
		color: var(--tblr-muted);

		&::before,
		&::after {
			background-color: var(--tblr-border-color);
		}
	}

	.text-secondary {
		color: var(--tblr-secondary-text) !important;
	}
}

/* Fluid vertical layout: fixed sidebar + main content offset */
.page {
	.navbar-vertical.position-fixed {
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1030;
		background-color: var(--pgw-navbar-bg);
	}

	.navbar-vertical.position-fixed ~ .page-wrapper {
		margin-left: var(--tblr-navbar-vertical-width, 15rem);
	}
}

a {
	color: var(--pgw-link);
	text-decoration: none;

	&:hover {
		color: var(--pgw-link-hover);
	}

	&:visited {
		color: var(--pgw-link-visited);
	}
}

h1, h2, h3 {
	margin: 0 0 0.5em;
	color: var(--pgw-accent-text);
	font-weight: 600;
}

/* Tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: var(--pgw-bg-raised);
	border: 1px solid var(--pgw-border);
}

th, td {
	padding: 0.1rem 0.2rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--pgw-border-muted);
}

p {
	color: var(--pgw-text);
}

th {
	background-color: var(--pgw-accent-bg);
	color: var(--pgw-accent-text);
	font-weight: 600;
}

#environment {
	background-color: var(--pgw-bg-raised);
	color: var(--pgw-text);
}

#environment tr:nth-child(2n+1) {
	background-color: var(--pgw-table-stripe);
}

tbody tr {
	&:nth-child(even) {
		background-color: var(--pgw-table-stripe);
	}

	&:hover {
		background-color: var(--pgw-table-hover);
	}
}

/* Optional: page header / footer blocks for future use */
.page_header,
.page_footer {
	padding: 0.5rem 0.75rem;
	background-color: var(--pgw-accent-bg);
	color: var(--pgw-accent-text);
	border: 1px solid var(--pgw-border);
}

.page_footer_text {
	color: var(--pgw-text-muted);
	font-style: italic;
}

.page_body {
	padding: 0.5rem;
	font-family: ui-monospace, monospace;
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);
}

.title, .title_text {
	background-color: var(--pgw-title-bg);
	padding: 0.375rem 0.5rem;
	border-bottom: 1px solid var(--pgw-border);
}

.title:hover, a.title:hover {
	background-color: var(--pgw-title-hover-bg);
}

/* Vertical navbar: variables and link states */
.navbar-vertical {
	.nav-link {
		color: var(--pgw-navbar-text);

		&:hover {
			background-color: var(--pgw-navbar-link-hover-bg);
			color: var(--pgw-navbar-text);

			.nav-link-title,
			.text-reset {
				color: var(--pgw-navbar-text);
			}
		}

		&.active {
			background-color: var(--pgw-navbar-active-bg);
			color: var(--pgw-navbar-active-text);

			.nav-link-title {
				color: var(--pgw-navbar-active-text);
			}
		}
	}

	.navbar-brand .text-reset,
	.nav-link-title {
		color: var(--pgw-navbar-text);
	}

	.navbar-toggler {
		border-color: var(--pgw-navbar-toggler-border);
	}

	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	.nav-link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;

		svg {
			width: 1.25rem;
			height: 1.25rem;
		}
	}
}

[data-bs-theme="dark"] {
	.navbar-vertical .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}
}

.blog-topbar {
	background-color: var(--pgw-navbar-bg);
	color: var(--pgw-navbar-text);
	border-bottom: 1px solid var(--pgw-navbar-border);
	overflow: visible;

	> .container-xl {
		display: grid;
		grid-template-columns: 1fr minmax(16rem, 28rem) 1fr;
		align-items: center;
		column-gap: 1rem;
	}

	.navbar-brand {
		justify-self: start;
		margin: 0;

		.text-reset,
		.nav-link-title {
			color: var(--pgw-navbar-text);
		}
	}

	.blog-search-container {
		width: 100%;
		justify-self: center;
	}

	.navbar-nav {
		justify-self: end;
	}
}

@media (max-width: 768px) {
	.blog-topbar > .container-xl {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"brand account"
			"search search";
		row-gap: 0.5rem;
	}

	.blog-topbar .navbar-brand {
		grid-area: brand;
	}

	.blog-topbar .navbar-nav {
		grid-area: account;
	}

	.blog-topbar .blog-search-container {
		grid-area: search;
	}
}

.navbar-user-top {
	border-top: 0;
	position: relative;
}

.navbar-user {
	border-top-color: var(--pgw-navbar-border) !important;

	.navbar-user-name {
		color: var(--pgw-navbar-text);
	}

	.navbar-user-meta,
	.text-muted {
		color: var(--pgw-navbar-text-muted);
	}

	.avatar svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Diff/status helpers (use var(--pgw-add-*) etc. in markup if needed) */
.diff-add { color: var(--pgw-add-fg); background-color: var(--pgw-add-bg); }
.diff-rem { color: var(--pgw-rem-fg); background-color: var(--pgw-rem-bg); }
.text-muted { color: var(--pgw-text-muted); }

/* Blob view: line numbers + code with syntax highlighting */
.blob-view {
	display: flex;
	margin: 0.5rem 0;
	max-width: 100%;
	overflow: auto;
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);

	.blob-line-nums {
		flex-shrink: 0;
		user-select: none;
		padding: 0.75rem 1rem 0.75rem 0.5rem;
		text-align: right;
		color: var(--pgw-text-muted);
		white-space: pre;
		font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
		font-size: 0.9rem;
		line-height: 1.5;
		border-right: 1px solid var(--pgw-border);
	}

	.blob-content {
		flex: 1;
		margin: 0;
		padding: 0.75rem 1rem;
		overflow: auto;
		font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
		font-size: 0.9rem;
		line-height: 1.5;
		min-width: 0;

		code {
			background: none;
			padding: 0;
			font-size: inherit;
			line-height: inherit;
		}
	}

	.blob-line-selected,
	.blob-selection {
		background-color: var(--pgw-blob-selection-bg);
	}
}

/* highlight.js: token colors from --pgw-hljs-* (replaces CDN theme; tracks prefers-color-scheme) */
.hljs,
.hljs-subst {
	color: var(--pgw-hljs-fg);
	background: var(--pgw-hljs-bg);
}

.hljs-comment,
.hljs-formula {
	color: var(--pgw-hljs-comment);
}

.hljs-operator,
.hljs-punctuation {
	color: var(--pgw-hljs-fg);
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
	color: var(--pgw-hljs-keyword);
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_,
.hljs-function .hljs-title,
.hljs-section,
.hljs-attribute,
.ruby .hljs-property {
	color: var(--pgw-hljs-title);
}

.hljs-attr,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable,
.hljs-variable.constant_ {
	color: var(--pgw-hljs-attr);
}

.hljs-built_in,
.hljs-symbol {
	color: var(--pgw-hljs-built_in);
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
	color: var(--pgw-hljs-string);
}

.hljs-addition,
.hljs-code,
.hljs-keyword.hljs-atrule,
.hljs-title.class_.inherited__ {
	color: var(--pgw-hljs-string);
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
	color: var(--pgw-hljs-name);
}

.hljs-tag {
	color: var(--pgw-hljs-tag);
}

.hljs-bullet {
	color: var(--pgw-hljs-built_in);
}

.hljs-emphasis {
	color: var(--pgw-hljs-keyword);
	font-style: italic;
}

.hljs-strong {
	color: var(--pgw-hljs-title);
	font-weight: 700;
}

.hljs-addition {
	color: var(--pgw-hljs-addition-fg);
	background-color: var(--pgw-hljs-addition-bg);
}

.hljs-deletion {
	color: var(--pgw-hljs-deletion-fg);
	background-color: var(--pgw-hljs-deletion-bg);
}

.blob-view.blame-view {
	.blame-commits {
		flex-shrink: 0;
		user-select: none;
		padding: 0.75rem 0.5rem;
		text-align: right;
		color: var(--pgw-text-muted);
		white-space: pre;
		font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
		font-size: 0.9rem;
		line-height: 1.5;
		border-right: 1px solid var(--pgw-border);

		.blame-commit-link {
			color: var(--pgw-link);
			text-decoration: none;
			font-size: 0.85rem;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

/* README markdown: base and all elements use color-scheme variables */
.markdown-body {
	color: var(--pgw-text);
	background-color: transparent;

	h1, h2, h3, h4, h5, h6 {
		color: var(--pgw-accent-text);
		border-bottom-color: var(--pgw-border-muted);
	}

	a {
		color: var(--pgw-link);

		&:hover {
			color: var(--pgw-link-hover);
		}

		&:visited {
			color: var(--pgw-link-visited);
		}
	}

	blockquote {
		border-left: 0.25rem solid var(--pgw-border);
		color: var(--pgw-text-muted);
		padding-left: 1rem;
		margin-left: 0;
	}

	hr {
		border-color: var(--pgw-border-muted);
		background-color: var(--pgw-border-muted);
	}

	table {
		background-color: var(--pgw-bg-raised);
		border-color: var(--pgw-border);
	}

	th, td {
		border-color: var(--pgw-border-muted);
	}

	th {
		background-color: var(--pgw-accent-bg);
		color: var(--pgw-accent-text);
	}

	tbody tr {
		&:nth-child(even) {
			background-color: var(--pgw-table-stripe);
		}

		&:hover {
			background-color: var(--pgw-table-hover);
		}
	}

	img {
		background-color: var(--pgw-bg-muted);
	}

	.readme-heading-wrap {
		position: relative;
		display: block;
	}

	.readme-section-anchor {
		position: absolute;
		right: 100%;
		padding-right: 0.35rem;
		opacity: 0;
		color: var(--pgw-text-muted);
		font-size: 1.3rem;
		text-decoration: none;
		transition: opacity 0.15s ease;

		&:focus {
			opacity: 1;
		}
	}

	.readme-heading-wrap:hover .readme-section-anchor,
	.readme-section-anchor:hover {
		opacity: 1;
	}
}

code {
	background-color: var(--pgw-code-bg);
	color: var(--pgw-text);
	border: 1px solid var(--pgw-code-border);
}

pre {
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);
	color: var(--pgw-text);

	code {
		background: none;
		border: none;
	}
}

.readme-toc-mount {
	position: fixed;
	left: var(--tblr-navbar-vertical-width, 15rem);
	top: 0;
	bottom: 0;
	width: 12rem;
	z-index: 1040;
	pointer-events: none;
	overflow: hidden;

	.readme-toc {
		pointer-events: auto;
		padding: 1rem 0.5rem 1rem 0;
		max-height: 100%;
		overflow-y: auto;
	}
}

.readme-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
}

.readme-toc-item {
	margin: 0.2rem 0;
}

.readme-toc-link {
	display: block;
	padding: 0.2rem 0.4rem;
	color: var(--pgw-text-muted);
	text-decoration: none;
	border-radius: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&:hover {
		color: var(--pgw-link-hover);
		background-color: var(--pgw-bg-raised);
	}
}

.readme-toc-item.readme-toc-active .readme-toc-link {
	color: var(--pgw-link);
	font-weight: 600;
	background-color: var(--pgw-accent-bg);
}

.readme-toc-level-1 { padding-left: 0; }
.readme-toc-level-2 { padding-left: 0.5rem; }
.readme-toc-level-3 { padding-left: 1rem; }
.readme-toc-level-4 { padding-left: 1.5rem; }
.readme-toc-level-5 { padding-left: 2rem; }
.readme-toc-level-6 { padding-left: 2.5rem; }

/* Board view: lift container max-width so columns can use full width; keep centered */
.container-xl:has(.board-columns) {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Center the columns when they fit. `safe` falls back to the start when they overflow, so the first column stays reachable by scrolling left. */
.board-columns {
	justify-content: safe center;
}

/* Board view columns: use theme variables so they respect light/dark */
.board-column {
	background-color: var(--pgw-bg-muted);
	color: var(--pgw-text);
	border-color: var(--pgw-border) !important;

	.h6,
	.text-muted {
		color: var(--pgw-text-muted) !important;
	}
}

/* Empty columns still accept drags over the card stack area */
.board-column-cards {
	min-height: 3rem;
}

.board-column-header-control {
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	border: 0;
	border-radius: var(--bs-border-radius);
	overflow: hidden;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--pgw-text);
	cursor: pointer;
}

.board-column-add-label,
.board-column-task-count {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.5rem;
}

.board-column-add-label {
	background-color: var(--pgw-bg);
	color: var(--pgw-text-muted);
}

.board-column-task-count {
	background-color: var(--bs-secondary);
	color: #fff;
	cursor: default;
}

.board-column-header-control:hover .board-column-add-label {
	background-color: var(--pgw-bg-muted);
}

.board-column-header-control:focus-visible {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

/*
 * Board task error banner: Tabler .alert layout + PGW tokens so it tracks
 * prefers-color-scheme (and matches .card / .table overrides that use --pgw-*).
 */
.board-task-error-hint.alert {
	--bs-alert-color: var(--pgw-warn-fg);
	--bs-alert-bg: var(--pgw-warn-bg);
	--bs-alert-border-color: var(--pgw-warn-border);
	background-color: var(--pgw-warn-bg);
	color: var(--pgw-warn-fg);
	border: 1px solid var(--pgw-warn-border);
	border-left: 0.25rem solid var(--pgw-warn-accent);
}

#api-key-secret-panel.alert,
#api-key-alert.alert-success {
	--tblr-alert-color: var(--pgw-add-fg);
	--tblr-alert-bg: var(--pgw-add-bg);
	--tblr-alert-border-color: var(--pgw-border);
	background-color: var(--pgw-add-bg);
	color: var(--pgw-add-fg);
	border-color: var(--pgw-border);
}

#api-key-alert.alert-danger {
	--tblr-alert-color: var(--pgw-rem-fg);
	--tblr-alert-bg: var(--pgw-rem-bg);
	--tblr-alert-border-color: var(--pgw-border);
	background-color: var(--pgw-rem-bg);
	color: var(--pgw-rem-fg);
	border-color: var(--pgw-border);
}

#api-key-secret.form-control {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);
}

/* Board: Sync status icons (mask so currentColor is respected when loaded) */
.board-card-icon-wrap {
	opacity: 0.7;
	color: var(--pgw-text-muted);
}

.board-card-icon {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask-image: url(/static/icons/cloud.svg);
	mask-image: url(/static/icons/cloud.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.board-card-icon[data-icon="cloud-up"] {
	-webkit-mask-image: url(/static/icons/cloud-up.svg);
	mask-image: url(/static/icons/cloud-up.svg);
}
.board-card-icon[data-icon="cloud-filled"] {
	-webkit-mask-image: url(/static/icons/cloud-filled.svg);
	mask-image: url(/static/icons/cloud-filled.svg);
}
.board-card-icon[data-icon="cloud-exclamation"] {
	-webkit-mask-image: url(/static/icons/cloud-exclamation.svg);
	mask-image: url(/static/icons/cloud-exclamation.svg);
}
.board-card .board-card-title-line {
	padding-right: 1.75rem;
}

.board-card-assignee-compact-editable {
	cursor: pointer;
	border-radius: 0.25rem;

	&:hover {
		background-color: var(--pgw-bg-muted);
	}
}

.board-card-assignee-compact-edit {
	min-width: 8rem;
	max-width: 100%;
}

.board-card-popout .board-card-task-id {
	display: none;
}

/* Board card popout: overlay and card on top of the board (above navbar and Bootstrap modals) */
.board-card-popout-overlay {
	position: fixed;
	inset: 0;
	z-index: 1060;
	background-color: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	box-sizing: border-box;

	.board-card-popout {
		position: relative;
		z-index: 1061;
		width: 70%;
		max-width: 70%;
		height: 80%;
		max-height: 80%;
		display: flex;
		flex-direction: column;
		pointer-events: auto;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
	}
}

/* Popout card: editable fields (click to edit) */
.board-card-popout {
	.card-body {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}

	.board-card-editable,
	.board-card-title.board-card-editable {
		cursor: pointer;
		border-radius: 0.25rem;
		min-height: 1.5em;

		&:hover {
			background-color: var(--pgw-bg-muted);
		}
	}

	.board-card-title-edit,
	.board-card-description-edit,
	.board-card-due-date-edit,
	.board-card-status-edit,
	.board-card-priority-edit,
	.board-card-points-edit,
	.board-card-assignee-edit {
		min-width: 10rem;
		width: 100%;
	}

	.board-card-description-edit {
		min-height: 4rem;
		resize: vertical;
	}

	.board-card-comment-item {
		display: flex;
		gap: 0.5rem;
		align-items: flex-start;
	}

	.board-card-comment-item + .board-card-comment-item {
		margin-top: 0.75rem;
	}

	.board-card-comment-avatar {
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--pgw-bg-muted);
	}

	.board-card-comment-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.board-card-comment-avatar-fallback {
		font-size: 0.65rem;
		font-weight: 600;
		color: var(--pgw-text-muted);
		text-transform: uppercase;
	}

	.board-card-tags[contenteditable="true"]:empty::before {
		content: "(click to add tags)";
		color: var(--pgw-text-muted);
		opacity: 0.8;
	}

	.board-card-comment-body {
		min-width: 0;
		flex: 1;
	}

	.board-card-comment-author {
		font-weight: 500;
		color: var(--pgw-text);
	}

	.board-card-description-preview {
		color: var(--pgw-text);
	}

	.board-card-description-full.board-card-markdown,
	.board-card-comment-content.board-card-markdown {
		color: var(--pgw-text);
		word-break: break-word;
	}

	.board-card-markdown.markdown-body {
		font-size: inherit;
		line-height: 1.5;

		> :first-child {
			margin-top: 0;
		}

		> :last-child {
			margin-bottom: 0;
		}

		p {
			margin-bottom: 0.5rem;
		}

		pre {
			margin-bottom: 0.5rem;
		}
	}
}

.board-ref-link {
	color: var(--pgw-link);
	text-decoration: none;
	font-weight: 500;
}

.board-ref-link:hover {
	text-decoration: underline;
}

.board-ref-unresolved {
	color: var(--pgw-text-muted);
	cursor: help;
}

.board-ref-suggest {
	position: absolute;
	z-index: 1070;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--pgw-bg-raised);
	border: 1px solid var(--pgw-border);
	border-radius: 0.375rem;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
	padding: 0;
}

.board-ref-suggest.show {
	display: block;
}

.board-ref-suggest-item {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: var(--pgw-text);
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--pgw-border);
	cursor: pointer;
}

.board-ref-suggest-item:last-child {
	border-bottom: none;
}

.board-ref-suggest-item:hover {
	background: var(--pgw-bg-muted);
}

.board-ref-suggest-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.board-ref-suggest-snippet {
	font-size: 0.875rem;
	color: var(--pgw-text-muted);
	line-height: 1.4;
}

.board-ref-suggest-date {
	font-size: 0.75rem;
	color: var(--pgw-text-dim);
	margin-top: 0.25rem;
}

/* Search page: input, status, and result lines */
.search-status {
	font-style: italic;
}

.search-results {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	&.is-loading {
		opacity: 0.6;
	}
}

.search-result {
	background-color: var(--pgw-bg-raised);
	border: 1px solid var(--pgw-border);
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;

	&:hover {
		background-color: var(--pgw-table-hover);
	}
}

.search-result-line {
	margin: 0;
	font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--pgw-text);
	white-space: pre-wrap;
	word-break: break-word;
}

.subpage-frame {
	display: block;
	width: 100%;
	height: 82vh;
	min-height: 42rem;
	border: 1px solid var(--pgw-border);
	background-color: var(--pgw-bg-raised);
}

/* Project blog viewer */
.blog-article {
	max-width: 64em;
	margin: 0 auto;
}

.blog-article.markdown-body {
	blockquote {
		background-color: var(--pgw-bg-muted);
		border-left: 2px solid var(--pgw-border);
		padding: 1.25rem 1.75rem;
		border-radius: var(--tblr-border-radius, 0.25rem);
		color: var(--pgw-text);
	}

	img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 60%;
		max-width: 100%;
		background-color: transparent;
	}

	p > code {
		background-color: var(--pgw-code-bg);
		border: 1px solid var(--pgw-code-border);
		border-radius: var(--tblr-border-radius-sm, 0.125rem);
		padding: 0.125rem 0.375rem;
	}

	p.graph {
		display: flex;
		align-items: center;
	}

	p > svg {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.graph > polygon {
		fill: transparent;
	}

	.node > text {
		fill: var(--pgw-text);
	}

	.node > ellipse {
		stroke: var(--pgw-text);
	}

	.edge > polygon {
		fill: var(--pgw-text);
	}

	.edge > * {
		stroke: var(--pgw-text);
	}
}

.blog-code {
	max-width: 100%;
	overflow: auto;
	margin: 0 0 1rem;
	padding: 0.5em 0;
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);
	border-radius: var(--tblr-border-radius, 0.25rem);
	font-family: "Fira Code", var(--tblr-font-monospace, ui-monospace, monospace);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pgw-text);
}

.blog-code-line {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	min-height: 1.5em;
}

.blog-code-lineno {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 2.5em;
	padding: 0 0.75em 0 0.5em;
	border-right: 1px solid var(--pgw-border);
	text-align: right;
	color: var(--pgw-text-muted);
	user-select: none;
	font: inherit;
	line-height: inherit;
}

.blog-code-line > code {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 0;
	padding: 0 0.75em;
	margin: 0;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	color: inherit;
	font: inherit;
	line-height: inherit;
	white-space: pre;
}

.blog-search-container {
	position: relative;
}

.blog-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 0.25rem;
	display: none;
	max-height: 70vh;
	overflow-y: auto;
	z-index: 1030;
	background-color: var(--pgw-bg-raised);
	color: var(--pgw-text);
	border: 1px solid var(--pgw-border);
}

.blog-search-results.show {
	display: block;
}

.blog-search-result {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--pgw-border);
	color: var(--pgw-text);
	text-decoration: none;
	display: block;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.blog-search-result:hover {
	background-color: var(--pgw-table-hover);
}

.blog-search-result:last-child {
	border-bottom: none;
}

.blog-search-result-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.blog-search-result-snippet {
	font-size: 0.875rem;
	color: var(--pgw-text-muted);
	line-height: 1.4;
}

.blog-search-result-date {
	font-size: 0.75rem;
	color: var(--pgw-text-dim, var(--pgw-text-muted));
	margin-top: 0.25rem;
}