:root {
	--text: #1a1a1a;
	--bg: #ffffff;
	--link: #1a0dab;
	--border: #757575;
	--focus: #4a6fd4;
	--muted: #3d3d3d;
	--draft: #5f6368;
	--review: #b86c0a;
	--publish: #137333;
	--surface: #f8f9fa;
	--danger: #c5221f;
}

* { box-sizing: border-box; }

html { font-size: 125%; }

body {
	font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.7;
	color: var(--text);
	background: var(--bg);
	max-width: 40rem;
	margin: 0 auto;
	padding: 1rem;
}

.skip-link {
	position: absolute;
	top: -10rem;
	left: 0;
	background: var(--link);
	color: white;
	padding: 0.5rem 1rem;
	z-index: 100;
}
.skip-link:focus { top: 0; }

*:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.5rem; margin: 1.5rem 0 0.5rem; }
h1 a { color: inherit; text-decoration: none; }

/* Header */
header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--border);
}

header nav { display: flex; gap: 1rem; align-items: baseline; font-size: 1rem; }
header nav a { color: var(--link); }

/* Search */
.search-box { margin-bottom: 1.5rem; }
.search-box input {
	width: 100%;
	font-size: 1.5rem;
	font-weight: 500;
	padding: 0.875rem;
	border: 3px solid #555;
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
	-webkit-appearance: none;
	appearance: none;
}
.search-box input:focus {
	border-color: var(--focus);
	outline: 4px solid var(--focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(74, 111, 212, 0.35);
}
.search-box input:-webkit-autofill,
.search-box input:autofill {
	border: 3px solid #555;
	-webkit-text-fill-color: var(--text);
	box-shadow: 0 0 0 30px var(--bg) inset;
}

/* Event list */
.event-list { list-style: none; padding: 0; margin: 0; }
.event-item {
	border: 1px solid var(--border);
	padding: 1rem;
	margin-bottom: 0.5rem;
	border-radius: 4px;
}

.event-item:hover { background: var(--surface); }
.event-item a { text-decoration: none; color: inherit; display: block; }
.event-item a:focus { outline: none; }
.event-item a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.event-date {
	font-size: 1rem;
	color: var(--text);
	margin-bottom: 0.25rem;
}
.event-title { font-weight: 600; margin-bottom: 0.25rem; }
.event-preview {
	font-size: 1rem;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Status badges */
.badge {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	border-radius: 1rem;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.badge-draft   { background: var(--badge-draft-bg, #f1f3f4); color: var(--badge-draft-color, var(--draft)); }
.badge-review  { background: var(--badge-review-bg, #fef7e0); color: var(--badge-review-color, var(--review)); }
.badge-publish { background: var(--badge-publish-bg, #e6f4ea); color: var(--badge-publish-color, var(--publish)); }

/* Detail page */
.event-detail { margin-top: 1rem; }
.event-detail .event-meta {
	font-size: 1rem;
	color: var(--text);
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}
.event-detail .event-text {
	white-space: pre-wrap;
	line-height: 1.7;
	margin-bottom: 2rem;
}
.event-detail .event-text a { color: var(--link); }

/* Forms */
form { margin-top: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.form-group .help-text { font-size: 1rem; color: var(--text); margin-top: 0.125rem; }
.form-group .error-text { font-size: 1rem; color: var(--error-color, var(--danger)); margin-top: 0.125rem; }

input, textarea, select {
	font-size: 1rem;
	font-family: inherit;
	padding: 0.625rem;
	border: 3px solid var(--border);
	border-radius: 4px;
	width: 100%;
	background: var(--bg);
	color: var(--text);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--focus);
	outline: 4px solid var(--focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(74, 111, 212, 0.3);
}
textarea { min-height: 8rem; resize: vertical; }

button, .btn {
	--_btn-bg: var(--btn-default-bg, var(--surface));
	font-size: 1rem;
	font-family: inherit;
	padding: 0.625rem 1.25rem;
	border: 2px solid;
	border-radius: 4px;
	background: var(--_btn-bg);
	color: var(--text);
	cursor: pointer;
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;

	/* Normal border: lighter than background on dark bg buttons,
	   darker on the default light-surface button. */
	border-color: color-mix(in srgb, var(--_btn-bg) 82%, white);
}

/* Variants — only set the local colour token; border/background inherit from above. */
button.primary, .btn.primary { --_btn-bg: var(--btn-primary-bg, var(--link)); color: white; }
button.draft,   .btn.draft   { --_btn-bg: var(--btn-draft-bg,   var(--draft));   color: white; }
button.review,  .btn.review  { --_btn-bg: var(--btn-review-bg,  var(--review));  color: white; }
button.publish, .btn.publish { --_btn-bg: var(--btn-publish-bg, var(--publish)); color: white; }
button.danger,  .btn.danger  { --_btn-bg: var(--btn-danger-bg,  var(--danger));  color: white; }

/* Hover: darker background, lighter border. */
button:hover, .btn:hover {
	background: color-mix(in srgb, var(--_btn-bg) 80%, black);
	border-color: color-mix(in srgb, var(--_btn-bg) 55%, white);
	box-shadow: none;
}

/* Focus-visible: darkest background, lightest border + outline ring. */
button:focus-visible, .btn:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	background: color-mix(in srgb, var(--_btn-bg) 75%, black);
	border-color: color-mix(in srgb, var(--_btn-bg) 30%, white);
	box-shadow: none;
}

/* Light-mode default (surface) button: border darker than light background. */
@media (prefers-color-scheme: light) {
	button:not([class]), .btn:not([class]) {
		border-color: color-mix(in srgb, var(--_btn-bg) 85%, black);
	}
	button:not([class]):hover, .btn:not([class]):hover {
		background: color-mix(in srgb, var(--_btn-bg) 90%, white);
		border-color: color-mix(in srgb, var(--_btn-bg) 70%, black);
	}
	button:not([class]):focus-visible, .btn:not([class]):focus-visible {
		background: color-mix(in srgb, var(--_btn-bg) 85%, white);
		border-color: color-mix(in srgb, var(--_btn-bg) 55%, black);
	}
}

.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
	.form-actions form { margin-top: 0; display: inline-flex; }

/* Messages */
.message {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.message-info    { background: var(--msg-info-bg, #e8f0fe); color: var(--msg-info-color, #174ea6); }
.message-success { background: var(--msg-success-bg, #e6f4ea); color: var(--msg-success-color, var(--publish)); }
.message-error   { background: var(--msg-error-bg, #fce8e6); color: var(--msg-error-color, var(--danger)); }
.message-warning { background: #fef7e0; color: var(--review); }

/* Lock indicator */
.lock-info {
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.lock-info.foreign  { background: var(--lock-foreign-bg, #fce8e6); color: var(--lock-foreign-color, var(--danger)); }

/* Editor dashboard */
.dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

/* User management */
.user-list { list-style: none; padding: 0; }
.user-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border);
}

/* Empty state */
.empty { text-align: center; color: var(--text); padding: 2rem 0; font-size: 1.25rem; }

/* Breadcrumb */
.breadcrumb { font-size: 1rem; margin-bottom: 0.75rem; color: var(--text); }
.breadcrumb a { color: var(--link); }
.breadcrumb .sep { margin: 0 0.375rem; color: var(--text); }

/* Footer */
footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 1rem; color: var(--text); text-align: right; }

/* HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-settling { opacity: 0.5; transition: opacity 0.1s; }

/* Collapsible help text */
.help-details { margin-top: 0.25rem; font-size: 1rem; color: var(--text); }
.help-details summary { cursor: pointer; color: var(--link); font-size: 1rem; }
.help-details summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.help-details .help-text { margin-top: 0.25rem; }

/* Intro / Footer */
.intro-item { background: var(--surface); font-style: italic; }
.footer-item { background: var(--surface); font-size: 0.875rem; }
.event-text { white-space: pre-wrap; }
.empty-query { font-size: 1.75rem; text-align: center; color: var(--text); padding: 2rem 0; font-weight: 600; }
audio { width: 100%; height: 3.5rem; margin: 0.5rem 0; background: transparent; border: 1px solid #999; border-radius: 4px; }

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--text: #e8e6e3;
		--bg: #1a1a2e;
		--link: #8ab4f8;
		--border: #7a7f85;
		--focus: #6a9ff8;
		--muted: #9aa0a6;
		--draft: #5f6368;
		--review: #b06a0a;
		--publish: #0d7a2e;
		--surface: #252540;
		--danger: #c5221f;
		--btn-default-bg: #5f6368;
		--btn-primary-bg: #4a6fd4;
		--btn-draft-bg: #5f6368;
		--btn-review-bg: #b85c00;
		--btn-publish-bg: #0d7a2e;
		--btn-danger-bg: #c5221f;
		--badge-draft-bg: #4a4f55; --badge-draft-color: #c4c9cf;
		--badge-review-bg: #5c4218; --badge-review-color: #f7bc78;
		--badge-publish-bg: #1f4a2c; --badge-publish-color: #5cc47a;
		--msg-info-bg: #1e3a5f; --msg-info-color: #d2e3fc;
		--msg-success-bg: #2a442a; --msg-success-color: #7ddf90;
		--msg-error-bg: #442a2a; --msg-error-color: #f5a3a3;
		--error-color: #f28b82;
		--lock-foreign-bg: #3a2e1e; --lock-foreign-color: #f5a3a3;
	}
	.skip-link { color: #1a1a2e; }
	.lock-info { background: #252540; }

	input, textarea, select { background: #2d2d44; color: var(--text); border-color: #b0b5c0; }
	input:focus, textarea:focus, select:focus { border-color: var(--focus); outline: 4px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(106, 159, 248, 0.4); }
	.search-box input { background: #2d2d44; color: var(--text); border-color: #b0b5c0; }
	.search-box input:focus { border-color: var(--focus); outline: 4px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(106, 159, 248, 0.4); }
	.search-box input:-webkit-autofill,
	.search-box input:autofill { border: 3px solid #b0b5c0; -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 30px #2d2d44 inset; }
	.help-details { background: #252540; }
	::placeholder { color: var(--muted); opacity: 1; }
	audio { color-scheme: dark; }
}

/* --- print styles --- */
@media print {
	/* Force black on white, strip backgrounds and shadows. */
	*, *::before, *::after {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	:root {
		--text: #000;
		--bg: #fff;
		--muted: #333;
		--border: #ccc;
	}
	body {
		font-size: 12pt;
		line-height: 1.5;
		max-width: none;
		padding: 0;
	}

	/* Show URLs after links. */
	a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555 !important; }
	a[href^="#"]::after,
	a[href^="javascript"]::after { content: ""; }

	/* Hide non-content. */
	.skip-link,
	header[role="banner"],
	footer[role="contentinfo"],
	nav,
	.search-box,
	.breadcrumb,
	.form-actions,
	.help-details,
	audio,
	.lock-info,
	.visually-hidden { display: none !important; }

	/* Full-width readable content. */
	main {
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Events print cleanly. */
	.event-list { padding-left: 0; list-style: none; }
	.event-item {
		break-inside: avoid;
		border-bottom: 1px solid #ccc;
		padding: 0.75rem 0;
		margin: 0;
	}
	.event-item a { color: #000 !important; text-decoration: none; }
	.event-item a::after { content: ""; }
	.event-title { font-size: 1.1em; font-weight: 700; }
	.event-date { font-size: 0.9em; color: #333 !important; margin-bottom: 0.25rem; }
	.event-text { white-space: pre-wrap; font-size: 11pt; }

	.intro-item, .footer-item {
		break-inside: avoid;
		border-bottom: 1px solid #ccc;
		padding: 0.75rem 0;
	}

	/* Avoid page breaks inside events. */
	h1, h2 { break-after: avoid; page-break-after: avoid; }

	/* Keep search filter heading visible so user knows what they printed. */
	h2 { font-size: 1.2em; margin-top: 0.5rem; }
}

/* --- reusable table styles --- */
.stats-table { width: auto; border-collapse: collapse; font-size: 0.875rem; }
.stats-table th { border-bottom: 2px solid var(--border); text-align: left; padding: 0.5rem; font-weight: 600; }
.stats-table td { border-bottom: 1px solid var(--border); padding: 0.5rem; }
.stats-table td:first-child { text-align: right; padding-right: 0.75rem; white-space: nowrap; }
.stats-table td:last-child, .stats-table th:last-child { text-align: left; }

/* --- reusable flex rows --- */
.flex-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.flex-row-center { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.section-gap { margin: 1.5rem 0; }
.notes-box { margin: 1.5rem 0; padding: 1rem; background: var(--surface); border-radius: 4px; }
.notes-box .notes-text { white-space: pre-wrap; }

/* --- button states --- */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- link button --- */
.link-btn { background: none; border: none; color: var(--link); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.link-btn:hover { color: var(--text); }

/* Health metric thresholds */
.metric-warning td:last-child { color: var(--review); font-weight: 700; }
.metric-critical td:last-child { color: var(--danger); font-weight: 700; }