/**
 * AI Prompts archive — page chrome that only `/prompts/` renders.
 *
 * Deliberately short, and that is the measure of the task. Everything that makes
 * this page look like an archive — the masthead band and its ambient wash, the
 * search sizing, the results toolbar, the filter drawer's repairs, the empty
 * state, the pager, the infinite-scroll switch and every narrow-viewport rule
 * for those — is assets/css/archive-shell.css, the same file `/tools/` loads.
 * The result card is assets/css/prompt-card.css.
 *
 * What is left is the two editorial bands this archive has and the tools archive
 * words differently: the category index and the FAQ. They carry `tr-prompts__*`,
 * which is the accurate block name for chrome one surface owns.
 *
 * Loads after archive-shell.css and prompt-card.css (both declared as
 * dependencies), so equal-specificity overrides win without !important or
 * selector inflation. The `--tiorai-archive-*` tokens it reads are declared by
 * archive-shell.css on the `.tr-archive` wrapper these blocks sit inside.
 */

/* ==========================================================================
   Category navigation — placement only
   The boxed-link grid itself is the shared `tr-catnav` component
   (assets/css/category-nav.css). What stays here is this archive's own section
   rhythm, which is page chrome.
   ========================================================================== */

/* ==========================================================================
   The three discovery sections — shared rhythm and separation

   THE PROBLEM THIS SOLVES, MEASURED
   Explore prompts, Browse by category and Browse by model each drew their own
   heading at an identical 14px / weight 600 / #CBD5E1, and the gap between the
   first two was EIGHT pixels (category to model: 24px). Three identical small
   labels eight pixels apart do not read as three sections — they read as one
   list with captions in it.

   The fix has three parts, and only the third is in this file:
     1. ONE stronger title treatment for all three, so a section opens visibly
        (template-parts/shared/section-head + assets/css/section-head.css).
     2. Three DIFFERENT content shapes, so they are told apart by what they
        contain rather than by their labels — feature cards, a wide pill grid, a
        scrolling row.
     3. Real vertical rhythm, below.

   SPACE ONLY, NO RULES. An earlier revision drew a hairline between the
   sections. With the stronger titles and the three distinct content shapes now
   carrying the separation, the lines were redundant — and a stack of full-width
   rules inside the masthead band reads as a table, which is heavier than the
   calm the hero is going for. The spacing they were paired with is kept in full:
   it is the separation, and it is doing the work on its own.
   ========================================================================== */

.tr-prompts__section {
	padding-block: clamp(2.25rem, 4vw, 3.25rem) 0;
}

/* The gap between two sections is the sum of both paddings, which is why the
   rule below adds the second half rather than the whole thing. Kept as its own
   declaration so the first section — which has the masthead above it, not
   another section — does not get it. */
.tr-prompts__section + .tr-prompts__section > .tr-archive__container {
	padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

/* No closing padding on the LAST section. The masthead band it sits in already
   ends with `padding-block-end: clamp(2rem, 4vw, 3.5rem)` from the shared shell
   (assets/css/archive-shell.css), and adding to it measured 104px of empty space
   between the last discovery row and the results toolbar. The band's own 56px is
   the discovery-to-results transition and is enough on its own.

   Both are listed because which one is last depends on the data: the audience
   section renders only when `target_audience` has terms, and the model section
   only when `ai_model` does. Naming just the current last section would
   reintroduce the 104px gap on an install where that section is empty. The rule
   is harmless on a section that is NOT last, because the section-to-section gap
   is contributed by the following section's `padding-top` (see the `+` rule
   above), not by this one's `padding-bottom`. */
.tr-prompts__modelnav,
.tr-prompts__audiencenav {
	padding-bottom: 0;
}

/* ==========================================================================
   Explore prompts — curated view entry cards
   The cards are the shared `tr-discovery` component
   (assets/css/discovery-nav.css). The section head above them is now the shared
   part, so the component's own padding is zeroed here: two components each
   contributing section padding is exactly what produced the original rhythm
   problem.
   ========================================================================== */

.tr-prompts__explore .tr-discovery {
	--tiorai-discovery-pad-block: 0;
}

/* ==========================================================================
   Browse by category
   The grid is the shared `tr-catnav`. It renders as a <div> here (see the
   template), so it never matches the bare `section { padding: 70px 0 }` element
   rule in theme-unified.css and its own padding tokens are all that apply.
   ========================================================================== */

.tr-prompts__catnav .tr-catnav {
	--tiorai-catnav-pad-start: 0;
	--tiorai-catnav-pad-end: 0;
}

/* ==========================================================================
   Browse by model
   Deliberately NOT the `tr-catnav` used above it: a scrolling row of avatar
   cards is a different shape from a wrapping grid of text boxes, which is what
   stops the two sections reading as one continuous list.
   ========================================================================== */

/* ==========================================================================
   Browse by audience
   The shared `tr-entitynav` in its CAROUSEL layout — the same control as the
   model row above it, arrows, edge fades and all — with one designed glyph per
   role (inc/persona-icons.php).

   Two earlier shapes, both rebuilt, both for reasons worth keeping:

   1. `tr-catnav`. Forty boxed text links were forty grey rectangles with
      nothing to tell them apart, which is a table of contents rather than a way
      in. A category is a subject and survives as text; a role is a person, and
      a person is recognised by a picture before the job title is read.
   2. A wrapping GRID of those glyph cards. It was the tallest block between the
      hero and the results — five rows at eight across, six on a phone — and
      capping it at two rows only traded the height for a control the visitor
      had to find and press. One scrolling row is shorter than either and needs
      no control.

   What is left here is only what differs from the model row: the track is wider
   and the names wrap, because a role is a phrase and a model is a name.
   ========================================================================== */

/* A wider track than the model row's 124px, and the names wrap instead of
   truncating. Both are the same fact: a role is a phrase ("Small Business
   Owners") where a model is a name ("Claude"). 148px over two lines sets every
   one of the forty in full; at the model width three of them ellipsised. */
.tr-prompts__audiencenav .tr-entitynav {
	--tiorai-entitynav-track: 148px;
}

/* ==========================================================================
   Narrow viewports — the four discovery sections

   One correction that belongs to this page rather than to the component it
   overrides, and one bleed that only the page can supply.
   ========================================================================== */

/*
 * THE SECTION HEADS STAY CENTRED at every width.
 *
 * `tr-sectionhead` flips `--center` to left-aligned below 640px, on the
 * reasoning that centred text is harder to scan the narrower it gets. That
 * holds for a paragraph; it does not hold for these four, which are a two-word
 * title over a one-line deck sitting above content that is itself centred — the
 * glyph cards and the avatar row are symmetrical, and a left-flushed title over
 * a centred row reads as a mistake rather than as a scanning aid.
 *
 * Scoped to this page's sections, so the component's default is untouched
 * everywhere else including the single prompt page.
 */
@media (max-width: 640px) {
	.tr-prompts__section .tr-sectionhead--center {
		margin-inline: auto;
		text-align: center;
	}

	.tr-prompts__section .tr-sectionhead--center .tr-sectionhead__deck {
		margin-inline: auto;
	}
}

/*
 * FULL-BLEED SCROLL ROW — Explore prompts, on a phone.
 *
 * The row runs to the screen edge rather than stopping at the container gutter:
 * a row that ends inside the page margin reads as a clipped block, while one
 * that runs off the edge reads as a row that continues. The padding puts the
 * first card back on the text margin, so nothing starts flush against the glass.
 *
 * This lives here and not in the component because the gutter is the archive
 * shell's token — `tr-discovery` is self-contained by contract and cannot reach
 * for it. The model and audience rows need none of this: the shared carousel
 * shell draws its own edge fades.
 */
@media (max-width: 640px) {
	.tr-prompts__explore .tr-discovery__grid {
		margin-inline: calc(var(--tiorai-archive-gutter) * -1);
		padding-inline: var(--tiorai-archive-gutter);
		scroll-padding-inline-start: var(--tiorai-archive-gutter);
	}
}

/* ==========================================================================
   Supporting content
   ========================================================================== */

/* The band sits on the card surface, not on a grey step: the results above it
   are white cards on a white page, so a grey slab under them reads as a
   different page rather than as the tail of this one. `border-top` is the only
   thing marking the boundary, which is enough — it is a section break, not a
   change of context. Same treatment as the tools archive's About band, because
   they are the same kind of band. */
.tr-prompts__about {
	padding-block: clamp(2rem, 5vw, 3.5rem);
	background: var(--surface-card, var(--color-bg-primary));
	border-top: 1px solid var(--border-default);
}

/*
 * Two columns of equal width, and the pairing is what the section is.
 *
 * The FAQ shipped alone in a 68ch column with half the viewport empty beside it.
 * The description this page needs for search could have gone above or below it —
 * both make the band twice as tall, and the second heading then reads as the
 * start of a new section rather than as the other half of this one. Side by side
 * they are one thing, and the band is as tall as its taller column instead of
 * the sum of both.
 *
 * `align-items: start` so the shorter column does not stretch, and `minmax(0,…)`
 * so a long unbroken word in either cannot push its track wider than its share.
 * Same construction as the `/resources/` about band.
 */
.tr-prompts__about-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.tr-prompts__about-col {
	min-width: 0;
}

/* One treatment for both column headings. The prose side is the `h2` the
   section is named after and the FAQ side is an `h3`, because in the outline the
   questions are part of this section — but they are peers on screen, and a
   visibly smaller heading on one column would claim a hierarchy the layout does
   not have. */
.tr-prompts__about-heading,
.tr-prompts__faq-heading {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.02em;
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
}

/* ── The editorial description ───────────────────────────────────────────── */

/*
 * A measure cap inside the column rather than on the column, so the grid keeps
 * both tracks equal while the prose stays readable. At the archive's 1280px
 * container each track is ~600px, which is already inside the 65–75 characters
 * the design system asks for, so this is a ceiling for wider viewports rather
 * than a correction to the current layout.
 */
.tr-prompts__prose {
	max-width: 64ch;

	/* Read by the shared `tr-prosemore` disclosure below: the surface its
	   closed-state fade resolves against, and the archive's easing. The
	   component cannot know either — it is not scoped to this archive. */
	--tiorai-prosemore-fade: var(--surface-card, var(--color-bg-primary));
	--tiorai-prosemore-ease: var(--tiorai-archive-ease, ease);
}

.tr-prompts__prose p {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-secondary);
}

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

/* Sized as a sub-heading, not as a third section title: it is a signpost inside
   one column of prose. The top margin is larger than the paragraph gap below it
   so each heading belongs to the text it introduces rather than floating between
   two paragraphs. */
.tr-prompts__prose-heading {
	margin: var(--space-6) 0 var(--space-2);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
}

.tr-prompts__prose > :first-child {
	margin-top: 0;
}

/*
 * The tail of the description sits behind the shared `tr-prosemore`
 * disclosure (assets/css/prose-more.css, template-parts/shared/prose-more.php).
 *
 * It was designed HERE, as `.tr-prompts__prose-more`, and the measurement that
 * produced it is worth keeping: 432 words set this column at 1,338px against the
 * questions' 393px, so the "two columns" were one long article with a short list
 * beside it. Two blocks open and three behind the control brings the two within a
 * screen of each other, which is what makes the section read as a pair.
 *
 * The rules moved out verbatim when the `tool_category` About column became the
 * second consumer — CLAUDE.md 9.4a, a pattern with a second real consumer is
 * consolidated rather than copied. Nothing about the control may be restyled
 * from this file; what stays is the surface colour the component cannot know,
 * declared on the prose wrapper so the closed-state fade resolves against the
 * band actually behind it.
 */
/* ── The questions ───────────────────────────────────────────────────────── */

/* The 68ch measure the answers used to need is now the column's job — capping
   inside the track would leave a ragged gutter between the two columns on wide
   viewports. */
.tr-prompts__faq-list {
	border-top: 1px solid var(--border-default);
}

.tr-prompts__faq-item {
	border-bottom: 1px solid var(--border-default);
}

/* Native <details>, so it is keyboard-operable, findable by the browser's own
   in-page search, and open with scripts disabled. The parent's accordion needed
   ui-faq JS to open anything at all. */
.tr-prompts__faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	cursor: pointer;
	list-style: none;
}

.tr-prompts__faq-q::-webkit-details-marker {
	display: none;
}

.tr-prompts__faq-q:hover {
	color: var(--tiorai-archive-link);
}

.tr-prompts__faq-icon {
	flex: 0 0 auto;
	color: var(--color-text-tertiary);
	transition: transform 0.2s var(--tiorai-archive-ease);
}

.tr-prompts__faq-item[open] .tr-prompts__faq-icon {
	transform: rotate(180deg);
}

.tr-prompts__faq-a p {
	margin: 0;
	padding-bottom: var(--space-4);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-secondary);
}

/*
 * One column below 1024px, prose first — the source order already says so. Two
 * ~340px tracks would give the prose a 40-character measure and break the FAQ
 * questions across three lines each, which is narrower than either column is
 * readable at.
 */
@media (max-width: 1024px) {
	.tr-prompts__about-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 3rem);
	}

	.tr-prompts__prose {
		max-width: 68ch;
	}
}