/*
 * Phase 7 — the forum's public pages.
 *
 * Transcribed from wireframes/forum-categories.html, forum-category-detail.html,
 * forum-questions.html and forum-question-detail.html, with each literal hex replaced by the token
 * already carrying that value (docs/design-system.md). The measurements are kept as drawn — the
 * 264px filter column, the 48px question icon, the 148px row, the 280px detail sidebar, the
 * 1.2fr/.8fr/.8fr category grid with its double-height first card — because those are design
 * decisions rather than artefacts of the sketch.
 *
 * Every directional property is logical, because this site has no LTR variant.
 */

/* ---------------------------------------------------------------- shared */

.forum-page { padding-bottom: var(--space-band); }

/* The categories page's own rules are gone: /forum/ is built on the kit's `.forum-cats` /
   `.forum-cat` (the v3 block at the end of this file) plus `.iz-toolbar`, `.iz-h2` and
   `kit/empty.php`, so `.forum-tools`, `.forum-search`, `.forum-section-head`, `.forum-guidance`
   and the whole `.forum-category-card` family had nothing left rendering them. */

/* ---------------------------------------------------------------- question lists */

/* Scrollbar hidden, not shown: `.iz-crumbs`/`.iz-chips-scroll` in kit.css set the site's convention
   for a horizontal chip row — a visible track here was the one place that broke it. */
.forum-chips { display: flex; gap: var(--gap-inline); overflow-x: auto; padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--color-border); scrollbar-width: none; }
.forum-chips::-webkit-scrollbar { display: none; }
.forum-chip { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: var(--text-micro); text-decoration: none; }
.forum-chip.is-active { border-color: var(--primary-700); background: var(--primary-700); color: #fff; }
/* Every other interactive element in this file replaces its outline with the site's own ring; this
   one relied on the browser default, which is still visible but off-brand next to the rest. */
.forum-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }

.forum-category-rules { max-width: 58ch; margin-top: var(--space-2); color: var(--color-text); font: var(--text-body-s); }

/* =====================================================================
 * Page-level layout — rebuilt 2026-09-26 on the model the course and article pages already opened
 * with: a full-width head band (crumbs, a flat page head, the toolbar), then the results below on
 * the canvas. Unlike the catalogue's own band (learning.css, white), this one carries a genuine
 * tint — the forum's list pages open with almost nothing else, so the one full-width band gets the
 * one colour the page wants (decisions.md, 2026-09-26).
 * ===================================================================== */
.forum-band { padding-bottom: var(--space-block); background: var(--surface-blue); }
.forum-band .iz-pagestack { gap: var(--space-head); padding-block-start: var(--space-2); }
.forum-band .iz-crumbs { margin-bottom: 0; }
/* The kit page head without its own card: the band is the ground now, and a tinted box inside a
   tinted band is the nested colour the owner's direction asks to lose. The art column stays —
   unlike the catalogue head, this one still carries head-forum. */
.forum-head.iz-pagehead { padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; }
.forum-head.iz-pagehead::after { display: none; }
.forum-head .iz-pagehead__eyebrow { font: var(--text-eyebrow); }
.forum-head .iz-pagehead__eyebrow svg { width: 15px; height: 15px; }
.forum-head h1 { margin-top: var(--gap-title); font: var(--text-h1); }
.forum-head .iz-pagehead__summary { max-width: 62ch; margin-top: var(--gap-title); }

/* The band's stack already puts --space-head above the toolbar; one step more sets the search apart
   from the sentence it follows without a second, competing rhythm. */
.forum-tools { margin-top: var(--space-1); }
.forum-tools .iz-search { flex: 1 1 200px; }
.forum-tools__clear { gap: var(--space-0); padding-inline: var(--space-0); color: var(--iz-ink-soft); transition: color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.forum-tools__clear:active { transform: scale(var(--iz-press)); }
@media (hover: hover) and (pointer: fine) { .forum-tools__clear:hover { color: var(--iz-ink); } }
/* The «فیلترها» button opens the same column the wide layout already shows in place, so it has
   nothing to do there. */
.iz-toolbar__filter { display: none; }
@media (max-width: 780px) {
	/* Owner, 2026-09-29: "full width filter button". It takes a row of its own under the search,
	   so the two controls stop sharing a line with the «پاک‌کردن» link at whatever width is left. */
	.iz-toolbar__filter { display: inline-flex; }
	.forum-tools .iz-toolbar__filter { flex: 1 1 100%; }
}

.forum-catalog { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-5); align-items: start; padding-top: var(--space-block); }
.forum-results { min-width: 0; }
.forum-results__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-head); }
.forum-sort { flex: 0 0 auto; }
.forum-results__tools { display: flex; align-items: center; gap: var(--gap-inline); }

/* The filter column, one copy of the markup: a sticky column from 781px, a native popover bottom
   sheet below it (learning.css's `.catalog-sheet` draws the same shape for the catalogues). Author
   styles below 781px never touch `display`, so the popover's own hidden-until-open behaviour is
   untouched there; the desktop rule overrides it to sit in the grid column like any other aside. */
.forum-side {
	position: fixed; inset: auto 0 0; width: min(100%, 420px); max-height: min(85dvh, 600px); margin: 0 auto; padding: 0;
	overflow: auto; overscroll-behavior: contain;
	border: 0; border-radius: var(--iz-r-lg) var(--iz-r-lg) 0 0; background: #fff; color: var(--iz-text);
	box-shadow: 0 -12px 40px rgb(20 46 55 / .16);
	transform: translateY(100%);
	transition: transform .22s var(--iz-ease-out), overlay .22s allow-discrete, display .22s allow-discrete;
}
.forum-side:popover-open { transform: none; transition-duration: .4s; transition-timing-function: var(--iz-ease-drawer); }
@starting-style { .forum-side:popover-open { transform: translateY(100%); } }
.forum-side::backdrop { background: rgb(20 46 55 / 0); transition: background-color .22s var(--iz-ease-out), overlay .22s allow-discrete, display .22s allow-discrete; }
.forum-side:popover-open::backdrop { background: rgb(20 46 55 / .36); transition-duration: .32s; }
@starting-style { .forum-side:popover-open::backdrop { background: rgb(20 46 55 / 0); } }
.forum-side__grip { display: block; width: 40px; height: 4px; margin: var(--space-1) auto 0; border-radius: 999px; background: var(--iz-line); }
.forum-side__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-0); }
.forum-side__head .iz-h2 { margin: 0; font: var(--text-h3); }
.forum-side__head .iz-h2:focus { outline: none; }
.forum-side__head .iz-iconbtn { border-color: transparent; }
.forum-side__group { padding: var(--space-3); border-top: 1px dashed var(--iz-line-soft); }
.forum-side__group:first-of-type { border-top: 0; }
.forum-side__group:last-of-type { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
.forum-side__group h3 { margin: 0 0 var(--space-1); color: var(--iz-ink-soft); font: var(--text-h4); }
.forum-side__group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.forum-side__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); border-radius: 10px; color: var(--iz-text); text-decoration: none; transition: background-color .16s var(--iz-ease), color .16s var(--iz-ease); }
.forum-side__opt[aria-current="page"] { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.forum-side__opt.is-empty { color: var(--iz-ink-soft); opacity: .55; }
.forum-side__n { color: var(--iz-ink-soft); font: var(--text-micro); font-variant-numeric: tabular-nums; }
.forum-side__opt[aria-current="page"] .forum-side__n { color: inherit; }
/* The same rose on the one filter that asks for counsellor-answered questions. */
.forum-side__opt i { margin-inline-end: var(--space-1); color: var(--secondary-500); font-size: var(--icon-s); /* exempt: icon size */ }
.forum-side__opt--expert[aria-current="page"] { background: var(--secondary-50); color: var(--secondary-700); }
.forum-side__opt:focus-visible { outline: none; box-shadow: var(--iz-focus); }
@media (hover: hover) and (pointer: fine) {
	.forum-side__opt:not([aria-current="page"], .is-empty):hover { background: var(--iz-sunk); color: var(--iz-ink); }
}
@media (min-width: 781px) {
	/* `display: block` beats the popover's own UA rule (`[popover] { display: none }`), which
	   otherwise wins regardless of `:popover-open` — this is what turns the one element back into a
	   plain sticky aside at this width instead of a second copy of the markup. */
	.forum-side { position: sticky; inset: unset; top: 96px; display: block; width: auto; max-height: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; transform: none; transition: none; }
	.forum-side::backdrop { display: none; }
	.forum-side__grip { display: none; }
	.forum-side__head { padding: 0 0 var(--space-2); }
	.forum-side__head button { display: none; }
	.forum-side__group { padding: var(--space-3) 0; }
	.forum-side__group:first-of-type { padding-top: 0; }
	.forum-side__group:last-of-type { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- question detail
 *
 * Rebuilt on the v3 kit — see «v3 — the community» and «v3 — the topic page» at the foot of this
 * file. The rules that used to live here (`.forum-detail__question`, `.forum-detail__tag`,
 * `.forum-detail__meta`, `.forum-detail__copy`, `.forum-responses__empty`, `.forum-signin`, the
 * 48px-avatar `.forum-reply` and the bordered aside) all named markup single-topic.php no longer
 * emits, so they were deleted rather than left behind.
 */

/* ---------------------------------------------------------------- responsive */

@media (max-width: 920px) {
	.forum-catalog { grid-template-columns: 216px minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 780px) {
	.forum-catalog { display: block; }
	.forum-chips { display: flex; }
}
@media (min-width: 781px) {
	.forum-chips { display: none; }
}

/* --------------------------------------------------- shared form controls
 * `.forum-error` is still rendered by two templates — the ask page and the reply form on a
 * question page — so it stays until both are on one error component. `.forum-field` is not: the
 * ask page moved to `.iz-field` in wave 4 and the reply form was converted in the same wave, and
 * no template renders it any more. It is left standing only because two agents were in this file
 * at once and deleting another agent's orphan mid-wave is how the card drift happened; it and the
 * `.ticket-form .forum-field:has(…)` rule below should go in one pass once the wave is merged.
 * The ask page's own furniture is at the foot of this file, on the kit. */

.forum-error { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-200); border-radius: var(--radius-input); background: var(--surface-accent); color: var(--accent-700); font: var(--text-caption); }

/* ---------------------------------------------------------------- the practitioner's reply
 *
 * Was a green *fill* on `.forum-reply--expert`, plus a `.forum-reply--nested.forum-reply--expert`
 * rule that out-specified anything a single class could say. v3 frames the counsellor's answer
 * instead — a eucalyptus hairline and a soft green shadow, never a fill — so both are gone; the
 * frame is in the v3 block at the foot of this file.
 */

/* ---------------------------------------------------------------- text nobody here wrote */

/*
 * The forum is the first surface on this site where a stranger supplies the words, and a pasted URL
 * has no spaces in it. Without this, one long token in a question body pushes the whole page
 * sideways — measured at 375px: a 1482px content box in a 301px column, and the document scrolling
 * to 1518px. Everything below renders text this site did not write, so everything below has to be
 * able to break it.
 */
.forum-topic__body,
.forum-reply__body,
.forum-q__excerpt,
.forum-category-rules,
.forum-q h3,
.forum-topic h1 {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* A pasted link is still a link: let it wrap rather than stretch its parent. */
.forum-topic__body a,
.forum-reply__body a { overflow-wrap: anywhere; }

/* The panel's «پرسش‌های من», the support tickets and the behaviour log used to be styled from
   here. This sheet loads only on the forum's own routes (functions.php), those pages moved to
   account.css / tickets.css / behavior.css, and nothing on a forum route renders an
   `.account-question*`, `.ticket-*` or `.behavior-*` class — so the rules were deleted 2026-09-29. */

/* The report dialog, replacing a window.prompt(), is rendered only by single-topic.php; its rules
   moved to the v3 topic-page block at the foot of this file with the rest of that page. */

/* ---------------------------------------------------------------------------------------------
   Type-and-space program, run 6 (2026-09-27): the ad hoc "paragraph lift" and "floor" patches this
   block used to carry are gone — every selector they touched now sets its own ladder token at its
   own declaration, so reading copy (--text-body-s), metadata (--text-caption) and badges/counts
   (--text-micro) stay consistent without a second, later-cascading override.
   --------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * v3 — the community. Ported from Claude outputs/design-system-v3/css/public-v3.css,
 * which is one file for every public surface; the theme serves them on different
 * routes, so it is split the way the site is actually loaded.
 * --------------------------------------------------------------------- */
.forum-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap-grid); }
.forum-cat { position: relative; display: grid; gap: var(--space-stack); padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: 20px; background: #fff; transition: transform .24s var(--iz-ease-out), box-shadow .24s var(--iz-ease), border-color .2s var(--iz-ease), scale .16s var(--iz-ease-out); }
/* `scale`, not `transform`: the hover rule below already owns `transform` for its lift, and the
   two must not fight over one property. */
.forum-cat:has(.iz-stretch:active) { scale: var(--iz-press-lg); }
.forum-cat h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
/* The reference inlined this on the anchor; the theme has no global link style to inherit, so
   without it the card title renders as a default blue underline. Same rule as .forum-q h3 a. */
.forum-cat h3 a { color: inherit; text-decoration: none; }
.forum-cat p { margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.forum-cat__foot { display: flex; flex-wrap: wrap; gap: var(--space-0) var(--space-3); color: var(--iz-ink-soft); font: var(--text-caption); }
.forum-cat__foot span { display: inline-flex; align-items: center; gap: var(--gap-inline); }
@media (hover: hover) and (pointer: fine) {
	.forum-cat:hover { transform: translateY(-2px); border-color: var(--primary-100); box-shadow: var(--iz-shadow-2); }
}
.forum-q { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--pad-row); border: 1px solid var(--iz-line-soft); border-radius: 18px; background: #fff; transition: border-color .2s var(--iz-ease), box-shadow .24s var(--iz-ease), scale .16s var(--iz-ease-out); }
.forum-q:has(.iz-stretch:active) { scale: var(--iz-press-lg); }
/* One colour per status, shared by the avatar disc and the pill (owner, 2026-09-29: "the status
 * should match its colour"). Measured before: the pills sat on the kit's -50 tints (#edf5f7 open,
 * #f3f7f4 answered) on a white card, with dark text in both, so open and answered read the same
 * grey; and every disc was primary-blue whatever the pill said, so a closed question had a blue disc
 * beside a grey pill. Here the pill steps up to the -100 tint and the disc wears the same pair.
 * Text on tint, all AA at caption size: primary-700 on primary-100 7.6:1, secondary-700 on
 * secondary-100 6.2:1, accent-700 on accent-100 6.2:1, neutral-medium on neutral-light 5.6:1. */
.forum-q { --q-bg: var(--primary-100); --q-fg: var(--primary-700); }
/* The third colour (owner, 2026-09-29), spent on one thing: a question the counsellor has answered.
 * It is the state a reader is scanning the list for, and rose is the one hue nothing else in a public
 * list wears — `attention` and `danger` are statuses a visitor is never shown. */
.forum-q--success { --q-bg: var(--secondary-100); --q-fg: var(--secondary-700); } /* counsellor's answer: green (owner, 2026-10-01; was rose) */
.forum-q--attention, .forum-q--danger { --q-bg: var(--accent-100); --q-fg: var(--accent-700); }
.forum-q--neutral { --q-bg: var(--neutral-light); --q-fg: var(--neutral-medium); }
.forum-q > .iz-status { --bg: var(--q-bg); --fg: var(--q-fg); }
/* The asker's uploaded picture, or a person glyph on the status tint — not the name's first letter,
 * which reads as a picture that failed to load (owner, 2026-09-29; the header's avatar made the same
 * change). The disc is decorative: the name is in the meta line. */
.forum-q__who { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--q-bg); color: var(--q-fg); font-size: var(--icon-l); /* exempt: icon size */ }
.forum-q__who img { width: 100%; height: 100%; object-fit: cover; }
.forum-q__cat { margin: 0; color: var(--secondary-700); font: var(--text-eyebrow); }
.forum-q h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); text-wrap: balance; }
.forum-q h3 a { color: inherit; text-decoration: none; }
.forum-q__excerpt { display: -webkit-box; margin: 0; overflow: hidden; color: var(--iz-text); font: var(--text-body-s); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.forum-q__body { display: grid; gap: var(--gap-title); min-width: 0; }
/* The meta line, quieter (owner, 2026-09-29: "infos with less opacity"). --iz-ink-soft is the
 * softest ink that still clears AA on white (4.68:1), so the text stops there and gives up its
 * medium weight instead; the glyphs, which are decoration beside a word that says the same thing,
 * are the part that actually fades. */
.forum-q__meta { display: flex; flex-wrap: wrap; gap: var(--space-0) var(--space-3); margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.forum-q__meta span { display: inline-flex; align-items: center; gap: var(--space-0); }
.forum-q__meta i { opacity: .55; }
.forum-topic .forum-q__meta { margin-top: var(--gap-title); }
/* One closing row: the category at the start (right), the facts at the end (left). With no
 * category — inside a category's own page — the auto margin still sends the facts to the end. */
.forum-q__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-0) var(--space-3); padding-block-start: var(--gap-title); }
.forum-q__foot .forum-q__meta { justify-content: flex-end; margin-inline-start: auto; }
.forum-q--answered { border-color: var(--secondary-200); }
.forum-topic__state .iz-status--success { --bg: var(--secondary-100); --fg: var(--secondary-700); }

/* «پاسخ مشاور» glows (owner, 2026-09-29). The glow is a ring drawn once on a pseudo-element and
 * only its opacity and scale move, so nothing repaints; the chip itself never changes size. Slow
 * and low on purpose — a page can carry fifteen of these, and a breath reads as "alive" where a
 * blink would read as an alarm. Reduced motion keeps the ring, still. */
.forum-q--answered > .iz-status,
.forum-topic__state .iz-status--success { position: relative; isolation: isolate; }
.forum-q--answered > .iz-status::after,
.forum-topic__state .iz-status--success::after {
	content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: 0 0 0 3px var(--secondary-100), 0 0 14px 2px var(--secondary-300);
	opacity: .45;
}
@media (prefers-reduced-motion: no-preference) {
	.forum-q--answered > .iz-status::after,
	.forum-topic__state .iz-status--success::after { animation: forum-glow 2.8s var(--iz-ease-in-out) infinite alternate; }
	@keyframes forum-glow {
		from { opacity: .15; transform: scale(.98); }
		to { opacity: .8; transform: scale(1.03); }
	}
}
@media (hover: hover) and (pointer: fine) {
	.forum-q:hover { border-color: var(--primary-100); box-shadow: var(--iz-shadow-1); }
}
@media (max-width: 600px) {
	.forum-q { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
	.forum-q__who { display: none; }
	/* Owner, 2026-09-29: "chips to the left" — the inline end of an RTL row. */
	.forum-q > .iz-status { grid-row: 1; justify-self: end; }
	/* …and "smaller description": one step down the ladder, body-s to caption. */
	.forum-q__excerpt { font: var(--text-caption); }
}
/* The list the rows sit in. The reference draws the row and nothing around it; these two
 * declarations are what make the stack a list, and they replace `.forum-question-list`'s pre-v3
 * hairline, which a card carrying its own border does not want. The class name is unchanged
 * because it is still the honest name for the element and the conformance map probes for it. */
.forum-question-list { display: grid; gap: var(--gap-list); }
/* `.iz-stretch` lays an overlay over the whole row, so the category has to sit above it: it is the
 * one thing in the row that goes somewhere other than the question. */
.forum-q__cat a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.forum-q__cat a:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--iz-focus); }
@media (hover: hover) and (pointer: fine) {
	.forum-q__cat a:hover { text-decoration: underline; }
}
.forum-topic { padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; }
.forum-topic h1 { margin: var(--space-2) 0 0; color: var(--iz-ink); font: var(--text-h1); text-wrap: balance; }
/* A stranger's words, not this project's own copy, so the measure is capped rather than left to the
   grid column — at 1280px the main column runs past 900px, a line no reader should have to track. */
.forum-topic__body { max-width: 70ch; margin-top: var(--space-head); color: var(--iz-text); font: var(--text-body); }
.forum-topic__actions { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--iz-line-soft); }
.forum-act { display: inline-flex; align-items: center; gap: var(--gap-inline); min-height: 44px; padding: 0 var(--space-2); border: 1px solid var(--iz-line); border-radius: 10px; background: #fff; color: var(--iz-text); font: var(--text-button-s); cursor: pointer; transition: background-color .16s var(--iz-ease), color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.forum-act:active { transform: scale(var(--iz-press)); }
.forum-act[aria-pressed="true"] { border-color: var(--accent-200); background: var(--accent-50); color: var(--accent-700); }
.forum-act[aria-pressed="true"] i { font-weight: 700; }
.forum-act--quiet { border-color: transparent; color: var(--iz-ink-soft); margin-inline-start: auto; }
.forum-replies { display: grid; gap: var(--gap-list); }
/* Replies are white cards like the question above them (owner, 2026-09-30): same hairline, radius and
   shallow shadow. The counsellor's reply is told apart by its badge, avatar and a green hairline, not a
   heavy border and dark shadow; a nested reply by its indent, not a grey fill. */
.forum-reply { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2); padding: var(--pad-row); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; box-shadow: var(--iz-shadow-1); }
.forum-reply__who { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--primary-50); color: var(--primary-700); font-size: var(--icon-m); /* exempt: icon size */ }
.forum-reply__who img { width: 100%; height: 100%; object-fit: cover; }
.forum-reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-0) var(--space-1); }
.forum-reply__head b { color: var(--iz-ink); font: var(--text-caption); font-weight: 600; }
.forum-reply__head time { color: var(--iz-ink-soft); font: var(--text-micro); }
.forum-reply__body { max-width: 70ch; margin-top: var(--space-1); color: var(--iz-text); font: var(--text-body); }
.forum-reply__actions { display: flex; gap: var(--space-0); margin-top: var(--space-1); }
.forum-reply__actions button { min-height: 44px; padding: 0 var(--space-2); border: 0; border-radius: 8px; background: none; color: var(--iz-ink-soft); font: var(--text-button-s); cursor: pointer; }
.forum-reply__actions button:focus-visible { outline: none; box-shadow: var(--iz-focus); }
.forum-reply--expert { position: relative; border-color: var(--secondary-200); }
.forum-reply--expert .forum-reply__who { background: var(--secondary-500); color: #fff; }
.forum-reply__badge { display: inline-flex; align-items: center; gap: var(--space-0); padding: 2px var(--pad-chip-x); /* 2px: optical, keeps the badge on the name's line */ border-radius: 999px; background: var(--secondary-50); color: var(--secondary-700); font: var(--text-micro); font-weight: 600; }
/* The avatar's 40px column plus the card's own gap: a nested reply starts under its parent's text. */
.forum-reply--nested { margin-inline-start: calc(40px + var(--space-2)); }
@media (hover: hover) and (pointer: fine) {
	.forum-reply__actions button:hover { background: var(--iz-sunk); color: var(--iz-ink); }
	.forum-act:hover { background: var(--iz-sunk); }
}
@media (max-width: 560px) {
	/* The row wraps here, and the auto margin then strands «گزارش» alone on a second line with a
	 * gap the width of the card between it and the buttons it belongs with. */
	.forum-act--quiet { margin-inline-start: 0; }
	.forum-reply { grid-template-columns: 1fr; }
	.forum-reply__who { width: 32px; height: 32px; font-size: var(--icon-s); /* exempt: icon size */ }
	.forum-reply--nested { margin-inline-start: var(--space-3); }
}

/* ---------------------------------------------------------------------
 * v3 — asking a question. The kit answers this page almost entirely: `.iz-card` is the form,
 * `.iz-field` / `.iz-input` / `.iz-select` / `.iz-textarea` are the controls, `.iz-notice` is the
 * review note, `.iz-empty` the no-categories state and `.iz-pagestack` the vertical rhythm. Three
 * things it has no answer for are below and nothing else: the narrow column a form wants, the
 * confirmation that replaces the form once the question is in, and the sign-in dialog.
 * (`.pay-res` in commerce.css is the v3 confirmation shape, but commerce.css does not load on this
 * route — the four declarations it would lend are restated rather than pulling the cart's
 * stylesheet onto a form page.)
 * --------------------------------------------------------------------- */
/* The container rule (docs/decisions.md, "one type ladder, one face rule, one spacing scale, one
   container"): a page opening with .iz-crumbs runs its whole stack at --chrome-width, so the 820px
   cap moves off the wrap (which also held the crumbs) and onto the two things that actually want a
   narrow measure — the form card and the confirmation card. */
/* 2026-09-30 redesign: the form and a side column. The column states the three steps and what makes
   a question answerable; below 1024px it follows the form. */
.forum-ask-layout { display: grid; gap: var(--gap-grid); align-items: start; }
@media (min-width: 1024px) {
	.forum-ask-layout { grid-template-columns: minmax(0, 1fr) 300px; }
	.forum-ask-aside { position: sticky; top: calc(var(--space-4) + 72px); }
}
.forum-ask-card { display: grid; gap: var(--gap-form); min-width: 0; }
.forum-ask-body { min-height: 168px; }
.forum-ask-cats { min-width: 0; margin: 0; padding: 0; border: 0; }
.forum-ask-cats legend { padding: 0; margin-bottom: var(--gap-field); }

/* Similar questions: a quiet grey box under the title, only when something matched. */
.forum-ask-similar { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--iz-sunk); }
.forum-ask-similar:not([hidden]) { animation: forum-ask-in .2s var(--iz-ease-out); }
.forum-ask-similar__head { display: flex; align-items: center; gap: var(--gap-inline); margin: 0; color: var(--iz-ink); font: var(--text-caption); font-weight: 600; }
.forum-ask-similar__head i { color: var(--primary-500); }
.forum-ask-similar__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.forum-ask-similar__list li { display: flex; align-items: baseline; gap: var(--gap-inline); }
.forum-ask-similar__list a { color: var(--primary-700); font: var(--text-body-s); text-decoration: underline; text-decoration-color: var(--primary-200); text-underline-offset: 3px; }
.forum-ask-similar__list a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--iz-focus); }
@media (hover: hover) and (pointer: fine) { .forum-ask-similar__list a:hover { text-decoration-color: currentColor; } }
.forum-ask-similar__badge { flex: none; color: var(--secondary-700); font: var(--text-caption); font-weight: 600; }
@keyframes forum-ask-in { from { opacity: 0; transform: translateY(-4px); } }

/* Submit row: the button, the quiet draft line and, where there is a keyboard, the shortcut. */
.forum-ask-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline) var(--space-3); padding-top: var(--space-1); }
.forum-ask-foot__draft { display: inline-flex; align-items: center; gap: 6px; color: var(--iz-ink-soft); font: var(--text-caption); opacity: 0; transition: opacity .2s var(--iz-ease); }
.forum-ask-foot__draft.is-on { opacity: 1; }
.forum-ask-foot__draft.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary-500); }
.forum-ask-foot__kbd { margin-inline-start: auto; padding: 2px var(--space-1); border: 1px solid var(--iz-line); border-radius: 6px; background: var(--iz-sunk); color: var(--iz-ink-soft); font: var(--text-caption); direction: ltr; }
@media (hover: none), (pointer: coarse) { .forum-ask-foot__kbd { display: none; } }
@media (max-width: 560px) { .forum-ask-foot > .iz-btn { flex: 1 1 100%; justify-content: center; } }

/* Side column: one white card beside the form card, same border, radius and shadow, its two parts
   split by a hairline. Grey boxes on this near-white page read as disabled (owner, 2026-09-30). */
.forum-ask-aside { display: grid; padding: 0 var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; box-shadow: var(--iz-shadow-1); }
.forum-ask-side { display: grid; gap: var(--space-2); padding-block: var(--pad-card); }
.forum-ask-side + .forum-ask-side { border-top: 1px solid var(--iz-line-soft); }
.forum-ask-side h2 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
.forum-ask-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.forum-ask-steps li { position: relative; display: grid; gap: 2px; padding-inline-start: 36px; counter-increment: s; }
.forum-ask-steps li::before { content: counter(s, persian); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--secondary-50); color: var(--secondary-700); font: var(--text-caption); font-weight: 700; }
.forum-ask-steps b { color: var(--iz-ink); font: var(--text-body-s); font-weight: 600; }
.forum-ask-steps span, .forum-ask-tips li, .forum-ask-privacy { color: var(--iz-text); font: var(--text-caption); }
.forum-ask-tips { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.forum-ask-tips li, .forum-ask-privacy { display: flex; align-items: baseline; gap: var(--space-2); }
.forum-ask-tips i { width: 16px; color: var(--primary-500); text-align: center; }
.forum-ask-privacy { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--iz-line-soft); }
.forum-ask-privacy i { color: var(--secondary-600); }
/* `.forum-error` is shared with the reply form, where it still carries its own top margin; inside
   these two grids the gap already pays for the space. */
.forum-ask-card > .forum-error, .forum-auth__body > .forum-error { margin: 0; }

.forum-ask-done { max-width: 820px; margin-inline: auto; display: grid; justify-items: center; gap: var(--space-stack); padding: var(--space-5) var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; box-shadow: var(--iz-shadow-3); text-align: center; }
.forum-ask-done .art { width: 168px; height: 140px; }
.forum-ask-done h2 { margin: 0; color: var(--iz-ink); font: var(--text-h2); }
.forum-ask-done p { max-width: 46ch; margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.forum-ask-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-inline); margin-top: var(--space-1); }

.forum-auth { width: min(520px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--iz-r-lg); background: #fff; color: var(--iz-ink); box-shadow: var(--iz-shadow-3); }
.forum-auth::backdrop { background: rgb(20 46 55 / .38); }
/* Opening, not closing: the dialog rises 8px and settles from .97 in 220ms, the backdrop fades.
   Closing stays instant — the answer to «ادامه» should never wait on an animation. */
.forum-auth[open] { animation: forum-auth-in .22s var(--iz-ease-out); }
.forum-auth[open]::backdrop { animation: forum-auth-fade .22s var(--iz-ease-out); }
.forum-ask-done:not([hidden]) { animation: forum-auth-in .3s var(--iz-ease-out); }
@keyframes forum-auth-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes forum-auth-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.forum-auth[open], .forum-ask-done:not([hidden]), .forum-ask-similar:not([hidden]) { animation-name: forum-auth-fade; }
}
.forum-auth__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--pad-card); border-bottom: 1px solid var(--iz-line-soft); }
.forum-auth__head h2 { margin: 0; color: var(--iz-ink); font: var(--text-h3); }
.forum-auth__body { display: grid; gap: var(--gap-form); padding: var(--pad-card); }
.forum-auth__body > p { margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.forum-auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
/* H1: the name fields show only once otp/request answers will_register — the .forum-auth__two rule
   above sets display: grid unconditionally (it used to be shown always), which is higher-specificity
   than nothing and would otherwise beat the [hidden] attribute's own display: none. */
.forum-auth__two[hidden] { display: none; }
.forum-auth__state { display: none; }
.forum-auth__state.is-active { display: grid; gap: var(--gap-form); }
.forum-auth__sent { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--iz-sunk); color: var(--iz-text); font: var(--text-caption); }
.forum-auth__inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline) var(--space-3); }
/* H1: the resend countdown — plain caption text, no box, a quiet aside rather than a second notice
   competing with .forum-error. The busy line (ADR-0031, `[data-auth-status]`) is a
   `.screen-reader-text` node now (H1-18: it must stay in the DOM for a screen reader to announce
   it, so it carries no visible style of its own). */
.forum-auth__inline [data-resend-countdown] { margin: 0; color: var(--iz-text); font: var(--text-caption); }
@media (max-width: 680px) {
	.forum-auth__two { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * v3 — the topic page. The ported rules above draw the question card, the reply cards and the
 * action row; what is here is only the frame around them, which public-v3.css leaves to the host
 * page: the two-column layout, the «اطلاعات گفت‌وگو» aside, the answer box, and paragraph
 * rhythm inside text this site did not write.
 * --------------------------------------------------------------------- */
.forum-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: var(--space-5); align-items: start; margin-top: var(--space-head); }
.forum-detail__main { display: grid; gap: var(--space-block); align-content: start; min-width: 0; }

.forum-topic__state { margin: 0; }
/* The ported rules set the card's own type but not the rhythm of paragraphs inside it, and this is
   the one place on the site where the words arrive from a stranger's keyboard. */
.forum-topic__body > :first-child, .forum-reply__body > :first-child { margin-block-start: 0; }
.forum-topic__body > :last-child, .forum-reply__body > :last-child { margin-block-end: 0; }
.forum-topic__body p, .forum-reply__body p { margin-block: 0 var(--space-2); }
/* The reference leaves the seal to inherit the badge's 11.5px, which is below this theme's icon
   floor and unreadable at the size the glyph is drawn. */
.forum-reply__badge i { font-size: var(--icon-xs); /* exempt: icon size */ }
/* The ported block gives `.forum-reply__actions button` a focus ring but not `.forum-act`, so the
   three controls under the question had no indicator but the browser default. */
.forum-act:focus-visible { outline: none; box-shadow: var(--iz-focus); }

/* `.iz-h2` brings its own --space-head below it; the blocks after it are a stack. */
.forum-responses { display: grid; grid-template-columns: minmax(0, 1fr); }
.forum-responses > * + *:not(.forum-replies, .iz-empty) { margin-block-start: var(--space-block); }

.forum-reply-form { display: grid; gap: var(--space-stack); }
.forum-reply-form h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
.forum-reply-form__lead { margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.forum-reply-form__context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-inline); margin: 0; padding: 0 var(--space-3); border-radius: 12px; background: var(--iz-sunk); color: var(--iz-text); font: var(--text-caption); }
.forum-reply-form__context button { min-height: 44px; padding: 0 var(--space-1); border: 0; border-radius: 8px; background: none; color: var(--primary-700); font: var(--text-button-s); cursor: pointer; }
.forum-reply-form__context button:focus-visible { outline: none; box-shadow: var(--iz-focus); }
.forum-reply-form__note { display: flex; align-items: center; gap: var(--gap-inline); margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.forum-reply-form__note i { flex: none; color: var(--primary-500); font-size: var(--icon-m); /* exempt: icon size */ }
.forum-reply-form__done { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--secondary-50); color: var(--secondary-700); font: var(--text-body-s); font-weight: 600; }
.forum-reply-form .iz-btn { justify-self: start; }
.forum-reply-form > .forum-error { margin: 0; }
@media (max-width: 600px) {
	/* Owner, 2026-09-29: "full width button" — the page's one primary action, a thumb wide. */
	.forum-reply-form .iz-btn { justify-self: stretch; width: 100%; }
}

.forum-detail__side { position: sticky; top: 96px; display: grid; gap: var(--space-stack); padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; box-shadow: var(--iz-shadow-1); }
.forum-detail__side h2 { margin: 0; color: var(--iz-ink); font: var(--text-h3); }
.forum-detail__side dl { display: grid; margin: 0; }
.forum-detail__side dl div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 42px; }
.forum-detail__side dl div + div { border-block-start: 1px dashed var(--iz-line-soft); }
.forum-detail__side dt { color: var(--iz-ink-soft); font: var(--text-caption); }
.forum-detail__side dd { margin: 0; color: var(--iz-ink); font: var(--text-caption); font-weight: 600; text-align: end; }
.forum-detail__side dd a { color: var(--primary-700); text-decoration: none; }
.forum-detail__side dd a:focus-visible { outline: none; box-shadow: var(--iz-focus); border-radius: 6px; }
.forum-detail__side .iz-link { justify-self: start; }
@media (hover: hover) and (pointer: fine) {
	.forum-detail__side dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

@media (max-width: 900px) {
	.forum-detail__layout { grid-template-columns: minmax(0, 1fr); }
	.forum-detail__side { position: static; }
}
/* kit/empty's inline variant reserves its third column for the actions; the replies empty state
   has none — the answer box directly below it is the action — so the sentence belongs under the
   title rather than beside it in a column nothing else fills. */

/* The report dialog, replacing a window.prompt(). Rendered only by single-topic.php, so it moves
   onto the kit with the rest of that page: the shell here, the controls inside it from
   `.iz-textarea` and `.iz-btn` so the box matches every other form on the site. */
.forum-report-dialog { width: min(460px, calc(100% - 32px)); padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; color: var(--iz-text); box-shadow: var(--iz-shadow-3); }
.forum-report-dialog::backdrop { background: rgb(20 46 55 / .38); }
.forum-report-dialog h2 { margin: 0 0 var(--space-1); color: var(--iz-ink); font: var(--text-h3); }
.forum-report-dialog p { margin: 0 0 var(--space-3); color: var(--iz-text); font: var(--text-body-s); }
.forum-report-dialog .forum-error { margin-top: var(--space-2); }
.forum-report-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin-top: var(--space-3); }