/* Живая схема «путь поста». Состояния элементов задаёт flow.js атрибутом
   data-s, здесь только то, как каждое состояние выглядит. */
.flow{padding:40px 0 70px}
.flow-head{max-width:860px}
.flow-head h2{margin-top:8px}
.flow-lead{margin-top:14px;font-size:18px;color:var(--ink-2)}
.flow-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flow-note{margin-top:14px;font-size:12px;line-height:1.45;color:var(--muted);max-width:760px}
.flow q{quotes:none}

.fl{margin-top:30px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}

/* Шаги слева: активный подсвечен и заполняется, пройденные — с галочкой */
.fl-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative}
.fl-steps:before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--pale-2)}
.fl-steps button{position:relative;width:100%;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;text-align:left;padding:11px 12px 13px 10px;border:0;border-radius:16px;background:transparent;overflow:hidden;transition:background .3s}
.fl-steps button:hover{background:var(--pale)}
.fl-steps b{position:relative;z-index:1;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;border:2px solid var(--pale-2);color:var(--muted);font-size:14px;transition:all .3s}
.fl-steps strong{display:block;font-size:16px;line-height:1.25;color:var(--ink-2)}
.fl-steps small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.fl-steps button>i{position:absolute;left:58px;right:14px;bottom:5px;height:3px;border-radius:3px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0);opacity:0}
.fl-steps button[data-s=active]{background:var(--pale)}
.fl-steps button[data-s=active] b{background:var(--mint);border-color:var(--mint);color:var(--ink);box-shadow:0 0 0 6px #18d8a12a}
.fl-steps button[data-s=active] strong{color:var(--ink)}
.fl-steps button[data-s=active]>i{opacity:1}
.fl-steps button[data-s=done] b{background:var(--ink);border-color:var(--ink);color:#fff;font-size:0}
.fl-steps button[data-s=done] b:after{content:"✓";font-size:14px}

.fl-funnel{margin-top:22px;padding:18px;border-radius:20px;background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 22px 1fr;gap:8px;align-items:center}
.fl-funnel b{display:block;font-size:30px;letter-spacing:-.04em;line-height:1}
.fl-funnel span{display:block;font-size:12px;color:#a9cfc4;margin-top:5px}
.fl-funnel svg{width:22px;height:22px;stroke:var(--mint);stroke-width:2.2}
.fl-funnel small{grid-column:1/-1;font-size:11px;color:#a9cfc4;opacity:.8}

/* Экран справа */
.fl-screen{border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px #063d3814,0 4px 14px #063d380a;overflow:hidden}
.fl-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line);background:#fbfdfd}
.fl-bar>i{width:10px;height:10px;border-radius:50%;background:#e2ece9}
.fl-bar span{margin-left:10px;font-size:13px;font-weight:700;color:var(--ink-2);transition:opacity .25s}
.fl-bar span[data-s=swap]{opacity:0}
.fl-hint{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
.fl[data-paused] .fl-hint{color:var(--mint-dark);font-weight:700}
.fl-screen{cursor:default}
.fl-scenes{display:grid;background:linear-gradient(180deg,#f7fcfa,#fff 70%);transition:opacity .5s}
.fl[data-s=fade] .fl-scenes{opacity:0}
.sc{grid-area:1/1;min-height:480px;padding:26px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s,transform .6s,visibility 0s .6s}
.sc[data-s=on]{opacity:1;visibility:visible;transform:none;transition:opacity .6s .15s,transform .6s .15s}
.pill{display:inline-block;font-style:normal;font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px;background:var(--pale-2);color:var(--mint-dark)}

/* 1. Источники */
.sc-collect{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center;position:relative}
.src-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.src{position:relative;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px #063d380a;transition:transform .35s,border-color .35s,box-shadow .35s}
.src img,.src .ico{width:40px;height:40px;border-radius:12px}
.src b{font-size:14px;line-height:1.2}
.src em{font-style:normal;font-weight:700;font-size:13px;color:var(--mint-dark);font-variant-numeric:tabular-nums}
.src[data-s=ping]{transform:translateY(-3px);border-color:var(--mint);box-shadow:0 10px 24px #18d8a122}
.ico{display:grid;place-items:center}
.ico svg{width:24px;height:24px;stroke:#fff;stroke-width:1.9}
.ico-web{background:#0bb0c9}
.ico-ymaps{background:#fff;border:1px solid #f1d6d6}
.ico-ymaps svg{fill:#fc3f1d;stroke:#fc3f1d}
.ico-ymaps svg circle{fill:#fff;stroke:#fff}
.ico-insta{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ico-insta svg circle:last-child{fill:#fff}
.inbox{position:relative;text-align:center;padding:30px 20px;border-radius:24px;background:var(--ink);color:#fff;box-shadow:0 20px 50px #063d382e}
.inbox span{font-size:13px;color:#a9cfc4}
.inbox b{display:block;margin:6px 0 8px;font-size:64px;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.inbox small{font-size:12px;color:#a9cfc4}
.fly{position:absolute;z-index:5;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:4px;background:var(--mint);box-shadow:0 0 0 4px #18d8a133;pointer-events:none}

/* 2. Отсев */
.sc-filter{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.sieve{position:relative;min-height:420px;border-radius:22px;background:#fff;border:1px dashed var(--line);overflow:hidden}
.gate{position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--mint) 0 8px,transparent 8px 14px)}
.gate span{position:absolute;left:14px;top:-22px;font-size:11px;font-weight:700;color:var(--mint-dark);text-transform:uppercase;letter-spacing:.06em}
.kept{position:absolute;left:16px;right:16px;bottom:14px;height:118px;border-radius:16px;background:var(--pale);display:flex;align-items:flex-start;padding:8px 12px}
.kept small{font-size:11px;font-weight:700;color:var(--mint-dark);text-transform:uppercase;letter-spacing:.06em}
.fcard{position:absolute;z-index:2;left:24px;right:24px;top:14px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px #063d3814;opacity:0;transform:translateY(-30px);transition:opacity .45s,transform .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.fcard small{font-size:11px;color:var(--muted)}
.fcard p{margin-top:2px;font-size:14px;line-height:1.35;color:var(--ink)}
.fcard>b{position:absolute;right:10px;top:-11px;padding:3px 9px;border-radius:999px;font-size:11.5px;background:var(--red-bg);color:#c8393f;opacity:0;transform:scale(1.8) rotate(-6deg);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.fcard.is-good>b{background:var(--mint);color:var(--ink)}
.fcard[data-s=in]{opacity:1;transform:none;top:calc(50% - 40px)}
.fcard[data-s=stamp]{opacity:1;transform:none;top:calc(50% - 40px);border-color:#f3b8bb;background:#fffafa}
.fcard.is-good[data-s=stamp]{border-color:var(--mint);background:#fff}
.fcard[data-s=stamp]>b,.fcard[data-s=keep]>b{opacity:1;transform:rotate(-3deg)}
.fcard[data-s=stamp]:not(.is-good) p{text-decoration:line-through;text-decoration-color:#e85d6288}
.fcard[data-s=out]{opacity:0;top:calc(50% - 40px);transform:translateX(120%) rotate(8deg)}
.fcard[data-s=keep]{opacity:1;transform:none;top:calc(100% - 104px);left:30px;right:30px;border-color:var(--mint);box-shadow:0 12px 30px #18d8a12e}
.tally>p{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tally ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.tally li{position:relative;display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:14px;overflow:hidden;transition:border-color .3s,transform .3s}
.tally li span,.tally li b{position:relative;z-index:1}
.tally li b{font-variant-numeric:tabular-nums}
.tally li i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--red-bg);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.tally li[data-s] i{transform:scaleX(1)}
.tally li[data-s=hit]{border-color:#f3b8bb;transform:translateX(-4px)}

/* 3. Сверка с каналом */
.sc-check{display:grid;gap:12px;align-content:start}
.pick{padding:13px 16px;border-radius:16px;border:1px solid var(--mint);background:#fff;box-shadow:0 10px 26px #18d8a11f}
.pick small{font-size:11px;color:var(--muted)}
.pick p{font-size:15px;font-weight:700;color:var(--ink);margin-top:2px}
.crow{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center;padding:15px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);opacity:.25;transform:translateY(6px);transition:opacity .6s,transform .6s}
.crow[data-s]{opacity:1;transform:none}
.cq{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--ink)}
.cq:before{content:"";width:22px;height:22px;flex:0 0 auto;border-radius:7px;background:var(--pale) center/12px no-repeat;transition:background-color .3s}
.crow[data-s] .cq:before{background-color:var(--mint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.5 2.4L10 3.3' fill='none' stroke='%23063d38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ca{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--muted)}
.ca small{font-size:12.5px}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.scores small{display:block;font-size:11.5px;margin-bottom:5px}
.scores i{display:block;height:8px;border-radius:8px;background:var(--pale-2);position:relative;overflow:hidden}
.scores i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*20%);background:var(--mint);border-radius:8px;transform-origin:0 50%;transform:scaleX(0);transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.crow[data-s] .scores i:after{transform:scaleX(1)}
.sim{position:relative;display:block;width:100%;height:10px;margin:16px 0 2px;border-radius:10px;background:var(--pale-2)}
.sim i{position:absolute;left:0;top:0;bottom:0;width:var(--s);border-radius:10px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.crow[data-s] .sim i{transform:scaleX(1)}
.sim u{position:absolute;left:var(--p);top:-5px;bottom:-5px;width:2px;background:var(--red);text-decoration:none}
.sim u small{position:absolute;bottom:100%;right:-2px;margin-bottom:2px;white-space:nowrap;font-size:10.5px;color:#c8393f}

/* 4. Писатель */
.sc-write{display:grid;grid-template-columns:1fr 150px 1.25fr;gap:16px;align-items:start}
.pane-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.raw{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:12.5px;line-height:1.5}
.raw p{color:#5b7571}
.raw p+p{margin-top:7px}
.raw mark{background:transparent;color:inherit;border-radius:4px;padding:0 1px;transition:background .3s,color .3s}
.raw mark[data-s]{background:#fff3b0;color:var(--ink)}
.facts{display:flex;flex-direction:column;gap:8px}
.facts span{padding:7px 10px;border-radius:11px;background:#fff8d6;border:1px solid #f1e0a0;font-size:12px;font-weight:700;color:#6d5600;opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.facts span[data-s]{opacity:1;transform:none}
.draft{padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--mint);box-shadow:0 14px 34px #18d8a11c;min-height:300px}
.draft-text{white-space:pre-wrap;font-size:14.5px;line-height:1.5;color:var(--ink)}
.draft-text[data-s=typing]:after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-3px;background:var(--mint-dark);animation:fl-caret .7s steps(1) infinite}
@keyframes fl-caret{50%{opacity:0}}

/* 5. Судьи и оформление */
.sc-judge{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:start}
.jpost{padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px #063d3810;font-size:14px;line-height:1.5}
.jpost p{color:var(--ink)}
.jpost p+p{margin-top:9px}
.jp-title{font-size:16px;line-height:1.3}
.jp-emoji{display:inline-block;max-width:0;overflow:hidden;vertical-align:bottom;white-space:pre;transition:max-width .4s}
.jpost q{border-radius:4px;transition:background .3s,box-shadow .3s}
.jpost q[data-s]{background:#d9f7ec;box-shadow:0 0 0 2px #d9f7ec}
.jpost a{color:#1a73c8;text-decoration:none}
.jpost .jp-service,.jpost .jp-sign{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .5s,opacity .5s,margin .5s}
.jp-service span{display:block}
.jpost[data-s=fmt] .jp-title{font-weight:700}
.jpost[data-s=fmt] .jp-emoji{max-width:2em}
.jpost[data-s=fmt] .jp-service{max-height:130px;opacity:1;margin-top:10px}
.jpost[data-s=fmt] .jp-sign{max-height:30px;opacity:1;margin-top:10px}
.judges{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.judges li{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);opacity:.3;transform:translateY(6px);transition:opacity .4s,transform .4s,border-color .4s}
.judges li[data-s]{opacity:1;transform:none;border-color:var(--mint)}
.judges li>b{display:flex;align-items:center;gap:8px;font-size:14.5px}
.judges li>b:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .3s}
.judges li[data-s]>b:before{background:var(--mint);box-shadow:0 0 0 4px #18d8a12a}
.judges span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.judges em{display:inline-block;margin-top:8px;font-style:normal;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:12px;background:var(--pale-2);color:var(--mint-dark);opacity:0;transition:opacity .3s .3s}
.judges li[data-s] em{opacity:1}

/* 6. Публикация в мессенджере */
.sc-publish{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:center}
.pub-time{font-size:76px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pub-status{display:grid;margin-top:14px}
.pub-status>span{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:700;transition:opacity .3s,transform .3s}
.st-wait{background:#fff6e2;color:#8a5a00}
.st-done{background:var(--mint);color:var(--ink);opacity:0;transform:translateY(6px)}
.pub-note[data-s=done] .st-wait{opacity:0;transform:translateY(-6px)}
.pub-note[data-s=done] .st-done{opacity:1;transform:none}
.pub-sub{margin-top:16px;font-size:15px;max-width:300px}
.clock{position:relative;width:13px;height:13px;border-radius:50%;border:1.8px solid currentColor}
.clock:after{content:"";position:absolute;left:50%;top:1.5px;width:1.8px;height:4.5px;margin-left:-.9px;background:currentColor;transform-origin:50% 100%;animation:fl-clock 1s linear infinite}
@keyframes fl-clock{to{transform:rotate(360deg)}}
.chat{border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px #063d3824;display:flex;flex-direction:column;height:500px}
.chat-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid #edf2f1}
.chat-head svg{width:20px;height:20px;stroke:#1a73c8;stroke-width:2.2}
.chat-ava{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff7a59,#e0368f);color:#fff;font-size:13px;font-weight:700}
.chat-head b{display:block;font-size:14.5px;line-height:1.2}
.chat-head small{font-size:12px;color:var(--muted)}
.chat-feed{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px;overflow:hidden;background:#dfe9e6 radial-gradient(circle at 20% 20%,#ffffff66 0 2px,transparent 3px) 0 0/26px 26px}
.msg{position:relative;flex:0 0 auto;border-radius:16px 16px 16px 6px;background:#fff;box-shadow:0 1px 2px #063d3814;font-size:13px;line-height:1.42}
.msg p{color:#10221f}
.msg-old{padding:9px 12px 20px;opacity:.75;max-height:72px;overflow:hidden;transition:max-height .5s,opacity .5s,padding .5s}
.msg-meta{position:absolute;right:10px;bottom:5px;font-size:11px;color:#8aa29d}
.msg-new{overflow:hidden;opacity:0;transform:translateY(40px) scale(.96);transform-origin:0 100%;max-height:0;transition:opacity .45s,transform .5s cubic-bezier(.2,.8,.2,1),max-height .6s}
.msg-new[data-s]{opacity:1;transform:none;max-height:420px}
.chat[data-s=sent] .msg-old{max-height:0;opacity:0;padding-block:0}
.msg-pic{height:132px;overflow:hidden}
.msg-pic svg{display:block;width:100%;height:100%}
.pic-ship{animation:fl-float 3.2s ease-in-out infinite}
@keyframes fl-float{50%{transform:translateY(-6px)}}
.pic-beams{animation:fl-beams 2.6s ease-in-out infinite alternate}
@keyframes fl-beams{to{opacity:.5}}
.pic-snow{animation:fl-snow 5s linear infinite}
@keyframes fl-snow{to{transform:translateY(14px)}}
.msg-body{padding:9px 12px 22px}
.msg-body p+p{margin-top:6px}
.msg-body a{color:#1a73c8}
.msg-reacts{display:flex;gap:6px;padding:0 12px 10px}
.msg-reacts span{padding:3px 9px;border-radius:999px;background:#eef4f2;font-size:13px;opacity:0;transform:scale(.3);transition:opacity .2s,transform .35s cubic-bezier(.3,1.7,.5,1)}
.msg-reacts span[data-s]{opacity:1;transform:none}
.chat-foot{padding:11px;text-align:center;font-size:13px;font-weight:700;color:#1a73c8;border-top:1px solid #edf2f1}

/* Планшет: шаги уходят наверх строкой */
@media(max-width:1100px){
  .fl{grid-template-columns:1fr;gap:16px}
  .fl-steps{grid-template-columns:repeat(6,1fr);gap:6px}
  .fl-steps:before{display:none}
  .fl-steps button{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:10px 4px 12px}
  .fl-steps small{display:none}
  .fl-steps strong{font-size:12.5px}
  .fl-steps button>i{left:12px;right:12px}
  .fl-funnel{display:none}
}
/* Телефон: каждая сцена в одну колонку */
@media(max-width:760px){
  .flow-lead{font-size:16px}
  .fl-steps strong{display:none}
  .fl-steps button{padding:6px 2px 10px}
  .fl-bar span{font-size:12.5px;margin-left:4px}
  .fl-bar>i{display:none}
  .fl-bar{flex-wrap:wrap;row-gap:2px}
  .fl-hint{margin-left:4px;width:100%}
  .sc{padding:16px;min-height:0;align-content:start;align-items:start}
  .sc-collect,.sc-filter,.sc-judge,.sc-publish{grid-template-columns:1fr;gap:16px}
  .src-grid{gap:8px}
  .src{grid-template-columns:32px 1fr;gap:4px 8px;padding:10px}
  .src img,.src .ico{width:32px;height:32px;border-radius:10px;grid-row:span 2}
  .ico svg{width:20px;height:20px}
  .src b{font-size:12.5px}
  .src em{font-size:12px}
  .inbox{padding:18px}
  .inbox b{font-size:46px}
  .sieve{min-height:330px}
  .fcard{left:14px;right:14px}
  .fcard[data-s=keep]{left:18px;right:18px}
  .tally ul{grid-template-columns:1fr 1fr;gap:6px}
  .tally li{flex-direction:column;gap:2px;padding:8px 10px;font-size:12px}
  .crow{grid-template-columns:1fr;gap:8px;padding:12px}
  .scores{gap:8px}
  .sc-write{grid-template-columns:1fr}
  .raw{display:none}
  .facts{flex-direction:row;flex-wrap:wrap;gap:6px}
  .facts .pane-title{width:100%;margin:0}
  .facts span{transform:translateY(-8px)}
  .draft{min-height:260px}
  .pub-time{font-size:40px}
  .pub-note{display:flex;align-items:center;gap:12px}
  .pub-status{margin-top:0}
  .pub-sub{display:none}
  .chat{height:500px}
}

/* Кто попросил систему не двигать картинку — показываем итог без движения */
@media(prefers-reduced-motion:reduce){
  .fl *,.fl{transition:none!important;animation:none!important}
}