/* Карточки улик. Вид документа приходит из ядра (clueDocuments[].kind);
   каждый вид отличается формой листа, шрифтом и разлиновкой, а не только подписью. */

.ev-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 6px 20px;
}

/* Нижний край списка гаснет, пока ниже есть ещё улики: обрезанная посередине
   карточка читается как сломанная вёрстка, а не как продолжение. */
.ev-list[data-more='true'] {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
}

.ev {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  display: block;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.ev__sheet {
  position: relative;
  padding: 12px 14px;
  box-shadow: 0 8px 18px var(--shadow);
  color: var(--ink);
}

.ev__head {
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 8px;
  line-height: 1.25;
}

.ev__text {
  font-size: 17px;
  line-height: 1.5;
  min-height: 1.5em;
}

/* Каретка «печатной машинки» на время набора текста. */
.ev__text[data-typing='true']::after {
  content: '▌';
  color: var(--accent);
  animation: caret 0.5s steps(1, end) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.ev[data-used='true'] {
  opacity: 0.72;
}

.ev__strike {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
  overflow: visible;
}

.ev__strike path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

.ev[data-used='true'] .ev__strike path {
  animation: draw 0.35s ease-out forwards;
}

/* ── Протокол допроса ─────────────────────────────────────────────── */

.ev--interrogation .ev__sheet {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding-bottom: 30px;
}

.ev--interrogation .ev__head {
  border-bottom: 3px double var(--ink);
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 16px;
}

.ev--interrogation .ev__form {
  display: flex;
  gap: 12px;
  font-size: 16px;
  color: var(--ink-faded);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ev--interrogation .ev__form span {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--ink-faded);
  white-space: nowrap;
  overflow: hidden;
}

.ev__stamp-mark {
  position: absolute;
  right: 8px;
  bottom: 2px;
  width: 64px;
  height: 64px;
  opacity: 0.55;
  transform: rotate(-14deg);
  color: var(--stamp-blue);
  pointer-events: none;
}

/* ── Страница дневника ────────────────────────────────────────────── */

.ev--diary {
  transform: rotate(-0.9deg);
}

.ev--diary .ev__sheet {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(31, 58, 95, 0.28) 27px,
      rgba(31, 58, 95, 0.28) 28px
    ),
    var(--paper);
  border: 1px solid rgba(43, 33, 24, 0.35);
  padding: 10px 14px 14px 34px;
}

.ev--diary .ev__sheet::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  border-left: 1px solid rgba(163, 49, 43, 0.5);
}

.ev--diary .ev__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 28px;
}

.ev--diary .ev__head {
  font-family: var(--font-serif);
  line-height: 28px;
  margin-bottom: 0;
}

/* ── Обрывок письма ───────────────────────────────────────────────── */

.ev--letter {
  transform: rotate(0.7deg);
}

.ev--letter .ev__sheet {
  background: var(--paper-dark);
  padding: 18px 20px 22px;
  clip-path: polygon(
    0 6px, 7% 0, 16% 5px, 27% 1px, 39% 6px, 52% 0, 64% 5px, 77% 1px, 89% 6px, 100% 2px,
    calc(100% - 4px) 22%, 100% 44%, calc(100% - 5px) 66%, 100% 86%, calc(100% - 3px) 100%,
    86% calc(100% - 5px), 72% 100%, 58% calc(100% - 6px), 43% 100%, 29% calc(100% - 4px),
    14% 100%, 3% calc(100% - 5px), 0 92%, 4px 70%, 0 48%, 5px 26%
  );
}

.ev--letter .ev__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
}

.ev--letter .ev__head {
  font-family: var(--font-serif);
  font-size: 16px;
}

/* ── Заключение эксперта ──────────────────────────────────────────── */

.ev--expertise .ev__sheet {
  background: var(--paper);
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  margin: 3px;
  padding: 14px 16px;
}

.ev--expertise .ev__head {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}

.ev--expertise .ev__text {
  padding-top: 4px;
}

.ev--expertise .ev__sheet::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  border-bottom: 1px dashed rgba(43, 33, 24, 0.4);
}

/* ── Журнал дежурств ──────────────────────────────────────────────── */

.ev--logbook .ev__sheet {
  background: var(--paper-dark);
  border: 1px solid var(--ink);
  padding: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
}

.ev--logbook .ev__no {
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-size: 16px;
  color: var(--ink-soft);
  border-right: 1px solid var(--ink);
  background: rgba(43, 33, 24, 0.07);
}

.ev--logbook .ev__head {
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ink);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ev--logbook .ev__text {
  padding: 10px 12px 12px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 25px,
    rgba(43, 33, 24, 0.16) 25px,
    rgba(43, 33, 24, 0.16) 26px
  );
  line-height: 26px;
}

/* ── Газета ───────────────────────────────────────────────────────── */

.ev--newspaper .ev__sheet {
  background: var(--paper);
  border: 1px solid rgba(43, 33, 24, 0.3);
  padding: 10px 14px 14px;
}

.ev--newspaper .ev__head {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: 5px 0;
  color: var(--ink);
  margin-bottom: 10px;
}

.ev--newspaper .ev__text {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.45;
  text-align: justify;
  column-gap: 16px;
  column-rule: 1px solid rgba(43, 33, 24, 0.3);
}

/* Переносов по слогам нет, чтобы имена в улике не рвались. Без них выключка
   по ширине в узкой колонке телефона даёт дыры между словами — там по левому краю. */
@media (max-width: 600px) {
  .ev--newspaper .ev__text {
    text-align: left;
  }
}

.ev--newspaper .ev__text::first-letter {
  font-size: 34px;
  line-height: 0.9;
  font-weight: 700;
  float: left;
  padding: 2px 6px 0 0;
}

/* ── Записная книжка ──────────────────────────────────────────────── */

.ev--notebook {
  padding-left: 10px;
}

.ev--notebook .ev__sheet {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 19px,
      rgba(31, 58, 95, 0.16) 19px,
      rgba(31, 58, 95, 0.16) 20px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 19px,
      rgba(31, 58, 95, 0.16) 19px,
      rgba(31, 58, 95, 0.16) 20px
    ),
    var(--paper);
  border: 1px solid rgba(43, 33, 24, 0.4);
  border-radius: 3px 8px 8px 3px;
  padding: 10px 14px 12px 20px;
}

/* Пружина блокнота слева. */
.ev--notebook .ev__sheet::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 18px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 6px,
    var(--ink-soft) 6px,
    var(--ink-soft) 8px,
    transparent 8px,
    transparent 16px
  );
  opacity: 0.55;
  border-radius: 4px;
}

.ev--notebook .ev__text {
  font-size: 16px;
  line-height: 20px;
}

.ev--notebook .ev__head {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 0;
}

/* ── Телеграмма ───────────────────────────────────────────────────── */

.ev--telegram .ev__sheet {
  background: var(--paper-dark);
  max-width: 340px;
  padding: 18px 16px 20px;
  /* Зубчатый край наклеенной телеграфной ленты. */
  clip-path: polygon(
    0 0, 4% 8px, 8% 0, 12% 8px, 16% 0, 20% 8px, 24% 0, 28% 8px, 32% 0, 36% 8px, 40% 0,
    44% 8px, 48% 0, 52% 8px, 56% 0, 60% 8px, 64% 0, 68% 8px, 72% 0, 76% 8px, 80% 0,
    84% 8px, 88% 0, 92% 8px, 96% 0, 100% 8px,
    100% 100%, 96% calc(100% - 8px), 92% 100%, 88% calc(100% - 8px), 84% 100%,
    80% calc(100% - 8px), 76% 100%, 72% calc(100% - 8px), 68% 100%, 64% calc(100% - 8px),
    60% 100%, 56% calc(100% - 8px), 52% 100%, 48% calc(100% - 8px), 44% 100%,
    40% calc(100% - 8px), 36% 100%, 32% calc(100% - 8px), 28% 100%, 24% calc(100% - 8px),
    20% 100%, 16% calc(100% - 8px), 12% 100%, 8% calc(100% - 8px), 4% 100%, 0 calc(100% - 8px)
  );
}

.ev--telegram .ev__head {
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(43, 33, 24, 0.45);
  padding-bottom: 6px;
}

.ev--telegram .ev__text {
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  word-spacing: 0.1em;
}

@media (max-width: 900px) {
  .ev-list {
    gap: 14px;
    padding-inline: 2px;
  }

  .ev--telegram .ev__sheet {
    max-width: none;
  }
}

/* ── Карточка человека: портрет, характер и его улика ─────────────── */

.people {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 6px 20px 2px;
}

.person {
  background: transparent;
}

.person__head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 6px 16px var(--shadow);
  position: relative;
  z-index: 1;
}

.person__no {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
}

.person__photo {
  flex: 0 0 auto;
  width: 46px;
  height: 56px;
  background: var(--photo);
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 6px var(--shadow);
}

.person__photo svg,
.person__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.person__photo img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

/* Колонка имени не уже самого длинного своего слова (min-width: auto при
   нулевой основе): если рядом с кнопкой «НА КАРТУ» слову тесно, кнопка
   уходит на вторую строку шапки, а слово не рвётся. */
.person__who {
  flex: 1 1 0;
}

.person__name {
  font-size: 17px;
  line-height: 1.2;
}

.person__trait {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.2;
}

.person__badge {
  display: inline-block;
  margin-top: 2px;
  font-size: 16px;
  letter-spacing: 0.14em;
  border: 2px solid var(--accent);
  color: var(--accent);
  padding: 0 6px;
}

.person__action {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 16px;
  letter-spacing: 0.1em;
  border: 2px solid var(--ink);
  padding: 6px 8px;
  border-radius: var(--radius);
}

.person[data-picked='true'] .person__head {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(163, 49, 43, 0.3), 0 6px 16px var(--shadow);
}

.person[data-picked='true'] .person__action {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff3e2;
}

.person[data-placed='true'] .person__action {
  border-style: dashed;
  color: var(--ink-soft);
}

.person[data-placed='true'] .person__no {
  background: var(--accent);
}

.person[data-victim='true'] .person__action {
  display: none;
}

.person .ev {
  margin-top: -2px;
  padding-left: 14px;
}

/* ── Карточка жертвы ──────────────────────────────────────────────── */

.ev--victim .ev__sheet {
  background: var(--paper);
  border: 3px double var(--accent);
  padding: 12px 14px;
}

.ev--victim .ev__head {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 16px;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 6px;
}

.ev--victim .ev__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
}