/* sektorCMS: layout for the public pages and the admin forms.
   Colours and fonts come from /theme.css (Data/Style); the values after the commas are fallbacks.

   What is in this file, in order (search for the title to jump to it):
     Page frame                     the width and spacing of every page
     Home                           the start page
     Project and post cards         lists of projects, products and posts
     Version, platform and source   the small facts under a project
     Buttons
     Project page
     Tables
     Admin and login forms          form fields, shared by the admin and the public bug form
     Code                           code blocks
     Bug reports                    the public bug pages
     Cookie notice
     Statistics and log (admin)
     Admin tab bar, Media section, editor
     Documentation                  the public documentation pages
     Small screens                  changes for phones
     Banner across the top          the notice set in /admin/notice
   The frame of the admin itself (menu, top bar) is in admin.css. */

:root {
	color-scheme: light;

	--background: var(--colour-background, #fbfbfa);
	--surface: var(--colour-surface, #ffffff);
	--surface-hover: var(--colour-surfacehover, #f3f3f1);
	--sunken: var(--colour-sunken, #f1f1ee);
	--line: var(--colour-line, #e3e3df);
	--line-strong: var(--colour-linestrong, #c9c9c4);
	--text: var(--colour-text, #1b1c1e);
	--muted: var(--colour-muted, #55585e);
	--subtle: var(--colour-subtle, #80838a);
	--on-primary: var(--colour-onprimary, #ffffff);
	--accent: var(--colour-accent, #2f6fd0);
	--radius: 6px;
	--mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Courier New", monospace;

	/* Bootstrap (used by the login pages) follows the same colours */
	--bs-body-color: #1b1c1e;
	--bs-body-color-rgb: 27, 28, 30;
	--bs-body-bg: #fbfbfa;
	--bs-border-color: #e3e3df;
	--bs-secondary-color: rgba(27, 28, 30, 0.6);
}

body {
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: rgba(47, 111, 208, 0.2);
}

/* ---------- Page frame ---------- */

main > article {
	max-width: 56rem;
	margin: 0 auto;
	padding-top: 2.5rem;
	padding-bottom: 4.5rem;
}

/* documentation and the Media section need more room than text pages */
main > article:has(.doc-layout), main > article:has(.file-layout) {
	max-width: 78rem;
}

main > article > h1:first-child {
	margin: 0 0 1.5rem;
	font-size: 1.9rem;
}

h1, h2, h3 {
	line-height: 1.25;
}

h1 small {
	margin-left: 0.4rem;
	color: var(--subtle);
	font-weight: 400;
	font-size: 0.5em;
}

h2 {
	margin: 2.5rem 0 1rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--line);
	font-size: 1.2rem;
}

a {
	text-underline-offset: 3px;
}

.lead {
	max-width: 40rem;
	color: var(--muted);
	font-size: 1.1rem;
}

.prose {
	max-width: 44rem;
	color: var(--text);
}

.prose a {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.prose a:hover {
	text-decoration-color: currentColor;
}

.prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.prose h2, .prose h3 {
	color: var(--text);
}

.prose li::marker {
	color: var(--subtle);
}

footer.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	max-width: 56rem;
	width: 100%;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 2rem;
	border-top: 1px solid var(--line);
	background-color: transparent;
	color: var(--subtle);
	font-size: 0.88rem;
}

footer.site-footer a {
	color: var(--muted);
	text-decoration: none;
}

footer.site-footer a:hover {
	color: var(--text);
	text-decoration: underline;
}

/* ---------- Home ---------- */

.hero {
	padding: 3.25rem 0 1.5rem;
}

.eyebrow {
	margin: 0 0 0.9rem;
	color: var(--subtle);
	font-size: 0.85rem;
}

.hero h1 {
	margin: 0 0 1rem;
	font-size: clamp(1.8rem, 5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.hero .lead {
	margin: 0 0 1.5rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 3.25rem 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--line);
}

.section-head h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.3rem;
}

.section-head a {
	color: var(--muted);
	font-size: 0.92rem;
	text-decoration: none;
}

.section-head a:hover {
	color: var(--text);
	text-decoration: underline;
}

/* ---------- Project and post cards ---------- */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
	gap: 1.5rem;
	margin: 0 0 1.5rem;
}

.project-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color 0.15s ease;
}

.project-card:hover {
	border-color: var(--line-strong);
}

.card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: var(--sunken);
}

.card-media img {
	max-width: 34%;
	max-height: 60%;
	object-fit: contain;
}

.card-media.cover img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: top left;
}

.monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sunken);
	color: var(--muted);
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
}

.card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.15rem 1.3rem 1.3rem;
}

.card-body h3 {
	margin: 0;
	font-size: 1.15rem;
}

.card-body h3 a {
	color: var(--text);
	text-decoration: none;
}

.card-body h3 a:hover {
	text-decoration: underline;
}

.card-body .category {
	margin: 0.2rem 0 0;
	color: var(--subtle);
	font-size: 0.82rem;
}

.card-body .summary {
	margin: 0.6rem 0 0.1rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.card-body .project-links {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: auto 0 0;
	padding-top: 1rem;
}

.card-body .more {
	color: var(--muted);
	font-size: 0.9rem;
	text-decoration: none;
}

.card-body .more:hover {
	color: var(--text);
	text-decoration: underline;
}

/* Text-only blocks (blog list, products) */
section.project-card {
	padding: 1.1rem 1.3rem;
	margin: 0 0 1rem;
}

section.project-card h3 {
	margin: 0 0 0.25rem;
}

section.project-card h3 a {
	color: var(--text);
	text-decoration: none;
}

section.project-card h3 a:hover {
	text-decoration: underline;
}

section.project-card p {
	margin: 0.35rem 0 0;
	color: var(--muted);
}

/* ---------- Version, platform and source: plain text, no coloured pills ---------- */

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.9rem;
	margin: 0.7rem 0 0.2rem;
	color: var(--subtle);
	font-size: 0.82rem;
}

.badge {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: 0;
}

.badge + .badge::before {
	content: "\00b7";
	margin-right: 0.9rem;
	color: var(--line);
}

.badge.good, .badge.private {
	background: none;
	border: 0;
	color: var(--muted);
}

/* ---------- Buttons ---------- */

/* "main" in front keeps buttons from being recoloured by the theme's link colour */
main a.button, main a.button:visited, .admin-form button:not(.rt-host button), table.list button {
	display: inline-block;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	background-color: var(--text);
	color: var(--on-primary);
	font: inherit;
	font-size: 0.93rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

main a.button:hover, .admin-form button:not(.rt-host button):hover {
	background-color: color-mix(in srgb, var(--text), white 18%);
	border-color: color-mix(in srgb, var(--text), white 18%);
	color: var(--on-primary);
}

main a.button.secondary, main a.button.secondary:visited, table.list button {
	border-color: var(--line);
	background-color: transparent;
	color: var(--text);
	font-weight: 500;
}

main a.button.secondary:hover, table.list button:hover {
	border-color: var(--line-strong);
	background-color: var(--surface-hover);
	color: var(--text);
}

main a.button.small {
	padding: 0.35rem 0.8rem;
	font-size: 0.86rem;
}

/* ---------- Project page ---------- */

.project-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.project-logo {
	width: 5.5rem;
	height: 5.5rem;
	object-fit: contain;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 0.5rem;
}

.project-header h1 {
	margin: 0;
	font-size: 1.9rem;
}

.project-header .lead {
	margin: 0.3rem 0 0.4rem;
}

.project-header .badges {
	margin: 0.6rem 0 1rem;
}

.project-header p {
	margin: 0;
}

.file-note {
	margin-left: 0.6rem;
	color: var(--subtle);
	font-size: 0.85rem;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.1rem;
	margin: 0 0 2.25rem;
}

.gallery figure {
	margin: 0;
}

.gallery img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.15s ease;
}

.gallery a:hover img {
	border-color: var(--line-strong);
}

.gallery figcaption {
	margin-top: 0.45rem;
	color: var(--subtle);
	font-size: 0.84rem;
}

/* ---------- Tables ---------- */

table.info, table.list, .prose table {
	border-collapse: collapse;
	max-width: 100%;
}

table.info, table.list {
	margin: 0.5rem 0 1.5rem;
}

table.info th, table.info td, table.list th, table.list td, .prose th, .prose td {
	padding: 0.5rem 1.25rem 0.5rem 0;
	text-align: left;
	vertical-align: top;
}

table.info th {
	color: var(--subtle);
	font-weight: 400;
	white-space: nowrap;
}

table.list th, .prose th {
	border-bottom: 1px solid var(--line);
	color: var(--subtle);
	font-size: 0.82rem;
	font-weight: 600;
}

table.list td, .prose td {
	border-bottom: 1px solid var(--line);
	color: var(--muted);
}

.prose table {
	width: 100%;
	margin: 1rem 0 1.5rem;
}

@media (max-width: 40rem) {
	table.list {
		display: block;
		overflow-x: auto;
	}
}

/* ---------- Admin and login forms ---------- */

.inline-form {
	display: inline;
}

.admin-form {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	max-width: 40rem;
}

.admin-form label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	color: var(--muted);
	font-size: 0.9rem;
}

.admin-form label.check {
	flex-direction: row;
	align-items: center;
	gap: 0.55rem;
}

.admin-form input[type="text"], .admin-form input[type="number"], .admin-form input[type="date"], .admin-form textarea, .admin-form select, .admin-form input:not([type]),
.form-control, .form-select {
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--surface);
	color: var(--text);
	font: inherit;
}

.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .form-control:focus, .form-select:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
	background-color: var(--surface);
	color: var(--text);
	box-shadow: none;
}

.form-floating > label {
	color: var(--subtle);
}

.text-danger, .error {
	color: var(--colour-danger, #c23b3b) !important;
}

.btn {
	border-radius: var(--radius);
}

/* ---------- Code ---------- */

pre {
	padding: 0.95rem 1.1rem;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: var(--sunken);
	color: var(--text);
	font-size: 0.88rem;
}

code {
	font-family: var(--mono);
}

p code, li code, td code {
	padding: 0.1rem 0.35rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background-color: var(--sunken);
	color: var(--text);
	font-size: 0.86em;
}

/* ---------- Bug reports ---------- */

/* Hidden from people, filled in by spam programs */
.trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.notice {
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface);
}

.status {
	display: inline-block;
	padding: 0.05rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.78rem;
	line-height: 1.5;
	white-space: nowrap;
}

.status.open { border-color: var(--colour-success, #2e8b57); color: var(--colour-success, #2e8b57); }
.status.active { border-color: var(--accent); color: var(--accent); }
.status.done, .status.plain { color: var(--muted); }
.status.dropped { color: var(--subtle); }
.status.hot { border-color: var(--colour-danger, #c23b3b); color: var(--colour-danger, #c23b3b); }

.bug-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.8rem;
	margin: 0.35rem 0;
	color: var(--muted);
	font-size: 0.88rem;
}

.bug-meta a {
	color: var(--text);
}

.bug-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0.5rem;
}

.bug-filter select, .bug-filter input, .bug-form input[type="text"], .bug-form input[type="email"], .bug-form select, .bug-form textarea {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
}

.bug-filter button {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.bug-count, .pager {
	color: var(--subtle);
	font-size: 0.88rem;
}

.pager {
	display: flex;
	gap: 1rem;
}

section.bug-row {
	padding: 0.9rem 1.2rem;
	margin: 0 0 0.6rem;
}

section.bug-row h3 {
	font-size: 1.05rem;
}

.bug-form {
	max-width: 46rem;
}

.bug-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
}

.bug-form textarea {
	width: 100%;
}

.bug-form textarea.code {
	font-family: var(--mono);
	font-size: 0.86rem;
}

.bug-form small {
	color: var(--subtle);
}

.bug-comment {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.bug-comment.staff {
	border-left: 3px solid var(--accent);
}

.bug-comment.hidden {
	opacity: 0.6;
	border-style: dashed;
}

.bug-comment header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.7rem;
	margin-bottom: 0.3rem;
}

.bug-comment header small, .bug-event small {
	color: var(--subtle);
}

.bug-comment header small a {
	color: inherit;
}

.bug-comment .prose {
	max-width: none;
}

.bug-replies {
	margin-left: 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid var(--line);
}

.bug-event {
	margin: 0.8rem 0 0;
	color: var(--muted);
	font-size: 0.88rem;
}

.bug-reply summary {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.88rem;
	cursor: pointer;
}

.bug-reply form {
	margin-top: 0.6rem;
}

.bug-files {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.8rem;
	margin: 0.6rem 0;
}

.bug-files figure {
	margin: 0;
}

.bug-files img, .bug-files video {
	display: block;
	width: 100%;
	max-height: 16rem;
	object-fit: contain;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sunken);
}

.bug-files audio {
	width: 100%;
}

.bug-files figcaption {
	margin-top: 0.3rem;
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.bug-files figcaption small {
	margin-left: 0.4rem;
	color: var(--subtle);
}

.bug-panel {
	margin-top: 2rem;
}

/* ---------- Cookie notice ---------- */

.cookie-notice {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 1000;
	max-width: 46rem;
	margin: 0 auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	font-size: 0.92rem;
}

.cookie-notice p {
	margin: 0 0 0.75rem;
}

.cookie-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* both choices look the same on purpose: neither is pushed */
.cookie-actions button, .privacy-choice button {
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--sunken);
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.cookie-actions button:hover, .privacy-choice button:hover {
	background: var(--surface-hover);
	border-color: var(--accent);
}

.privacy-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0 1.5rem;
}

/* ---------- Statistics and log (admin) ---------- */

.range {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0 1.25rem;
}

.range a {
	padding: 0.25rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.9rem;
}

.range a.current {
	border-color: var(--accent);
	color: var(--accent);
}

.kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.kpis div {
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.kpis strong {
	display: block;
	font-size: 1.7rem;
	line-height: 1.2;
}

.kpis span {
	color: var(--muted);
	font-size: 0.85rem;
}

.day-chart {
	margin: 0 0 1.5rem;
	padding: 1rem 1rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.day-chart .bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 150px;
}

.day-chart .day {
	position: relative;
	flex: 1 1 0;
	height: 100%;
	min-width: 1px;
}

.day-chart .day span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 2px 2px 0 0;
}

.day-chart .views, .key.views {
	background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.day-chart .visitors, .key.visitors {
	background: var(--accent);
}

.day-chart figcaption {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
	color: var(--subtle);
	font-size: 0.8rem;
}

.key {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin: 0 0.25rem 0 0.6rem;
	border-radius: 2px;
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.bar-list, .donut-chart {
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.bar-list h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.bar-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bar-list li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.15rem 0.4rem;
	margin: 0 0 2px;
	font-size: 0.9rem;
}

.bar-list .fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.bar-list .label {
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bar-list .count {
	position: relative;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.bar-list .empty {
	margin: 0;
	color: var(--subtle);
	font-size: 0.9rem;
}

.privacy-note {
	color: var(--subtle);
	font-size: 0.85rem;
}

.level {
	display: inline-block;
	padding: 0 0.5rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.78rem;
}

.level.warning { border-color: #b7791f; color: #b7791f; }
.level.error { border-color: var(--colour-danger, #c23b3b); color: var(--colour-danger, #c23b3b); }
.level.security { border-color: var(--colour-danger, #c23b3b); background: color-mix(in srgb, var(--colour-danger, #c23b3b) 12%, transparent); color: var(--colour-danger, #c23b3b); }

table.list td.time {
	white-space: nowrap;
}

table.log-table td {
	font-size: 0.88rem;
	vertical-align: top;
}

details.verify {
	margin: 0.75rem 0 1.5rem;
	color: var(--muted);
	font-size: 0.92rem;
}

details.verify summary {
	cursor: pointer;
}

/* ---------- Admin tab bar, Media section, editor ---------- */

.admin-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}

.admin-nav a {
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.92rem;
	text-decoration: none;
}

.admin-nav a:hover {
	background: var(--surface-hover);
	color: var(--text);
}

.admin-nav a.active {
	background: var(--sunken);
	color: var(--text);
	font-weight: 600;
}

.file-upload {
	margin-bottom: 1.5rem;
}

.file-upload small {
	display: block;
	margin-top: 0.4rem;
	color: var(--subtle);
}

.file-layout {
	display: grid;
	grid-template-columns: 13rem 1fr;
	gap: 1.5rem;
	align-items: start;
}

.file-folders {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: 1rem;
}

.file-folders a {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius);
	color: var(--muted);
	font-size: 0.92rem;
	text-decoration: none;
}

.file-folders a:hover { background: var(--surface-hover); }
.file-folders a.current { background: var(--sunken); color: var(--text); font-weight: 600; }
.file-folders span { color: var(--subtle); font-variant-numeric: tabular-nums; }

.file-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
}

.file-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	min-width: 0;
}

.file-card:hover { border-color: var(--line-strong); }
.file-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.file-card .thumb {
	display: grid;
	place-items: center;
	height: 6rem;
	border-radius: 4px;
	background: var(--sunken);
	overflow: hidden;
}

.file-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-card .thumb b { color: var(--subtle); font-size: 0.95rem; }

.file-card .name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.88rem;
}

.file-card small { color: var(--subtle); font-size: 0.78rem; }

.file-detail {
	margin-top: 2rem;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.file-detail h2 { margin-top: 0; overflow-wrap: anywhere; }
.file-detail h3 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }

.file-preview { margin: 0 0 1rem; }
.file-preview img, .file-preview video { max-width: 100%; max-height: 22rem; border-radius: var(--radius); }

input.copy {
	width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sunken);
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.85rem;
}

.file-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
}

.inline-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.75rem;
	align-items: end;
	max-width: none;
}

.rt-bar { display: flex; margin: 0.35rem 0 0.35rem; }
.rt-host { margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
/* The editor grows with the text, with room to write and a limit so a long text scrolls inside it */
.rt-host .milkdown { min-height: 18rem; max-height: 38rem; overflow-y: auto; }
.rt-host .milkdown .ProseMirror { padding: 1rem 1.25rem; min-height: 16rem; outline: none; }
.rt-files-button {
	padding: 0 0.6rem;
	height: 28px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface);
	color: #555;
	font-size: 0.82rem;
	cursor: pointer;
}

.rt-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.45);
}

.rt-dialog {
	display: flex;
	flex-direction: column;
	width: min(52rem, 94vw);
	max-height: 82vh;
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.rt-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--line);
}

.rt-head input {
	flex: 1;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--background);
	color: var(--text);
	font: inherit;
}

.rt-close {
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.rt-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	gap: 0.6rem;
	padding: 1rem;
	overflow: auto;
}

.rt-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	text-align: left;
	min-width: 0;
}

.rt-item:hover { border-color: var(--accent); }
.rt-item span { display: grid; place-items: center; height: 5rem; border-radius: 4px; background: var(--sunken); color: var(--subtle); overflow: hidden; }
.rt-item img { width: 100%; height: 100%; object-fit: cover; }
.rt-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-foot { margin: 0; padding: 0.6rem 1rem; border-top: 1px solid var(--line); color: var(--subtle); font-size: 0.85rem; }

@media (max-width: 52rem) {
	.file-layout { grid-template-columns: 1fr; }
	.file-folders { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Documentation ---------- */

.doc-search {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.doc-search input {
	flex: 1;
	min-width: 0;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
}

.doc-search button {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.doc-layout {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr) 13rem;
	gap: 2rem;
	align-items: start;
}

.doc-sidebar, .doc-toc {
	position: sticky;
	top: 1rem;
	max-height: calc(100vh - 2rem);
	overflow: auto;
	font-size: 0.92rem;
}

.doc-sidebar h2 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.doc-sidebar h2 a { color: var(--text); }

.doc-sidebar .doc-search { margin-bottom: 0.75rem; }
.doc-sidebar .doc-search input { padding: 0.3rem 0.55rem; font-size: 0.9rem; }

.doc-sidebar ul, .doc-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-sidebar ul ul {
	margin: 0.1rem 0 0.4rem 0.75rem;
	padding-left: 0.6rem;
	border-left: 1px solid var(--line);
}

.doc-sidebar a {
	display: block;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius);
	color: var(--muted);
	text-decoration: none;
}

.doc-sidebar a:hover { background: var(--surface-hover); color: var(--text); }
.doc-sidebar a.current { background: var(--sunken); color: var(--text); font-weight: 600; }

.doc-linked { margin-top: 1.25rem; }

.doc-toc strong {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--subtle);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.doc-toc a {
	display: block;
	padding: 0.15rem 0;
	color: var(--muted);
	text-decoration: none;
}

.doc-toc a:hover { color: var(--accent); }
.doc-toc .level-3 { padding-left: 0.8rem; }

.doc-crumbs {
	margin: 0 0 0.5rem;
	color: var(--subtle);
	font-size: 0.85rem;
}

.doc-edit {
	float: right;
	font-size: 0.85rem;
}

.doc-content h2, .doc-content h3 { scroll-margin-top: 1rem; }

.doc-pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0 1rem;
}

.doc-pager a {
	display: flex;
	flex-direction: column;
	min-width: 40%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
}

.doc-pager a:hover { border-color: var(--accent); }
.doc-pager .next { text-align: right; margin-left: auto; }
.doc-pager small { color: var(--subtle); }

.doc-updated {
	color: var(--subtle);
	font-size: 0.85rem;
}

/* code blocks: used by the docs, posts and project pages */

.prose pre {
	position: relative;
	padding: 0.9rem 1rem;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sunken);
	font-size: 0.88rem;
	line-height: 1.5;
}

.prose pre code {
	padding: 0;
	background: none;
	font-family: var(--mono);
}

.prose pre.has-bar { padding-top: 2rem; }

.code-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.2rem 0.5rem 0.2rem 0.9rem;
	color: var(--subtle);
	font-family: var(--mono);
	font-size: 0.75rem;
}

.code-bar button {
	padding: 0.05rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface);
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.code-bar button:hover { color: var(--text); border-color: var(--line-strong); }

.prose pre code.hljs { background: none; padding: 0; }

@media (max-width: 64rem) {
	.doc-layout { grid-template-columns: 14rem minmax(0, 1fr); }
	.doc-toc { display: none; }
}

@media (max-width: 44rem) {
	.doc-layout { grid-template-columns: 1fr; }
	.doc-sidebar { position: static; max-height: none; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
}

.admin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.75rem;
}

.admin-cards a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
}

.admin-cards a:hover { border-color: var(--accent); }
.admin-cards span { color: var(--muted); font-size: 0.88rem; }

/* ---------- Small screens ---------- */

@media (max-width: 40rem) {
	/* the extra element names make these rules win over the menu's own scoped styles */
	nav.main-nav ul.menu {
		padding: 0 0.75rem;
	}

	nav.main-nav ul.menu li.menu-brand {
		flex-basis: 100%;
	}

	.hero {
		padding-top: 1.75rem;
	}

	.card-grid {
		grid-template-columns: 1fr;
	}

	.bug-form-row {
		grid-template-columns: 1fr;
	}

	.bug-replies {
		margin-left: 0.5rem;
		padding-left: 0.6rem;
	}

	main > article {
		padding-top: 1.5rem;
		padding-bottom: 3rem;
	}
}

.qr-code svg {
	width: 12rem;
	height: 12rem;
	margin: 0.5rem 0 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

main a.file-card, main a.file-card:visited { color: var(--text); }

.rt-note {
	margin: 0.25rem 0 1rem;
	color: var(--subtle);
	font-size: 0.85rem;
}

/* ---------- Banner across the top (set in /admin/notice) ---------- */

.site-notice {
	padding: 0.5rem 1rem;
	background: var(--accent);
	color: #ffffff;
	font-size: 0.92rem;
	text-align: center;
}

.site-notice a {
	margin-left: 0.5rem;
	color: #ffffff;
	text-decoration: underline;
}

/* The thin bar for people who may open the admin, at the top of the public pages (AdminBar.razor) */
.admin-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0.35rem 1rem;
	background: #1d2327;
	font-size: 0.85rem;
}
/* .page in front, so the link colour of the theme does not win */
.page .admin-bar a {
	color: #f0f0f1;
	text-decoration: none;
}
.page .admin-bar a:hover {
	text-decoration: underline;
}
.admin-bar-account {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}
.admin-bar .logout-form {
	display: inline;
	margin: 0;
}
.admin-bar button {
	padding: 0;
	border: 0;
	background: none;
	color: #f0f0f1;
	font: inherit;
	cursor: pointer;
}
.admin-bar button:hover {
	text-decoration: underline;
}
/* The search box (SearchBox.razor); the small one sits in the menu bar */
.search-box.compact {
	margin: 0;
}
.search-box.compact input[type="search"] {
	width: 11rem;
	padding: 0.3rem 0.6rem;
}
.search-box.compact button {
	padding: 0.3rem 0.7rem;
}
.search-box select {
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
}
.menu-search {
	display: flex;
	align-items: center;
	list-style: none;
}

/* The top menu: wide enough for a long site name and five entries, and the search box shrinks and stays at the right-hand end instead
   of dropping to a second row. (The extra element names make these rules win over the menu's own scoped styles.) */
nav.main-nav ul.menu {
	max-width: 72rem;
}
nav.main-nav ul.menu li.menu-search {
	flex: 0 1 14rem;
	min-width: 9rem;
	margin-left: 0.5rem;
}
nav.main-nav ul.menu li.menu-search .search-box.compact {
	display: flex;
	flex: 1 1 auto;
	gap: 0.4rem;
	min-width: 0;
}
nav.main-nav ul.menu li.menu-search .search-box.compact input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
nav.main-nav ul.menu li.menu-search .search-box.compact button {
	flex: none;
}
/* When the menu is narrow (a tablet or a phone) the search box gets a row of its own */
@media (max-width: 64rem) {
	nav.main-nav ul.menu li.menu-search {
		flex: 1 1 100%;
		margin: 0.25rem 0 0.5rem;
	}
}
.search-group {
	margin: 1.5rem 0;
}
.search-group h2 small, .search-results small {
	color: var(--muted);
	font-weight: normal;
}
.search-results {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}
.search-results li {
	margin: 0 0 0.9rem;
}
.search-results p {
	margin: 0.15rem 0 0;
	color: var(--muted);
}
.filter-date {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--muted);
	font-size: 0.9rem;
}
.button-link {
	align-self: center;
	font-size: 0.9rem;
}

/* The feedback box on project and product pages (FeedbackBox.razor): closed it is one line, open it is the form */
.feedback-box {
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.feedback-box summary {
	cursor: pointer;
	font-weight: 600;
}
.feedback-box form {
	margin-top: 1rem;
}

/* Drag and drop of files (dropzone.js): the label around a file input becomes a dashed area */
.dropzone {
	display: block;
	padding: 0.6rem 0.75rem;
	border: 2px dashed var(--line);
	border-radius: var(--radius);
	transition: background 0.15s, border-color 0.15s;
}
.dropzone-over {
	border-color: var(--accent);
	background: var(--surface-hover, rgba(47, 111, 208, 0.08));
}
.dropzone-hint, .dropzone-list {
	display: block;
	color: var(--muted);
}
.dropzone-list {
	margin-top: 0.25rem;
	color: var(--text);
	overflow-wrap: anywhere;
}

/* The downloads section of a project page (DownloadsSection.razor): one card for each platform */
.downloads {
	margin: 2rem 0;
}
.download-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1rem;
}
.download-card {
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.download-card h3 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
}
.download-card h3 small {
	margin-left: auto;
	color: var(--muted);
	font-weight: normal;
}
.platform-icon {
	flex: none;
}
.download-files {
	list-style: none;
	margin: 0;
	padding: 0;
}
.download-files li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0 0 0.7rem;
}
.download-meta {
	flex: 1;
	min-width: 12rem;
	font-size: 0.9rem;
}
.download-meta small, .download-older small {
	color: var(--muted);
	overflow-wrap: anywhere;
}
.download-notes {
	margin: 0.5rem 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}
.download-older {
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--line);
}
.download-older summary {
	cursor: pointer;
}
.download-older h4 {
	margin: 0.75rem 0 0.35rem;
	font-size: 0.95rem;
}

/* Flags (Flag.razor) and the round charts of the statistics (DonutChart.razor) */
.flag {
	display: inline-block;
	margin-right: 0.4rem;
	vertical-align: -2px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.donut-chart h3 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}
.donut-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.donut {
	display: grid;
	place-items: center;
	flex: none;
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
}
.donut-hole {
	display: grid;
	place-items: center;
	width: 5.2rem;
	height: 5.2rem;
	border-radius: 50%;
	background: var(--surface);
	font-size: 1.05rem;
}
.donut-legend {
	flex: 1;
	min-width: 10rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}
.donut-legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0;
}
.donut-legend .swatch {
	flex: none;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 2px;
}
.donut-legend .label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.donut-legend .count {
	color: var(--muted);
	white-space: nowrap;
}

/* The Media section: a box on each file to tick it, and the bar that acts on the ticked files (MediaList.razor) */
.file-item {
	position: relative;
	display: flex;
}
.file-item > .file-card {
	flex: 1;
	min-width: 0;
}
.file-item .pick {
	position: absolute;
	top: 0.45rem;
	left: 0.45rem;
	z-index: 2;
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
}

/* The small square icon of a project or product (ItemIcon.razor) */
.item-icon {
	flex: none;
	object-fit: contain;
	border-radius: 0.3rem;
	vertical-align: middle;
}
.item-icon.small {
	width: 1.75rem;
	height: 1.75rem;
	margin-right: 0.5rem;
}
.item-icon.large {
	width: 5.5rem;
	height: 5.5rem;
	margin-right: 0.75rem;
	padding: 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.item-icon.letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sunken);
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
}
h1 > .item-icon.large {
	display: inline-block;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.3rem;
}

/* The picture boxes of the admin edit pages (PictureField.razor) and the extras of the picker window (media-picker.js) */
.picture-tools {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.25rem 0 1rem;
}
.picture-preview {
	max-width: 4rem;
	max-height: 4rem;
	border: 1px solid var(--line);
	border-radius: 0.3rem;
	object-fit: contain;
	background: var(--sunken);
}
.picture-preview[hidden] {
	display: none;
}
.rt-item.picked {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent);
}
.rt-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}
.rt-foot .rt-upload {
	margin: 0;
	font-weight: 600;
}

/* ---------- The rotating banner (RotatingBanner.razor, banner.js) ---------- */

.banner {
	position: relative;
	margin: 0 0 1.5rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sunken);
}
.banner-slides {
	position: relative;
	aspect-ratio: 21 / 8;
	min-height: 12rem;
}
.banner-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s;
}
.banner-slide.active {
	opacity: 1;
	visibility: visible;
}
.banner-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 2.5rem 4rem 2.25rem 1.5rem;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.banner-title {
	font-size: 1.5rem;
}
.banner-sub {
	max-width: 40rem;
}
.banner-arrow,
.banner-pause {
	position: absolute;
	z-index: 2;
	border: 0;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	display: none;
}
.banner-ready .banner-arrow,
.banner-ready .banner-pause {
	display: block;
}
.banner-arrow {
	top: 50%;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -1.25rem;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
}
.banner-prev { left: 0.75rem; }
.banner-next { right: 0.75rem; }
.banner-pause {
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.3rem 0.6rem;
	border-radius: 1rem;
	font-size: 0.7rem;
}
.banner-arrow:hover,
.banner-pause:hover {
	background: rgba(0, 0, 0, 0.7);
}
.banner-dots {
	position: absolute;
	right: 1rem;
	bottom: 0.75rem;
	z-index: 2;
	display: none;
	gap: 0.4rem;
}
.banner-ready .banner-dots {
	display: flex;
}
.banner-dot {
	width: 0.7rem;
	height: 0.7rem;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.banner-dot[aria-current="true"] {
	background: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.banner-slide { transition: none; }
}
@media (max-width: 40rem) {
	.banner-slides { aspect-ratio: 4 / 3; }
	.banner-text { padding: 1.5rem 3.5rem 2rem 1rem; }
}

/* ---------- The image viewer (viewer.js) ---------- */

.prose img {
	cursor: zoom-in;
}
.prose a img {
	cursor: pointer;
}
.gallery a {
	cursor: zoom-in;
}
html.viewer-open {
	overflow: hidden;
}
.viewer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	color: #fff;
}
.viewer-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100%;
	min-height: 0;
	padding: 3.5rem 4.5rem 0.5rem;
}
.viewer-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
}
.viewer-caption {
	margin: 0;
	padding: 0.25rem 1rem;
	min-height: 1.6rem;
	text-align: center;
}
.viewer-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem 1rem;
}
.viewer-btn {
	border: 0;
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	cursor: pointer;
}
.viewer-btn:hover,
.viewer-btn:focus-visible {
	background: rgba(255, 255, 255, 0.3);
}
.viewer-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
}
.viewer-prev,
.viewer-next {
	position: absolute;
	top: 50%;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	border-radius: 50%;
	font-size: 2rem;
	line-height: 1;
}
.viewer-prev { left: 0.75rem; }
.viewer-next { right: 0.75rem; }
.viewer-play {
	padding: 0.3rem 0.8rem;
	border-radius: 1rem;
}
.viewer-single .viewer-prev,
.viewer-single .viewer-next,
.viewer-single .viewer-play {
	display: none;
}
@media (max-width: 40rem) {
	.viewer-stage { padding: 3.5rem 0.5rem 0.5rem; }
	.viewer-prev, .viewer-next { top: auto; bottom: 4.5rem; }
}

/* ---------- The media player (MediaPlayer.razor, player.js) ---------- */

.cms-player {
	margin: 1.25rem 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	overflow: hidden;
}
.cms-player:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.player-title {
	margin: 0;
	padding: 0.7rem 1rem 0;
	font-weight: 700;
}
.player-screen {
	position: relative;
	background: var(--sunken);
}
.player-media {
	display: block;
	width: 100%;
}
video.player-media {
	max-height: 32rem;
	background: #000;
}
audio.player-media {
	padding: 0.75rem 1rem;
}
/* A sound has no picture, so the player draws some bars that move while it plays */
.player-art {
	display: none;
}
.player-ready.kind-audio .player-media {
	display: none;
}
.player-ready.kind-audio .player-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	height: 5rem;
	padding: 0.8rem 0;
}
.player-art span {
	width: 7px;
	height: 28%;
	border-radius: 3px;
	background: var(--accent);
	opacity: 0.55;
}
.is-playing .player-art span {
	opacity: 1;
	animation: player-bars 0.9s ease-in-out infinite alternate;
}
.is-playing .player-art span:nth-child(2) { animation-delay: 0.12s; }
.is-playing .player-art span:nth-child(3) { animation-delay: 0.3s; }
.is-playing .player-art span:nth-child(4) { animation-delay: 0.05s; }
.is-playing .player-art span:nth-child(5) { animation-delay: 0.22s; }
.is-playing .player-art span:nth-child(6) { animation-delay: 0.4s; }
.is-playing .player-art span:nth-child(7) { animation-delay: 0.17s; }
@keyframes player-bars {
	from { height: 18%; }
	to { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.is-playing .player-art span { animation: none; height: 60%; }
}
.player-now {
	margin: 0;
	padding: 0.55rem 1rem 0;
	font-size: 0.9rem;
	color: var(--muted);
}
.player-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.7rem;
	padding: 0.6rem 1rem 0.8rem;
}
.player-btn {
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}
.player-btn:hover,
.player-btn:focus-visible {
	border-color: var(--accent);
}
.player-btn[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-primary);
}
.player-play,
.player-prev,
.player-next {
	position: relative;
	width: 2.4rem;
	padding: 0;
}
.player-play::before,
.player-prev::before,
.player-next::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.85rem;
	height: 0.95rem;
	background: currentColor;
}
.player-play::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.player-play.is-playing::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.player-prev::before { clip-path: polygon(0 0, 15% 0, 15% 50%, 100% 0, 100% 100%, 15% 50%, 15% 100%, 0 100%); }
.player-next::before { clip-path: polygon(100% 0, 85% 0, 85% 50%, 0 0, 0 100%, 85% 50%, 85% 100%, 100% 100%); }
.player-time,
.player-length {
	min-width: 2.6rem;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.player-seek {
	flex: 1 1 8rem;
	min-width: 6rem;
	accent-color: var(--accent);
}
.player-volume {
	width: 5.5rem;
	accent-color: var(--accent);
}
.player-speed {
	height: 2.4rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--sunken);
	color: var(--text);
	font-size: 0.8rem;
}
.player-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
	counter-reset: track;
}
.player-list li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--line);
	counter-increment: track;
}
.player-list li:last-child {
	border-bottom: 0;
}
.player-list li::before {
	content: counter(track);
	min-width: 1.4rem;
	color: var(--subtle);
	font-size: 0.8rem;
	text-align: right;
}
.player-list a[data-track] {
	flex: 1;
	color: var(--text);
	text-decoration: none;
}
.player-list a[data-track]:hover {
	color: var(--accent);
}
.player-list li.playing {
	background: var(--surface-hover);
}
.player-list li.playing a[data-track] {
	color: var(--accent);
	font-weight: 700;
}
.player-download {
	font-size: 0.75rem;
	color: var(--muted);
}
.player-bare .player-media {
	display: block;
}

/* ---------- The features of a project or product (FeatureGrid.razor) ---------- */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.feature-card {
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.feature-card h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
}
.feature-card p {
	margin: 0 0 0.75rem;
	color: var(--muted);
}
.feature-picture {
	display: block;
	width: 100%;
	height: auto;
	margin: 0.5rem 0;
	border-radius: calc(var(--radius) / 2);
}