/* ─── Библиотека компонентов: ava, chip, cmt, check, pill, note, snake, agenda, frame ─── */
.ava{
  width:34px; height:34px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.1rem;
  color:#fff; background:var(--ava-c, var(--ink-blue));
  border-radius:46% 54% 52% 48% / 52% 47% 53% 48%;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.14), var(--shadow);
  object-fit:cover; /* для <img class="ava"> с avatar_url */
}
.ava.sm{width:23px; height:23px; font-size:.88rem; box-shadow:inset -1px -1px 0 rgba(0,0,0,.15);}
.avs{display:inline-flex; flex:none;}
.avs .ava.sm{outline:1.5px solid #fff;}
.avs .ava.sm + .ava.sm{margin-left:-4px;}

.chip{
  font-size:.75rem; color:var(--graphite-soft);
  padding:1px 9px; position:relative; white-space:nowrap;
  cursor:pointer;
}
.chip::before{
  content:""; position:absolute; inset:0;
  border:1.2px solid var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.chip.imp{color:var(--red);} .chip.imp::before{border-color:var(--red);}
.chip.grn{color:var(--green);} .chip.grn::before{border-color:var(--green);}
.chip.amb{color:#A06F12;} .chip.amb::before{border-color:var(--amber);}

.cmt{display:inline-flex; align-items:center; gap:3px; font-size:.82rem; color:var(--graphite-soft);}
.cmt svg{width:16px; height:15px; fill:none; stroke:var(--graphite-soft); stroke-width:1.7; stroke-linejoin:round; filter:url(#squiggle);}

.star{color:var(--ink-blue); font-size:1.2rem; line-height:1; filter:url(#squiggle);}

.check{position:relative; width:22px; height:22px; flex:none; cursor:pointer; display:inline-block;}
.check input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.check .box{
  position:absolute; inset:0;
  border:1.7px solid var(--graphite);
  border-radius:30% 65% 35% 60% / 60% 35% 65% 35%;
  background:#fff; filter:url(#squiggle);
}
.check .mark{
  position:absolute; left:1px; top:-7px;
  font-family:'Caveat',cursive; font-size:1.7rem; font-weight:700;
  color:var(--ink-blue); transform:rotate(-8deg) scale(0);
  transition:transform .18s cubic-bezier(.6,1.6,.6,1);
  pointer-events:none;
}
.check input:checked ~ .mark{transform:rotate(-8deg) scale(1);}
.check input:focus-visible ~ .box{outline:3px solid var(--ink-blue); outline-offset:2px;}

.pill{
  display:flex; align-items:center; gap:7px;
  background:#fff; padding:5px 8px 5px 13px;
  font-size:1.02rem;
  position:relative; min-width:0;
  border-radius:var(--r-pill);
  box-shadow:2px 3px 0 rgba(44,42,38,.08);
  cursor:pointer;
  transition:transform .12s ease;
}
.pill:hover{transform:translateY(-2px) rotate(-.4deg); z-index:5;}
.pill:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.pill::before{
  content:""; position:absolute; inset:0;
  border:1.7px solid var(--c, var(--ink-blue));
  border-radius:var(--r-pill);
  filter:url(#squiggle); pointer-events:none;
}
.pill .label{
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--graphite);
  text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 6px #fff,0 0 8px #fff,0 0 10px #fff;
}
/* узкая пилюля (короткая задача в ганте): аватар и бейджик комментов
   не влезают и пересекали бы рамку — прячем, текст забирает всю ширину.
   container-type только в дорожках: там ширину диктует грид, а не контент
   (иначе пилюли «всего дня»/агенды схлопнулись бы в ноль) */
.lane .pill{container-type:inline-size;}
@container (max-width:64px){
  .pill .ava, .pill .cmt{display:none;}
}
@container (max-width:44px){
  .pill{padding-left:6px; padding-right:4px;}
}
.pill.done .label{
  color:var(--graphite-soft); opacity:.85;
  text-decoration:line-through;
  text-decoration-color:var(--strike);
  text-decoration-thickness:2px;
}

.note{
  background:#fff; padding:11px 12px 11px 16px;
  box-shadow:var(--shadow);
  border-radius:var(--r-sketch2);
  position:relative; cursor:pointer;
  transition:transform .12s ease;
}
.note::before{
  content:""; position:absolute; inset:0;
  border:1.6px solid var(--graphite); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.note::after{
  content:""; position:absolute; left:-3px; top:8px; bottom:8px; width:6px;
  background:var(--c, var(--ink-blue)); opacity:.75;
  border-radius:8px 3px 6px 3px;
  transform:rotate(-.6deg);
}
.note:nth-child(odd){transform:rotate(.4deg);}
.note:nth-child(even){transform:rotate(-.5deg);}
.note:hover{transform:rotate(0) translateY(-3px);}
.note:focus-visible{outline:3px solid var(--ink-blue); outline-offset:3px;}
.note .row{display:flex; gap:10px; align-items:flex-start;}
.note .body{flex:1; min-width:0;}
.note .t{font-size:1rem; overflow-wrap:break-word;}
.note .sub{
  font-size:.85rem; color:var(--pencil); margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.note .meta{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.note.is-done .t{
  color:var(--graphite-soft); opacity:.85;
  text-decoration:line-through;
  text-decoration-color:var(--strike);
  text-decoration-thickness:2px;
}
.note.is-done .sub{opacity:.6;}
.note .del{
  border:none; background:none; font-size:1.05rem; color:var(--pencil-faint);
  cursor:pointer; padding:0 2px; visibility:hidden; font-family:inherit; line-height:1;
}
.note:hover .del{visibility:visible;}
.note .del:hover{color:var(--red);}

.snake{
  display:grid; gap:16px 22px; position:relative;
  grid-template-columns:repeat(var(--cols,2), minmax(0,1fr));
  padding:4px 2px;
}
.snake .sn-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.snake .sn-svg path{
  fill:none; stroke:var(--pencil); stroke-width:2;
  stroke-dasharray:7 8; stroke-linecap:round;
  opacity:.65; filter:url(#squiggle);
}
.sn-item{
  position:relative; z-index:1;
  background:#fff; padding:8px 11px;
  border-radius:var(--r-sketch2);
  box-shadow:var(--shadow);
  cursor:pointer; min-width:0;
  transition:transform .12s ease;
}
.sn-item:hover{transform:translateY(-3px) rotate(-.4deg);}
.sn-item:focus-visible{outline:3px solid var(--ink-blue); outline-offset:3px;}
.sn-item::before{
  content:""; position:absolute; inset:0;
  border:1.6px solid var(--c, var(--ink-blue)); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.sn-item .when{
  font-family:'Caveat',cursive; font-size:.98rem; color:var(--graphite-soft);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.sn-item .t{font-size:.98rem; margin-top:1px; overflow-wrap:break-word;}
.sn-item .meta{display:flex; gap:7px; align-items:center; margin-top:6px; flex-wrap:wrap;}
.sn-item.done .t{
  color:var(--graphite-soft); opacity:.85;
  text-decoration:line-through;
  text-decoration-color:var(--strike);
  text-decoration-thickness:2px;
}
.sn-item.done .when{color:var(--pencil);}

.agenda{display:flex; flex-direction:column; gap:9px;}
.agenda .arow{display:flex; align-items:center; gap:9px;}
.range{
  font-family:'Caveat',cursive; font-size:1rem; color:var(--graphite-soft);
  flex:none; width:64px; text-align:right; transform:rotate(-2deg);
  line-height:1.05;
}
.range.today-mark{position:relative; color:var(--red);}
.range.today-mark::after{
  content:""; position:absolute; inset:-3px -6px;
  background:var(--marker); z-index:-1;
  border-radius:40px 8px 50px 8px/8px 50px 8px 40px;
}
.agenda .pill{flex:1;}

.frame{
  position:relative; background:rgba(255,255,255,.55); padding:12px 14px;
  border-radius:18px 220px 16px 240px / 230px 14px 250px 18px;
}
.frame::before{
  content:""; position:absolute; inset:0;
  border:1.8px solid var(--graphite); border-radius:inherit;
  filter:url(#squiggle); pointer-events:none;
}

/* ── контекстное меню задачи (правый клик / удержание) ── */
.ctx{
  position:fixed; z-index:95;
  min-width:185px;
  background:#fff; padding:7px;
  display:flex; flex-direction:column;
  border-radius:var(--r-sketch2);
  box-shadow:var(--shadow);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  animation:ctx-in .14s ease;
}
.ctx::before{
  content:""; position:absolute; inset:0;
  border:1.7px solid var(--graphite); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.ctx-item{
  display:flex; align-items:center; gap:10px;
  border:none; background:none; cursor:pointer;
  font-family:inherit; font-size:1rem; color:var(--graphite);
  padding:9px 13px; text-align:left;
  border-radius:var(--r-input);
}
.ctx-item:hover{background:rgba(60,55,45,.08);}
.ctx-item:active{transform:scale(.97);}
.ctx-item .ic{
  width:19px; flex:none; text-align:center; line-height:1;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.2rem;
}
.ctx-item.grn .ic{color:var(--green);}
.ctx-item.red{color:var(--red);}
.ctx-sep{border-top:1.6px dashed var(--pencil-faint); margin:4px 10px;}
/* заголовок меню «тут уже: …» при дропе в занятый слот */
.ctx-head{
  font-family:'Caveat',cursive; font-size:1.05rem; color:var(--graphite-soft);
  padding:6px 13px 4px; max-width:230px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-bottom:1.6px dashed var(--pencil-faint); margin-bottom:4px;
}
@keyframes ctx-in{from{opacity:0; transform:scale(.93) rotate(-1.5deg);}}
/* пункты подменю «кому передать»: аватар вместо рисованной иконки */
.ctx-item.with-ava .ic{width:24px;}
.ctx-item.with-ava .ic .ava{width:21px; height:21px; font-size:.9rem; box-shadow:none;}
.ctx-item.cur{opacity:.55; cursor:default;}
.ctx-item.cur:hover{background:none;}

/* ── заливки: цвет задачи через --c (hex или цвет автора).
   Блок в конце файла, чтобы перебивать background:#fff у .pill/.note/.sn-item ── */
.f-hachure{background-image:repeating-linear-gradient(115deg,
  color-mix(in srgb, var(--c, var(--ink-blue)) 14%, transparent) 0 1.5px, transparent 1.5px 10px);}
.f-cross{background-image:
  repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--c, var(--ink-blue)) 12%, transparent) 0 1.5px, transparent 1.5px 10px),
  repeating-linear-gradient(25deg,
    color-mix(in srgb, var(--c, var(--ink-blue)) 12%, transparent) 0 1.5px, transparent 1.5px 10px);}
.f-marker{background-color:color-mix(in srgb, var(--c, var(--ink-blue)) 26%, #fff);}
.f-solid{background-color:var(--c, var(--ink-blue));}
.f-solid .label, .f-solid .t, .f-solid .mtx, .f-solid .when{color:#fff; text-shadow:none;}
.f-solid.pill.done .label, .f-solid.done .t{color:rgba(255,255,255,.8); text-decoration-color:rgba(255,255,255,.7);}
.f-none{background-color:#fff;}

/* ── богатый текст (js/richtext.js): таблицы/списки в описании задачи,
   комментарии, заметки Шкафа. Вставленная таблица раньше схлопывалась в
   кашу — теперь строки и столбцы на своих местах. ── */
.rt-p{margin:0 0 6px; overflow-wrap:anywhere;}
.rt-p:last-child{margin-bottom:0;}
.rt-h{font-weight:700; color:var(--graphite); margin:8px 0 4px;}
.rt-h:first-child{margin-top:0;}
.rt-ul{margin:0 0 6px; padding-left:17px;}
.rt-ul li{margin:1px 0;}
.rt-hr{height:0; border-top:1.6px solid var(--pencil-faint); margin:8px 2px; filter:url(#squiggle);}
/* обёртка со СВОИМ горизонтальным скроллом: широкая таблица не раздувает
   родительский трек грида (WKWebView, grid-blowout) и не рвёт карточку */
.rt-tw{max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:6px 0 8px; padding-bottom:2px;}
/* width:max-content — колонки по своему содержимому: узкая таблица остаётся
   узкой, широкая скроллится, а слова не рвутся посередине («Трансферри/н») */
.rt-t{border-collapse:collapse; font-size:.84rem; line-height:1.3;
  color:var(--graphite-soft); width:max-content; max-width:none;}
.rt-t th{
  text-align:left; font-weight:700; color:var(--graphite); white-space:nowrap;
  padding:3px 9px 4px; border-bottom:1.7px solid var(--pencil); filter:url(#squiggle);
}
/* потолок на ячейку-простыню: она переносится, а не растягивает таблицу вширь */
.rt-t td{padding:3px 9px; border-top:1px dashed var(--pencil-faint); vertical-align:top;
  max-width:min(62vw, 320px); overflow-wrap:break-word;}
.rt-t tbody tr:first-child td{border-top:none;}
.rt-t td.rt-num{white-space:nowrap;}
.rt-t tbody tr:nth-child(even){background:color-mix(in srgb, var(--pencil-faint) 18%, transparent);}