/* Фирменный стиль SMM Конвейера, снят с сайта victoryagency.ru.
   Чёрный фон, хайрлайновая сетка, белые прописные заголовки Magistral,
   текст Gilroy, нулевые скругления. Один файл на анкету, доску и кабинет. */

@font-face { font-family: Gilroy; src: url(Gilroy-Regular.woff2) format('woff2');
             font-weight: 400; font-display: swap }
@font-face { font-family: Gilroy; src: url(Gilroy-Medium.woff2) format('woff2');
             font-weight: 500; font-display: swap }
@font-face { font-family: Magistral; src: url(Magistral-Medium.woff2) format('woff2');
             font-weight: 500; font-display: swap }

:root {
  --чёрный:#000;      /* фон страницы */
  --карта:#191919;    /* карточка */
  --глубина:#101010;  /* поле ввода, вдавленный блок */
  --линия:#393939;    /* хайрлайн */
  --линия2:#282828;
  --бел:#fff;
  --серый:#a1a1a1;    /* основной текст */
  --тише:#8a8a8a;     /* подписи */
  --призрак:#767676;  /* плейсхолдер */
  --ок:#7bdcb5;
  --стоп:#ff4d4d;
  --вним:#fcb900;
  --загл: Magistral, "Arial Narrow", Arial, sans-serif;
  --текст: Gilroy, Arial, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box }

body {
  margin: 0; background: var(--чёрный); color: var(--серый);
  font: 400 16px/1.6 var(--текст);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--бел); text-decoration: none; border-bottom: 1px solid var(--линия) }
a:hover { border-bottom-color: var(--бел) }

h1, h2, h3, .загл {
  font-family: var(--загл); font-weight: 500; color: var(--бел);
  text-transform: uppercase; letter-spacing: .03em; margin: 0;
}
h1 { font-size: 45px; line-height: 1.08 }
h2 { font-size: 26px; line-height: 1.15 }
h3 { font-size: 18px; line-height: 1.2 }
@media (max-width: 700px) { h1 { font-size: 30px } h2 { font-size: 21px } }

/* мелкая прописная надпись над заголовком, как на сайте */
.надзаголовок {
  font-family: var(--загл); font-size: 11px; text-transform: uppercase;
  letter-spacing: .2em; color: var(--тише); margin: 0 0 12px;
}

.тихо { color: var(--тише); font-size: 14px }
.подпись { color: var(--тише); font-size: 13.5px; margin: 8px 0 0; line-height: 1.5 }

/* ------------------------------------------------------------ каркас --- */
.шапка {
  position: sticky; top: 0; z-index: 9; background: var(--чёрный);
  border-bottom: 1px solid var(--линия);
}
.шапка .нутро {
  max-width: 1120px; margin: 0 auto; padding: 0 28px; height: 64px;
  display: flex; align-items: center; gap: 22px;
}
.знак {
  font-family: var(--загл); font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--бел); border: 0;
}
.знак:hover { border: 0 }
.шапка .раздел {
  font-family: var(--загл); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--тише);
  padding-left: 22px; border-left: 1px solid var(--линия); height: 64px;
  display: flex; align-items: center;
}
.шапка .справа { margin-left: auto; display: flex; align-items: center; gap: 18px }

.обёртка { max-width: 1120px; margin: 0 auto; padding: 46px 28px 90px }
.узкая { max-width: 820px }
@media (max-width: 700px) {
  .шапка .нутро, .обёртка { padding-left: 18px; padding-right: 18px }
  .шапка .раздел { display: none }
}

/* --------------------------------------------------------- карточки --- */
.карта {
  background: var(--карта); border: 1px solid var(--линия2);
  padding: 28px 30px; margin-bottom: 18px; position: relative; overflow: hidden;
}
/* фирменный световой клин в углу карточки */
.карта.луч::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 78% at 88% 32%, rgba(255,255,255,.13), transparent);
}
.карта > * { position: relative; z-index: 1 }
@media (max-width: 700px) { .карта { padding: 20px 18px } }

/* сетка, где ячейки разделены хайрлайнами, как таймлайн на сайте */
.сетка {
  display: grid; gap: 1px; background: var(--линия2);
  border: 1px solid var(--линия2); margin-bottom: 18px;
}
.сетка > * { background: var(--карта); padding: 24px 26px; margin: 0 }
.сетка.три { grid-template-columns: repeat(3, 1fr) }
.сетка.четыре { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 860px) { .сетка.три, .сетка.четыре { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .сетка.три, .сетка.четыре { grid-template-columns: 1fr } }

.число { font-family: var(--загл); font-size: 34px; color: var(--бел); line-height: 1 }

/* ----------------------------------------------------------- кнопки --- */
button, .кнопка {
  font-family: var(--загл); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  background: transparent; color: var(--бел);
  border: 1px solid var(--бел); border-radius: 0;
  padding: 17px 32px; cursor: pointer; display: inline-block;
  transition: background .15s, color .15s;
}
button:hover:not(:disabled), .кнопка:hover { background: var(--бел); color: var(--чёрный) }
button:disabled { opacity: .4; cursor: default }
button.тихая, .кнопка.тихая { border-color: var(--линия); color: var(--серый) }
button.тихая:hover:not(:disabled) { background: var(--бел); color: var(--чёрный); border-color: var(--бел) }

/* ------------------------------------------------------------ поля --- */
label { display: block; font-family: var(--текст); font-weight: 500; color: var(--бел);
        font-size: 15px; margin: 26px 0 8px }
.обяз::after { content: " *"; color: var(--тише) }

input[type=text], input[type=password], textarea, select {
  font: 400 15px/1.5 var(--текст); width: 100%; padding: 14px 16px;
  background: var(--глубина); color: var(--бел);
  border: 1px solid var(--линия2); border-radius: 0;
}
textarea { min-height: 96px; resize: vertical }
input::placeholder, textarea::placeholder { color: var(--призрак) }
select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--серый) 50%),
                    linear-gradient(135deg, var(--серый) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat }
select option { background: var(--карта); color: var(--бел) }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--бел); background: #141414 }

/* ------------------------------------------------------------ метки --- */
.метки { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px }
.метка {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--загл); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1;
  padding: 8px 12px; border: 1px solid var(--линия); color: var(--серый);
  background: transparent; border-radius: 0;
}
.метка.ок   { border-color: #2f5f4c; color: var(--ок) }
.метка.стоп { border-color: #6b2323; color: var(--стоп) }
.метка.вним { border-color: #6b5417; color: var(--вним) }

/* Замечания критика — это целые предложения. Раньше они выводились такими же
   «чипами» с nowrap: строка в 170 знаков раздувала колонку сетки шире карточки,
   и overflow:hidden срезал вместе с замечанием текст поста. Поэтому отдельный
   компонент с переносом строк. */
.замечания { display: grid; gap: 9px; margin-top: 16px }
.замечание {
  font-size: 13.5px; line-height: 1.5; color: var(--серый);
  border-left: 2px solid var(--линия); padding: 5px 0 5px 14px;
  white-space: normal; min-width: 0;
}
.замечание.стоп { border-left-color: #8c2b2b; color: #ffb0b0 }
.замечание.вним { border-left-color: #8a6a1c; color: #e8c977 }

/* ---------------------------------------------------------- шкала --- */
.шкала { flex: 1; height: 2px; background: var(--линия2); overflow: hidden }
.шкала i { display: block; height: 100%; width: 0; background: var(--бел); transition: width .3s }
.счёт { font-family: var(--загл); font-size: 11px; letter-spacing: .16em;
        color: var(--тише); white-space: nowrap }

/* --------------------------------------------------------- таблица --- */
table { border-collapse: collapse; width: 100%; font-size: 14px }
th { font-family: var(--загл); font-size: 10.5px; letter-spacing: .14em;
     text-transform: uppercase; color: var(--тише); font-weight: 500 }
td, th { border-bottom: 1px solid var(--линия2); padding: 12px 10px;
         text-align: left; vertical-align: top }
tr:last-child td { border-bottom: 0 }
td b, th + td { color: var(--серый) }

/* ------------------------------------------------------- служебное --- */
.строка { display: flex; justify-content: space-between; gap: 16px;
          flex-wrap: wrap; align-items: center }
.текст { white-space: pre-wrap; color: var(--серый) }
.отметка { color: var(--ок); font-size: 13px }
hr { border: 0; border-top: 1px solid var(--линия2); margin: 26px 0 }

/* ------------------------------------------- доска приёмки --- */
.письмо {
  white-space: pre-wrap; background: var(--глубина); border: 1px solid var(--линия2);
  padding: 20px 22px; margin: 14px 0 18px; font-size: 14.5px; line-height: 1.65;
  color: var(--серый);
}
.пост { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px }
.пост > * { min-width: 0 }
.пост img { width: 190px; display: block; border: 1px solid var(--линия2) }
@media (max-width: 660px) { .пост { grid-template-columns: 1fr } .пост img { width: 100% } }
.карта a.вся { display: flex; justify-content: space-between; gap: 24px;
               align-items: center; color: inherit; border: 0 }
.карта a.вся:hover h2 { color: var(--серый) }
.карта a.вся > div:last-child { max-width: 52%; justify-content: flex-end }