@charset "UTF-8";

.qa-list {
  padding-bottom: 40px;
  color: #081838;
  background: #f9f9f9;
  line-height: 1.5;
}

.qa-list h1,
.qa-list h2,
.qa-list p {
  margin: 0;
}

.qa-list__breadcrumb {
  padding-top: 24px;
  margin-bottom: 20px;
}

.qa-list__hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}

.qa-list__heading {
  max-width: 560px;
  color: #080957;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.6px;
}

.qa-list__intro {
  max-width: 510px;
  margin-top: 12px !important;
  color: #5b5b5b;
  font-size: 15px;
}

.qa-list__hero-action {
  display: grid;
  justify-items: center;
  gap: 7px;
  flex: none;
}

.qa-list__free-caption {
  color: #5b5b5b;
  font-size: 12px;
}

.qa-list .btn--orange {
  color: #fff;
  font-weight: 400;
}

.qa-list__action > svg {
  min-width: 17px;
  width: 17px;
  height: 17px;
}

.qa-list__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "first sidebar" "rest sidebar";
  gap: 18px 24px;
  align-items: start;
}

.qa-list__group {
  display: grid;
  gap: 18px;
  min-width: 0;
  align-content: start;
}

.qa-list__group--first {
  grid-area: first;
}

.qa-list__group--rest {
  grid-area: rest;
}

.qa-list__card {
  min-width: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 16px;
}

.qa-list__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 12px;
  color: #5b5b5b;
  font-size: 13px;
}

.qa-list__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}

.qa-list__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f5fc;
  color: #080957;
  font-size: 12px;
  font-weight: 700;
}

.qa-list__title {
  color: #080957;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.qa-list__title a {
  display: block;
  color: inherit;
}

.qa-list__title a:hover {
  color: #974100;
}

.qa-list__excerpt {
  margin-top: 12px !important;
  color: #5b5b5b;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.qa-list__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 17px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e6e8ef;
  color: #5b5b5b;
  font-size: 13px;
}

.qa-list__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qa-list__metric svg,
.qa-list__free svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Смещение сохраняем для остальных иконок; глаз центрируется обычным flex-выравниванием. */

.qa-list__metric:not(.qa-list__views) svg,
.qa-list__free svg {
  transform: translateY(-1px);
}

.qa-list__views,
.qa-detail__views {
  white-space: nowrap;
}

.qa-list__answers {
  color: #248222;
  font-weight: 700;
}

.qa-list__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 6px;
  background: #fff4df;
  color: #974100;
  font-size: 12px;
}

.qa-list__badge svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.qa-list__sidebar {
  grid-area: sidebar;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.qa-list__invitation {
  padding: 25px;
  background: #f3f5fc;
  border-radius: 20px;
}

.qa-list__free {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  color: #080957;
  font-size: 13px;
  font-weight: 700;
}

.qa-list__invitation h2 {
  color: #080957;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 800;
}

.qa-list__invitation p {
  margin-top: 13px;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1.6;
}

.qa-list__invite-action {
  margin-top: 20px;
}

.qa-list__invite-button {
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  font-size: 14px;
}

.qa-list__invite-note {
  margin-top: 9px !important;
  text-align: center;
  font-size: 12px !important;
}

.qa-list__ad,
.qa-list__ad-slot {
  width: 100%;
  min-width: 0;
}

.qa-list__pagination {
  margin-top: 25px;
}

.qa-list__pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.qa-list__pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  margin: 0;
  border: 1px solid #e6e8ef;
  border-radius: 8px;
  background: #fff;
  color: #080957;
}

.qa-list__pagination .page-item.active .page-link {
  background: #080957;
  color: #fff;
  border-color: #080957;
}

.qa-list__pagination .page-item.disabled .page-link {
  color: #7f7f7f;
}

.qa-list a:focus-visible {
  outline: 2px solid #293a80;
  outline-offset: 3px;
}

/* Брейкпоинты совпадают с основными диапазонами компонентов сайта. */

@media screen and (min-width: 744px) and (max-width: 1023px) {
  .qa-list__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "first" "sidebar" "rest";
  }

  .qa-list__invitation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 24px;
    padding: 22px 25px;
  }

  .qa-list__free {
    margin-bottom: 12px;
  }

  .qa-list__invitation h2 br {
    display: none;
  }

  .qa-list__invite-action {
    margin-top: 0;
  }
}

@media screen and (max-width: 743px) {
  .qa-list__hero {
    display: block;
    margin-bottom: 23px;
  }

  .qa-list__heading {
    font-size: 28px;
  }

  .qa-list__hero-action {
    margin-top: 18px;
    justify-items: start;
  }

  .qa-list__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "first" "sidebar" "rest";
  }

  .qa-list__card {
    padding: 20px;
  }

  .qa-list__title {
    font-size: 20px;
  }

  .qa-list__badge {
    margin-left: 0;
  }

  .qa-list__invitation {
    padding: 22px;
  }

  .qa-list__free {
    margin-bottom: 13px;
  }

  .qa-list__invitation h2 {
    font-size: 24px;
  }

  .qa-list__invitation p {
    margin-top: 11px;
  }
}

/* Одна обычная ссылка покрывает карточку целиком, сохраняя открытие в новой вкладке. */

.qa-list__card--linked {
  position: relative;
}

.qa-list__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.qa-list__card-link:focus-visible::after {
  outline: 2px solid #080957;
  outline-offset: 3px;
}

/* Стили страницы изолированы: общая шапка, подвал и кнопки остаются из layouts.app. */

.qa-detail {
  padding-bottom: 40px;
  background: #f9f9f9;
  color: #081838;
  line-height: 1.5;
}

.qa-detail h1,
.qa-detail h2,
.qa-detail h3,
.qa-detail p {
  margin: 0;
}

.qa-detail__breadcrumb {
  padding-top: 24px;
  margin-bottom: 20px;
}

.qa-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

.qa-detail__conversation {
  min-width: 0;
  border: 1px solid #e6e8ef;
  border-radius: 16px;
  background: #fff;
}

.qa-detail__question {
  padding: 28px;
}

.qa-detail__title {
  margin-bottom: 22px !important;
  color: #080957;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.6px;
  overflow-wrap: anywhere;
}

.qa-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 16px;
  color: #5b5b5b;
  font-size: 13px;
}

.qa-detail__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}

.qa-detail__expert-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: #293a80;
}

.qa-detail__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f5fc;
  color: #080957;
  font-size: 12px;
  font-weight: 700;
}

.qa-detail__views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.qa-detail__views svg,
.qa-detail__free svg,
.qa-detail__answer-count svg,
.qa-detail__sources-title svg {
  flex: none;
  width: 17px;
  height: 17px;
}

/* Оптическое выравнивание остальных иконок относительно строки текста. */

.qa-detail__free svg,
.qa-detail__answer-count svg {
  transform: translateY(-2px);
}

.qa-detail__body {
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.qa-detail__body p + p {
  margin-top: 14px;
}

.qa-detail__body ul,
.qa-detail__body ol {
  margin: 14px 0;
  padding-left: 24px;
}

.qa-detail__body ul > li {
  display: list-item;
  list-style: disc;
}

.qa-detail__body ol > li {
  display: list-item;
  list-style: decimal;
}

.qa-detail__body li + li {
  margin-top: 6px;
}

.qa-detail__body a {
  color: #358bdc;
}

.qa-detail__body a:hover {
  color: #ff6d02;
}

.qa-detail__body .qa-detail__source-link {
  font-size: 0.9em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.qa-detail__body .qa-detail__source-link-tail {
  display: inline-block;
  max-width: 100%;
  text-decoration: inherit;
  text-underline-offset: inherit;
}

.qa-detail__body .qa-detail__source-link svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  color: inherit;
}

.qa-detail__body .qa-detail__source-link:focus-visible {
  outline: 2px solid #293a80;
  outline-offset: 3px;
  border-radius: 2px;
}

.qa-detail__question-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e6e8ef;
}

.qa-detail__question-footer form,
.qa-detail__reactions form {
  max-width: 100%;
  margin: 0;
}

/* Второстепенное действие: компактная рамка и спокойный цвет вместо акцентной кнопки. */

.qa-detail .qa-detail__interest {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  box-sizing: border-box;
  min-height: 32px;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid #e3e6ee;
  border-radius: 6px;
  background: #fff;
  color: #5b5b5b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.qa-detail .qa-detail__interest > svg {
  flex: none;
  min-width: 15px;
  width: 15px;
  height: 15px;
  color: inherit;
  stroke-width: 1.7;
}

.qa-detail .qa-detail__interest > svg + span {
  margin-left: 0;
}

.qa-detail .qa-detail__interest:hover {
  background: #f3f5fc;
  color: #080957;
  border-color: #c3c5db;
}

.qa-detail .qa-detail__interest:focus-visible {
  outline: 2px solid #080957;
  outline-offset: 3px;
}

/* Сообщение относится только к своей группе голосования и не сдвигает соседние кнопки. */

.qa-detail__vote-status {
  flex-basis: 100%;
  color: #5b5b5b;
  font-size: 13px;
}

.qa-detail__vote-status[hidden] {
  display: none;
}

.qa-detail__vote-status--error {
  color: #b42318;
}

.qa-detail [data-qa-vote] button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.qa-detail__votes {
  margin-left: 0 !important;
  padding-left: 8px;
  border-left: 1px solid #e3e6ee;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qa-detail .qa-detail__interest[aria-pressed=true] {
  background: #f3f5fc;
  color: #080957;
  border-color: #c3c5db;
}

/* Для касания сохраняем удобную область нажатия, не увеличивая текст и иконку. */

@media (pointer: coarse) {
  .qa-detail .qa-detail__interest {
    min-height: 44px;
  }
}

.qa-detail__answer-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: #248222;
  font-size: 13px;
  font-weight: 700;
}

.qa-detail__answer-count--empty {
  color: #5b5b5b;
  font-weight: 400;
}

.qa-detail__answers {
  padding: 24px 28px 26px;
  border-top: 1px solid #e6e8ef;
}

.qa-detail__answers-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px !important;
  color: #080957;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.qa-detail__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 26px;
  min-height: 26px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f3f5fc;
  font-size: 13px;
  font-weight: 400;
}

.qa-detail__answer {
  min-width: 0;
  padding: 22px;
  border-radius: 12px;
  background: #f3f5fc;
}

.qa-detail__answer + .qa-detail__answer {
  margin-top: 18px;
}

.qa-detail__answer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.qa-detail__answer-top .qa-detail__meta {
  margin-bottom: 0;
}

.qa-detail__answer .qa-detail__avatar {
  background: #fff;
}

.qa-detail__accepted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  color: #248222;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.qa-detail__accepted svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.qa-detail__sources {
  margin-top: 22px;
  color: #5b5b5b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.qa-detail__sources-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.qa-detail__sources-list {
  display: grid;
  gap: 6px;
}

.qa-detail__sources a {
  color: #358bdc;
}

.qa-detail__sources a:hover {
  color: #ff6d02;
}

.qa-detail__reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e6e8ef;
}

.qa-detail__reaction-label {
  width: 100%;
  margin-bottom: 3px;
  color: #080957;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.qa-detail .qa-detail__reaction {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.2;
}

.qa-detail .qa-detail__reaction > svg {
  min-width: 17px;
  width: 17px;
  height: 17px;
}

.qa-detail .qa-detail__reaction[aria-pressed=true] {
  background: #dcfadb;
  color: #248222;
  border-color: #248222;
}

.qa-detail .qa-detail__reaction[aria-pressed=true] > svg {
  color: #248222;
}

.qa-detail .qa-detail__reaction--help {
  gap: 9px;
  min-height: 48px;
  padding: 11px 15px;
  border-color: #dfe3ef;
  background: #fff;
  color: #080957;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.qa-detail .qa-detail__reaction--help > svg {
  width: 18px;
  height: 18px;
}

.qa-detail .qa-detail__reaction--help > svg + span {
  margin-left: 0;
}

.qa-detail__reaction-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  min-height: 23px;
  padding: 0 4px;
  border-radius: 5px;
  background: #f3f5fc;
  font-size: 12px;
  font-weight: 600;
}

.qa-detail .qa-detail__reaction--help:hover,
.qa-detail .qa-detail__reaction--help[aria-pressed=true] {
  border-color: #080957;
  background: #fff;
  color: #080957;
}

.qa-detail .qa-detail__reaction--help[aria-pressed=true] > svg {
  color: #080957;
}

.qa-detail__less {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 48px;
  max-width: 100%;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  color: #5b5b5b;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* Выбор сохраняется в aria-pressed, но не меняет цвет и оформление текстовой оценки. */

.qa-detail__less:hover {
  color: #5b5b5b;
  text-decoration: underline;
}

.qa-detail__empty {
  padding: 28px;
  border: 1px solid #e6e8ef;
  border-radius: 12px;
  text-align: center;
}

.qa-detail__empty h3 {
  color: #080957;
  font-size: 20px;
  font-weight: 700;
}

.qa-detail__empty p {
  margin-top: 8px;
  color: #5b5b5b;
  font-size: 14px;
}

.qa-detail__reply {
  margin-top: 24px;
}

.qa-detail__reply h3 {
  margin-bottom: 6px;
  color: #080957;
  font-size: 16px;
  font-weight: 700;
}

.qa-detail__reply p {
  color: #5b5b5b;
  font-size: 13px;
}

.qa-detail__reply--guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.qa-detail__reply-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.qa-detail__reply-editor > summary::-webkit-details-marker {
  display: none;
}

.qa-detail__reply-editor > summary::marker {
  content: "";
}

.qa-detail__reply-editor[open] > summary .qa-detail__reply-action {
  display: none;
}

.qa-detail__reply-editor form {
  margin-top: 18px;
}

.qa-detail__reply .form-group {
  margin-bottom: 16px;
}

.qa-detail__reply .btn {
  max-width: 100%;
  font-size: 14px;
}

.qa-detail__reply label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.qa-detail__reply textarea {
  max-width: 100%;
  border-radius: 8px;
  resize: vertical;
}

/* Самостоятельная карточка сохраняет компактное приглашение, а после раскрытия даёт место для ответа. */

.qa-detail__reply {
  padding: 24px;
  border: 1px solid #e6e8ef;
  border-radius: 18px;
  background: #fff;
}

.qa-detail__reply h3 {
  font-size: 20px;
  line-height: 1.3;
}

.qa-detail__reply p {
  line-height: 1.6;
}

/* Залитая кнопка выделяет раскрытие формы; весь summary остаётся доступен с клавиатуры. */

.qa-detail__reply-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 260px;
  min-width: 0;
}

.qa-detail__reply-heading > div {
  min-width: 0;
}

.qa-detail__reply-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f3f5fc;
  color: #293a80;
}

.qa-detail__reply-icon svg {
  width: 22px;
  height: 22px;
}

.qa-detail__reply .qa-detail__reply-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: none;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 20px;
  border-color: #293a80;
  background: #293a80;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.qa-detail__reply .qa-detail__reply-action > svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: inherit;
}

.qa-detail__reply-editor > summary:hover .qa-detail__reply-action,
.qa-detail__reply .qa-detail__reply-action:hover {
  border-color: #080957;
  background: #080957;
  color: #fff;
}

.qa-detail__reply-editor[open] > summary .qa-detail__reply-action {
  display: none;
}

.qa-detail__reply-editor[open] > summary {
  padding-bottom: 18px;
  border-bottom: 1px solid #e6e8ef;
}

.qa-detail__reply-collapse {
  display: none;
  color: #293a80;
  font-size: 13px;
}

.qa-detail__reply-editor[open] .qa-detail__reply-collapse {
  display: inline-flex;
  gap: 7px;
}

.qa-detail__reply textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 170px;
  padding: 14px 16px;
  border: 1px solid #d5d9e5;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.qa-detail__reply textarea:focus {
  outline: 2px solid #293a80;
  outline-offset: 2px;
}

.qa-detail__reply textarea[aria-invalid=true] {
  border-color: #b63135;
}

.qa-detail__reply-help {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  color: #646878;
  font-size: 12px;
}

[data-qa-reply-count] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.qa-detail__reply-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.qa-detail__reply .qa-detail__reply-submit {
  padding: 12px 20px;
  border-color: #293a80;
  background: #293a80;
  color: #fff;
  font-weight: 700;
}

.qa-detail__reply .qa-detail__reply-submit:hover {
  border-color: #080957;
  background: #080957;
  color: #fff;
}

.qa-detail__reply-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.qa-detail__reply-draft {
  color: #646878;
  font-size: 12px;
}

.qa-detail__reply .qa-detail__reply-private {
  margin-top: 16px;
  color: #646878;
  font-size: 12px;
}

.qa-detail__reply .qa-detail__reply-error {
  margin-top: 10px;
  color: #b63135;
  font-size: 13px;
}

.qa-detail__reply .qa-detail__reply-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f3f5fc;
  color: #080957;
  font-size: 14px;
}

.qa-detail__reply [hidden] {
  display: none !important;
}

@media screen and (max-width: 743px) {
  .qa-detail__reply {
    padding: 20px;
  }

  .qa-detail__reply-heading {
    display: block;
    flex-basis: 100%;
  }

  .qa-detail__reply-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .qa-detail__reply-footer .qa-detail__reply-submit {
    width: 100%;
  }

  .qa-detail__reply-editor[open] > summary {
    position: relative;
    display: block;
    padding-right: 32px;
  }

  .qa-detail__reply-collapse {
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-height: 26px;
  }

  .qa-detail__reply-collapse-label {
    display: none;
  }
}

.qa-detail__sidebar {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.qa-detail__invitation {
  padding: 25px;
  border-radius: 20px;
  background: #f3f5fc;
}

.qa-detail__free {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  color: #080957;
  font-size: 13px;
  font-weight: 700;
}

.qa-detail__invitation h2 {
  color: #080957;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}

.qa-detail__invitation p {
  margin-top: 13px;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1.6;
}

.qa-detail__invite-action {
  margin-top: 20px;
}

.qa-detail .qa-detail__invite-button {
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.qa-detail__invitation .qa-detail__invite-note {
  margin-top: 9px;
  text-align: center;
  font-size: 12px;
}

.qa-detail__invitation.qa-detail__invitation--bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  grid-column: 1;
  min-width: 0;
}

/* Раздел об авторах ответов продолжает приглашение внутри общей карточки на всех экранах. */

.qa-detail__who {
  grid-column: 1/-1;
  min-width: 0;
  padding-top: 24px;
  border-top: 1px solid #dfe3ef;
}

.qa-detail__who h2 {
  color: #080957;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.qa-detail__respondents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.qa-detail__respondent {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.qa-detail__respondent-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  color: #293a80;
  font-size: 12px;
  font-weight: 700;
}

.qa-detail__respondent-icon svg {
  width: 18px;
  height: 18px;
}

.qa-detail__respondent h3 {
  color: #080957;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.qa-detail__respondent p {
  margin-top: 4px;
  color: #5b5b5b;
  font-size: 13px;
  line-height: 1.5;
}

.qa-detail__who .qa-detail__who-note {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e6e8ef;
  color: #5b5b5b;
  font-size: 12px;
  line-height: 1.5;
}

.qa-detail__how {
  padding: 4px 10px;
}

.qa-detail__how h3 {
  margin-bottom: 18px;
  color: #080957;
  font-size: 16px;
  font-weight: 700;
}

.qa-detail__how ol {
  display: grid;
  gap: 14px;
}

.qa-detail__how li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #5b5b5b;
  font-size: 13px;
}

.qa-detail__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f3f5fc;
  color: #080957;
  font-size: 12px;
}

.qa-detail a:focus-visible,
.qa-detail button:focus-visible,
.qa-detail summary:focus-visible {
  outline: 2px solid #293a80;
  outline-offset: 3px;
}

/* Общая карточка занимает колонку вопроса; на десктопе текст приглашения и кнопка стоят рядом. */

@media screen and (min-width: 1024px) {
  .qa-detail__invitation.qa-detail__invitation--bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: center;
    gap: 24px;
    grid-column: 1;
  }

  .qa-detail__invitation--bottom .qa-detail__invite-action {
    margin-top: 0;
  }
}

/* На узких экранах показываем общее нижнее приглашение без повторения бокового блока. */

@media screen and (max-width: 1023px) {
  .qa-detail__sidebar > .qa-detail__invitation {
    display: none;
  }
}

/* Как в /qa, используем диапазоны 744–1023 и до 743 px. */

@media screen and (min-width: 744px) and (max-width: 1023px) {
  .qa-detail__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .qa-detail__invitation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 24px;
    padding: 22px 25px;
  }

  .qa-detail__invitation h2 br {
    display: none;
  }

  .qa-detail__invite-action {
    margin-top: 0;
  }
}

@media screen and (max-width: 743px) {
  .qa-detail__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .qa-detail__question {
    padding: 20px;
  }

  .qa-detail__title {
    font-size: 28px;
  }

  .qa-detail__views {
    margin-left: 0;
  }

  .qa-detail__body {
    font-size: 15px;
  }

  .qa-detail__question-footer {
    gap: 12px;
  }

  .qa-detail__answer-count {
    margin-left: 0;
  }

  .qa-detail__answers {
    padding: 22px 20px;
  }

  .qa-detail__answer {
    padding: 18px;
  }

  .qa-detail__answer-top {
    flex-direction: column;
  }

  .qa-detail__reaction-label {
    width: 100%;
  }

  .qa-detail__reply--guest .btn,
  .qa-detail__reply-action {
    width: 100%;
  }

  .qa-detail__invitation {
    padding: 22px;
  }

  .qa-detail__invitation h2 br {
    display: none;
  }

  .qa-detail__free {
    margin-bottom: 13px;
  }

  .qa-detail__who {
    padding-top: 22px;
  }

  .qa-detail__respondents {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
  }
}

/* Карандаш ведёт в отдельный редактор; доступ к нему проверяется также на сервере. */

.qa-detail__heading-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
}

.qa-detail__heading-row .qa-detail__title {
  min-width: 0;
  margin-bottom: 0 !important;
}

.qa-detail__edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 3px;
  border-radius: 6px;
  color: #293a80;
}

.qa-detail__edit-link svg {
  width: 16px;
  height: 16px;
}

.qa-detail__edit-link:hover {
  background: #f3f5fc;
  color: #080957;
}

.qa-detail__meta .qa-detail__edit-link {
  margin-top: 0;
}

.qa-detail__answer .qa-detail__edit-link:hover {
  background: #fff;
}

/* На сенсорных экранах увеличиваем область нажатия, сохраняя маленькую иконку. */

@media (pointer: coarse) {
  .qa-detail__edit-link {
    width: 44px;
    height: 44px;
    margin-top: 0;
  }
}

/* Модификатор изолирует выбранный дизайн от прежних правил приглашения в qa.css. */

.qa-list__invitation--discussion {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 24px;
  border: 1px solid #e6e8ef;
  border-radius: 20px;
  background: #fff;
}

.qa-list__invitation--discussion h2 {
  color: #080957;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -0.35px;
}

.qa-list__invitation--discussion .qa-list__discussion-intro p {
  margin-top: 14px;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1.6;
}

.qa-list__discussion-flow {
  display: grid;
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.qa-list__discussion-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.qa-list__discussion-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 33px;
  bottom: -13px;
  left: 13px;
  width: 1px;
  background: #e6e8ef;
}

.qa-list__discussion-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f5fc;
  color: #080957;
  font-size: 12px;
  font-weight: 700;
}

.qa-list__discussion-flow h3 {
  margin: 3px 0 0;
  color: #080957;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.qa-list__invitation--discussion .qa-list__discussion-flow p {
  margin-top: 4px;
  color: #5b5b5b;
  font-size: 12px;
  line-height: 1.5;
}

.qa-list__invitation--discussion .qa-list__invite-action {
  margin-top: 26px;
}

.qa-list__invitation--discussion .qa-list__invite-button {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 13px;
  line-height: 1.2;
}

.qa-list__invitation--discussion .qa-list__invite-note {
  margin-top: 10px !important;
  line-height: 1.5;
}

/* На планшете используем ширину строки: вводный текст и кнопка сверху, три шага под ними. */

@media screen and (min-width: 744px) and (max-width: 1023px) {
  .qa-list__invitation--discussion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "intro action" "flow flow";
    align-items: center;
    gap: 24px;
  }

  .qa-list__discussion-intro {
    grid-area: intro;
  }

  .qa-list__discussion-flow {
    grid-area: flow;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 0;
  }

  .qa-list__discussion-flow li::after {
    display: none;
  }

  .qa-list__invitation--discussion .qa-list__invite-action {
    grid-area: action;
    margin-top: 0;
  }
}

/* На телефоне сохраняем последовательность шагов и полноширинную область нажатия. */

@media screen and (max-width: 743px) {
  .qa-list__invitation--discussion {
    padding: 22px;
  }

  .qa-list__invitation--discussion h2 {
    font-size: 24px;
  }
}

/* Закрытый режим модерации помечает непубличные записи и не предлагает действия читателя. */

.qa-detail__moderation-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding: 16px 20px;
  border: 1px solid #dfe3ef;
  border-radius: 12px;
  background: #f3f5fc;
  color: #080957;
  font-size: 14px;
}

.qa-detail__moderation-notice a {
  color: #293a80;
  text-decoration: underline;
}

.qa-detail__moderation-notice nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.qa-detail__moderation-status {
  padding: 3px 7px;
  border-radius: 6px;
  background: #f3f5fc;
  color: #293a80;
  font-size: 12px;
}

/* Оптическое выравнивание значка эксперта относительно имени автора ответа. */

.qa-detail__expert-icon {
  transform: translateY(-1px);
}

/* Подтверждение остаётся вне details: свёрнутая форма не скрывает результат отправки. */

.qa-detail__reply .qa-detail__reply-status--success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #cbe5cb;
  border-radius: 12px;
  background: #eef7ed;
  color: #248222;
}

.qa-detail__reply-success-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #dcfadb;
}

.qa-detail__reply-success-icon svg {
  width: 20px;
  height: 20px;
}

.qa-detail__reply-success-content {
  min-width: 0;
}

.qa-detail__reply-success-content strong {
  display: block;
  color: #248222;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.qa-detail__reply .qa-detail__reply-success-content p {
  margin: 4px 0 0;
  color: #37613b;
  font-size: 13px;
  line-height: 1.6;
}

.qa-detail__reply-success-content a {
  color: #248222;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qa-detail__reply-success-content a:hover {
  text-decoration: none;
}

/* Сохраняем дизайн приглашения из /qa, не затрагивая общие стили других блоков страницы. */

.qa-detail__invitation.qa-detail__consultation {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 24px;
  border: 1px solid #e6e8ef;
  border-radius: 20px;
  background: #fff;
}

.qa-detail__consultation .qa-detail__consultation-intro h2 {
  color: #080957;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -0.35px;
}

.qa-detail__consultation .qa-detail__consultation-intro p {
  margin-top: 14px;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1.6;
}

.qa-detail__consultation-flow {
  display: grid;
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.qa-detail__consultation-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.qa-detail__consultation-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 33px;
  bottom: -13px;
  left: 13px;
  width: 1px;
  background: #e6e8ef;
}

.qa-detail__consultation-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f5fc;
  color: #080957;
  font-size: 12px;
  font-weight: 700;
}

.qa-detail__consultation-flow h3 {
  margin: 3px 0 0;
  color: #080957;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.qa-detail__consultation .qa-detail__consultation-flow p {
  margin-top: 4px;
  color: #5b5b5b;
  font-size: 12px;
  line-height: 1.5;
}

.qa-detail__consultation .qa-detail__invite-action {
  margin-top: 26px;
}

.qa-detail .qa-detail__consultation .qa-detail__invite-button {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 13px;
  line-height: 1.2;
}

.qa-detail__consultation .qa-detail__invite-note {
  margin-top: 10px;
  line-height: 1.5;
}

/* Нижняя карточка объединяет приглашение, шаги обсуждения и авторов ответов в две спокойные зоны. */

.qa-detail__consultation.qa-detail__invitation--bottom {
  display: block;
  grid-column: 1;
  padding: 0;
  overflow: hidden;
}

.qa-detail__consultation-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas: "intro action" "flow flow";
  align-items: center;
  gap: 26px;
  padding: 28px;
}

.qa-detail__consultation-main .qa-detail__consultation-intro {
  grid-area: intro;
}

.qa-detail__consultation-main .qa-detail__consultation-intro h2 {
  font-size: 28px;
}

.qa-detail__consultation-main .qa-detail__invite-action {
  grid-area: action;
  margin-top: 0;
}

.qa-detail__consultation-main .qa-detail__consultation-flow {
  grid-area: flow;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0;
}

.qa-detail__consultation-main .qa-detail__consultation-flow li::after {
  display: none;
}

.qa-detail__consultation .qa-detail__who {
  padding: 24px 28px;
  border-top: 1px solid #e6e8ef;
  background: #f3f5fc;
}

.qa-detail__consultation .qa-detail__who h2 {
  font-size: 18px;
}

.qa-detail__consultation .qa-detail__respondents {
  margin-top: 18px;
}

/* Боковая карточка остаётся на десктопе; на узких экранах используется общая нижняя карточка. */

@media screen and (max-width: 1023px) {
  .qa-detail__sidebar {
    display: none;
  }
}

@media screen and (max-width: 743px) {
  .qa-detail__consultation-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "flow" "action";
    gap: 24px;
    padding: 22px;
  }

  .qa-detail__consultation-main .qa-detail__consultation-intro h2 {
    font-size: 24px;
  }

  .qa-detail__consultation-main .qa-detail__consultation-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .qa-detail__consultation-main .qa-detail__consultation-flow li:not(:last-child)::after {
    display: block;
  }

  .qa-detail__consultation .qa-detail__who {
    padding: 22px;
  }

  .qa-detail__consultation .qa-detail__respondents {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Swal предоставляет фокус и закрытие; содержимое сохраняет шрифты, поля и кнопки сайта. */

.qa-auth-popup {
  max-width: calc(100vw - 24px) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  font-family: inherit;
}

.qa-auth-popup .swal2-content,
.qa-auth-popup .swal2-html-container {
  margin: 0;
  padding: 0;
}

.qa-auth {
  color: #081838;
  text-align: left;
  line-height: 1.5;
}

.qa-auth [hidden] {
  display: none !important;
}

.qa-auth :focus-visible {
  outline: 2px solid #293a80;
  outline-offset: 3px;
}

.qa-auth__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px;
  color: #080957;
}

.qa-auth__heading svg {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: #f3f5fc;
}

.qa-auth__heading h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
}

.qa-auth__copy {
  margin: 12px 0 0;
  color: #5b5b5b;
  font-size: 14px;
}

/* Сохранение черновика — вспомогательная подсказка; главный акцент остаётся на необходимом входе. */

.qa-auth__saved {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #f3f5fc;
  color: #5b5b5b;
}

.qa-auth__saved svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #4d5b97;
}

.qa-auth__saved strong {
  display: block;
  color: #080957;
  font-size: 13px;
  font-weight: 700;
}

.qa-auth__saved p {
  margin: 2px 0 0;
  font-size: 12px;
}

.qa-auth__tabs {
  display: flex;
  gap: 24px;
  margin: 20px 0;
  border-bottom: 1px solid #e6e8ef;
}

.qa-auth__tabs button {
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #5b5b5b;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.qa-auth__tabs button[aria-pressed=true] {
  color: #080957;
  border-bottom-color: #293a80;
}

.qa-auth__form {
  display: grid;
  gap: 14px;
}

.qa-auth__field label {
  display: block;
  margin-bottom: 6px;
  color: #080957;
  font-size: 14px;
  font-weight: 700;
}

.qa-auth__field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #dfe3ed;
  border-radius: 8px;
  background: #fff;
  color: #081838;
  font: inherit;
  font-size: 16px;
}

.qa-auth__field input:focus {
  border-color: #293a80;
}

.qa-auth__agree {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #5b5b5b;
  font-size: 12px;
}

.qa-auth__agree input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #293a80;
}

.qa-auth__agree a {
  color: #080957;
  text-decoration: underline;
}

.qa-auth__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fcf2ef;
  color: #a13928;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.qa-auth__form .btn {
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px;
  white-space: normal;
  font-size: 14px;
  line-height: 1.4;
}

.qa-auth__note {
  margin: 14px 0 0;
  color: #5b5b5b;
  font-size: 12px;
}

@media screen and (max-width: 743px) {
  .qa-auth-popup {
    padding: 24px 20px !important;
  }

  .qa-auth__heading h2 {
    font-size: 20px;
  }
}