/* Одна светлая тема. Helvetica Neue Light — как в макете (finmodel_screens_v2).
   Тёмная тема отклонена (описание, раздел 10). Зелёное — тишина: у «хорошо»
   нет ни заливки, ни рамки, только серый текст. Кричит только то, что требует
   действия. */
:root{
  --текст:#1a1d21; --тихий:#6b7280; --линия:#e3e6ea; --фон:#fbfbfc;
  --плохо:#b3261e; --жёлто:#8a6100; --хорошо:#4b5563; --акцент:#1f4e79;
}
*{box-sizing:border-box}
body{margin:0;background:var(--фон);color:var(--текст);
  font:300 15px/1.55 "Helvetica Neue","Helvetica",Arial,sans-serif}
main{max-width:920px;margin:0 auto;padding:28px 20px 64px}
h1{font-size:26px;font-weight:300;margin:0 0 18px}
h2{font-size:20px;font-weight:400;margin:0 0 6px}
h3{font-size:14px;font-weight:500;margin:22px 0 6px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--тихий)}
a{color:var(--акцент);text-decoration:none} a:hover{text-decoration:underline}
code{font-family:ui-monospace,Menlo,monospace;font-size:12px}

.шапка{display:flex;gap:20px;align-items:center;padding:12px 20px;
  border-bottom:1px solid var(--линия);background:#fff}
.марка{font-weight:400;color:var(--текст)}
.шапка nav{display:flex;gap:16px;margin-left:8px}
.кто{margin-left:auto;color:var(--тихий);font-size:13px;display:flex;gap:10px;align-items:center}
.ссылка{background:none;border:0;color:var(--акцент);cursor:pointer;font:inherit;padding:0}

/* Линейка версий сжата до строки, но видна всегда (правило макета). */
.линейка{display:flex;gap:8px;overflow-x:auto;padding:8px 20px;background:#fff;
  border-bottom:1px solid var(--линия);font-size:12px;color:var(--тихий)}
.веха{white-space:nowrap} .веха.текущая{color:var(--текст);font-weight:500}

.метрики{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:18px 0}
.метрика{background:#fff;border:1px solid var(--линия);border-radius:8px;padding:14px 16px}
.метрика .подпись{font-size:12px;color:var(--тихий)}
.метрика .значение{font-size:25px;font-weight:300;margin:4px 0 2px}
.метрика .дельта{font-size:12px;color:var(--тихий)}

.карточка{background:#fff;border:1px solid var(--линия);border-radius:8px;
  padding:18px 20px;margin:16px 0}
.карточка label{display:block;margin-bottom:12px;font-size:13px;color:var(--тихий)}
.карточка input{display:block;width:100%;margin-top:5px;padding:9px 11px;font:inherit;
  border:1px solid var(--линия);border-radius:6px;background:#fff}

/* Одна главная кнопка на экран. */
.главная{background:var(--акцент);color:#fff;border:0;border-radius:6px;
  padding:11px 22px;font:inherit;cursor:pointer}
.вторая{display:inline-block;background:#fff;color:var(--акцент);
  border:1px solid var(--линия);border-radius:6px;padding:9px 16px;font:inherit;cursor:pointer}
.вторая[disabled]{color:var(--тихий);cursor:not-allowed}
.готово{font-size:18px;color:var(--хорошо);margin-top:8px}
.прогресс{background:#fff;border:1px solid var(--линия);border-left:3px solid var(--акцент);
  border-radius:6px;padding:12px 16px;margin-top:8px}

.таблица{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.таблица th,.таблица td{border-bottom:1px solid var(--линия);padding:9px 10px;text-align:left}
.таблица th{font-weight:500;color:var(--тихий);font-size:12px}
.число{text-align:right;font-variant-numeric:tabular-nums}

.тихо{color:var(--тихий);font-size:13px}
.плохо{color:var(--плохо)}
.жёлто{color:var(--жёлто)}
.хорошо{color:var(--хорошо)}
.герой{font-size:20px;margin:6px 0 2px}
.заглушка{color:var(--тихий);font-size:13px;border:1px dashed var(--линия);
  border-radius:6px;padding:9px 12px;display:inline-block}
.группа{background:#fff;border:1px solid var(--линия);border-radius:8px;
  padding:10px 14px;margin:8px 0}
.группа summary{cursor:pointer;font-size:14px}
.группа summary span{margin-left:8px;font-size:13px}
.строка{padding:7px 0;border-top:1px solid var(--линия);font-size:14px}
.потоки{margin:4px 0;padding-left:18px;font-size:14px}
.фильтр{margin-bottom:14px;display:flex;gap:10px;align-items:end}
.фильтр label{font-size:13px;color:var(--тихий)}
.фильтр input{padding:8px 10px;font:inherit;border:1px solid var(--линия);border-radius:6px}
.проверки-строка,.изменения{margin:10px 0;font-size:14px}
.роли{display:inline-flex;gap:8px;align-items:center}
.роли b{font-weight:500;color:var(--текст)}
.две-колонки{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.слева{background:#fff;border:1px solid var(--линия);border-radius:8px;padding:8px 0}
.раздел-группы{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--тихий);padding:10px 14px 4px}
.группа-строка{display:flex;justify-content:space-between;gap:8px;padding:6px 14px;
  color:var(--текст);font-size:13px}
.группа-строка:hover{background:#f4f6f8;text-decoration:none}
.группа-строка.текущая{background:#eef2f6;font-weight:500}
.точка{color:var(--акцент)} .жёлтая-точка{color:var(--жёлто)}
.правка summary{cursor:pointer;font-size:13px;color:var(--акцент);list-style:none}
.правка form{margin-top:8px;padding:10px;background:#f9fafb;border-radius:6px;min-width:280px}
.правка .отмена{background:none;padding:4px 0}
.варианты-решения{background:#fffbf0;border:1px solid #f0e2c0;border-radius:6px;
  padding:12px 16px;margin-top:12px;font-size:14px}
.варианты-решения ol{margin:8px 0;padding-left:20px}
select{display:block;width:100%;margin-top:5px;padding:9px 11px;font:inherit;
  border:1px solid var(--линия);border-radius:6px;background:#fff}
pre.плохо{white-space:pre-wrap;font:inherit}
/* ── Мост причин (П4) ── */
.мост{margin:20px 0}
.мост.устаревший{opacity:.55}
.мост-полотно{display:flex;align-items:flex-end;gap:10px;padding:14px 6px;
  background:#fff;border:1px solid var(--линия);border-radius:8px;overflow-x:auto}
.зона-подпись{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;
  color:var(--тихий);text-transform:uppercase;letter-spacing:.06em;align-self:stretch;
  border-left:1px dashed var(--линия);padding:4px 2px}
.столбик{display:flex;flex-direction:column;align-items:center;min-width:86px}
.столбик summary{display:flex;flex-direction:column;align-items:center;cursor:pointer;
  list-style:none;gap:6px}
.полоса{width:44px;border-radius:4px 4px 0 0;display:block}
.полоса.вверх{background:#2e7d32}
.полоса.вниз{background:var(--плохо)}
/* цвет = ЗНАК эффекта, не сторона моста — правило макета */
.дельта-число{font-variant-numeric:tabular-nums;font-size:13px}
.группа-имя{font-size:12px;color:var(--тихий);text-align:center}
.столбик .ключи{margin-top:8px;font-size:12px;max-width:180px}
.столбик.итоговый{border-left:1px solid var(--линия);padding-left:10px}
.в-строку{display:inline}
/* ── Телефон (4.6): ≤420px — четыре числа 2×2, мост из четырёх столбиков ── */
.мост-телефон{display:none}
@media (max-width: 420px){
  .мост{display:none}
  .мост-телефон{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
  .мост-телефон .стлб{background:#fff;border:1px solid var(--линия);border-radius:8px;
    padding:12px}
  .мост-телефон summary{list-style:none;cursor:pointer}
  .мост-телефон .дельта-число{font-size:19px;display:block}
  .метрики{grid-template-columns:1fr 1fr}
  .шапка nav{display:none}
}
.телефон-заглушка{display:none}
@media (max-width: 420px){
  .телефон-заглушка{display:block;color:var(--тихий);padding:20px 0}
  .не-для-телефона{display:none}
}

/* ── ТОРНАДО СТРЕСС-ТЕСТА (П6, 6.1) ─────────────────────────────────────
   ЦВЕТ ПО ЗНАКУ ЭФФЕКТА, НЕ ПО СТОРОНЕ. «Минус 10 %» у себестоимости
   улучшает живые деньги, у цены — ухудшает; красить левую колонку красным
   значило бы врать в половине строк. Поэтому класс ставится по знаку самого
   числа, а не по тому, в какую колонку оно попало.
   Знак несёт не только цвет: перед числом всегда стоит «+» или «−». Цвет —
   второй признак, а не единственный (то же правило, что у Д-6.4: признак,
   не зависящий от цвета вовсе). */
.торнадо td{white-space:nowrap;font-variant-numeric:tabular-nums}
.торнадо .плохо-число{color:var(--плохо)}
.торнадо .хорошо-число{color:var(--акцент)}

/* ── «ЧТО ЕСЛИ» (6.2) ────────────────────────────────────────────────────
   Пометка «оценка по сетке» стоит ВСЕГДА, а не только когда результат
   выглядит подозрительным: сетка знает по три точки на переменную и о
   кривизне не знает ничего. */
.чтоесли{background:#fff;border:1px solid var(--линия);border-radius:8px;
  padding:14px 16px;margin-bottom:14px}
.чтоесли .ползунок{display:grid;grid-template-columns:1fr 190px 84px;
  gap:10px;align-items:center;margin-bottom:8px;font-size:13px}
.чтоесли input[type=range]{width:100%}
.чтоесли .оценка{font-size:26px;font-weight:300;margin:10px 0 2px}
.чтоесли .подстрочник{font-size:12px;color:var(--жёлто)}
.чтоесли .точно{font-size:13px;color:var(--тихий);margin-top:6px}

@media (max-width: 420px){
  /* «Что если» на телефоне (6.2): ползунок во всю ширину, подпись и значение
     над ним. Трёхколоночная сетка на 420 px схлопывает ползунок до
     нескольких пикселей — двигать его пальцем становится нельзя, и экран
     формально есть, а инструмента нет. */
  .чтоесли .ползунок{grid-template-columns:1fr auto;gap:4px 10px}
  .чтоесли .ползунок input[type=range]{grid-column:1 / -1;height:32px}
  .чтоесли .оценка{font-size:30px}
}