/* =============================================================================
   Zone — public questions

   Everything the «вопросы» screens need that no component owns: the hero, the
   category tiles, the catalog's filter panel, the single-question reading page
   and the author form. Linked only by the views of this zone (see
   app/Views/public/questions/_zone_css.php), loaded after components.css, so a
   selector here wins over a legacy rule of the same weight in custom.css.

   Two rules govern this file:
     1. Colours, sizes, radii and timings come from tokens. No raw hex.
     2. Class names are `ui-questions-*`, except the ones JavaScript holds on
        to — those keep their historical names and are marked as hooks.

   Sections marked «JS-двойник» style markup that questions.js and custom.js
   build themselves (limitation D02): the server render uses components, the
   client render still writes the old classes. They are styled here so the
   catalog does not fall apart until the scripts move too. The catalog card
   itself moved past this — questions.js now inserts server-rendered
   `card_html` instead of drawing `.question-card` by hand, so that duplicate
   and its rules here are gone.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

.ui-questions-section {
    padding: var(--ui-space-xl) 0;
}

.ui-questions-section-title {
    position: relative;
    display: inline-block;
    margin-bottom: var(--ui-space-lg);
    font-size: var(--ui-font-size-2xl);
    font-weight: var(--ui-font-weight-bold);
    color: var(--ui-color-text);
}

.ui-questions-section-title::after {
    content: '';
    position: absolute;
    bottom: calc(var(--ui-space-2xs) * -1);
    left: 0;
    width: var(--ui-space-xl);
    height: 3px;
    border-radius: var(--ui-radius-pill);
    background-color: var(--ui-color-accent);
}

.ui-questions-section-title--center {
    display: block;
    text-align: center;
}

.ui-questions-section-title--center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* -----------------------------------------------------------------------------
   Hero

   The pattern used to be an inline SVG data URI carrying its own white; it is
   a token-composed dot grid now, so the overlay follows the theme instead of
   pinning one colour into the markup.
   -------------------------------------------------------------------------- */

.ui-questions-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--ui-space-xl);
    padding: var(--ui-space-2xl) 0 var(--ui-space-xl);
    border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
    background-image: linear-gradient(135deg, var(--ui-color-accent) 0%, var(--ui-color-accent-active) 100%);
    color: var(--ui-color-text-on-accent);
}

.ui-questions-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--ui-color-surface-rgb), 0.18) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.ui-questions-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ui-questions-hero__title {
    margin-bottom: var(--ui-space-sm);
    font-size: var(--ui-font-size-2xl);
    font-weight: var(--ui-font-weight-bold);
    line-height: var(--ui-line-height-tight);
    color: inherit;
    text-wrap: balance;
}

.ui-questions-hero__text {
    max-width: var(--ui-measure);
    margin: 0 auto var(--ui-space-md);
    font-size: var(--ui-font-size-md);
}

.ui-questions-hero__search {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
}

/* The hero field is the page's one big affordance: taller than the standard
   44px control, but the same pill and the same component underneath. */
.ui-questions-hero__search .ui-search-field__input {
    min-height: 3.5rem;
    box-shadow: var(--ui-shadow-md);
}

@media (min-width: 768px) {
    .ui-questions-hero__title {
        font-size: var(--ui-font-size-3xl);
    }

    .ui-questions-hero__text {
        font-size: var(--ui-font-size-lg);
    }
}

/* -----------------------------------------------------------------------------
   Hero suggestions — JS-двойник

   The panel is moved into <body> by the page script and positioned from
   JavaScript, so it cannot be the component's own results container. It is a
   light surface now, like every other dropdown in the system, instead of the
   near-black slab it used to be.
   -------------------------------------------------------------------------- */

.ui-questions-suggest {
    position: fixed;
    z-index: 1050;
    display: none;
}

.ui-questions-suggest__panel {
    overflow: hidden;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-lg);
}

.ui-questions-suggest__scroll {
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ui-questions-suggest__item {
    padding: var(--ui-space-2xs) var(--ui-space-sm);
    border-bottom: 1px solid var(--ui-color-border-subtle);
    color: var(--ui-color-text);
    cursor: pointer;
    transition: var(--ui-transition-color);
}

.ui-questions-suggest__item:last-child {
    border-bottom: none;
}

.ui-questions-suggest__item:hover {
    background-color: var(--ui-color-surface-raised);
}

.ui-questions-suggest__title {
    margin-bottom: var(--ui-space-3xs);
    overflow: hidden;
    font-weight: var(--ui-font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-questions-suggest__match {
    background-color: var(--ui-color-warning-surface);
    color: var(--ui-color-warning-text);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-questions-suggest__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3xs);
    font-size: var(--ui-font-size-xs);
    color: var(--ui-color-text-muted);
}

.ui-questions-suggest__state {
    padding: var(--ui-space-sm);
    text-align: center;
    color: var(--ui-color-text-muted);
}

/* -----------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.ui-questions-category {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ui-space-md);
    border: 1px solid var(--ui-color-border-subtle);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-duration-base) var(--ui-easing-standard),
                box-shadow var(--ui-duration-base) var(--ui-easing-standard);
}

.ui-questions-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-md);
}

.ui-questions-category__icon {
    margin-bottom: var(--ui-space-xs);
    font-size: var(--ui-font-size-2xl);
    line-height: 1;
    color: var(--ui-color-accent);
}

.ui-questions-category__title {
    margin-bottom: var(--ui-space-3xs);
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-questions-category__text {
    flex-grow: 1;
    margin-bottom: var(--ui-space-sm);
    color: var(--ui-color-text-muted);
}

.ui-questions-category__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-3xs);
    margin-top: auto;
    min-height: 2.75rem; /* 44px — touch target */
    font-weight: var(--ui-font-weight-medium);
}

/* -----------------------------------------------------------------------------
   Latest questions band
   -------------------------------------------------------------------------- */

.ui-questions-latest {
    margin-bottom: var(--ui-space-xl);
    padding: var(--ui-space-xl) 0;
    border-radius: var(--ui-radius-lg);
    background-color: var(--ui-color-surface-sunken);
}

.ui-questions-latest__more {
    margin-top: var(--ui-space-md);
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Prose blocks (SEO text, author guidance)
   -------------------------------------------------------------------------- */

.ui-questions-prose {
    max-width: var(--ui-measure);
    margin: 0 auto;
    padding: var(--ui-space-md) 0 var(--ui-space-xl);
}

.ui-questions-prose h2,
.ui-questions-prose h3 {
    margin-bottom: var(--ui-space-sm);
}

/* -----------------------------------------------------------------------------
   Catalog — filter panel
   -------------------------------------------------------------------------- */

.ui-questions-filters {
    margin-bottom: var(--ui-space-md);
    padding: var(--ui-space-md);
    border: 1px solid var(--ui-color-border-subtle);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-questions-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2xs);
    min-height: 2.75rem; /* 44px — touch target */
    margin-bottom: var(--ui-space-sm);
    padding-bottom: var(--ui-space-3xs);
    border-bottom: 2px solid var(--ui-color-border-subtle);
    cursor: pointer;
}

.ui-questions-filters__title {
    margin: 0;
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
    color: var(--ui-color-accent-text);
}

/* JS-хук: custom.js и questions.js переключают .collapsed на этой иконке. */
.filter-toggle-icon {
    color: var(--ui-color-accent-text);
    transition: transform var(--ui-duration-base) var(--ui-easing-standard);
}

.filter-toggle-icon.collapsed {
    transform: rotate(180deg);
}

.ui-questions-filters__group-title {
    margin-bottom: var(--ui-space-2xs);
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-questions-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2xs);
}

/* questions.js toggles a bare `active` class on the difficulty chips — it does
   not know about `--active`, and no JS is edited in this run. The zone teaches
   the component's active look to that class instead. */
.ui-chip-filter.active {
    border-color: var(--ui-color-accent-solid);
    background-color: var(--ui-color-accent-solid);
    color: var(--ui-color-text-on-accent);
}

.ui-chip-filter.active:hover {
    border-color: var(--ui-color-accent-solid-hover);
    background-color: var(--ui-color-accent-solid-hover);
    color: var(--ui-color-text-on-accent);
}

.ui-chip-filter.active .ui-chip-filter__count {
    color: inherit;
}

/* The sort control has no component: a native <select> is the right control
   and Bootstrap paints it through the bridge. The zone owns only its shape. */
.ui-questions-sort {
    min-height: 2.75rem; /* 44px — touch target */
    border-radius: var(--ui-radius-pill);
    padding-left: var(--ui-space-sm);
}

/* -----------------------------------------------------------------------------
   Catalog — active filters, search info, loader — JS-двойник

   questions.js writes .active-filter / .close-btn / #resetAllFilters into
   #activeFilters and flips inline `display` on #activeFilters, #searchInfo and
   #endMessage. Their resting state is therefore declared here, not as a style
   attribute in the view: the script sets `display` when it wants them seen.
   -------------------------------------------------------------------------- */

#activeFilters {
    display: none;
    flex-wrap: wrap;
    gap: var(--ui-space-2xs);
    align-items: center;
    margin-bottom: var(--ui-space-md);
    padding: var(--ui-space-2xs) var(--ui-space-sm);
    border: 1px dashed var(--ui-color-accent-border);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-accent-soft);
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-3xs);
    min-height: 2.25rem;
    padding: var(--ui-space-3xs) var(--ui-space-xs);
    border-radius: var(--ui-radius-pill);
    background-color: var(--ui-color-accent-solid);
    color: var(--ui-color-text-on-accent);
    font-size: var(--ui-font-size-sm);
}

.active-filter .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgba(var(--ui-color-surface-rgb), 0.3);
    cursor: pointer;
    transition: var(--ui-transition-color);
}

.active-filter .close-btn:hover {
    background-color: rgba(var(--ui-color-surface-rgb), 0.5);
}

.reset-filters {
    min-height: 2.25rem;
    padding: var(--ui-space-3xs) var(--ui-space-xs);
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-pill);
    background-color: var(--ui-color-surface);
    color: var(--ui-color-text);
    font-family: inherit;
    font-size: var(--ui-font-size-sm);
    cursor: pointer;
    transition: var(--ui-transition-color);
}

.reset-filters:hover {
    border-color: var(--ui-color-accent);
    background-color: var(--ui-color-accent-soft);
    color: var(--ui-color-accent-text);
}

/* Компонент alert; зона владеет только тем, что он покоится скрытым, — показывает
   его questions.js, выставляя инлайновый display. */
#searchInfo {
    display: none;
    margin-bottom: var(--ui-space-md);
}

#loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-space-md) 0;
}

.ui-questions-spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--ui-color-accent-soft);
    border-top-color: var(--ui-color-accent);
    border-radius: 50%;
    animation: ui-questions-spin 1s linear infinite;
}

@keyframes ui-questions-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Конец списка — компонент empty-state с этим id: покоится скрытым, показывает
   его questions.js, выставляя инлайновый display. */
#endMessage {
    display: none;
    padding: var(--ui-space-md) var(--ui-space-sm);
}

/* Скрипт показывает блок инлайновым display: block, и колоночный флекс компонента
   на это время выключается — узкая строка пояснения (max-width: 42ch) уезжает
   влево. Возвращаем ей центр здесь, а не правкой компонента: перекос создаёт
   именно этот способ показа, и живёт он только в этой зоне. */
#endMessage .ui-empty-state__text {
    margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   Single question page — view.php and random.php
   -------------------------------------------------------------------------- */

.ui-questions-page {
    max-width: 50rem;
    margin: 0 auto;
    padding-top: var(--ui-space-2xs);
}

.ui-questions-breadcrumb {
    margin-bottom: var(--ui-space-2xs);
    font-size: var(--ui-font-size-xs);
}

.ui-questions-breadcrumb .breadcrumb {
    margin: 0;
}

.ui-questions-breadcrumb .breadcrumb-item.active,
.ui-questions-breadcrumb__truncate {
    display: inline-block;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Answers. `.answers-list`, `.answer-item`, `.answered`, `.correct`,
   `.incorrect`, `.answer-stats` are JS hooks — custom.js, questions.js and
   the page scripts all write them. */
.answers-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3xs);
    width: 100%;
    margin: var(--ui-space-2xs) 0;
}

.answer-item {
    position: relative;
    width: 100%;
    min-height: 2.75rem; /* 44px — touch target */
    padding: var(--ui-space-2xs) var(--ui-space-sm);
    padding-right: var(--ui-space-2xl);
    border: 1px solid var(--ui-color-border-strong);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-surface);
    color: var(--ui-color-text);
    cursor: pointer;
    transition: var(--ui-transition-color),
                transform var(--ui-duration-fast) var(--ui-easing-standard);
}

.answer-item:hover {
    border-color: var(--ui-color-accent);
    background-color: var(--ui-color-surface-raised);
}

.answers-list.answered .answer-item {
    cursor: default;
}

.answer-item.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* One set of names, and it is the one the untouchable script writes:
   custom.js:427-431 adds `correct` / `incorrect`. The zone used to print
   `correct-answer` / `wrong-answer` as well — those appear nowhere in
   public/js/, so they were a second vocabulary the zone invented for itself.
   The state is carried by a word (the stats line), an icon and the colour —
   never by the colour alone. */
.answer-item.correct {
    border-color: var(--ui-color-success);
    background-color: var(--ui-color-success-surface);
    color: var(--ui-color-success-text);
}

.answer-item.correct::before {
    content: '\F26B'; /* bi-check-circle-fill */
    font-family: 'bootstrap-icons', sans-serif;
    margin-right: var(--ui-space-3xs);
}

.answer-item.incorrect {
    border-color: var(--ui-color-danger);
    background-color: var(--ui-color-danger-surface);
    color: var(--ui-color-danger-text);
}

.answer-item.incorrect::before {
    content: '\F622'; /* bi-x-circle-fill */
    font-family: 'bootstrap-icons', sans-serif;
    margin-right: var(--ui-space-3xs);
}

.answer-item.hiding {
    opacity: 0;
    transition: opacity var(--ui-duration-base) var(--ui-easing-standard);
}

.answer-stats {
    position: absolute;
    top: 50%;
    right: var(--ui-space-2xs);
    transform: translateY(-50%);
    font-size: var(--ui-font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ui-color-text-muted);
}

.answers-list.answered .answer-item.correct .answer-stats,
.answers-list.answered .answer-item.incorrect .answer-stats {
    color: inherit;
}

/* Actions row under the answers. */
.ui-questions-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2xs);
    align-items: center;
    width: 100%;
    margin-top: var(--ui-space-2xs);
}

.ui-questions-actions--split {
    justify-content: space-between;
}

/* Like button — компонент button с хуками `.like-button`, `.liked`, `.processing`.
   Форму, отступы и цель нажатия даёт ui-button. Состояния задаются переменными
   моста `--bs-btn-*` на одном классе: Bootstrap 5.3 сам читает их и в покое, и
   в :hover, и в :active, поэтому переопределять color/background и городить
   вторую ступень селектора не нужно. «Нравится» — не главное действие страницы,
   отсюда нейтральный покой и красное подтверждение. */
.like-button {
    --bs-btn-color: var(--ui-color-text);
    --bs-btn-bg: var(--ui-color-surface);
    --bs-btn-border-color: var(--ui-color-border-strong);
    --bs-btn-hover-color: var(--ui-color-danger-text);
    --bs-btn-hover-bg: var(--ui-color-surface);
    --bs-btn-hover-border-color: var(--ui-color-danger);
    --bs-btn-active-color: var(--ui-color-danger-text);
    --bs-btn-active-bg: var(--ui-color-danger-surface);
    --bs-btn-active-border-color: var(--ui-color-danger);
    font-variant-numeric: tabular-nums;
}

.like-button.liked {
    --bs-btn-color: var(--ui-color-danger-text);
    --bs-btn-bg: var(--ui-color-danger-surface);
    --bs-btn-border-color: var(--ui-color-danger);
    --bs-btn-hover-color: var(--ui-color-danger-text);
    --bs-btn-hover-bg: var(--ui-color-danger-surface);
    --bs-btn-hover-border-color: var(--ui-color-danger);
}

.like-button.processing {
    opacity: 0.7;
    pointer-events: none;
}

/* Explanation. Rendered by the server here and by three different scripts into
   `#explanationContainer`; both spellings of the heading are covered. */
.explanation-card {
    width: 100%;
    margin-top: var(--ui-space-sm);
    padding: var(--ui-space-sm);
    border: 1px solid var(--ui-color-border-subtle);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-surface-sunken);
    font-size: var(--ui-font-size-sm);
}

.explanation-card .card-body {
    padding: 0;
}

.explanation-card h5,
.explanation-card .explanation-title {
    margin-bottom: var(--ui-space-3xs);
    font-size: var(--ui-font-size-md);
    font-weight: var(--ui-font-weight-semibold);
}

.explanation-card .card-text,
.explanation-card p {
    margin: 0;
    color: var(--ui-color-text-muted);
}

.points-earned {
    width: 100%;
    margin-top: var(--ui-space-2xs);
}

/* The "next question" button is revealed by several scripts through
   `.d-none` → `.show`; the fade is ours, the classes are theirs. */
#nextQuestionButton {
    opacity: 0;
    transition: opacity var(--ui-duration-base) var(--ui-easing-standard);
}

#nextQuestionButton.show {
    opacity: 1;
}

/* Random-question toolbar. */
.ui-questions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2xs);
    margin-bottom: var(--ui-space-2xs);
    padding: var(--ui-space-3xs) var(--ui-space-2xs);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-surface-sunken);
    font-size: var(--ui-font-size-sm);
}

.ui-questions-toolbar__progress {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-3xs);
    color: var(--ui-color-text-muted);
}

.ui-questions-toolbar__timer {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3xs);
    color: var(--ui-color-text-muted);
    font-weight: var(--ui-font-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* `.timer` and its colour classes are written by the page script every second. */
.ui-questions-toolbar__timer .timer.green {
    color: var(--ui-color-success-text);
}

.ui-questions-toolbar__timer .timer.orange {
    color: var(--ui-color-warning-text);
}

.ui-questions-toolbar__timer .timer.red {
    color: var(--ui-color-danger-text);
}

.ui-questions-filters--inline {
    margin-bottom: var(--ui-space-2xs);
    padding: var(--ui-space-2xs);
}

.ui-questions-filters__group + .ui-questions-filters__group {
    margin-top: var(--ui-space-2xs);
}

/* -----------------------------------------------------------------------------
   Author form — create.php
   -------------------------------------------------------------------------- */

.ui-questions-form {
    max-width: 50rem;
    margin: 0 auto;
    padding: var(--ui-space-md);
    border: 1px solid var(--ui-color-border-subtle);
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-questions-form__field {
    margin-bottom: var(--ui-space-sm);
}

/* `.similar-questions` / `.similar-question` are written into the page by the
   duplicate check in create.php. */
.similar-questions {
    max-height: 12.5rem;
    overflow-y: auto;
    padding: var(--ui-space-3xs);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-color-surface-sunken);
    scrollbar-width: thin;
}

.similar-question {
    cursor: pointer;
    transition: var(--ui-transition-color);
}

.similar-question:hover {
    background-color: var(--ui-color-surface-raised);
}

/* Rules dialog. Hand-built rather than a Bootstrap modal, and its open state is
   the `.show` class the page script toggles. */
.ui-questions-rules {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    padding: var(--ui-space-sm);
    background-color: var(--ui-color-backdrop);
    opacity: 0;
    transition: opacity var(--ui-duration-base) var(--ui-easing-standard);
}

.ui-questions-rules.show {
    display: flex;
    opacity: 1;
}

.ui-questions-rules__dialog {
    position: relative;
    width: 100%;
    max-width: 50rem;
    max-height: 90vh;
    margin: auto;
    padding: var(--ui-space-md);
    overflow-y: auto;
    border-radius: var(--ui-radius-md);
    background-color: var(--ui-color-surface);
    box-shadow: var(--ui-shadow-lg);
    transform: translateY(-20px);
    transition: transform var(--ui-duration-base) var(--ui-easing-standard);
}

.ui-questions-rules.show .ui-questions-rules__dialog {
    transform: translateY(0);
}

/* Кнопка-компонент, посаженная в угол диалога: зона владеет только положением
   и круглой формой, всё остальное — ui-button. */
.ui-questions-rules__close {
    position: absolute;
    top: var(--ui-space-2xs);
    right: var(--ui-space-2xs);
    border-radius: 50%;
    color: var(--ui-color-text-muted);
}

.ui-questions-rules__close:hover {
    background-color: var(--ui-color-surface-raised);
    color: var(--ui-color-text);
}

.ui-questions-rules__title {
    margin-bottom: var(--ui-space-sm);
    padding-right: var(--ui-space-lg);
    font-size: var(--ui-font-size-xl);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-questions-rules__section {
    margin-bottom: var(--ui-space-md);
}

.ui-questions-rules__section-title {
    margin-bottom: var(--ui-space-2xs);
    font-size: var(--ui-font-size-lg);
    font-weight: var(--ui-font-weight-semibold);
}

.ui-questions-rules__list {
    margin-bottom: var(--ui-space-sm);
    padding-left: var(--ui-space-sm);
}

.ui-questions-rules__list li {
    margin-bottom: var(--ui-space-3xs);
}

/* A quotation, marked the way prose marks one: a hairline rule in the margin,
   not an accent tab on a card. */
.ui-questions-quote {
    margin: 0 0 var(--ui-space-sm);
    padding: var(--ui-space-2xs) var(--ui-space-sm);
    border-inline-start: 1px solid var(--ui-color-border-strong);
    color: var(--ui-color-text-muted);
    font-style: italic;
}

.ui-questions-quote__source {
    text-align: right;
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-size-sm);
}

/* -----------------------------------------------------------------------------
   Narrow screens — 360px is the floor everything here is checked against
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .ui-questions-hero {
        padding: var(--ui-space-xl) 0 var(--ui-space-md);
    }

    .ui-questions-section,
    .ui-questions-latest {
        padding: var(--ui-space-md) 0;
    }

    .ui-questions-filters {
        padding: var(--ui-space-2xs);
    }

    .ui-questions-page {
        padding: 0 var(--ui-space-3xs);
    }

    .answer-item {
        padding-right: var(--ui-space-xl);
    }

    .ui-questions-actions--split {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-questions-toolbar {
        flex-wrap: wrap;
    }

    .ui-questions-form {
        padding: var(--ui-space-sm);
    }

    .ui-questions-rules__dialog {
        padding: var(--ui-space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-questions-spinner {
        animation-duration: 3s;
    }

    .ui-questions-category:hover {
        transform: none;
    }
}