/* =========================================================================
   MONARQUE — голосование в конкурсе (CONCEPT.md §1.8).

   Разметку рисует showcases/monarque.js. Здесь только внешний вид:

   • блок согласия в кабинете Резидента (§1.8.2);
   • парящая плашка «Оценить конкурсанток» (§1.8.3);
   • модалка с двумя участницами и видеовизитками (§1.8.4);
   • карточки пары — вертикальные 9:16, как везде в проекте (§1.2).

   Правила владельца:
   • hover НЕ меняет геометрию: ни размер, ни положение. Меняются только
     цвет, фон, рамка и тень — в transition-списках ниже нет transform.
   • Плашка не перекрывает шапку и кнопки действия: на десктопе она в левом
     нижнем углу (консьерж — справа), на мобильном поднята над плашкой
     консьержа.
   • Белый язык §0.1 задаётся текстами в JS, здесь только типографика.
   ========================================================================= */

/* ------------------------------------------------------ блок согласия --- */
.mnq-vote {
  margin-top: 18px;
  padding: 14px 16px 15px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  background: var(--surface, rgba(255, 255, 255, 0.045));
}

/* Слот плашки. На десктопе плашка внутри — fixed и в потоке места не занимает.
   На мобильном (см. медиазапрос ниже) слот разворачивается, и плашка встаёт
   в поток: на узком экране накладная плашка накрывала бы кнопку «Оценить
   пару» в этом же блоке, а §1.8.3 требует не перекрывать элементы управления. */
.mnq-vote__slot {
  width: 0;
  height: 0;
}

.mnq-vote__head {
  display: grid;
  gap: 4px;
}

.mnq-vote__kicker {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acc, #ff9000);
}

.mnq-vote__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink, #f4f4f2);
}

.mnq-vote__lead {
  margin: 0;
  max-width: 88ch;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2, #d6d6d2);
}

.mnq-vote__row {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

.mnq-vote__check {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 260px;
  min-width: 0;
  cursor: pointer;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink, #f4f4f2);
}

.mnq-vote__check input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.16));
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.03);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.mnq-vote__check input:hover {
  border-color: var(--acc, #ff9000);
}

.mnq-vote__check input:checked {
  border-color: var(--acc, #ff9000);
  background-color: var(--acc, #ff9000);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.2 10.5 2.9' fill='none' stroke='%2314100a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mnq-vote__check input:focus-visible {
  outline: 2px solid var(--acc, #ff9000);
  outline-offset: 2px;
}

.mnq-vote__check input:disabled {
  opacity: 0.5;
  cursor: default;
}

.mnq-vote__hint,
.mnq-vote__note {
  margin: 8px 0 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--muted, #8e8e8a);
}

.mnq-vote__note {
  margin-top: 10px;
  font-size: 10.5px;
  line-height: 1.55;
}

.mnq-vote__err {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: #e08e8e;
}

/* ------------------------------------------------------------- кнопки --- */
.mnq-vote__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.16));
  background: transparent;
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink, #f4f4f2);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.mnq-vote__btn:hover {
  border-color: var(--acc, #ff9000);
  color: var(--acc, #ff9000);
}

.mnq-vote__btn:focus-visible {
  outline: 2px solid var(--acc, #ff9000);
  outline-offset: 2px;
}

.mnq-vote__btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ------------------------------------------------------------- плашка --- */
.mnq-vote-plate {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 95;                 /* ниже модалок (120), не задевает шапку */
  display: grid;
  gap: 6px;
  width: min(340px, calc(100vw - 40px));
  padding: 12px 14px 13px;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  background: #0f0f12;
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.96);
  color: var(--ink, #f4f4f2);
  animation: mnqVotePlateIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mnqVotePlateIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mnq-vote-plate__kicker {
  padding-right: 24px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc, #ff9000);
}

.mnq-vote-plate__text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink, #f4f4f2);
}

.mnq-vote-plate__go {
  justify-self: start;
  margin-top: 2px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--acc, #ff9000);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: #14100a;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.mnq-vote-plate__go:hover {
  background: var(--acc-2, #ffb44d);
}

.mnq-vote-plate__go:focus-visible {
  outline: 2px solid var(--acc, #ff9000);
  outline-offset: 2px;
}

.mnq-vote-plate__x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--muted, #8e8e8a);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.mnq-vote-plate__x:hover {
  color: var(--ink, #f4f4f2);
  border-color: var(--line-2, rgba(255, 255, 255, 0.16));
}

.mnq-vote-plate__x:focus-visible {
  outline: 2px solid var(--acc, #ff9000);
  outline-offset: 1px;
}

/* ------------------------------------------------------------- модалка --- */
.mnq-vote-sheet {
  width: min(1040px, 100%);
}

/* Подтверждение, пустая пара и ошибка: карточек нет — окно уже, чтобы
   сообщение не висело посреди пустого экрана. */
.mnq-vote-sheet--note {
  width: min(560px, 100%);
}

.mnq-vote-sheet:focus-visible {
  outline: none;
}

.mnq-vote-sheet .sheet__head h3 {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
}

.mnq-vote-sheet__lead {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted, #8e8e8a);
}

.mnq-vote-sheet .sheet__body {
  display: grid;
  gap: 14px;
}

.mnq-vote-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  justify-items: center;
}

.mnq-vote-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  min-width: 0;
  /* 9:16 (§1.2): ширина считается от высоты окна, поэтому карточка вместе
     с подписью и кнопкой всегда влезает в модалку. */
  max-width: calc((92vh - 330px) * 9 / 16);
}

.mnq-vote-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  background-color: #101013;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mnq-vote-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: transparent;
}

/* Битое видео не оставляет пустую рамку: остаётся обложка и пояснение. */
.mnq-vote-card__media.is-missing .mnq-vote-card__video {
  visibility: hidden;
}

.mnq-vote-card__kind {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 12, 0.62);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f2ecdf;
  pointer-events: none;
}

.mnq-vote-card__note {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(10, 10, 12, 0.72);
  font-size: 8.5px;
  line-height: 1.4;
  color: #e0c9a6;
}

.mnq-vote-card__foot {
  display: grid;
  gap: 7px;
}

.mnq-vote-card__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, #f4f4f2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnq-vote-card__pick {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--acc, #ff9000);
  background: rgba(255, 144, 0, 0.1);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink, #f4f4f2);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.mnq-vote-card__pick:hover {
  background: var(--acc, #ff9000);
  color: #14100a;
}

.mnq-vote-card__pick:focus-visible {
  outline: 2px solid var(--acc, #ff9000);
  outline-offset: 2px;
}

.mnq-vote-card__pick[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* пустое состояние, подтверждение, загрузка */
.mnq-vote-empty {
  padding: 32px 20px;
  text-align: center;
  border: 1px dashed var(--line-2, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
}

.mnq-vote-empty b {
  display: block;
  font-size: 13px;
  color: var(--ink, #f4f4f2);
}

.mnq-vote-empty p {
  margin: 6px auto 0;
  max-width: 54ch;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted, #8e8e8a);
}

.mnq-vote-empty__retry {
  margin-top: 12px;
}

.mnq-vote-done {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 42px 20px;
  text-align: center;
}

.mnq-vote-done__mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--acc, #ff9000);
  font-size: 19px;
  line-height: 1;
  color: var(--acc, #ff9000);
}

.mnq-vote-done b {
  font-size: 13px;
  color: var(--ink, #f4f4f2);
}

.mnq-vote-done p {
  margin: 0;
  max-width: 46ch;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted, #8e8e8a);
}

.mnq-vote-loading {
  padding: 44px 20px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted, #8e8e8a);
}

/* ------------------------------------------------------------ адаптив --- */
@media (max-width: 760px) {
  /* Мобильный: карточки друг под другом, без горизонтального скролла. */
  .mnq-vote-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .mnq-vote-card {
    /* Формат остаётся 9:16 (§1.2), но высота ограничена: на телефоне одна
       карточка вместе с именем и кнопкой должна влезать целиком, чтобы
       «Лучше эта» была видна без прокрутки. Вторая — сразу под ней. */
    max-width: min(100%, calc(60vh * 9 / 16));
  }

  @supports (height: 100svh) {
    .mnq-vote-card {
      max-width: min(100%, calc(60svh * 9 / 16));
    }
  }

  /* На мобильном плашка не «парит», а встаёт в поток под блоком согласия:
     накладная плашка шириной 366px перекрывала подсказку и уезжала под плашку
     консьержа, а §1.8.3 запрещает перекрывать элементы управления. Так она
     видна целиком и ничего не закрывает. */
  .mnq-vote__slot {
    width: auto;
    height: auto;
  }

  .mnq-vote-plate {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin-top: 12px;
  }

  .mnq-vote {
    padding: 12px 13px 13px;
  }

  .mnq-vote__row {
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  .mnq-vote-plate {
    padding: 11px 12px 12px;
  }
}