/*
 * forum.css (plugin half) — STRUCTURE ONLY. THIS FILE NAMES NO COLOUR.
 *
 * ⚠️ The theme ships a forum.css of its own holding every colour, border, radius and shadow for this
 * same markup. It is enqueued after this one and wins ties on source order, so both files use plain
 * single-class selectors and neither has to be written one class deeper.
 *
 * The split is by KIND, not by specificity, and that is what NF-11 251 buys: swap the theme and the
 * forum still renders correctly — plainly rather than brokenly. A colour in THIS file, or a grid
 * definition in the theme's, quietly ends that guarantee.
 *
 * Every custom property below carries a fallback, so this file is also correct with no theme
 * tokens.css present at all.
 */

/* ------------------------------------------------------------------------------- Listing. */

.srq-list {
	display: grid;
	gap: var(--srt-space-md, 1rem);
}

.srq-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--srt-space-md, 1rem);
	padding: var(--srt-space-md, 1rem);
}

/* The thumbnail sits beside the text once there is room for it, and below it before that. */
@media (min-width: 520px) {
	.srq-card {
		grid-template-columns: minmax(0, 1fr) 180px;
		align-items: start;
	}
}

.srq-card__body {
	min-width: 0;
}

.srq-card__thumb {
	overflow: hidden;
}

.srq-card__thumb img {
	display: block;
	width: 100%;
	/* NF-01 213: a card never downloads the 50 MB original; the srt-card size is requested. */
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.srq-card__title {
	margin: var(--srt-space-3xs, 0.25rem) 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

.srq-card__excerpt {
	margin: 0 0 var(--srt-space-xs, 0.5rem);
}

.srq-card__category {
	font-size: 0.8rem;
	text-decoration: none;
}

/* -------------------------------------------------------------------------------- Badges. */

.srq-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srt-space-3xs, 0.25rem);
	margin: 0 0 var(--srt-space-3xs, 0.25rem);
}

.srq-badge {
	display: inline-block;
	padding: 2px var(--srt-space-2xs, 0.375rem);
	font-size: 0.68rem;
	line-height: 1.5;
	text-decoration: none;
}

/* --------------------------------------------------------------------------- Meta lines. */

.srq-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--srt-space-sm, 0.75rem);
	margin: 0;
	font-size: 0.82rem;
}

.srq-avatar {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 700;
	/* No colour here: the theme gives it one. Without a theme it is an unstyled circle of text. */
	border: 1px solid currentColor;
}

/* ----------------------------------------------------------------------------- View tabs. */

.srq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srt-space-xs, 0.5rem);
	margin-bottom: var(--srt-space-md, 1rem);
	/* NF-07 235: the strip scrolls inside itself; it never takes the document sideways. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.srq-tabs a {
	display: inline-flex;
	align-items: center;
	/* NF-06: 44px targets, on a control people tap repeatedly. */
	min-height: 44px;
	padding: 0 var(--srt-space-xs, 0.5rem);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------------- Thread. */

.srq-thread {
	margin-top: var(--srt-space-lg, 1.5rem);
}

.srq-thread__answers {
	display: grid;
	gap: var(--srt-space-md, 1rem);
}

.srq-answer {
	padding: var(--srt-space-md, 1rem);
}

.srq-answer__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--srt-space-xs, 0.5rem);
	margin-bottom: var(--srt-space-xs, 0.5rem);
	font-size: 0.9rem;
}

.srq-answer__body > :first-child {
	margin-top: 0;
}

.srq-answer__body > :last-child {
	margin-bottom: 0;
}

.srq-answer__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--srt-space-sm, 0.75rem);
	margin-top: var(--srt-space-sm, 0.75rem);
}

.srq-answer__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--srt-space-2xs, 0.375rem);
}

.srq-answer__reply {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--srt-space-xs, 0.5rem);
}

.srq-answer__edited {
	font-size: 0.8rem;
}

/*
 * The indentation ramp (F-10 87). Five levels, 0 through 4.
 *
 * ⚠️ F-10 90: this must stay readable on a phone WITHOUT horizontal scrolling, which is why the ramp
 * is capped rather than linear — a naive `depth * indent` at depth 4 leaves almost no room for text
 * in a 390px viewport. Depth 4 is stored as depth 4 by srq_set_threading(), so nothing indents
 * further than this no matter how long the conversation runs.
 */
.srq-answer--depth-1 {
	margin-left: var(--srt-thread-indent, 1.25rem);
}

.srq-answer--depth-2 {
	margin-left: calc(var(--srt-thread-indent, 1.25rem) * 2);
}

.srq-answer--depth-3 {
	margin-left: calc(var(--srt-thread-indent, 1.25rem) * 2.75);
}

.srq-answer--depth-4 {
	margin-left: calc(var(--srt-thread-indent, 1.25rem) * 3.25);
}

/* On a small screen the ramp compresses further rather than squeezing the prose. */
@media (max-width: 639px) {
	.srq-answer--depth-1 {
		margin-left: var(--srt-space-sm, 0.75rem);
	}

	.srq-answer--depth-2 {
		margin-left: calc(var(--srt-space-sm, 0.75rem) * 1.75);
	}

	.srq-answer--depth-3,
	.srq-answer--depth-4 {
		margin-left: calc(var(--srt-space-sm, 0.75rem) * 2.25);
	}
}

/* --------------------------------------------------------------------------------- Votes. */

.srq-vote {
	display: inline-flex;
	align-items: center;
	gap: var(--srt-space-2xs, 0.375rem);
	margin: 0;
}

.srq-vote button {
	display: inline-flex;
	align-items: center;
	gap: var(--srt-space-3xs, 0.25rem);
	/* 44px again: this is the most-tapped control on the page. */
	min-height: 44px;
	padding: 0 var(--srt-space-sm, 0.75rem);
	font: inherit;
}

/* -------------------------------------------------------------------------------- Forms. */

.srq-form {
	padding: var(--srt-space-lg, 1.5rem);
	margin-top: var(--srt-space-lg, 1.5rem);
}

.srq-form p {
	margin: 0 0 var(--srt-space-md, 1rem);
}

.srq-form label {
	display: block;
}

.srq-form__hint {
	display: block;
	margin-top: var(--srt-space-3xs, 0.25rem);
	font-size: 0.85rem;
}

.srq-form fieldset {
	margin: 0 0 var(--srt-space-md, 1rem);
	padding: 0;
	border: 0;
}

.srq-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--srt-space-3xs, 0.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.srq-checklist label {
	display: flex;
	align-items: center;
	gap: var(--srt-space-2xs, 0.375rem);
	min-height: 40px;
	font-weight: 400;
}

.srq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--srt-space-2xs, 0.375rem);
	min-height: 44px;
	padding: var(--srt-space-xs, 0.5rem) var(--srt-space-md, 1rem);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
}

.srq-post-button {
	display: inline;
	margin: 0;
}

/*
 * ⚠️ The honeypot. Positioned off-screen rather than display:none — some bots treat display:none as
 * a tell and skip the field, which is the one behaviour that would defeat it.
 */
.srq-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.srq-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------- Sidebar lists. */

.srq-compact,
.srq-termlist {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.srq-compact li {
	display: flex;
	align-items: baseline;
	gap: var(--srt-space-xs, 0.5rem);
	padding: var(--srt-space-3xs, 0.25rem) 0;
	font-size: 0.92rem;
}

.srq-compact a {
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
}

.srq-rank {
	flex: 0 0 1.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.srq-termlist--cols-2 {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.srq-termlist--cols-3 {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.srq-termlist--cols-4 {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* -------------------------------------------------------------------------- Odds and ends. */

.srq-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: var(--srt-space-xs, 0.5rem);
	margin: var(--srt-space-sm, 0.75rem) 0 0;
}

.srq-stat dt {
	font-size: 0.78rem;
}

.srq-stat dd {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.srq-terms {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--srt-space-3xs, 0.25rem) var(--srt-space-sm, 0.75rem);
	margin: var(--srt-space-sm, 0.75rem) 0 0;
	font-size: 0.9rem;
}

.srq-terms dt {
	font-weight: 600;
}

.srq-terms dd {
	margin: 0;
}

.srq-empty {
	padding: var(--srt-space-xl, 2rem) var(--srt-space-md, 1rem);
}

.srq-search {
	display: flex;
	gap: var(--srt-space-xs, 0.5rem);
	margin: var(--srt-space-md, 1rem) 0;
}

.srq-search input[type="search"] {
	flex: 1 1 auto;
	/*
	 * ⚠️ A flex item's default min-width is auto, which means "never narrower than my content". An
	 * input's intrinsic width is its size attribute — around 170px — so without this the search box
	 * refuses to shrink and pushes the button off a 390px screen (NF-07 235).
	 */
	min-width: 0;
}

/* ------------------------------------------------------------- Search filters (F-21 133). */

.srq-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--srt-space-sm, 0.75rem);
	padding: var(--srt-space-sm, 0.75rem);
	margin: 0 0 var(--srt-space-md, 1rem);
}

/*
 * Each control is its own flex item that may shrink but wraps rather than overflowing. `basis: 12rem`
 * gives two per row on a phone and all four on a desktop, with no media query needed for either.
 */
.srq-filters__field {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
}

.srq-filters__field select {
	width: 100%;
	min-width: 0;
}

.srq-filters__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--srt-space-xs, 0.5rem);
	margin: 0;
}

.srq-result-count {
	margin: 0 0 var(--srt-space-sm, 0.75rem);
	font-size: 0.9rem;
}

.srq-langs ul {
	display: flex;
	gap: var(--srt-space-3xs, 0.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.srq-langs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--srt-space-xs, 0.5rem);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.srq-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--srt-space-3xs, 0.25rem);
	margin-top: var(--srt-space-lg, 1.5rem);
}

.srq-pagination a,
.srq-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--srt-space-xs, 0.5rem);
}

.srq-report {
	margin-top: var(--srt-space-sm, 0.75rem);
	font-size: 0.9rem;
}

.srq-report summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.srq-pending-notice {
	padding: var(--srt-space-xs, 0.5rem) var(--srt-space-sm, 0.75rem);
	margin: 0 0 var(--srt-space-md, 1rem);
	font-size: 0.9rem;
}

.srq-question-meta {
	margin-bottom: var(--srt-space-md, 1rem);
}

/* ------------------------------------------------------ Account area (F-19…F-26). */

.srq-account {
	margin-top: var(--srt-space-md, 1rem);
}

/* The tab strip already scrolls; six panels do not fit on a 390px screen and must not stretch it. */
.srq-account .srq-tabs {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.srq-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	padding: 0 0.35em;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}

.srq-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px, like every other target (NF-06). */
	min-width: 44px;
	min-height: 44px;
	text-decoration: none;
}

.srq-bell .srq-count {
	position: absolute;
	top: 2px;
	right: 0;
}

.srq-notifications,
.srq-messages {
	margin: 0 0 var(--srt-space-md, 1rem);
	padding: 0;
	list-style: none;
}

.srq-notification {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--srt-space-xs, 0.5rem);
	padding: var(--srt-space-sm, 0.75rem);
}

.srq-message {
	max-width: 42rem;
	padding: var(--srt-space-sm, 0.75rem);
	margin-bottom: var(--srt-space-sm, 0.75rem);
}

/* Sent messages sit to the right; `margin-left: auto` and not a flex container, so a long
	message still wraps inside the column rather than widening it (NF-07 235). */
.srq-message--mine {
	margin-left: auto;
}

.srq-message__body > :last-child {
	margin-bottom: 0;
}

.srq-message__file {
	margin: var(--srt-space-xs, 0.5rem) 0 0;
	font-size: 0.9rem;
}

.srq-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--srt-space-xs, 0.5rem);
	font-weight: 400;
	/* The label is the hit target, so it carries the 44px rather than the 13px box inside it. */
	min-height: 44px;
	padding: var(--srt-space-3xs, 0.25rem) 0;
}

.srq-checkbox input[type="checkbox"] {
	width: auto;
	min-height: 0;
	margin-top: 0.35em;
	flex: 0 0 auto;
}

.srq-profile__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--srt-space-md, 1rem);
	margin-bottom: var(--srt-space-md, 1rem);
}

.srq-profile__photo {
	width: 96px;
	height: 96px;
	object-fit: cover;
	flex: 0 0 auto;
}

.srq-profile__name {
	margin-bottom: var(--srt-space-3xs, 0.25rem);
}

.srq-profile__bio {
	max-width: 60ch;
	white-space: pre-line;
}

.srq-question-meta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--srt-space-xs, 0.5rem);
	margin-top: var(--srt-space-sm, 0.75rem);
}

/*
 * The category header image (F-32 176). Structural only: the aspect ratio is here so a tall or
 * narrow upload cannot change the shape of the page, and NOTHING here names a colour.
 */
.srq-term-header {
	margin-bottom: var(--srt-space-sm, 0.75rem);
}

.srq-term-header__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: cover;
}

/* The contact form (F-27) reuses the ask form's field rhythm; it only needs a width of its own. */
.srq-form--contact {
	max-width: 44rem;
}