/* ─── Веха как путь (лист 19): экран #mile-dialog + плашки/подсветка доски ───
   Размеры по чертежу 19·1: ★ шапки 28 · дедлайн-чип 24 · прогресс-полоса 4 ·
   узел Ø16 на нити 2.0 · строка пути ≥48 · статус-чип 24 · плашка 40.
   Карандашные рамки — ТОЛЬКО на ::before (filter#squiggle на самом элементе
   исказил бы текст — канон template.html). Цвета — токены (tokens.css),
   тьма приезжает их переопределением (dark.css). */

.msd-frame{width:min(430px,92vw);}
.msd-head{display:flex; align-items:center; gap:10px; min-width:0; position:relative;
  padding-right:36px; border-radius:12px;}
.msd-star{flex:none; width:28px; height:28px;}
.msd-tt{flex:1; min-width:0; font-family:'Caveat',cursive; font-weight:700;
  font-size:22px; line-height:1.1; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}   /* t-cut */
.msd-dl{flex:none; height:24px; border-radius:6px; padding:0 8px; font-size:12px;
  color:var(--ink-blue); position:relative; display:inline-flex; align-items:center;}
.msd-dl::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid currentColor; border-radius:inherit; filter:url(#squiggle);}
.msd-prog{display:flex; align-items:center; gap:8px; font-size:12px;
  color:var(--pencil); margin-top:8px;}
.msd-track{flex:1; height:4px; border-radius:2px; background:var(--pencil-faint);
  overflow:hidden; position:relative;}
.msd-track i{position:absolute; inset:0; background:var(--marker); display:block;
  transform-origin:left; transform:scaleX(0); transition:transform .24s ease;}

/* красный блок «на чём зависли» — red dashed, первым, до пути (19·1) */
.msd-stuck{position:relative; border-radius:12px; padding:10px 14px;
  display:flex; flex-direction:column; gap:2px; margin-top:12px;
  background:rgba(206,74,58,.05);}
.msd-stuck::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:inherit; filter:url(#squiggle);}
.msd-stuck b{font-size:13px; color:var(--red);}
.msd-stuck span{font-size:12px; color:var(--graphite-soft);}

/* сводка-фильтр по людям (violet — «кто», словарь листа 10) */
.msd-who{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.msd-wch{height:24px; border-radius:6px; padding:0 8px; font-size:12px;
  color:var(--violet); position:relative; display:inline-flex; align-items:center;
  gap:4px; background:none; font-family:inherit; cursor:pointer;}
.msd-wch::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid currentColor; border-radius:inherit; filter:url(#squiggle);}
.msd-wch.on{background:rgba(142,79,191,.12); font-weight:bold;}

/* словарь статусов вехи: чипы 24, «+ …» — ghost dashed (пусто/потенция) */
.msd-sts{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.msd-st{height:24px; border-radius:6px; padding:0 8px; font-size:12px;
  position:relative; background:none; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; max-width:150px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.msd-st::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid currentColor; border-radius:inherit; filter:url(#squiggle);}
.msd-st.lock{cursor:default;}
.msd-st.ghost{color:var(--pencil);}
.msd-st.ghost::before{border-style:dashed;}
.msd-st-in{height:24px; border-radius:6px; padding:0 8px; font-size:12px;
  border:1.5px dashed var(--pencil); background:none; font-family:inherit;
  color:var(--graphite); width:130px;}

/* путь: нить 2.0 волной + узлы Ø16; строка ≥48, зависшие — red dashed */
.msd-path{position:relative; padding-left:36px; margin-top:12px;}
.msd-thread{position:absolute; left:8px; top:8px; bottom:8px; width:20px;
  height:calc(100% - 16px);}
.msd-thread path{stroke:var(--graphite-soft); stroke-width:2; fill:none;
  stroke-linecap:round;}
.msd-row{position:relative; min-height:48px; display:flex; align-items:center;
  gap:8px; padding:8px 10px; border-radius:12px; transition:opacity .24s ease;}
.msd-row.dim{opacity:.35;}
.msd-row .node{position:absolute; left:-30px; top:50%; width:16px; height:16px;
  margin-top:-8px; border-radius:50%; background:var(--paper);
  box-shadow:0 0 0 2px var(--graphite);}
.msd-row.done .node{background:var(--green);}
.msd-row .bd{flex:1; min-width:0; cursor:pointer;}
.msd-row .nm{font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.msd-row.done .nm{color:var(--pencil); text-decoration:line-through;}
.msd-row .mt{font-size:11px; color:var(--pencil); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.msd-row.stuckrow{background:rgba(206,74,58,.05);}
.msd-row.stuckrow::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:inherit; filter:url(#squiggle);}
.msd-row .dd{flex:none; height:20px; border-radius:6px; padding:0 6px;
  font-size:10px; color:var(--red); display:inline-flex; align-items:center;
  background:rgba(206,74,58,.1);}
.msd-stch{flex:none; height:24px; border-radius:6px; padding:0 8px; font-size:12px;
  position:relative; background:none; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; max-width:120px;}
.msd-stch::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid currentColor; border-radius:inherit; filter:url(#squiggle);}
.msd-stch .tx{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.msd-empty{color:var(--pencil); font-size:13px; padding:8px 0;}

/* финиш-строка: звезда 24 приглушена, пока не все узлы зелёные */
.msd-fin{display:flex; align-items:center; gap:10px; margin-top:8px;
  font-size:12px; color:var(--pencil);}
.msd-fin svg{flex:none; width:24px; height:24px; opacity:.45;}
.msd-add{margin-top:10px;}

/* лампа-вспышка (тап = свет): overlay гаснет через opacity (канон: только
   transform/opacity); гаснет под body.light-fx как прочие эффекты */
.ms-lamp{position:relative;}
.ms-lamp::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--marker); opacity:0; pointer-events:none; z-index:2;
  animation:ms-lampfade .36s ease;}
body.light-fx .ms-lamp::after{animation:none;}
@keyframes ms-lampfade{0%{opacity:0;} 35%{opacity:1;} 100%{opacity:0;}}

/* ─── доска: строка-путь вехи + подсветка пути ───
   Веха живёт тихо: строка [✳ · название · линия прогресса · счёт · «путь»] без
   капсулы, заливки и рамки — акцент держат только янтарный ✳ и пройденная доля
   линии. Разметку собирает msAfterRender (js/milestone.js). */
.ms-banners{display:flex; flex-direction:column; gap:2px; margin:10px 0 2px;}
.ms-path{position:relative; display:flex; align-items:center; gap:10px;
  width:100%; min-width:0; padding:7px 2px; font-size:15px;
  color:var(--graphite); background:none; border:none; font-family:inherit;
  cursor:pointer; text-align:left;}
.ms-path .st{flex:none; width:17px; height:17px;}
.ms-path .name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ms-path .bar{flex:none; width:96px; height:8px;}
.ms-path .meta{font-size:13px; color:var(--pencil); white-space:nowrap;}
/* «путь» прижат вправо — метка вида, а не действие: самый бледный элемент строки */
.ms-path .kind{margin-left:auto; font-size:12px; color:var(--pencil-faint); white-space:nowrap;}
/* включённый путь: имя прошли хайлайтером — тем же маркером, что подсвечивает
   его задачи на доске. На телефоне метка «путь» скрыта, и маркер остаётся
   единственным признаком включённости — потому он, а не только жирность. */
.ms-path .name{padding:1px 5px; border-radius:6px 4px 7px 5px; transition:background .14s ease;}
.ms-path.on .name{font-weight:700; background:var(--marker);}
.ms-path.on .kind{color:var(--amber);}
@media (prefers-reduced-motion: reduce){ .ms-path .name{transition:none;} }
/* узкий экран: имя пути важнее метки вида и длины линии */
@media (max-width:639px){
  .ms-path{gap:8px;}
  .ms-path .bar{width:52px;}
  .ms-path .kind{display:none;}
}
#aside-tasks{position:relative;}   /* якорь ниточек поверх секций */
/* Подсветка пути = маркер ПОВЕРХ карандашной подложки карточки (skTabbar-svg
   закрасил бы фон под собой) ПЛЮС пунктирная обводка цветом этой вехи: одного
   маркера мало — на крафте ящичка подсвеченные строки сливались с соседними.
   Цвет приходит переменной --ms-lit с доски (msApplyLit), запасной — амбер.
   Прежний opacity:.55 снят: он гасил бы и рамку, а --marker и так полупрозрачен. */
.task.ms-lit::after{content:""; position:absolute; inset:-2px; border-radius:13px;
  background:var(--marker); border:1.5px dashed var(--ms-lit, var(--amber));
  pointer-events:none; z-index:2;}
.task.ms-dim{opacity:.35;}
#ms-threads{position:absolute; inset:0; pointer-events:none; overflow:visible;
  width:100%; height:100%; z-index:3;}
#ms-threads path{stroke:var(--ms-lit, var(--amber)); stroke-width:1.6; fill:none;
  stroke-dasharray:6 5; stroke-linecap:round;}
#ms-threads.draw path{stroke-dashoffset:600; animation:ms-th .4s ease forwards;}
@keyframes ms-th{to{stroke-dashoffset:0;}}

/* ─── календарь: ★ в углу дня + красный флажок дедлайна вехи (19·2 §4) ─── */
.cv-msday{position:absolute; right:2px; top:2px; width:11px; height:11px;}
.cv-mcell{position:relative;}
.cv-mcell.cv-msflag::after{content:""; position:absolute; left:4px; top:3px;
  width:8px; height:10px; background:var(--red);
  clip-path:polygon(0 0,100% 25%,0 50%); pointer-events:none;}
.cv-dh{position:relative; padding-right:16px;}
.cv-dh .cv-msday{top:50%; margin-top:-6px;}
.cv-dh.cv-msflag::after{content:""; position:absolute; right:2px; top:50%;
  margin-top:-12px; width:8px; height:10px; background:var(--red);
  clip-path:polygon(0 0,100% 25%,0 50%);}

/* мета-бейдж ★ на карточках теперь кликабелен (открывает путь вехи) */
.cmt.mlb{cursor:pointer;}

/* кнопка «путь вехи» в хабе модалки: звезда 16 в строку с текстом */
.ml-path-st{width:16px; height:16px; vertical-align:-3px;}

@media (prefers-reduced-motion:reduce){
  .ms-lamp::after{animation:none;}
  #ms-threads.draw path{animation:none; stroke-dashoffset:0;}
  .msd-track i{transition:none;}
}