/**
 * Shared reviews + questions component (`tr-discussions`).
 *
 * ONE stylesheet for every post type in `tiorai_discussions_post_types()`.
 * Nothing here is scoped to a body class, a post type or a module, which is what
 * makes the Tool page and the Prompt page render the same object rather than two
 * that drift.
 *
 * WHAT CHANGED FROM modules/tool/assets/css/tool-discussions.css
 * ---------------------------------------------------------------------------
 * The problem was nesting, not styling. The old section was a bordered card
 * containing a bordered tab strip, containing a bordered composer, containing a
 * bordered field grid, beside a bordered summary — five stacked boxes before any
 * content. Every rule below spends its budget on ONE decision:
 *
 *   the section       no outer border at all; the tab strip is the only rule
 *   the composers     `<details>`, closed by default once content exists
 *   the summary       renders only when reviews exist (see review-list.php)
 *   the cards         a hairline separator, not a box per item
 *
 * Colour is never the only carrier of state: the tabs add a weight change and an
 * underline, the stars swap GLYPH (★/☆), and the recommend pill carries its own
 * words.
 *
 * Every value is a theme token, so dark mode is inherited rather than
 * re-specified — the only `[data-theme="dark"]` rules below are the two where a
 * token pair genuinely cannot express the difference.
 */

/* =========================================================================
   1. Shell + tabs
   ====================================================================== */

.tr-discussions {
	--tiorai-discussions-gap: var(--space-6);

	display: flex;
	flex-direction: column;
	gap: var(--tiorai-discussions-gap);
}

.tr-discussions__tabs {
	display: flex;
	gap: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.tr-discussions__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) 0;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--color-text-tertiary);
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	cursor: pointer;
	transition: var(--transition-fast);
}

.tr-discussions__tab:hover {
	color: var(--color-text-primary);
}

/* State is weight + underline, not colour alone. */
.tr-discussions__tab.is-active {
	border-bottom-color: var(--color-primary);
	color: var(--color-text-primary);
	font-weight: var(--font-weight-semibold);
}

/*
 * Sized in rem, not em, and given an explicit HEIGHT. With only `min-width` the
 * box took its height from the 0.75rem text's line box, so a one-digit count
 * rendered as a wide oval rather than a circle. A square min-width/height pair
 * plus a padding small enough that one digit never exceeds it means 1–9 is a
 * true circle and 10+ grows into a pill.
 */
.tr-discussions__tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 var(--space-1);
	border-radius: var(--radius-full);
	background: var(--color-bg-tertiary);
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.tr-discussions__tab.is-active .tr-discussions__tab-count {
	background: rgba(var(--color-primary-rgb), 0.14);
	color: var(--color-primary);
}

.tr-discussions__panel {
	display: flex;
	flex-direction: column;
	gap: var(--tiorai-discussions-gap);
}

.tr-discussions__panel[hidden] {
	display: none;
}

/* The panel takes focus when a tab is activated; it must never look focused
   without showing it. */
.tr-discussions__panel:focus-visible,
.tr-discussions__tab:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* =========================================================================
   2. Notices — the compact states that replaced full-width panels
   ====================================================================== */

.tr-discussions__note {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-bg-secondary);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

/*
 * The signed-out state. Previously a bordered panel with a heading, a paragraph
 * and a button — the largest object in the tab, on every page, advertising the
 * login screen. One row now.
 */
.tr-discussions__signin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-bg-secondary);
}

.tr-discussions__signin-copy {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

/* =========================================================================
   3. Composers
   ====================================================================== */

.tr-discussions__composer {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
}

.tr-discussions__composer-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	cursor: pointer;
	list-style: none;
}

/* Suppress the default marker in both engines, then draw our own. */
.tr-discussions__composer-summary::-webkit-details-marker {
	display: none;
}

.tr-discussions__composer-summary::marker {
	content: '';
}

.tr-discussions__composer-summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
	border-radius: var(--radius-lg);
}

.tr-discussions__composer-title {
	position: relative;
	padding-right: var(--space-6);
	color: var(--color-text-primary);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
}

/* The disclosure affordance: a chevron that rotates. Drawn with borders so it
   costs no request and inherits currentColor. */
.tr-discussions__composer-title::after {
	content: '';
	position: absolute;
	top: 0.4em;
	right: 0;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.tr-discussions__composer[open] .tr-discussions__composer-title::after {
	transform: rotate(-135deg);
}

.tr-discussions__composer-hint {
	color: var(--color-text-tertiary);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.tr-discussions__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: 0 var(--space-4) var(--space-4);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.tr-discussions__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.tr-discussions__field {
	min-width: 0;
}

.tr-discussions__choice-row {
	display: flex;
	gap: var(--space-4);
}

.tr-discussions__choice {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	cursor: pointer;
}

.tr-discussions__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

.tr-discussions__form-note {
	margin: 0;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}

.tr-discussions__feedback:empty {
	display: none;
}

.tr-discussions__feedback {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
}

.tr-discussions__feedback.is-error {
	background: var(--color-danger-light);
	color: var(--color-danger);
}

.tr-discussions__feedback.is-success {
	background: var(--color-success-light);
	color: var(--color-success);
}

/* =========================================================================
   4. Star picker
   ====================================================================== */

.tr-discussions__stars {
	display: inline-flex;
	gap: var(--space-1);
}

.tr-discussions__star {
	padding: var(--space-1);
	border: 0;
	background: none;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-2xl);
	line-height: 1;
	cursor: pointer;
}

.tr-discussions__star:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/*
 * State carried by SHAPE. Both glyphs are in the markup and CSS shows one, so
 * the control still reads with CSS off, and the selected/unselected difference
 * survives for a viewer who cannot separate the two colours.
 */
.tr-discussions__star-glyph--on {
	display: none;
}

/*
 * Rating accent is the BRAND, not `--color-warning`. The amber read as a
 * warning state on a page whose only other amber is an alert, and it was the
 * one hue on the tool page that belonged to no palette. `--color-primary` is
 * theme-paired (olive in light, lime in dark), so both themes stay legible.
 */
.tr-discussions__star.is-active {
	color: var(--color-primary);
}

.tr-discussions__star.is-active .tr-discussions__star-glyph--on {
	display: inline;
}

.tr-discussions__star.is-active .tr-discussions__star-glyph--off {
	display: none;
}

/* =========================================================================
   5. Rating summary
   ====================================================================== */

.tr-rating-summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-6) var(--space-8);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-bg-secondary);
}

.tr-rating-summary__score {
	text-align: center;
}

/*
 * `--font-size-3xl`, not the 3rem the old summary used. The average is a
 * supporting figure beside the distribution, not the headline of the page — and
 * the reason the zero state omits this block entirely is that a large "0.0"
 * beside five stars reads as a score rather than as an absence of one.
 */
.tr-rating-summary__value {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.tr-rating-summary__out-of {
	display: block;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-normal);
}

.tr-rating-summary__stars {
	margin: var(--space-2) 0 0;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-sm);
	letter-spacing: 0.08em;
}

.tr-rating-summary__star.is-filled {
	color: var(--color-primary);
}

.tr-rating-summary__count {
	margin: var(--space-1) 0 0;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.tr-rating-summary__bars {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-rating-summary__row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-secondary);
	font-size: var(--font-size-xs);
}

.tr-rating-summary__row-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/*
 * The empty portion of each bar. `--color-bg-tertiary` is a *page* neutral, and
 * on the summary's own tinted surface it sat within a few percent of the
 * background — the four zero-count rows read as blank space rather than as
 * empty bars. A currentColor-independent wash keyed off the text colour keeps
 * the track visible on whichever surface the summary lands on; see the dark
 * block at the end of the file for the value it needs on navy.
 */
.tr-rating-summary__track {
	height: 0.5rem;
	border-radius: var(--radius-full);
	background: rgba(15, 23, 42, 0.10);
	overflow: hidden;
}

.tr-rating-summary__fill {
	display: block;
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--color-primary);
}

/* =========================================================================
   6. Toolbar + empty state
   ====================================================================== */

/*
 * The panel's own `gap` put the sort control equidistant between the summary
 * above and the first review below, so it read as belonging to neither. The
 * extra top margin breaks the tie: it now sits closer to the list it sorts.
 */
.tr-discussions__toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.tr-discussions__toolbar-label {
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}

.tr-discussions__select {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	background: var(--surface-card);
	color: var(--color-text-primary);
	font-family: inherit;
	font-size: var(--font-size-sm);
}

/*
 * The zero state. Two lines, centred, no illustration, no border — about a
 * quarter of the height of the block it replaces, and it makes no claim about a
 * rating that does not exist.
 */
.tr-discussions__empty {
	padding: var(--space-8) var(--space-4);
	text-align: center;
}

.tr-discussions__empty-title {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
}

.tr-discussions__empty-copy {
	margin: var(--space-2) 0 0;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-sm);
}

.tr-discussions__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A hairline between items, not a box around each. */
.tr-discussions__list > li + li {
	border-top: 1px solid var(--color-border);
}

.tr-discussions__more {
	display: flex;
	justify-content: center;
}

/* =========================================================================
   7. Review card
   ====================================================================== */

.tr-review {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5) 0;
}

.tr-review__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
}

.tr-review__author {
	margin: 0;
	color: var(--color-text-primary);
	font-weight: var(--font-weight-semibold);
}

.tr-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-1) 0 0;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}

/* The recommendation carries its own words, so it is legible without the tint. */
.tr-review__recommend {
	padding: 0.1em var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-success-light);
	color: var(--color-success);
	font-weight: var(--font-weight-medium);
}

.tr-review__recommend--no {
	background: var(--color-bg-tertiary);
	color: var(--color-text-secondary);
}

.tr-review__rating {
	margin: 0;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-sm);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.tr-review__star.is-filled {
	color: var(--color-primary);
}

.tr-review__title {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
}

.tr-review__body {
	color: var(--color-text-secondary);
	line-height: 1.65;
}

.tr-review__body > p {
	margin: 0 0 var(--space-3);
}

.tr-review__body > p:last-child {
	margin-bottom: 0;
}

.tr-review__facets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-bg-secondary);
}

.tr-review__facet dt {
	margin: 0 0 var(--space-1);
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tr-review__facet dd {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.tr-review__facet--pro dt {
	color: var(--color-success);
}

.tr-review__facet--con dt {
	color: var(--color-danger);
}

.tr-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.tr-review__helpful-label {
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}

.tr-review__votes {
	display: inline-flex;
	gap: var(--space-2);
}

.tr-review__vote {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--surface-card);
	color: var(--color-text-secondary);
	font-family: inherit;
	font-size: var(--font-size-xs);
	cursor: pointer;
	transition: var(--transition-fast);
}

.tr-review__vote:hover:not(:disabled) {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.tr-review__vote:disabled {
	opacity: 0.6;
	cursor: default;
}

.tr-review__vote:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* =========================================================================
   8. Question card
   ====================================================================== */

.tr-question {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5) 0;
}

.tr-question__title {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.35;
}

.tr-question__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}

.tr-question__author {
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
}

.tr-question__answer-count.is-answered {
	color: var(--color-success);
	font-weight: var(--font-weight-semibold);
}

.tr-question__body {
	color: var(--color-text-secondary);
	line-height: 1.65;
}

.tr-question__body > p {
	margin: 0 0 var(--space-3);
}

.tr-question__body > p:last-child {
	margin-bottom: 0;
}

.tr-question__answers {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--color-border);
	padding-left: var(--space-4);
}

.tr-question__answer.is-official {
	border-left: 2px solid var(--color-primary);
	margin-left: calc(var(--space-4) * -1 - 2px);
	padding-left: var(--space-4);
}

.tr-question__answer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-1);
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}

.tr-question__answer-head strong {
	color: var(--color-text-primary);
}

.tr-question__badge {
	padding: 0.1em var(--space-2);
	border-radius: var(--radius-full);
	background: rgba(var(--color-primary-rgb), 0.14);
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.tr-question__answer-body {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

.tr-question__answer-body > p {
	margin: 0 0 var(--space-2);
}

.tr-question__answer-body > p:last-child {
	margin-bottom: 0;
}

.tr-question__reply-summary {
	display: inline-block;
	color: var(--color-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	list-style: none;
}

.tr-question__reply-summary::-webkit-details-marker {
	display: none;
}

.tr-question__reply-summary::marker {
	content: '';
}

.tr-question__reply-summary:hover,
.tr-question__reply-summary:focus-visible {
	text-decoration: underline;
}

.tr-question__reply-summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.tr-question__reply-form {
	padding: var(--space-4) 0 0;
	border-top: 0;
}

/* =========================================================================
   9. Responsive
   ====================================================================== */

@media (max-width: 768px) {
	.tr-discussions__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tr-rating-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	.tr-rating-summary__row {
		grid-template-columns: 4rem minmax(0, 1fr) 2rem;
	}

	.tr-discussions__tabs {
		gap: var(--space-4);
	}

	.tr-review__head {
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	.tr-discussions__signin {
		flex-direction: column;
		align-items: stretch;
	}

	.tr-discussions__toolbar {
		justify-content: flex-start;
	}
}

/* =========================================================================
   10. Motion + theme
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tr-discussions__tab,
	.tr-discussions__composer-title::after,
	.tr-review__vote {
		transition: none;
	}
}

/*
 * The two places a token pair cannot carry the difference. Both light values
 * are near-white washes that vanish on a navy surface, so the dark theme needs
 * its own alpha rather than a different hue.
 */
[data-theme="dark"] .tr-discussions__note,
[data-theme="dark"] .tr-discussions__signin,
[data-theme="dark"] .tr-rating-summary,
[data-theme="dark"] .tr-review__facets {
	background: rgba(255, 255, 255, 0.04);
}

/*
 * The bar track. Its light value is a dark wash; on navy that is invisible, and
 * the theme's own `--color-bg-tertiary` (#151D29) is only ~2% off the summary
 * surface, which is what made the zero rows look like missing bars rather than
 * empty ones. A white wash one step above the card's own 0.04 reads as a track.
 */
[data-theme="dark"] .tr-rating-summary__track {
	background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .tr-discussions__feedback.is-error {
	background: rgba(220, 38, 38, 0.16);
	color: var(--color-danger);
}

[data-theme="dark"] .tr-discussions__feedback.is-success {
	background: rgba(22, 163, 74, 0.16);
	color: var(--color-success);
}