/*
 * Общие детали интерфейса. Задача 07, часть Д1.
 *
 * Кнопка (основная и второстепенная), поле ввода с подписью
 * и ошибкой, флажок, карточка, сообщение (ошибка, успех, сведения),
 * пометка состояния. Из них собираются все экраны — копий в экранах
 * нет.
 *
 * Разметку этих деталей строят веб-компоненты **без теневого
 * дерева** (`scripts/components.js`): разметка остаётся светлой,
 * поэтому глобальные стили и токены действуют на неё напрямую,
 * а не через дублирование стилей внутри каждого компонента.
 *
 * Ни одного значения цвета или размера: всё из `tokens.css`.
 */

/* --- Кнопка -------------------------------------------------- */

/*
 * Надпись обычного начертания, не жирная, — так на макете:
 * крупная оранжевая плашка со спокойной надписью и стрелкой
 * справа. Скругление крупное.
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-size);
  padding: var(--space-3) var(--space-5);
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-large);
  font-family: inherit;
  font-size: var(--size-text);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) linear;
}

.button__arrow {
  font-size: var(--size-subtitle);
  line-height: var(--leading-tight);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover {
  background: var(--color-accent-strong);
}

.button--secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}

.button--secondary:hover {
  border-color: var(--color-ink);
}

.button--wide {
  width: 100%;
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* --- Ссылка со стрелкой --------------------------------------- */

/*
 * Общая деталь, а не разовая вёрстка стартовой: тем же видом
 * сделаны «Как стать автором» на первом экране и «Войти» в шапке,
 * и им же будут делаться такие же ссылки на будущих экранах.
 *
 * Слова, сразу за ними стрелка, под ними — тонкая серая линия
 * ровно на длину текста со стрелкой (`inline-flex` даёт ширину
 * по содержимому, `border-bottom` — саму линию). Рамки нет.
 *
 * Отступы сверху и снизу нужны пальцу: без них по ссылке трудно
 * попасть на телефоне, а линия при этом остаётся у самого текста.
 */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  color: var(--color-ink);
  font-size: var(--size-text);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.link__arrow {
  font-size: var(--size-subtitle);
  line-height: var(--leading-tight);
}

.link--line {
  border-bottom: var(--line-width) solid var(--color-line-strong);
}

.link:hover {
  color: var(--color-accent);
}

.link--line:hover {
  border-bottom-color: var(--color-accent);
}

/* Маленькая — для шапки: там она рядом с логотипом. */
.link--small {
  gap: var(--space-2);
  font-size: var(--size-small);
}

.link--small .link__arrow {
  font-size: var(--size-text);
}

/* --- Поле ввода ---------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}

.field__input {
  width: 100%;
  min-height: var(--tap-size);
  padding: var(--space-3) var(--space-4);
  border: var(--line-width) solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--size-text);
}

.field__input::placeholder {
  color: var(--color-ink-faint);
}

.field__hint {
  font-size: var(--size-small);
  color: var(--color-ink-faint);
}

.field__error {
  display: flex;
  gap: var(--space-2);
  font-size: var(--size-small);
  color: var(--color-danger);
}

.field--wrong .field__input {
  border-color: var(--color-danger);
}

/* --- Флажок --------------------------------------------------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-size);
  cursor: pointer;
}

.check__box {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.check__text {
  font-size: var(--size-text);
}

/* --- Карточка ------------------------------------------------- */

.card {
  display: block;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--line-width) solid var(--color-line);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
}

.card--quiet {
  background: var(--color-muted-surface);
  border-color: transparent;
  box-shadow: none;
}

/* Прокручиваемый блок с полным текстом документа (экран принятия). */
.document {
  max-height: var(--document-height);
  overflow-y: auto;
  padding: var(--space-4);
  border: var(--line-width) solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--size-small);
  white-space: pre-wrap;
}

/* --- Сообщение ------------------------------------------------ */

.message {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--size-text);
}

.message__sign {
  flex: 0 0 auto;
  font-weight: var(--weight-bold);
}

.message--error {
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

.message--success {
  background: var(--color-success-surface);
  color: var(--color-success);
}

.message--info {
  background: var(--color-info-surface);
  color: var(--color-info);
}

/* --- Пометка состояния ---------------------------------------- */

/*
 * Цвет и знак всегда вместе, никогда один цвет (часть Д1):
 * состояния материала понадобятся в задачах 08–09, и различать их
 * по одному цвету не должны ни при дальтонизме, ни на чёрно-белой
 * печати, ни на выцветшем экране.
 */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-round);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  background: var(--color-muted-surface);
  color: var(--color-ink-soft);
}

.status__sign {
  font-weight: var(--weight-bold);
}

.status--ok {
  background: var(--color-success-surface);
  color: var(--color-success);
}

.status--wait {
  background: var(--color-info-surface);
  color: var(--color-info);
}

.status--stop {
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

/* Задача 11, Г7: «Доработка» у автора выделена цветом и знаком «!». */
.status--attention {
  background: var(--color-attention-surface);
  color: var(--color-attention);
}

/* --- Список сведений ------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.facts__key {
  font-size: var(--size-small);
  color: var(--color-ink-faint);
}

.facts__value {
  font-size: var(--size-text);
}

@media (min-width: 30rem) {
  .facts {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-5);
    align-items: baseline;
  }
}

/* === Задача 11з ================================================= */

/*
 * Г1–Г2. Второстепенная кнопка — серая, как «← Редакция» (`muted`);
 * «Отклонить» — белая, тёмно-оранжевый текст, бледно-оранжевая рамка,
 * без заливки (`reject`). Красного у кнопок нет.
 */
.button--muted {
  border-color: var(--button-secondary-line);
  background: var(--button-secondary-surface);
  color: var(--button-secondary-ink);
}

.button--muted:hover {
  border-color: var(--button-secondary-ink);
}

.button--reject {
  border-color: var(--button-reject-line);
  background: var(--color-surface);
  color: var(--button-reject-ink);
}

.button--reject:hover {
  border-color: var(--button-reject-ink);
}

/* Е6. Глаз в поле пароля — справа внутри поля. */
.field__password {
  position: relative;
  display: block;
}

.field__password .field__input {
  box-sizing: border-box;
  width: 100%;
  padding-right: var(--password-eye-size);
}

.field__eye {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--password-eye-size);
  height: var(--password-eye-size);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  cursor: pointer;
  transform: translateY(-50%);
}

.field__eye:hover {
  color: var(--color-ink);
}

.field__eye .icon {
  width: var(--tool-icon-size);
  height: var(--tool-icon-size);
}

/*
 * З. «Страница не загрузилась — обновите её» и серая «Обновить
 * страницу» — при загрузке, когда свои повторы не помогли.
 */
.load-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--load-failed-surface);
}

.load-failed__text {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  color: var(--load-failed-ink);
}

.load-failed__sign {
  font-weight: var(--weight-bold);
}

.load-failed__reload {
  min-height: var(--topbar-button-height);
  padding: 0 var(--space-4);
  border: var(--line-width) solid var(--button-secondary-line);
  border-radius: var(--radius-small);
  background: var(--button-secondary-surface);
  color: var(--button-secondary-ink);
  font: inherit;
  font-size: var(--size-small);
  cursor: pointer;
}