/* Content pages (lists, thread, search). Tokens from tokens.css, look of
   community.css. No inline styles anywhere: the CSP forbids them. */

/* Breadcrumbs mirror the website's trail (LegalLayout.astro and
   ContentEntryLayout.astro .crumbs): slash separators in line-deep,
   unadorned links that underline on hover, and on phones one back-link to
   the parent level. */
.crumbs {
	margin-block: var(--sp-sm) var(--sp-md);
}
.crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-xs);
	padding: 0;
	font-size: 1rem;
	color: var(--ink-muted);
}
.crumbs li {
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
}
.crumbs li + li::before {
	content: '/';
	color: var(--line-deep);
}
.crumbs a {
	color: var(--petrol-deep);
	text-decoration: none;
	font-weight: 500;
}
.crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (max-width: 640px) {
	.crumbs li:not(:nth-last-child(2)) {
		display: none;
	}
	.crumbs li + li:nth-last-child(2)::before,
	.crumbs li:first-child:nth-last-child(2)::before {
		content: '←';
		color: inherit;
	}
}

/* The eyebrow's look is the website's (tokens.css); only the spacing to
   the title and the inherited link colour are set here. */
.eyebrow {
	margin-bottom: var(--sp-xs);
}
.eyebrow a {
	color: inherit;
}
.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-sm) var(--sp-md);
	margin-bottom: var(--sp-md);
}
.hint,
.empty {
	color: var(--ink-muted);
	max-width: 42rem;
}
.empty {
	padding: var(--sp-md);
	border: 1px dashed var(--line-deep);
	border-radius: var(--r-md);
}
.list-heading {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	color: var(--petrol-deep);
	margin-block: var(--sp-md) var(--sp-sm);
}

/* --- Tabs as links, filters --- */

.tab {
	text-decoration: none;
}
.tab:hover {
	border-color: var(--petrol);
	color: var(--petrol-deep);
}
/* Filter and search controls are forms.css .field controls; only the
   row layout lives here. */
.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-md);
}
.filters .field {
	font-weight: 600;
	line-height: 1.4;
}

/* --- Thread rows --- */

.thread-list {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--line);
}
.thread-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	column-gap: var(--sp-sm);
	padding-block: var(--sp-md);
	border-bottom: 1px solid var(--line);
}
.thread-avatar {
	padding-top: 2px;
}
.thread-main {
	min-width: 0;
}
/* Pinned: zone tint plus a pin glyph before the title (the "Angepinnt"
   badge carries the meaning for screen readers). Amber stays reserved for
   progress/attention. */
.thread-row.is-pinned {
	background: var(--ground-zone);
	padding-inline: var(--sp-xs);
}
.thread-row.is-pinned .thread-title::before {
	content: '';
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.35em;
	vertical-align: -0.08em;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5M9 3h6l-1 6 4 4v2H6v-2l4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.thread-title {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--petrol-deep);
	text-decoration: none;
}
.thread-title:hover {
	text-decoration: underline;
}
.thread-meta,
.snippet {
	font-size: 1rem;
	color: var(--ink-muted);
	margin-top: 4px;
}
.thread-meta a {
	color: var(--ink-muted);
	text-decoration: none;
}
.thread-meta a:hover {
	color: var(--petrol-deep);
	text-decoration: underline;
}
.thread-meta.thread-head-meta {
	margin: var(--sp-xs) 0 var(--sp-md);
	font-size: 1rem;
}
.thread-meta.thread-head-meta a {
	color: var(--petrol-deep);
}
.thread-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.4em;
	row-gap: 4px;
	font-size: 0.9375rem;
}
/* Quiet status chips inside the meta line: only "Gelöst", "Geschlossen",
   "Angepinnt" and a foreign language get one, so they keep their weight. */
.chip {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	border: 1px solid var(--line-deep);
	border-radius: var(--r-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ink-muted);
}
.chip-ok {
	border-color: transparent;
	background: var(--ground-zone);
	color: var(--petrol-deep);
}
.chip-ok::before {
	content: '';
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: currentColor;
}
.chip-lang {
	border-style: dashed;
	letter-spacing: 0.04em;
}
/* Answer count: a speech bubble with the number, muted at zero. */
.thread-replies {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--hit-min);
	padding: 0 4px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--petrol-deep);
	text-decoration: none;
}
.thread-replies.is-zero {
	color: var(--ink-muted);
	font-weight: 500;
}
.thread-replies:hover {
	color: var(--petrol);
}

/* --- Page head and list toolbar: title plus one meta line, the single
   page action on the right; tabs and the folded filters share one row. --- */
.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-sm) var(--sp-md);
	margin-bottom: var(--sp-lg);
}
.page-head-text {
	flex: 1 1 24rem;
	min-width: 0;
}
.page-title {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
	margin: 0;
}
.page-meta {
	margin: var(--sp-xs) 0 0;
	color: var(--ink-muted);
}
.page-meta a {
	color: var(--petrol-deep);
}
.list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-sm);
}
.list-toolbar .tabs {
	margin-bottom: 0;
}
.filter-toggle > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--hit-min);
	padding: 0 14px;
	border: 1px solid var(--line-deep);
	border-radius: var(--r-pill);
	font-weight: 600;
	color: var(--ink-muted);
	cursor: pointer;
	list-style: none;
}
.filter-toggle > summary::-webkit-details-marker {
	display: none;
}
.filter-toggle > summary:hover,
.filter-toggle[open] > summary {
	border-color: var(--petrol-deep);
	color: var(--petrol-deep);
}
.filter-dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--petrol);
}
.filter-toggle[open] {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.filter-toggle .filters {
	justify-content: flex-end;
	margin: var(--sp-sm) 0 0;
}
/* Avatar stack of the people replying in a thread (PageSupport::rows):
   overlapping discs, each ringed in the page ground so the overlap reads
   cleanly in both themes, newest first. */
.participants {
	display: flex;
	align-items: center;
	margin: var(--sp-xs) 0 0;
	padding-left: 0.375rem;
}
.participant {
	display: inline-flex;
	margin-left: -0.375rem;
	border-radius: 50%;
	text-decoration: none;
}
.participant .avatar {
	box-shadow: 0 0 0 2px var(--ground-page);
}
.participant:hover .avatar,
.participant:focus-visible .avatar {
	box-shadow: 0 0 0 2px var(--petrol);
}
.participant-more {
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding-inline: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ink-muted);
	background: var(--ground-zone);
	box-shadow: 0 0 0 2px var(--ground-page);
	border-radius: 999px;
}
.badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: var(--sp-xs);
	vertical-align: middle;
}
.pagination {
	display: flex;
	gap: var(--sp-sm);
	margin-top: var(--sp-md);
}

/* --- Baustein grid on the category page --- */

.baustein-grid {
	margin-bottom: var(--sp-lg);
}
.baustein-grid h2 {
	/* Eyebrow tier (tokens.css .eyebrow), muted. */
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--sp-xs);
}
.baustein-grid ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
}
.baustein-grid a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit-min);
	padding: 0 12px;
	border: 1px solid var(--line-deep);
	border-radius: var(--r-pill);
	color: var(--petrol-deep);
	text-decoration: none;
	font-size: 1rem;
}
.baustein-grid a:hover {
	background: var(--petrol-soft);
}

/* --- Thread page --- */

.thread-head {
	margin-bottom: var(--sp-md);
}
.thread-head .badges {
	margin-left: 0;
	margin-bottom: var(--sp-sm);
}
.post {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-sm) var(--sp-md);
	margin-bottom: var(--sp-sm);
	background: var(--ground-page);
}
.post-opening {
	border-color: var(--petrol-soft);
	background: var(--ground-zone);
}
.post.is-accepted {
	border-color: var(--petrol-deep);
	border-width: 2px;
}
.post-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-xs);
	font-size: 1rem;
	color: var(--ink-muted);
	margin-bottom: var(--sp-xs);
}
.post-author {
	font-weight: 600;
	color: var(--ink);
}
a.post-author {
	text-decoration: none;
}
a.post-author:hover {
	text-decoration: underline;
}
/* Author card on openings, answers and replies: the avatar spans the
   byline (name, Team/asker/accepted badges) and the meta line (public
   Hintergrund, time). Comments keep the one-line .post-head. */
.post-head-card {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var(--sp-sm);
	row-gap: 2px;
	margin-bottom: var(--sp-sm);
}
.post-avatar {
	grid-row: 1 / span 2;
	display: flex;
}
.post-byline,
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--sp-xs);
	margin: 0;
}
.post-meta {
	font-size: 0.875rem;
}
.post-time {
	color: var(--ink-muted);
	text-decoration: none;
}
.post-time:hover {
	text-decoration: underline;
}
.post-edited {
	font-style: italic;
}
.post-placeholder {
	color: var(--ink-muted);
	font-style: italic;
}
.post-foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	font-size: 1rem;
	color: var(--ink-muted);
	margin-top: var(--sp-xs);
}
.reactions {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
	padding: 0;
	margin: 0;
}
.reactions li {
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 0 var(--sp-xs);
}
.comments {
	list-style: none;
	padding: 0 0 0 var(--sp-lg);
	margin-bottom: var(--sp-md);
}
.post-comment {
	font-size: 1rem;
	padding-block: var(--sp-xs);
	background: transparent;
	border-color: var(--line);
}
.thread-more {
	margin-top: var(--sp-xl);
}
.thread-license {
	margin-top: var(--sp-lg);
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--line);
	font-size: 1rem;
	color: var(--ink-muted);
}

/* --- Search --- */

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs);
	max-width: 42rem;
	margin-bottom: var(--sp-xs);
}
.search-form .search-query {
	flex: 1 1 14rem;
}

@media (max-width: 640px) {
	.thread-avatar .avatar-md {
		width: 2rem;
		height: 2rem;
	}
}