/* Стили утилиты поверх библиотеки API Company. Файлы библиотеки не правим —
   тема задаётся переопределением токенов здесь. */

:root {
  /* Прямые углы, как у знака: ни одного скругления. */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0;

  /* Нейтральная холодная шкала вместо тёплой: белый и светло-серый без песочного. */
  --gray-25: #FAFAFB; --gray-50: #F5F6F7; --gray-100: #ECEEF0;
  --gray-200: #DDE0E3; --gray-300: #BCC1C7;

  /* Цвета знака: бордовый плашки — основная кнопка, графит «API» — второстепенные. */
  --brand-graphite: #2E3238;
  --brand-red: #B4151B;
  --brand-red-pressed: #8E1015;
  --accent: var(--brand-graphite);
  --accent-hover: var(--brand-red-pressed);
  --accent-soft: var(--gray-100);
  --accent-contrast: #FFFFFF;
  --focus-ring: var(--brand-graphite);

  /* Статус «ждёт повтора» остаётся янтарным текстом, но без тёплого фона. */
  --status-warn-soft: var(--gray-100);
}

[hidden] { display: none !important; }

.shell { background: var(--surface); }
.shell__main { gap: var(--space-6); }

/* ---------- кнопки в цветах знака ---------- */
/* Основная кнопка — бордовая; статусы «в работе» и прогресс остаются графитовыми через --accent. */
.btn { background: var(--brand-red); }
.btn:hover { background: var(--brand-red-pressed); }
.btn:active { background: var(--brand-graphite); }
.btn--secondary {
  background: transparent;
  color: var(--brand-graphite);
  border-color: var(--brand-graphite);
}
.btn--secondary:hover { background: var(--brand-graphite); color: var(--accent-contrast); }
.btn--secondary:active { background: var(--brand-red); border-color: var(--brand-red); color: var(--accent-contrast); }
.btn:disabled, .btn.is-disabled { opacity: 1; background: var(--gray-200); border-color: var(--gray-200); color: var(--text-muted); }
.btn--secondary.is-loading::after { border-color: var(--text-muted); border-top-color: transparent; }

.input:focus { border-color: var(--brand-graphite); outline: none; box-shadow: inset 0 0 0 1px var(--brand-graphite); }

/* ---------- первый экран ---------- */
.hero {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-7) 0 var(--space-4);
  text-align: center;
}
.hero__title {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--brand-graphite);
}
.hero__lead {
  margin: 0;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}
.hero__form {
  width: 100%;
  max-width: 640px;
  display: grid;
  gap: var(--space-4);
}
.hero__form .field { text-align: center; }
.hero__form .input { height: 48px; font-size: var(--text-md); text-align: center; }
.hero__form .actions { justify-content: center; }
.hero__form .btn { height: 44px; padding: 0 var(--space-6); font-size: var(--text-md); }
.hero__safe { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.hero .note { width: 100%; max-width: 640px; text-align: left; }

/* Плашка «не закрывайте вкладку» — графитовая, без тёплых оттенков. */
.keepopen {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-3) var(--space-4);
  background: var(--brand-graphite);
  color: var(--accent-contrast);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

.panel__title { margin: 0; }
.muted { margin: 0; color: var(--text-muted); }

.about {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
}

.files td:first-child {
  max-width: 0;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files td:not(:first-child) { white-space: nowrap; }
.files .badge { font-variant-numeric: tabular-nums; }

.report {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ---------- подвал: знак, подпись и контакт по центру, без линии ---------- */
.shell__foot.foot {
  border-top: 0;
  padding: var(--space-7) var(--space-6) var(--space-6);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
/* Мини-знак в монохроме, светло-серый. Файл знака не перекрашиваем —
   используем его как маску и заливаем токеном. 120 px — минимум для мини-версии. */
.foot__logo {
  display: block;
  width: 120px;
  aspect-ratio: 170.081 / 27.813;
  margin-bottom: var(--space-1);
  background: var(--text-faint);
  -webkit-mask: url(../img/mini-mono-graphite.svg) center / contain no-repeat;
  mask: url(../img/mini-mono-graphite.svg) center / contain no-repeat;
  transition: background var(--transition);
}
.foot__logo:hover { background: var(--text-muted); }
.foot__caption {
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.foot__links { display: flex; gap: var(--space-3); }
.foot__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text-faint);
  transition: color var(--transition);
}
.foot__icon:hover { color: var(--text-muted); }
.foot__icon svg { width: 20px; height: 20px; fill: currentColor; }