/* Маркетинг: язык «Задач» — нейтральные карточки, бирюза только у действия и состояния.
   Цвет площадки — точка у названия канала. Анимируются transform, opacity, высота. */
.mk{--ease:cubic-bezier(.2,.8,.2,1);max-width:860px;margin:0 auto;font-size:var(--font-content)}
.mk-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Шапка: заголовок и состояние слева, инструменты справа */
.mk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;margin-bottom:18px}
.mk-head h1{font-size:19px;line-height:1.2}
.mk-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px;color:var(--text-muted);font-size:13px}
.mk-summary:empty{display:none}
.mk-paused{color:var(--amber);font-weight:600}
.mk-stale{color:var(--amber)}
.mk-tools{display:flex;align-items:center;gap:6px}
.mk-tool{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--text-soft);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .12s}
.mk-tool:hover{color:var(--text);border-color:color-mix(in srgb,var(--text-muted) 45%,var(--border))}
.mk-tool:active{transform:scale(.94)}
.mk-tool.is-on{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,var(--border))}
.mk-tool.is-spinning .mk-i{animation:mk-spin .9s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}
.mk-switch{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px 0 10px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--text-soft);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.mk-switch i{position:relative;width:30px;height:18px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);transition:background .25s}
.mk-switch i::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--text-muted);
  transition:transform .3s var(--ease),background .25s}
.mk-switch[aria-checked=true]{color:var(--text)}
.mk-switch[aria-checked=true] i{background:color-mix(in srgb,var(--teal) 30%,var(--surface-2))}
.mk-switch[aria-checked=true] i::after{transform:translateX(12px);background:var(--teal)}
.mk-tool:focus-visible,.mk-switch:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Вкладки: подложка переезжает, у «Решить» с задачами — акцентный счётчик */
.mk-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:max-content;min-width:360px;margin:0 0 14px;padding:4px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mk-tabs button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:6px 16px;
  border:0;border-radius:9px;background:none;color:var(--text-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .2s;white-space:nowrap}
.mk-tabs button[aria-selected=true]{color:var(--text)}
.mk-tabs b{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--bg);color:var(--text-muted);font:500 12px var(--font-mono);transition:background .2s,color .2s}
.mk-tabs button[aria-selected=true] b{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}
.mk-tabs button.is-urgent b{background:var(--amber);color:#0E1315}
.mk-tabs-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:9px;background:var(--surface-2);
  box-shadow:0 1px 2px rgba(0,0,0,.3);transform:translateX(calc(var(--tab,0) * 100%));transition:transform .34s var(--ease)}
.mk-tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

/* Карточка задачи */
.mk-list{list-style:none;display:grid;gap:10px}
.mk-card{position:relative;display:grid;gap:10px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  overflow:hidden;transition:border-color .2s,opacity .3s var(--ease),height .32s var(--ease),padding .32s var(--ease),margin .32s var(--ease)}
.mk-card:hover{border-color:color-mix(in srgb,var(--text-muted) 32%,var(--border))}
.mk-card.is-decision{border-color:color-mix(in srgb,var(--amber) 38%,var(--border))}
.mk-card.is-decision::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--amber)}
.mk-card.is-failed{border-color:color-mix(in srgb,var(--red) 38%,var(--border))}
.mk-card.is-busy{opacity:.6;pointer-events:none}
.mk-card.is-leaving{opacity:0;padding-top:0;padding-bottom:0;margin-bottom:-10px;border-color:transparent}
.mk-list.is-entering>li{animation:mk-in .44s var(--ease) both;animation-delay:calc(var(--i) * 50ms)}
@keyframes mk-in{from{opacity:0;transform:translateY(10px) scale(.99)}}

.mk-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.mk-card-flags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.mk-flag{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid currentColor}
.mk-flag.is-money,.mk-flag.is-public{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.mk-flag.is-safe{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.mk-flag.is-danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.mk-channel{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--text-muted);font-size:12px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-channel i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--teal)}
.mk-channel.is-ozon i{background:#2A6DF4}.mk-channel.is-avito i{background:#97CF26}
.mk-channel.is-yandex i{background:#FFCC00}.mk-channel.is-pinterest i{background:#E60023}
.mk-status{flex:none;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:600;white-space:nowrap}
.mk-status.is-decision{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.mk-status.is-active{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
.mk-status.is-measure{background:color-mix(in srgb,#8B6FE8 18%,transparent);color:#B5A3F5}
.mk-status.is-failed{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.mk-title{font-size:16px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}

/* Путь задачи: пять шагов, пройденные залиты, текущий отмечен */
.mk-steps{--n:5;position:relative;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:2px 0 0;padding:0}
.mk-steps::before,.mk-steps::after{content:"";position:absolute;top:6px;left:calc(50% / var(--n));height:2px;border-radius:2px}
.mk-steps::before{right:calc(50% / var(--n));background:var(--border)}
.mk-steps::after{width:calc((100% - 100% / var(--n)) * var(--step) / (var(--n) - 1));background:var(--teal);
  transform-origin:left;animation:mk-grow .8s var(--ease) .15s both}
@keyframes mk-grow{from{transform:scaleX(0)}}
.mk-steps li{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;min-width:0;color:var(--text-muted);font-size:12px;text-align:center}
.mk-steps li span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-steps i{width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--border);transition:background .3s,box-shadow .3s}
.mk-steps .is-past i{background:var(--teal);box-shadow:none}
.mk-steps .is-now{color:var(--text);font-weight:600}
.mk-steps .is-now i{background:var(--surface);box-shadow:inset 0 0 0 4px var(--teal);animation:mk-now 2.2s ease-in-out .9s infinite}
.mk-steps .is-now.is-waiting i{box-shadow:inset 0 0 0 4px var(--amber)}
@keyframes mk-now{50%{transform:scale(1.18)}}

/* Замер: полоса дней до вывода */
.mk-measure{display:grid;gap:6px}
.mk-measure-head{display:flex;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px}
.mk-measure-head b{color:var(--text-soft);font-weight:600}
.mk-measure-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.mk-measure-bar i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;
  background:linear-gradient(90deg,#8B6FE8,#B5A3F5);transform-origin:left;animation:mk-grow 1s var(--ease) .2s both}

/* Цель цифрами: было → нужно */
.mk-goal{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:12px;background:var(--bg);color:var(--text-soft);font-size:13px;line-height:1.4}
.mk-goal>.mk-i{width:18px;height:18px;color:var(--green)}
.mk-goal-label{flex:1;min-width:0}
.mk-goal-values{display:flex;align-items:center;gap:10px;flex:none}
.mk-goal-values>span{display:grid;justify-items:center;line-height:1.1}
.mk-goal-values small{color:var(--text-muted);font-size:11px}
.mk-goal-values b{font:600 18px var(--font-mono);color:var(--text-soft)}
.mk-goal-values .is-target b{color:var(--green)}
.mk-goal-values>i{color:var(--text-muted);font-style:normal}
.mk-facts{display:flex;flex-wrap:wrap;gap:6px}
.mk-facts div{display:flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:8px;background:var(--surface-2);font-size:12px}
.mk-facts dt{color:var(--text-muted)}.mk-facts dd{font-family:var(--font-mono);color:var(--text)}
.mk-note{color:var(--text-soft);font-size:13px;line-height:1.5}
.mk-note.is-error{color:var(--red)}

/* Подробности раскрываются плавно там, где браузер умеет анимировать auto */
.mk{interpolate-size:allow-keywords}
.mk-more{border-top:1px solid var(--border);padding-top:4px}
.mk-more summary,.mk-result summary{list-style:none;cursor:pointer}
.mk-more summary::-webkit-details-marker,.mk-result summary::-webkit-details-marker{display:none}
.mk-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--text-muted);font-size:13px;font-weight:600;transition:color .2s}
.mk-more>summary:hover{color:var(--text)}
.mk-more>summary .mk-i,.mk-result summary>.mk-i{width:16px;height:16px;transition:transform .3s var(--ease)}
.mk-more[open]>summary .mk-i,.mk-result details[open] summary>.mk-i{transform:rotate(180deg)}
.mk-more summary:focus-visible,.mk-result summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}
.mk-more::details-content,.mk-result details::details-content{block-size:0;overflow:hidden;opacity:0;
  transition:block-size .34s var(--ease),opacity .3s,content-visibility .34s allow-discrete}
.mk-more[open]::details-content,.mk-result details[open]::details-content{block-size:auto;opacity:1}
.mk-more-body{display:grid;gap:10px;padding:4px 0 6px;color:var(--text-soft);font-size:13px;line-height:1.55}
.mk-block h4{margin-bottom:4px;color:var(--text-muted);font-size:12px;font-weight:600}
.mk-changes,.mk-plain,.mk-sources{list-style:none;display:grid;gap:6px}
.mk-changes li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:8px 10px;border-radius:9px;background:var(--bg)}
.mk-changes b{color:var(--text);font-weight:600}
.mk-diff{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);font-size:12px}.mk-diff s{color:var(--text-muted)}
.mk-diff i{color:var(--text-muted);font-style:normal}.mk-diff>span{color:var(--green)}
.mk-plain li{padding-left:14px;position:relative}
.mk-plain li::before{content:"";position:absolute;left:2px;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--text-muted)}
.mk-sources li{display:grid;gap:2px}
.mk-sources a{display:inline-flex;align-items:center;gap:5px;width:fit-content;color:var(--teal);font-weight:600;text-decoration:none}
.mk-sources a:hover{text-decoration:underline}
.mk-sources a .mk-i{width:13px;height:13px}
.mk-sources span{color:var(--text-muted)}
.mk-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px}
.mk-scores div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mk-scores dt{color:var(--text-muted);font-size:12px}
.mk-scores dd{display:flex;gap:3px}
.mk-scores i{width:8px;height:8px;border-radius:50%;background:var(--surface-2)}
.mk-scores i.is-on{background:var(--teal)}

.mk-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* Кнопка стоит в строке «Подробнее», но раскрытый текст занимает всю ширину карточки */
.mk-foot{position:relative;border-top:1px solid var(--border);padding-top:4px;min-height:44px}
.mk-foot>.mk-actions{position:absolute;top:4px;right:0}
.mk-foot .mk-more{border-top:0;padding-top:0}
.mk-foot .mk-actions{margin-top:0}
.mk-foot .mk-actions .btn-ghost{min-height:36px;padding:7px 14px;font-size:13px}
.mk-foot .mk-reject{margin-right:0}
.mk-actions .btn,.mk-actions .btn-ghost{width:auto;min-height:40px;padding:9px 18px;font-size:14px}
.mk-actions .mk-reject{margin-right:auto;color:var(--text-muted)}
.mk-actions .mk-reject:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--border))}

/* Итоги: полоса исходов и компактные строки */
.mk-outcomes{display:grid;gap:10px;margin-bottom:14px}
.mk-outcomes:empty{display:none}
.mk-outcomes-bar{display:flex;gap:3px;height:10px;border-radius:999px;overflow:hidden}
.mk-outcomes-bar i{min-width:6px;transform-origin:left;animation:mk-grow .8s var(--ease) both}
.mk-outcomes-bar i:nth-child(2){animation-delay:.08s}.mk-outcomes-bar i:nth-child(3){animation-delay:.16s}
.mk-outcomes-bar i:nth-child(n+4){animation-delay:.24s}
.mk-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--text-muted);font-size:12px}
.mk-legend li{display:inline-flex;align-items:center;gap:6px}
.mk-legend i{width:8px;height:8px;border-radius:50%}
.mk-legend b{color:var(--text);font:600 12px var(--font-mono)}
.is-won>i,.mk-outcomes-bar .is-won{background:var(--green)}
.mk-legend .is-won i{background:var(--green)}
.mk-outcomes-bar .is-flat,.mk-legend .is-no_effect i,.mk-legend .is-inconclusive i{background:var(--text-muted)}
.mk-outcomes-bar .is-failed,.mk-legend .is-failed i{background:var(--red)}
.mk-outcomes-bar .is-muted,.mk-legend .is-rejected i,.mk-legend .is-dismissed i{background:color-mix(in srgb,var(--text-muted) 32%,var(--surface-2))}
.mk-outcomes-bar .is-inconclusive{background:color-mix(in srgb,var(--text-muted) 60%,var(--surface-2))}

.mk-list.is-results{gap:6px}
.mk-result{border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:border-color .2s}
.mk-result:hover{border-color:color-mix(in srgb,var(--text-muted) 32%,var(--border))}
.mk-result summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 14px}
.mk-result summary>.mk-i{color:var(--text-muted)}
.mk-result-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--text-muted)}
.mk-result-icon .mk-i{width:16px;height:16px;stroke-width:2.2}
.mk-result.is-won .mk-result-icon{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.mk-result.is-failed .mk-result-icon{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.mk-result-main{display:grid;gap:3px;min-width:0}
.mk-result-title{font-size:14px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-result details[open] .mk-result-title{white-space:normal}
.mk-result-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;color:var(--text-muted);font-size:12px}
.mk-result .mk-more-body{padding:0 14px 12px 56px}
.mk-dim{color:var(--text-muted)}

.mk-empty{padding:34px 16px;border:1px dashed var(--border);border-radius:16px;color:var(--text-muted);font-size:14px;text-align:center}
.mk-loading{display:grid;gap:10px}
.mk-loading i{height:150px;border-radius:16px;background:var(--surface);animation:marketing-pulse 1.1s ease-in-out infinite alternate}

@media(max-width:620px){
  .mk-head{grid-template-columns:minmax(0,1fr)}
  .mk-tools{order:3}
  .mk-switch{margin-left:auto}
  .mk-tabs{width:100%;min-width:0}
  .mk-tabs button{padding:6px 8px}
  .mk-card{padding:14px}
  .mk-steps li span{display:none}
  .mk-steps li.is-now span{display:block;position:absolute;top:20px;left:50%;max-width:none;overflow:visible;transform:translateX(-50%)}
  .mk-steps li:first-child.is-now span{left:0;transform:none}.mk-steps li:last-child.is-now span{left:auto;right:0;transform:none}
  .mk-steps:has(.is-now){padding-bottom:20px}
  .mk-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .mk-actions .mk-reject{margin-right:0}
  .mk-result .mk-more-body{padding-left:14px}
}
@media(prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{animation:none!important;transition:none!important}
}