/* СОБРАНО scripts/build_flows.py ИЗ design/flows.html — РУКАМИ НЕ ПРАВИТЬ.
   Палитра не переопределяется: семантические цвета — псевдонимы спектра
   из style.css, поэтому тёмная тема переключается вместе с сайтом. */
.flows{
  --buy:var(--s4); --stock:var(--s5); --unknown:var(--s3);
  --exit:var(--s1); --fee:var(--s6);
  /* Промежутки между блоками: на странице-артефакте их давал её собственный
     .wrap, а общий .wrap сайта отвечает только за ширину. Без этого абзацы
     под схемой слипаются, и видно это только рендером. */
  display:flex; flex-direction:column; gap:30px; padding:26px 0 10px;
}
.flows > section{padding:26px 0 0}
.wrap.wide{max-width:1520px}
.flows .meta{font-size:13px; color:var(--mute)}
.flows .lede{max-width:66ch}

/* легенда */
.flows .legend{display:flex; flex-wrap:wrap; gap:10px 22px; padding:15px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-size:13.5px}
.flows .legend i{display:inline-block; width:26px; height:3px; vertical-align:middle;
  margin-right:8px; background:var(--c)}
.flows .legend .dash{height:0; border-top:3px dashed var(--c); background:none}

/* поле схемы */
.flows .stage{position:relative; padding:4px 46px 62px 0}
.flows .cols{position:relative; display:grid; gap:16px; min-width:0; grid-template-columns:1fr;
  align-items:start}
/* Порог 1120, а не 900: на шести колонках ниже этой ширины карточка
   получает меньше 90 px под текст, и подписи начинают распирать рамку. */
@media (min-width:1320px){
.flows .cols{grid-template-columns:repeat(var(--n,4),1fr); gap:20px 40px}
  /* Колонки равные. minmax(0,1fr), а не голая доля: голая — это
     minmax(auto,1fr), и содержимое карточки растягивает свою колонку,
     после чего равенство ширин нарушается. */
  #stage-main .cols{grid-template-columns:repeat(var(--n,4), minmax(0,1fr))}
.flows .cols > *{grid-column:var(--col); grid-row:var(--row)}
}
.flows .coltitle{font-family:"Unbounded",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.07em; color:var(--mute); align-self:end}
@media (max-width:1319px){.flows .coltitle{display:none}}
/* Слой линий выше фона контейнера, но ниже карточек. Раньше у .box был
   z-index:2, и последние 28 px входящей стрелки вместе с наконечником
   прятались за его фоном — связь читалась как обрыв на границе рамки. */
.flows svg.edges{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:1}

/* узлы */
.flows .node{display:block; background:var(--paper);
  border:1px solid var(--rule); border-left:3px solid var(--c,var(--rule));
  padding:11px 13px; position:relative; z-index:2}
/* Кликабелен только адрес. Подчёркивание и наведение — на нём, чтобы было
   видно, что именно нажимается; сама карточка ссылкой больше не является. */
.flows .node .ad a, .flows .box > .hd .ad a{color:inherit; text-decoration:underline;
  text-decoration-color:var(--rule); text-underline-offset:2px}
.flows .node .ad a:hover, .flows .box > .hd .ad a:hover{color:var(--ink);
  text-decoration-color:var(--c,var(--ink))}
.flows .node .nm{font-family:"Unbounded",sans-serif; font-weight:600; font-size:13.5px;
  color:var(--ink); display:block; line-height:1.25; overflow-wrap:anywhere}
.flows .node .ad{display:block; font-size:11.5px; color:var(--mute); margin-top:4px; word-break:break-all;
  font-variant-numeric:tabular-nums}
/* Пояснение перед адресом. Нужно там, где адрес делят две карточки: без него
   переход в обозреватель читается как переход не в тот узел. */
.flows .node .ad em{display:block; font-style:normal; word-break:normal; opacity:.85}
.flows .node .vv{font-family:"Unbounded",sans-serif; font-weight:700; font-size:15px;
  color:var(--ink); margin-top:6px; display:block; font-variant-numeric:tabular-nums}
.flows .node .vlab{display:block; font-size:11px; color:var(--mute); margin-top:1px}
/* Единица мельче и спокойнее числа: крупным должно читаться значение,
   а «RNBW» повторяется на каждой карточке и внимания не требует. */
.flows .vv .num{white-space:nowrap}
.flows .vv .un{font-size:.55em; font-weight:400; color:var(--mute); margin-left:.4em;
  letter-spacing:.03em; white-space:nowrap}
.flows .node .nt{display:block; font-size:12.5px; margin-top:5px; color:var(--body);
  overflow-wrap:anywhere}
.flows .node.plain{border-left-color:var(--rule); cursor:default}
/* Контейнер: один адрес, внутри которого лежит несколько корзин учёта.
   Переводы между корзинами — не переводы, а перекладывание внутри контракта,
   поэтому они и нарисованы внутри рамки, а не между отдельными карточками. */
.flows .box{border:1px solid var(--rule); border-left:3px solid var(--ink);
  background:var(--soft); padding:11px 8px 9px; position:relative;
  display:flex; flex-direction:column; gap:9px}
.flows .box > .hd{display:block}
.flows .box > .hd .nm{font-family:"Unbounded",sans-serif; font-weight:600; font-size:13.5px;
  color:var(--ink); display:block; line-height:1.25}
.flows .box > .hd .ad{display:block; font-size:11.5px; color:var(--mute); margin-top:4px;
  word-break:break-all; font-variant-numeric:tabular-nums}
.flows .box > .hd .vv{font-family:"Unbounded",sans-serif; font-weight:700; font-size:15px;
  color:var(--ink); margin-top:6px; display:block; font-variant-numeric:tabular-nums}
.flows .box > .hd .vlab{display:block; font-size:11px; color:var(--mute); margin-top:1px}
.flows .box .inbox{position:relative; display:flex; flex-direction:column; gap:50px;
  padding:4px 22px 0 8px; border-top:1px dashed var(--rule)}
/* Отступ слева нужен не для красоты: без него корзины упираются в рамку
   контейнера, входящая стрелка обрывается ровно на границе и читается
   как «в контейнер вообще», а не «в эту корзину». С отступом наконечник
   заходит внутрь рамки и однозначно упирается в карточку. */
.flows .box .inbox > .cap{font-size:11px; color:var(--mute); margin-bottom:-18px}
.flows .node.in{padding:8px 8px; background:var(--paper)}
/* Узел ветвления невидим: линия с Safe просто раздваивается внутри рамки.
   Нулевой размер нужен, чтобы точка ветвления имела координаты для маршрута,
   но ничего не рисовала. Ширина веток считается от сумм, поэтому они тоньше
   входящей линии сами собой. */
.flows .node.entry{position:absolute; left:12px; width:0; height:0;
  padding:0; border:0; background:none}
.flows .node.entry .nm{display:none}
.flows .node.in .nm{font-size:12px}
.flows .node.in .vv{font-size:13px; margin-top:3px}
@media (max-width:1520px){.flows .node.in .vv{font-size:12px}}
.flows .node.in .nt{font-size:11.5px; margin-top:3px; color:var(--mute)}
/* последнее движение по адресу: даёт понять, ветка ещё работает или замерла */
/* Сумма перевода живёт в карточке отправителя, а не на стрелке: в зазоре 92 px
   с четырьмя вертикалями подпись некуда поставить, чтобы она не легла на линию. */
/* Оборот — вспомогательная величина, поэтому мелко и без выделения.
   Крупным идёт только баланс: он отвечает на вопрос «сколько там лежит». */
.flows .node .sent{display:block; margin-top:6px; font-size:11.5px; color:var(--mute);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.flows .node .mv{display:flex; flex-direction:column; gap:2px; margin-top:8px;
  padding-top:7px; border-top:1px dashed var(--rule); font-size:11.5px; color:var(--mute)}
/* Строка «получал — дата». Раньше подпись и дата были две несжимаемые части
   одного флекса, и в узкой колонке они распирали карточку: текст выходил
   за рамку на 12–71 px в зависимости от ширины окна. Теперь дата переносится
   на свою строку и прижимается вправо, а сама дата остаётся неразрывной. */
.flows .node .mv span{display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:1px 10px}
.flows .node .mv i{font-style:normal; min-width:0}
.flows .node .mv b{font-weight:600; color:var(--body); font-variant-numeric:tabular-nums;
  text-align:right; margin-left:auto; min-width:0}
/* Неразрывной оставляем только саму дату: «сегодня»/«219 дн.» при нехватке
   места уезжает на свою строку, а не распирает карточку. */
.flows .node .mv b .dt{white-space:nowrap}
.flows .node .mv i{overflow-wrap:anywhere}
.flows .node .mv s{text-decoration:none; font-weight:400; color:var(--mute); font-size:10.5px}
.flows .node .mv .stale b{color:var(--unknown)}
.flows .node .mv .stale s{color:var(--unknown); opacity:.8}
.flows .dim{opacity:.24}
.flows .edge{fill:none; stroke-linecap:round; stroke-linejoin:round}
.flows .edge.dim{opacity:.12}

/* вторая петля */
.flows .loop{display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule)}
@media (min-width:760px){.flows .loop{grid-template-columns:repeat(4,1fr)}}
.flows .loop > div{background:var(--paper); padding:16px 18px; display:flex; flex-direction:column; gap:5px}
.flows .loop b{font-family:"Unbounded",sans-serif; font-weight:700; font-size:17px; color:var(--ink);
  font-variant-numeric:tabular-nums}
.flows .loop span{font-size:14px}
.flows .loop em{font-style:normal; font-size:12px; color:var(--mute)}

/* таблица адресов: адрес показан целиком, поэтому колонке нужна вся ширина */
.flows .scroll{overflow-x:auto}
.flows table.addrs{width:100%; border-collapse:collapse; font-size:14px}
.flows table.addrs th{text-align:left; font-family:"Unbounded",sans-serif; font-size:11px;
  font-weight:600; letter-spacing:.06em; color:var(--mute); padding:0 16px 8px 0;
  border-bottom:1px solid var(--rule); white-space:nowrap}
.flows table.addrs td{padding:11px 16px 11px 0; border-bottom:1px solid var(--rule); vertical-align:baseline}
.flows table.addrs td i{display:inline-block; width:9px; height:9px; background:var(--c);
  margin-right:9px; flex:none}
.flows table.addrs .adr{font-size:12.5px}
/* Адрес не переносим: разорванный по строкам hex нельзя ни сверить глазом,
   ни выделить одним движением. Таблица при нехватке ширины прокручивается
   вбок — для этого она и обёрнута в .scroll. */
.flows table.addrs .adr a{color:var(--mute); text-decoration-color:var(--rule); white-space:nowrap}
.flows table.addrs .adr{white-space:nowrap}
.flows table.addrs .adr a:hover{color:var(--ink)}
.flows table.addrs .num{text-align:right; font-family:"Unbounded",sans-serif; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.flows table.addrs th.num{text-align:right}
.flows table.addrs .turn{font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums}
.flows .note{font-size:14px; color:var(--mute); max-width:74ch}
.flows .note b{color:var(--ink)}
  display:flex; flex-direction:column; gap:8px}