/* client/lab/reports.css
   Вкладка «Еженедельные отчёты». Всё заскоуплено в .rep: страница делит
   документ с trends.css и calendar.css, а имена вроде .card/.page там свои. */
.rep {
  --rep-line: #ECE4D6;
  --rep-ink: #1C1B18;
  --rep-mut: #8A8170;
  --rep-soft: #B7AE9C;
  --rep-acc: #FF6A1A;
  --rep-card: #fff;
  font: 15px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--rep-ink);
}
.rep * { box-sizing: border-box; }

/* ── Сетка выпусков ───────────────────────────────────────────────────────── */
.rep-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.rep-card {
  display: flex; flex-direction: column;
  background: var(--rep-card); border: 1px solid var(--rep-line); border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,27,24,.05), 0 4px 14px rgba(28,27,24,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rep-card:hover { transform: translateY(-3px); border-color: #D8CDB8; box-shadow: 0 2px 4px rgba(28,27,24,.06), 0 14px 32px rgba(28,27,24,.11); }

/* Ссылка занимает всю карточку кроме подвала: там живёт переключатель языка,
   а вложенная в <a> кнопка — невалидная разметка и ломает клавиатуру. */
.rep-card__link {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 12px; text-decoration: none; color: inherit;
  flex: 1;
}
.rep-card__link:focus-visible { outline: 2px solid var(--rep-acc); outline-offset: -2px; border-radius: 16px; }

/* Обложка — A4. Пропорция задана заранее, чтобы сетка не прыгала, пока
   картинки грузятся. */
.rep-card__cover {
  display: block; aspect-ratio: 1 / 1.414; background: #211B3E;
  border-bottom: 1px solid var(--rep-line);
}
.rep-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rep-card__meta {
  display: block; margin: 12px 16px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rep-acc);
}
.rep-card__title {
  display: block; margin: 0 16px;
  font-size: 16px; font-weight: 800; line-height: 1.28; letter-spacing: -.01em;
}
.rep-card__lead {
  margin: 0 16px;
  font-size: 13px; line-height: 1.45; color: var(--rep-mut);
  /* Три строки — дальше многоточие: подводка у выпусков разной длины, а
     карточки в ряду должны выглядеть одинаково. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.rep-card__foot {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px; padding: 10px 0 14px; border-top: 1px solid var(--rep-line);
  font-size: 12px; color: var(--rep-soft);
}
.rep-card__size { flex: 1; }

/* ── Переключатель языка ──────────────────────────────────────────────────── */
/* Пилюли — ссылки, а не кнопки: «скопировать адрес ссылки» на языке должно
   работать правой кнопкой, ради этого язык и уехал в хэш. */
.rep-langs { display: inline-flex; gap: 4px; }
.rep-lang {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--rep-line); background: #fff; color: var(--rep-mut);
  border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; transition: .13s;
}
.rep-lang:hover { color: var(--rep-ink); border-color: #D8CDB8; }
.rep-lang.is-on { background: var(--rep-ink); border-color: var(--rep-ink); color: #fff; }
.rep-langs--lg .rep-lang { font-size: 12px; padding: 5px 11px; }

/* Языков будет больше: с пятого пилюли не влезают в футер карточки на
   телефоне, и переключатель становится списком. */
.rep-langsel {
  max-width: 160px;
  border: 1px solid var(--rep-line); background: #fff; color: var(--rep-ink);
  border-radius: 999px; padding: 3px 8px; font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.rep-langsel:hover { border-color: #D8CDB8; }
.rep-langsel--lg { font-size: 13px; padding: 5px 10px; }

/* ── Читалка ──────────────────────────────────────────────────────────────── */
.rep-reader { display: flex; flex-direction: column; }

.rep-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px; margin-bottom: 6px;
  background: linear-gradient(#FBF7F0 78%, rgba(251,247,240,0));
}
.rep-bar__title { flex: 1; font-size: 13px; font-weight: 600; color: var(--rep-mut); }
@media (max-width: 620px) {
  /* На телефоне раскладываем шапку в два ровных этажа: сверху «назад» и PDF по
     краям, снизу название выпуска и языки. Порядком, а не подгонкой размеров
     кнопок под ширину экрана: подгонка держится ровно до первого выпуска с
     длинным названием. */
  .rep-bar { gap: 8px 10px; }
  .rep-back { order: 1; }
  .rep-pdf { order: 2; margin-left: auto; }
  .rep-bar__title { order: 3; flex: 1 1 60%; font-size: 12.5px; }
  .rep-langs--lg { order: 4; margin-left: auto; }
}

.rep-back {
  border: 1px solid var(--rep-line); background: #fff; color: var(--rep-mut);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.rep-back:hover { color: var(--rep-ink); border-color: #D8CDB8; }

.rep-pdf {
  border: 0; border-radius: 999px; padding: 7px 16px;
  background: var(--rep-acc); color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.rep-pdf:hover { background: #E8431C; }

.rep-pages { display: flex; flex-direction: column; gap: 18px; align-items: center; }
/* Обёртка нужна только как система координат для слоя ссылок: сама страница
   как была картинкой во всю ширину, так и осталась. */
.rep-page__wrap { position: relative; display: block; width: 100%; max-width: 900px; }
/* Прямоугольник ссылки поверх картинки. Прозрачный: подсветка появляется под
   курсором и по табу, чтобы слой не рябил поверх вёрстки. */
.rep-page__link {
  position: absolute; display: block; border-radius: 3px;
  background: transparent; transition: background .12s ease;
}
.rep-page__link:hover, .rep-page__link:focus-visible {
  background: rgba(108, 79, 216, .22); outline: none;
}
.rep-page {
  display: block; width: 100%; max-width: 900px; height: auto;
  border: 1px solid var(--rep-line); border-radius: 10px;
  background: #211B3E; /* тёмная подложка страницы — пока картинка не пришла */
  box-shadow: 0 1px 2px rgba(28,27,24,.06), 0 8px 24px rgba(28,27,24,.08);
  /* A4: держим место под страницу заранее, иначе ленивая загрузка дёргает
     скролл под пальцем читателя. */
  aspect-ratio: 1 / 1.414;
  object-fit: contain;
}

.rep-tail { display: flex; justify-content: center; padding: 24px 0 8px; }

.rep-missing {
  margin-bottom: 20px; padding: 12px 16px; border-radius: 10px;
  background: #FDF1E8; border: 1px solid #F3D9C4; color: #8A5A2B; font-size: 13.5px;
}

/* ── Отзыв на выпуск ──────────────────────────────────────────────────────── */
/* Стоит после последней страницы: спрашиваем того, кто долистал. Ширина — как
   у страницы отчёта, чтобы блок не выглядел приклеенным сбоку. */
.rep-fb {
  width: 100%; max-width: 900px; margin: 26px auto 0;
  padding: 20px 22px 22px;
  background: var(--rep-card); border: 1px solid var(--rep-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28,27,24,.05), 0 4px 14px rgba(28,27,24,.05);
}
.rep-fb__q { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

.rep-fb__stars { display: flex; gap: 2px; margin: 10px 0 2px; }
.rep-star {
  border: 0; background: none; cursor: pointer; padding: 2px 3px;
  font-size: 30px; line-height: 1; color: #E3DACA; transition: color .12s, transform .12s;
}
.rep-star:hover { color: #F0A500; transform: scale(1.08); }
.rep-star.is-on { color: #F0A500; }

.rep-fb__label { display: block; margin: 16px 0 7px; font-size: 14px; color: var(--rep-mut); }
.rep-fb__text {
  display: block; width: 100%; resize: vertical;
  border: 1px solid var(--rep-line); border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: 14.5px; color: var(--rep-ink); background: #FEFCF9;
}
.rep-fb__text:focus { outline: none; border-color: var(--rep-acc); background: #fff; }

.rep-fb__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rep-fb__send {
  border: 0; border-radius: 999px; padding: 8px 20px;
  background: var(--rep-acc); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.rep-fb__send:hover { background: #E8431C; }
.rep-fb__send:disabled { background: var(--rep-soft); cursor: default; }
/* Отзыв не анонимный, и человек должен знать это до отправки, а не после. */
.rep-fb__note { font-size: 12.5px; color: var(--rep-soft); }

.rep-fb__ok { margin-top: 12px; font-size: 14px; color: #2F855A; }
.rep-fb__err { margin-top: 12px; font-size: 14px; color: #C53030; }

@media (max-width: 620px) {
  .rep-fb { padding: 16px 14px 18px; border-radius: 14px; }
  .rep-fb__q { font-size: 16px; }
  .rep-star { font-size: 34px; } /* палец, а не курсор */
}