/* Оформление страницы демонстрации оценки.

   Дополнение к общему набору стилей (core/site.css), а не замена ему.
   Здесь только то, чего нет больше нигде на сайте: кривая результата,
   таблица гейтов допуска, оговорки о смещениях прогона.

   Токены не переопределяются: цвет кривой — тот же акцент, что у остального
   сайта. График, нарисованный другим красным, читается как чужая вставка.

   Внешних источников нет: политика содержимого (CSP) разрешает стили только
   со своего источника. */

/* ======================================================================
   Кривая результата
   ====================================================================== */

/* Рисуется на сервере в SVG: политика содержимого разрешает только
   собственный источник, а неинтерактивной кривой библиотека графиков
   не нужна. */

.curve {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--gap-4) 0 var(--gap-3);
}

.curve-line {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linejoin: round;
}

.curve-bar {
  fill: var(--red);
  opacity: 0.5;
}

.curve-bar-excluded {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.curve-zero {
  stroke: var(--ink-3);
  stroke-width: 1;
}

.curve-axis {
  stroke: var(--rule);
  stroke-width: 1;
}

.curve-tick,
.curve-value {
  fill: var(--ink-3);
  font-size: 11px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  margin: 0 0 var(--gap-3);
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.swatch {
  display: inline-block;
  width: 1rem;
  height: 0.65rem;
  border-radius: 2px;
}

.swatch-line {
  height: 0.2rem;
  background: var(--red);
}

.swatch-bar {
  background: var(--red);
  opacity: 0.5;
}

.swatch-excluded {
  border: 1px dashed var(--ink-3);
}

/* ======================================================================
   Оговорки о смещениях прогона
   ====================================================================== */

/* Стоят рядом с числами, а не в примечании мелким шрифтом: названная
   особенность данных — часть условий задачи, а не сноска к ним. */

.caveats {
  margin: var(--gap-3) 0;
  padding: var(--gap-3) var(--gap-4) var(--gap-3) 1.6rem;
  border-left: 3px solid var(--ink-3);
  background: var(--tint);
  font-size: 0.9rem;
}

.caveats li + li {
  margin-top: var(--gap-2);
}

/* ======================================================================
   Состояние заявки и гейты допуска
   ====================================================================== */

.state {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 var(--gap-2);
}

.state-evaluated {
  color: var(--pass);
}

.state-gate_failed,
.state-failed,
.state-expired {
  color: var(--fail);
}

.gates {
  width: 100%;
  border-collapse: collapse;
  margin: var(--gap-2) 0;
}

.gates th,
.gates td {
  padding: 0.4rem 0.75rem 0.4rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}

.gates th {
  color: var(--ink-3);
  font-weight: 600;
}

.pass {
  color: var(--pass);
  font-weight: 600;
}

.fail {
  color: var(--fail);
  font-weight: 600;
}

.detail {
  margin: var(--gap-1) 0 var(--gap-3);
}

.hint {
  color: var(--ink-3);
  font-size: 0.9rem;
}

.steps {
  margin: 0;
  padding-left: 1.2rem;
}

.steps li + li {
  margin-top: var(--gap-2);
}

.download {
  font-weight: 600;
}