/* Forum index (category tree): main forums as framed sections, sub-forums
   as table rows that become cards on phones. Tokens from tokens.css, look
   of community.css/content.css. No inline styles anywhere: the CSP forbids
   them. Column widths are fixed so numbers never shift the layout while a
   row's latest-thread title wraps. */

.forum-index {
	display: grid;
	gap: var(--sp-lg);
	margin-bottom: var(--sp-xl);
}
.forum {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--ground-page);
	overflow: hidden;
}
.forum-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-xs) var(--sp-md);
	padding: var(--sp-sm) var(--sp-md);
	background: var(--ground-zone);
	border-bottom: 1px solid var(--line);
}
.forum-title {
	font-family: var(--font-serif);
	font-size: 1.25rem; /* scale "20": panel title */
	font-weight: 600;
	line-height: 1.2;
	color: var(--petrol-deep);
	margin: 0;
}
.forum-title a {
	color: inherit;
	text-decoration: none;
}
.forum-title a:hover {
	text-decoration: underline;
}
.forum-summary {
	margin: 0;
	font-size: 1rem;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}
.forum-empty {
	margin: 0;
	padding: var(--sp-sm) var(--sp-md);
	color: var(--ink-muted);
	font-style: italic;
}

/* --- Rows --- */

.forum-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.forum-table th,
.forum-table td {
	text-align: left;
	vertical-align: top;
	padding: var(--sp-sm) var(--sp-md);
	border-top: 1px solid var(--line);
}
/* Column heads, stat labels and the phone cell labels are dense data
   labels: eyebrow size and weight (12/500, uppercase) with the website's
   tighter 0.08em tracking for stat/diagram labels (TokenizerDemo
   .tok-stat-label, Wegkarte), so narrow number columns don't break every
   word onto its own line. Muted. */
.forum-table thead th {
	padding-block: var(--sp-xs);
	border-top: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.forum-table tbody tr:first-child th,
.forum-table tbody tr:first-child td {
	border-top-color: var(--line-deep);
}
.forum-col-num,
.forum-num {
	width: 6.5rem;
	text-align: center;
}
.forum-col-latest,
.forum-latest {
	width: 32%;
}
.forum-name {
	font-weight: 400;
}
.forum-link {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--petrol-deep);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.forum-link:hover {
	text-decoration: underline;
}
.forum-name .badge {
	margin-left: var(--sp-xs);
	vertical-align: middle;
}
.forum-row.is-archived .forum-link {
	color: var(--ink-muted);
}
.forum-value {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--petrol-deep);
	font-variant-numeric: tabular-nums;
}
.forum-row.is-archived .forum-value {
	color: var(--ink-muted);
}
.forum-cell-label {
	display: none;
}
.forum-latest-title {
	display: block;
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.forum-latest-title:hover {
	text-decoration: underline;
}
.forum-latest-meta {
	display: block;
	margin-top: 2px;
	font-size: 1rem;
	color: var(--ink-muted);
}
.forum-latest-meta a {
	color: var(--ink-muted);
}
.forum-latest-empty {
	font-size: 1rem;
	font-style: italic;
	color: var(--ink-muted);
}

/* --- Counts in the hero of a category or Baustein page --- */

.forum-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md) var(--sp-lg);
	margin: 0 0 var(--sp-md);
}
.forum-stats div {
	display: grid;
	gap: 2px;
}
.forum-stats dt {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.forum-stats dd {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.75rem; /* scale "28" */
	font-weight: 600;
	line-height: 1;
	color: var(--petrol-deep);
	font-variant-numeric: tabular-nums;
}

/* --- "Aktuelle Themen" under the index --- */

.recent-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-sm);
}
.recent-head .list-heading,
.recent-head .tabs {
	margin: 0;
}
.recent-more {
	margin-top: var(--sp-md);
}

/* --- Phones: each row becomes a card; the header row stays for screen
   readers only and the per-cell labels take over visually. --- */

@media (max-width: 720px) {
	.forum-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.forum-table,
	.forum-table tbody,
	.forum-table th,
	.forum-table td {
		display: block;
		width: auto;
	}
	.forum-table tr {
		display: grid;
		grid-template-columns: repeat(3, max-content) 1fr;
		gap: var(--sp-xs) var(--sp-sm);
		padding: var(--sp-sm) var(--sp-md);
		border-top: 1px solid var(--line);
	}
	.forum-table tbody tr:first-child {
		border-top-color: var(--line-deep);
	}
	.forum-table th,
	.forum-table td {
		padding: 0;
		border-top: 0;
	}
	.forum-table .forum-name {
		grid-column: 1 / -1;
	}
	.forum-table .forum-num {
		display: flex;
		align-items: baseline;
		gap: 4px;
		text-align: left;
	}
	.forum-value {
		font-size: 1rem;
	}
	.forum-cell-label {
		display: inline;
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
	}
	.forum-table .forum-latest {
		grid-column: 1 / -1;
	}
	.forum-head {
		padding-inline: var(--sp-sm);
	}
	.forum-table tr {
		padding-inline: var(--sp-sm);
	}
}