/*
 * The single-topic view: the question, its attachments, and the answer thread.
 */

.slf-topic-page__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-2);
	font-size: var(--slf-text-xl);
}

.slf-topic-page__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-2) var(--slf-space-3);
	margin-bottom: var(--slf-space-4);
	font-size: var(--slf-text-sm);
}

.slf-topic-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-3);
	margin: var(--slf-space-5) 0 0;
	padding-top: var(--slf-space-4);
	border-top: 1px solid var(--slf-border);
}

.slf-topic-page__actions .slf-field__hint {
	margin: 0;
}

/* ── Contribution text ──────────────────────────────────────────────────────── */

.slf-prose {
	/*
	 * ~70 characters. Long lines are measurably harder to track back from on a wide screen,
	 * and a legal question is exactly the kind of dense text where that costs comprehension.
	 */
	max-width: 68ch;
	color: var(--slf-text-2);
}

.slf-prose p {
	margin: 0 0 var(--slf-space-4);
}

.slf-prose p:last-child {
	margin-bottom: 0;
}

.slf-prose a {
	color: var(--slf-accent-text);
}

/* ── Chips ──────────────────────────────────────────────────────────────────── */

.slf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-2);
	margin: 0 0 var(--slf-space-4);
}

.slf-chip {
	display: inline-block;
	padding: 2px var(--slf-space-3);
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius-pill);
	background: var(--slf-surface-2);
	color: var(--slf-text-2);
	font-size: var(--slf-text-xs);
	text-decoration: none;
}

.slf-chip:hover {
	border-color: var(--slf-accent);
	color: var(--slf-text);
}

/* ── Attachments ────────────────────────────────────────────────────────────── */

.slf-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-3);
	margin: var(--slf-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.slf-attachments img {
	display: block;
	max-height: 220px;
	width: auto;
	border-radius: var(--slf-radius);
	border: 1px solid var(--slf-border);
}

.slf-attachments__file {
	display: inline-flex;
	align-items: center;
	gap: var(--slf-space-2);
	padding: var(--slf-space-2) var(--slf-space-3);
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius);
	background: var(--slf-surface-2);
	color: var(--slf-text-2);
	font-size: var(--slf-text-sm);
	text-decoration: none;
}

.slf-attachments__file:hover {
	border-color: var(--slf-accent);
}

/* ── Answer thread ──────────────────────────────────────────────────────────── */

.slf-answer-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slf-answer {
	padding: var(--slf-space-4) var(--slf-space-5);
	border-bottom: 1px solid var(--slf-border);
}

.slf-answer:last-child {
	border-bottom: 0;
}

/*
 * Indentation by depth, capped and small on purpose (AC 60). Four levels of a "normal"
 * 2rem indent would eat 96px — a third of a 320px screen — and squeeze the deepest replies
 * into an unreadable ribbon. A left border does the work the whitespace would have done,
 * and the "In reply to …" line above carries the meaning that the geometry no longer has to.
 */
.slf-answer[data-depth="1"] {
	padding-left: calc(var(--slf-space-5) + 0.75rem);
	border-left: 2px solid var(--slf-border);
}

.slf-answer[data-depth="2"] {
	padding-left: calc(var(--slf-space-5) + 1.5rem);
	border-left: 2px solid var(--slf-border);
}

.slf-answer[data-depth="3"] {
	padding-left: calc(var(--slf-space-5) + 2.25rem);
	border-left: 2px solid var(--slf-border);
}

/*
 * A verified lawyer's answer gets a different background and a marker (F-14 AC 85). The
 * badge beside the name carries the meaning; the tint alone would be invisible to anyone
 * who cannot distinguish it, which is a WCAG 1.4.1 failure.
 */
.slf-answer.is-verified {
	background: color-mix(in srgb, var(--slf-accent) 8%, transparent);
	border-left: 3px solid var(--slf-accent);
}

.slf-answer__replyto {
	margin: 0 0 var(--slf-space-2);
	font-size: var(--slf-text-xs);
	color: var(--slf-text-muted);
}

.slf-answer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-2);
	margin-bottom: var(--slf-space-3);
}

.slf-answer__author {
	font-weight: 600;
}

.slf-answer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-2);
	margin: var(--slf-space-3) 0 0;
}

.slf-answer__actions .slf-btn {
	min-height: 36px;
	padding: var(--slf-space-1) var(--slf-space-3);
}

.slf-answer__reply {
	margin-top: var(--slf-space-4);
	padding: var(--slf-space-4);
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius);
	background: var(--slf-surface-2);
}

@media (min-width: 48em) {
	.slf-topic-page__title {
		font-size: var(--slf-text-2xl);
	}

	.slf-answer[data-depth="1"] {
		padding-left: calc(var(--slf-space-5) + 2rem);
	}

	.slf-answer[data-depth="2"] {
		padding-left: calc(var(--slf-space-5) + 4rem);
	}

	.slf-answer[data-depth="3"] {
		padding-left: calc(var(--slf-space-5) + 6rem);
	}
}

/* ── Rating an answer ───────────────────────────────────────────────────────── */

/*
 * The two buttons live in a form of their own so they can post without JavaScript, which
 * makes them a flex row inside the actions row rather than siblings of the other buttons.
 */
.slf-votes {
	display: flex;
	gap: var(--slf-space-2);
}

.slf-vote {
	display: inline-flex;
	align-items: center;
	gap: var(--slf-space-1);
	min-height: 36px;
	padding: var(--slf-space-1) var(--slf-space-3);
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius-pill);
	background: var(--slf-surface);
	color: var(--slf-text-2);
	font: inherit;
	font-size: var(--slf-text-sm);
	cursor: pointer;
}

.slf-vote:hover {
	border-color: var(--slf-border-strong);
	color: var(--slf-text);
}

/*
 * The cast vote is shown by fill *and* by `aria-pressed`, which the attribute selector
 * ties together — styling `.is-active` alone would let the two drift apart the first time
 * the script updates one and not the other.
 */
.slf-vote.is-active,
.slf-vote[aria-pressed="true"] {
	border-color: var(--slf-accent);
	background: var(--slf-accent-soft);
	color: var(--slf-accent-text);
	font-weight: 600;
}

.slf-vote__count {
	font-variant-numeric: tabular-nums;
}

.slf-answer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-2);
	margin: 0;
}

.slf-accept__btn.is-active {
	color: var(--slf-solved);
	border-color: var(--slf-solved);
}

/*
 * The accepted answer is called out with a border and a badge, never with the background
 * alone — a tinted card and a verified-lawyer card would otherwise be two shades of the
 * same idea, and F-14 needs those two states to be told apart at a glance.
 */
.slf-answer.is-accepted {
	border-left: 3px solid var(--slf-solved);
	background: color-mix(in srgb, var(--slf-solved) 6%, var(--slf-surface));
}

/*
 * A hidden answer, which only a moderator ever sees. Dimmed and striped so it cannot be
 * mistaken for live content at a glance — the mistake being to read a moderated answer as
 * though the public can still see it, and act on it a second time.
 */
.slf-answer.is-hidden {
	opacity: 0.75;
	border-left: 3px solid var(--slf-urgent);
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		var(--slf-urgent-soft) 10px,
		var(--slf-urgent-soft) 11px
	);
}