/* ─── «Разобрать ящичек»: режим-колода поверх доски ───
   Карта в фокусе + две «в тени», свайпы во все стороны, кнопки-дубли,
   уровень 2 (день недели / неделя месяца). Всё на дизайн-токенах доски. */

/* кнопка входа — живёт в сайдбаре над ящичком */
.sort-open{
  /* лист 03: ghost «разобрать ящичек» — 48 R12 dashed (была капсула 44 с тенью и Caveat) */
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; margin:8px 0 12px; padding:0 12px;   /* низ 12 = зазору карточек .list */
  font-family:'Neucha',cursive; font-size:15px;
  color:var(--graphite-soft); background:none;
  border:none; cursor:pointer; position:relative;
  border-radius:12px;
  transition:transform .12s ease, background .12s ease;
}
.sort-open::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:12px;
  filter:url(#squiggle);
}
.sort-open .ic{width:20px; height:20px; flex:none; stroke:currentColor;}
.sort-open:hover{background:var(--paper2, #FFFDF6); color:var(--graphite);}
.sort-open:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.sort-open .n{
  font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite);
}
.sort-open .n:not(:empty)::before{
  content:"· "; color:var(--pencil); font-family:'Neucha',cursive; font-weight:400; font-size:15px;
}
/* маркерный хайлайт «разобрать ящичек · N» когда в ящичке >0 задач (:not(.none)) —
   будто прошлись хайлайтером (канон --marker); в 0-состоянии (.none) — без маркера,
   кнопка приглушена (.sort-open.none в tasks.css). Паддинг всегда есть → без сдвига. */
.sort-open .sort-open-lbl{
  display:inline-flex; align-items:baseline; gap:4px;
  padding:2px 8px; border-radius:6px 4px 7px 5px;
  transition:background .14s ease;
}
.sort-open:not(.none) .sort-open-lbl{ background:var(--marker, rgba(255,222,89,.55)); color:var(--graphite); }

/* ── сам диалог: почти во весь экран, бумага как у доски.
   #handoff-dialog («вам передали», js/handoff.js) носит тот же скин. ── */
#sort-dialog, #handoff-dialog{
  max-width:min(640px, calc(100vw - 16px));
  width:100%;
  height:min(690px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px));
}
.sx-frame{
  height:100%; display:flex; flex-direction:column;
  padding:14px 14px calc(12px + 2px);
}

/* шапка: заголовок + счётчик + undo (крестик — общий .m-close, 44px) */
.sx-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-right:48px;}
.sx-top h2{margin-bottom:0; padding-right:0;}
.sx-cnt{
  font-family:'Caveat',cursive; font-weight:700; font-size:1.05rem;
  color:var(--graphite-soft); background:var(--marker);
  padding:2px 12px; border-radius:var(--r-pill);
}
.sx-undo{
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--graphite-soft);
  background:none; border:none; cursor:pointer;
  padding:6px 13px; position:relative; min-height:36px;
}
.sx-undo::before{
  content:""; position:absolute; inset:0;
  border:1.5px dashed var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.sx-undo:disabled{opacity:.35; cursor:default;}
.sx-undo:not(:disabled):hover{color:var(--graphite);}

/* поле: карта в центре, подсказки направлений по краям */
.sx-field{
  flex:1; position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.sx-hint{
  position:absolute; z-index:0;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.15rem;
  color:var(--pencil); opacity:.5;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  max-width:92px; text-align:center; pointer-events:none;
  transition:opacity .12s, color .12s;
}
.sx-hint small{font-family:'Neucha',cursive; font-size:.68rem; color:var(--pencil);}
.sx-hint .ic{font-size:1.5rem; transition:transform .12s;}
.sx-hint.l{left:2px; top:50%; transform:translateY(-50%);}
.sx-hint.r{right:2px; top:50%; transform:translateY(-50%);}
.sx-hint.u{top:4px; left:50%; transform:translateX(-50%);}
.sx-hint.d{bottom:4px; left:50%; transform:translateX(-50%); color:var(--red); opacity:.42;}
.sx-hint.hot{opacity:1; color:var(--graphite);}
/* на 2-м уровне жесты выключены — подсказки почти гаснут, чтобы не мешать выбору */
.sx-field:has(.sx-lvl2.on) .sx-hint{opacity:.12;}
.sx-hint.d.hot{color:var(--red);}
.sx-hint.hot .ic{transform:scale(1.3);}

/* ── карты-колода ── */
.sx-card{
  position:absolute; z-index:1; width:min(320px, 80%);
  min-height:150px; background:#fff; padding:16px 16px 13px;
  border-radius:18px 22px 16px 20px;
  box-shadow:4px 6px 0 rgba(44,42,38,.14);
  touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab;
}
.sx-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:inherit;
  filter:url(#squiggle);
}
.sx-card.back{transform:rotate(2.4deg) scale(.95); opacity:.75; cursor:default;}
.sx-card.back2{transform:rotate(-2deg) scale(.9); opacity:.45; cursor:default;}
.sx-card.drag{cursor:grabbing; transition:none;}
.sx-card.spring{transition:transform .22s cubic-bezier(.3,1.4,.5,1);}
.sx-card.lifted{transform:translate(0,-46px) scale(.92);}
.sx-card .src{font-size:.72rem; color:var(--pencil);}
.sx-card .t{
  font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; line-height:1.15;
  margin:4px 0 6px; overflow-wrap:anywhere; color:var(--graphite);
}
.sx-card .sub{
  font-size:.8rem; color:var(--graphite-soft); margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sx-card .meta{display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--pencil); flex-wrap:wrap;}
.sx-card .mini-ava{
  width:24px; height:24px; border-radius:50%; color:#fff; flex:none;
  font-family:'Caveat',cursive; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sx-card .mini-ava img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.sx-card .stamp{
  position:absolute; top:8px; right:10px;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.25rem;
  padding:1px 10px; border-radius:var(--r-pill);
  border:2px solid currentColor; opacity:0; transform:rotate(8deg);
  background:#fff;
}
.sx-card .stamp.show{opacity:1;}

/* ── уровень 2: день недели / неделя месяца ── */
.sx-lvl2{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:none; flex-direction:column; gap:9px; align-items:center; padding:0 4px;
}
.sx-lvl2.on{display:flex;}
.sx-lvl2 .q{font-family:'Caveat',cursive; font-weight:700; font-size:1.2rem; color:var(--graphite-soft);}
.sx-l2row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:100%;}
.sx-l2c{
  min-width:46px; min-height:46px; padding:5px 10px;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.05rem;
  color:var(--graphite-soft); background:#fff; border:none; cursor:pointer;
  position:relative; transition:transform .12s;
}
.sx-l2c::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.7px solid var(--graphite);
  border-radius:14px 10px 13px 9px/9px 13px 10px 14px;
  filter:url(#squiggle);
}
.sx-l2c small{display:block; font-family:'Neucha',cursive; font-size:.62rem; color:var(--pencil);}
.sx-l2c:hover{transform:translateY(-3px) rotate(-2deg); background:var(--marker); color:var(--graphite);}
.sx-l2c:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.sx-l2c.past{opacity:.55;}
.sx-l2back{
  font-family:'Neucha',cursive; font-size:.85rem; color:var(--pencil);
  background:none; border:none; cursor:pointer; min-height:36px;
  text-decoration:underline dashed;
}
.sx-l2back:hover{color:var(--graphite);}

/* ── нижние кнопки-дубли жестов ── */
.sx-btns{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; padding-top:10px;}
.sxb{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:74px; min-height:52px; padding:6px 11px;
  background:#fff; border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.85rem; color:var(--graphite-soft);
  position:relative; transition:transform .12s;
}
.sxb::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.7px solid var(--graphite); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.sxb b{font-family:'Caveat',cursive; font-weight:700; font-size:1.12rem; color:var(--graphite); white-space:nowrap;}
.sxb kbd{font-family:'Neucha',cursive; font-size:.6rem; color:var(--pencil-faint);}
.sxb:hover{transform:translateY(-3px);}
.sxb:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.sxb.trash b{color:var(--red);}
.sxb.trash::before{border-color:var(--red); border-style:dashed;}

/* ── финалка ── */
.sx-done{
  display:none; flex-direction:column; align-items:center; gap:12px;
  text-align:center; padding:12px; z-index:2;
}
.sx-done.on{display:flex;}
.sx-done h3{margin-bottom:0;}
.sx-sum{
  display:flex; flex-direction:column; gap:6px;
  font-size:.95rem; color:var(--graphite-soft);
  background:#fff; padding:13px 20px; position:relative;
  max-width:min(420px, 92%);
}
.sx-sum::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.8px solid var(--graphite); border-radius:var(--r-sketch2);
  filter:url(#squiggle);
}
.sx-sum b{color:var(--graphite); font-family:'Caveat',cursive; font-size:1.15rem;}
.sx-done-btns{justify-content:center; margin-top:2px;}

/* конфетти — внутри диалога (top layer перекрыл бы body-уровень) */
.sx-cfw{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:var(--r-sketch);}
.sx-cf{position:absolute; width:9px; height:14px; top:-20px; animation:sx-fall 1.5s ease-in forwards;}
@keyframes sx-fall{to{transform:translateY(105vh) rotate(540deg);}}

/* узкий портрет (TG Mini App 320–390) */
@media (max-width:480px){
  .sx-hint{font-size:.95rem; max-width:70px;}
  .sx-card{min-height:140px;}
  .sx-btns{gap:7px;}
  .sxb{min-width:0; flex:1 1 30%; padding:6px 7px; font-size:.78rem;}
  .sxb kbd{display:none;}
  .sx-l2c{min-width:42px; min-height:44px; padding:5px 8px;}
}
/* низкие экраны: ландшафт телефона / открытая клавиатура TG */
@media (max-height:560px){
  .sx-card.lifted{transform:translate(0,-28px) scale(.92);}
  .sx-top h2{font-size:1.35rem;}
  .sx-card{min-height:112px; padding:12px 14px 10px;}
  .sx-card .t{font-size:1.22rem; margin:2px 0 5px;}
  .sx-hint small{display:none;}
  .sx-hint .ic{font-size:1.15rem;}
  .sx-lvl2{gap:6px;}
  .sx-lvl2 .q{font-size:1rem;}
  .sx-l2c{min-height:40px; min-width:40px; font-size:.95rem;}
  .sx-l2c small{display:none;}
  .sx-btns{padding-top:6px; gap:7px;}
  .sxb{min-height:44px; padding:5px 10px;}
  .sxb kbd{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .sx-cf{display:none;}
  .sx-card.spring, .sx-card, .sxb, .sx-l2c, .sort-open{transition:none;}
}

/* ── умный инбокс (js/inbox.js): дека переиспользует .sx-*; здесь — акцент кнопки
   входа, textarea ввода и бейджи предложенного статуса на карте ── */
.inbox-open{border-style:solid; border-color:var(--ink-blue); color:var(--ink-blue);}

.ib-in-frame{max-width:460px;}
.ib-text{
  width:100%; box-sizing:border-box; min-height:132px; resize:vertical;
  margin:10px 0 6px; padding:12px 14px;
  font-family:'Neucha',cursive; font-size:1.05rem; line-height:1.5;
  color:var(--graphite); background:#fff;
  border:2px solid var(--graphite); border-radius:14px;
}
.ib-text:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}

/* 🎤 надиктовать: обычная кнопка; в записи — красный контур и мягкий пульс
   (только opacity — §1), под prefers-reduced-motion пульс гаснет */
.ib-in-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
.ib-mic.rec{border-color:var(--red); color:var(--red); animation:ib-mic-pulse 1.2s ease-in-out infinite;}
@keyframes ib-mic-pulse{0%,100%{opacity:1;} 50%{opacity:.55;}}
@media (prefers-reduced-motion: reduce){.ib-mic.rec{animation:none;}}

/* предложенный статус: зона · дата/время · #тег — те же чипы, что увидит задача */
.ib-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.ib-b{
  font-family:'Neucha',cursive; font-size:.82rem; line-height:1.2;
  padding:2px 9px; border-radius:var(--r-pill);
  border:1.5px dashed var(--pencil); color:var(--graphite-soft); background:#fff;
}
.ib-b.zone{border-style:solid; border-color:var(--graphite-soft);}
.ib-b.when{border-color:var(--ink-blue); color:var(--ink-blue);}
.ib-b.tag{border-color:var(--teal); color:var(--teal);}
.ib-b.who{border-color:var(--violet); color:var(--violet);}
.ib-b.cl{border-color:var(--green); color:var(--green);}

/* ═══════════════════════════════════════════════════════════════════════════
   Разбор ящичка — лист 07 (skin .s7*, самодостаточный; логика js/sortbox.js).
   Отдельный от общего .sx-* (передача/инбокс — лист 08): свой штамп-«действие
   видно ДО отпускания», зоны line-иконок, карусель недель (вс не тупик),
   карточка-вернуть 5 с. Закон: модуль 8 · r=h/4 (потолок R16) · штрих 2.0/1.5 ·
   иконки line 2.5/24 · капсулы/тени/scale ✕ · анимации только transform/opacity.
   Карта БЕЗ inline-SVG (drag-transform + Chromium не рисует): аватар-круг + текст.
   ═══════════════════════════════════════════════════════════════════════════ */
#sort-dialog{
  max-width:min(560px, calc(100vw - 16px)); width:100%;
  height:min(680px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px));
}
.s7-frame{
  position:relative; height:100%; display:flex; flex-direction:column;
  padding:16px 16px calc(14px + var(--safe-bottom, 0px)); overflow:hidden;
  /* рабочий инструмент, не открытка: ровный контур вместо наклона -.4deg и
     радиуса-кривульки --r-sketch общего .m-frame (сам штрих остаётся карандашным) */
  transform:none;
  border-radius:16px;
}
.s7-frame::before{border-radius:16px;}
/* карандашная рамка рисуется через ::before — гасим нативную обводку/чром кнопок,
   иначе двойной контур (нативная + squiggle). Фон/цвет задают сами правила ниже. */
.s7undo, .s7x, .s7pg, .s7dc, .s7b, .s7wc, .s7ucb, .s7back{
  border:none; -webkit-appearance:none; appearance:none; font:inherit;
}

/* шапка: заголовок(hug) · счётчик-чип 32 marker · undo 32 ghost R8 · ✕ 40 R10 */
.s7top{display:flex; align-items:center; gap:8px; min-height:56px;}
.s7top h2.s7title{
  flex:1; min-width:0; margin:0; padding-right:0;
  font-size:1.55rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.s7cnt{
  height:32px; min-width:64px; padding:0 10px; border-radius:8px; flex:none;
  background:var(--marker); position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:var(--graphite-soft);
}
.s7cnt::before{content:""; position:absolute; inset:0; border:1.5px solid var(--graphite);
  border-radius:8px; filter:url(#squiggle); pointer-events:none;}
.s7undo,.s7x{
  position:relative; flex:none; cursor:pointer; background:none; color:var(--graphite-soft);
  display:inline-flex; align-items:center; justify-content:center; transition:transform .09s ease;
}
.s7undo{width:32px; height:32px; border-radius:8px;}
.s7undo::before{content:""; position:absolute; inset:0; border:1.5px dashed var(--pencil);
  border-radius:8px; filter:url(#squiggle); pointer-events:none;}
.s7undo svg{width:18px; height:18px;}
.s7undo:disabled{opacity:.35; cursor:default;}
.s7undo:not(:disabled):active,.s7x:active{transform:scale(.9);}
.s7x{width:40px; height:40px; border-radius:10px; background:var(--card,#fff);}
.s7x::before{content:""; position:absolute; inset:0; border:2px solid var(--graphite);
  border-radius:10px; filter:url(#squiggle); pointer-events:none;}
.s7x svg{width:18px; height:18px;}
.s7undo:focus-visible,.s7x:focus-visible,.s7pg:focus-visible,.s7b:focus-visible,
.s7dc:focus-visible,.s7ucb:focus-visible,.s7back:focus-visible{
  outline:3px solid var(--ink-blue); outline-offset:2px;
}

/* поле: зоны по краям (z0 — под картой, hot-маркер виден за кромкой), карта в центре */
.s7field{position:relative; flex:1; min-height:320px; margin-top:16px;}
.s7z{
  position:absolute; z-index:0; border-radius:16px; pointer-events:none; color:var(--pencil);
  display:flex; align-items:center; justify-content:center; gap:8px; transition:opacity .12s;
  will-change:opacity;   /* §1: свой слой — гашение L2/rest не перерастеризует рельсу */
}
/* §1: hot-вспышка зоны — два пред-растеризованных squiggle-слоя (покой ::before /
   hot ::after), переключение — только композитная opacity. Перекраска background/
   border/color на элементе с filter:url(#squiggle) заставляла WebKit пересчитывать
   feTurbulence рельсы на CPU каждый кадр transition — лаг жеста на подлёте к зоне
   (WebKit @3x, кадры у hot-переключения: 71 мс → 18 мс после фикса). */
.s7z::before{content:""; position:absolute; inset:0; border:1.5px dashed var(--pencil);
  border-radius:16px; filter:url(#squiggle); transition:opacity .12s; will-change:opacity;}
.s7z::after{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--marker); border:1.5px solid var(--graphite);
  border-radius:16px; filter:url(#squiggle); transition:opacity .12s; will-change:opacity;}
.s7z svg{width:24px; height:24px; flex:none;}
.s7z .zt{display:flex; flex-direction:column; line-height:1.05;}
.s7z .zl{font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:var(--graphite-soft);}
.s7z .zs{font-size:10px; color:var(--pencil);}
/* хинт жеста: тач — «свайп», десктоп (мышь/трекпад) — «стрелка» (клавиши ← ↑ → ↓) */
.s7z .zsd{display:none;}
@media (hover:hover) and (pointer:fine){
  .s7z .zst{display:none;}
  .s7z .zsd{display:inline;}
}
.s7z.u{left:50%; top:8px; transform:translateX(-50%); width:120px; height:64px;}
.s7z.d{left:50%; bottom:8px; transform:translateX(-50%); width:120px; height:64px;}
/* правая рельса «сделано» — зелёный позитив (галка + подпись) */
.s7z.r{color:var(--green);}
.s7z.r::before{border-color:var(--green);}
.s7z.r .zl{color:var(--green);}
/* боковые зоны — «рельсы» на всю высоту поля (от ряда «сегодня» до «мусорки»):
   траектория жеста к краю читается визуально, как размерная линия на чертеже.
   Подпись — вверху рельсы, НАД картой (карта опущена на −44px и накрывает
   только нижнюю часть рельсы — z0 под картой, hot-маркер виден за кромкой).
   Осознанное отступление от листа 07 (там боковые 64×96 по центру, под картой). */
.s7z.l,.s7z.r{
  top:80px; bottom:80px; width:80px;   /* 80: влезает «пропустить» без «…» */
  flex-direction:column; justify-content:flex-start; gap:4px; padding-top:20px;
}
.s7z.l{left:8px;} .s7z.r{right:8px;}
.s7z.l .zt,.s7z.r .zt{align-items:center; text-align:center;}
/* hug (Л-закон): длинный перевод не раздувает зону — клетка фикс, текст «…» */
.s7z .zt{min-width:0;}
.s7z .zl,.s7z .zs{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.s7z.hot{color:var(--graphite);}   /* мгновенно, без transition — один repaint подписи/иконки */
.s7z.hot::before{opacity:0;}
.s7z.hot::after{opacity:1;}
.s7z.hot .zl{color:var(--graphite);}
.s7field.l2 .s7z{opacity:0;}   /* в выборе даты зоны молчат совсем — не шумят под чипами/«назад» */

/* ── карта-колода: 264×152 R16 · штрих 2.0 · БЕЗ тени · стопка сдвиг 8/16 + rot ±2° ── */
.s7card{
  position:absolute; left:50%; top:50%; width:264px; min-height:152px;
  margin:-76px 0 0 -132px;   /* честный центр поля: подписи рельс живут выше карты */
  background:var(--card,#fff); border-radius:16px; padding:16px 16px 12px; z-index:3;
}
.s7card::before{content:""; position:absolute; inset:0; border:2px solid var(--graphite);
  border-radius:16px; filter:url(#squiggle); pointer-events:none;}
.s7card.b1{transform:translate(8px,8px) rotate(2deg); opacity:.7; z-index:2;}
.s7card.b2{transform:translate(16px,16px) rotate(-2deg); opacity:.4; z-index:1;}
.s7card .src{font-size:11px; color:var(--pencil);}
.s7card .t{
  font-family:'Caveat',cursive; font-weight:700; font-size:22px; line-height:1.1;
  margin:4px 0 8px; color:var(--graphite); overflow-wrap:anywhere;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.s7card .sub{
  font-size:.8rem; color:var(--graphite-soft); margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.s7card .meta{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--graphite-soft); flex-wrap:wrap;}
.s7card .mini-ava{
  width:24px; height:24px; border-radius:50%; color:#fff; flex:none; overflow:hidden;
  font-family:'Caveat',cursive; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.s7card .mini-ava img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
/* вердикт-штамп 32 R8 — появляется при фиксации (цвет = направление) */
.s7card .st7{
  position:absolute; top:8px; right:12px; height:32px; padding:0 10px; border-radius:8px;
  font-family:'Caveat',cursive; font-weight:700; font-size:19px;
  display:flex; align-items:center; border:2px solid currentColor; background:var(--card,#fff);
  opacity:0; transform:rotate(8deg);
}
.s7card .st7.show{opacity:1;}
/* штамп-ДО-отпускания (tinder): «→ неделя» проявляется на карте с op=|d|/80 */
.s7card .big{
  position:absolute; left:50%; top:50%; height:48px; padding:0 16px; z-index:2;
  display:flex; align-items:center; border-radius:12px; background:var(--card,#fff);
  font-family:'Caveat',cursive; font-weight:700; font-size:28px; line-height:1; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translate(-50%,-50%) rotate(-12deg) scale(.8);
}
.s7card .big::before{content:""; position:absolute; inset:0; border:2.5px solid currentColor;
  border-radius:12px; filter:url(#squiggle);}
/* штамп — свой слой: его op/scale скачут каждый кадр и не должны рерастить
   слой карты (иначе squiggle карты пересчитывается вместе с ним) */
.s7card .big{will-change:transform,opacity;}
.s7card.top{transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  cursor:grab; touch-action:none;
  /* §1: свой композитный слой — squiggle-фильтр рамки растеризуется ОДИН раз,
     драг/улёт двигают готовую текстуру на GPU (иначе iPhone пересчитывает
     feTurbulence каждый кадр и жест тормозит) */
  will-change:transform;}
.s7card.top.drag{transition:none; cursor:grabbing;}
.s7card.top.lift{transform:translateY(-48px) scale(.92);}  /* канон листа: карта снова в центре, компенсация не нужна */
.s7card.pop{animation:s7pop .2s ease;}
@keyframes s7pop{from{transform:translate(8px,8px) rotate(2deg); opacity:.6;}}

/* ── карточка-вернуть: обязательная отмена последнего улёта, 5 с ── */
.s7uc{
  position:absolute; left:16px; right:16px; bottom:calc(74px + var(--safe-bottom, 0px)); height:56px; z-index:8;
  background:var(--card,#fff); border-radius:14px; display:flex; align-items:center; gap:8px; padding:0 8px 0 12px;
  transform:translateY(96px); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .24s cubic-bezier(.22,.61,.36,1), opacity .24s ease, visibility 0s .24s;
}
.s7uc::before{content:""; position:absolute; inset:0; border:2px solid var(--graphite);
  border-radius:14px; filter:url(#squiggle); pointer-events:none;}
.s7uc.show{transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible;
  transition:transform .24s cubic-bezier(.22,.61,.36,1), opacity .24s ease;}
.s7uc .txt{flex:1; min-width:0; line-height:1.1;}
.s7uc .txt b{display:block; font-family:'Caveat',cursive; font-weight:700; font-size:17px;
  color:var(--graphite); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.s7uc .txt span{display:block; font-size:11px; color:var(--pencil);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.s7ucb{
  height:40px; flex:none; padding:0 12px; border-radius:10px; background:var(--marker);
  position:relative; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite);
}
.s7ucb::before{content:""; position:absolute; inset:0; border:2px solid var(--graphite);
  border-radius:10px; filter:url(#squiggle); pointer-events:none;}
.s7ucb svg{width:16px; height:16px;}
.s7uc .tm{position:absolute; left:12px; right:12px; bottom:4px; height:4px;
  background:var(--ink-blue); opacity:.55; transform-origin:left; transform:scaleX(0);}
.s7uc.show .tm{animation:s7tm 5s linear forwards;}
@keyframes s7tm{from{transform:scaleX(1);} to{transform:scaleX(0);}}

/* ── уровень 2: карусель недель (цвет страницы --wk = вторая лампа действия) ── */
.s7l2{position:absolute; left:0; right:0; bottom:4px; z-index:4; display:none;
  flex-direction:column; gap:8px; align-items:center;}
.s7l2.on{display:flex;}
.s7l2 .q{font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite-soft);}
/* шаг 1 «на когда?»: три равные мишени день/неделя/месяц (тап или донос карты) */
.s7whenrow{display:flex; gap:8px; width:343px; max-width:100%;}
.s7wc{
  flex:1 1 0; min-width:0; height:48px; border-radius:12px; background:var(--card,#fff);
  position:relative; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:6px;
  font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:var(--graphite-soft);
  transition:transform .12s ease;
  will-change:transform;   /* §1: свой слой — hov-скраб красит только чип, подъём композитный */
}
.s7wc::before{content:""; position:absolute; inset:0;
  border:2px solid var(--wk, var(--graphite));   /* конкретика недели/месяца — цвет горизонта */
  border-radius:12px; filter:url(#squiggle); pointer-events:none;}
.s7wc svg{width:14px; height:14px; flex:none;}
.s7wc span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.s7wc:hover,.s7wc.hov{background:var(--marker); color:var(--graphite); transform:translateY(-4px);}
.s7wc.hov::before{border-width:2.5px;}
.s7wc:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
/* шаг 2: обёртка карусели (ярлык недели + лента чипов) */
.s7days{display:flex; flex-direction:column; gap:8px; align-items:center; width:100%;}
/* в выборе даты подложки стопки прячем — просвечивали сквозь чипы и сливались */
.s7field.l2 .s7card.b1,.s7field.l2 .s7card.b2{opacity:0; visibility:hidden;}
.s7wk{display:flex; align-items:center; gap:8px; width:343px; max-width:100%;}
.s7pg{width:32px; height:48px; border-radius:8px; position:relative; flex:none; cursor:pointer;
  background:none; display:inline-flex; align-items:center; justify-content:center; color:var(--wk, var(--graphite-soft));
  will-change:transform;}
.s7pg::before{content:""; position:absolute; inset:0; border:1.5px dashed var(--pencil);
  border-radius:8px; filter:url(#squiggle); pointer-events:none;}
.s7pg svg{width:16px; height:16px;}
.s7pg:disabled{opacity:.3; cursor:default;}
.s7wl{flex:1; min-width:0; height:48px; border-radius:10px; position:relative; background:var(--card,#fff);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  line-height:1; color:var(--wk, var(--ink-blue));
  will-change:transform;}
.s7wl::before{content:""; position:absolute; inset:0; border:2px solid currentColor;
  border-radius:10px; filter:url(#squiggle); pointer-events:none;}
.s7wl .t{font-family:'Caveat',cursive; font-weight:700; font-size:16px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:95%;}
.s7wl .dots{display:flex; gap:5px;}
.s7wl .dots i{width:6px; height:6px; border-radius:50%; border:1.4px solid currentColor;}
.s7wl .dots i.on{background:currentColor;}
.s7strip{width:328px; max-width:100%; overflow:hidden; touch-action:pan-y;}
/* §1: лента — свой слой: листание двигает готовую текстуру, а не перерастеризует
   21 squiggle-чип; blink пейджера/ярлыка — композитный scale по той же причине */
.s7trk{display:flex; gap:16px; transition:transform .24s cubic-bezier(.22,.61,.36,1);
  will-change:transform;}
.s7pgd{display:flex; gap:8px; flex:none; width:328px;}
.s7dc{width:40px; height:48px; border-radius:12px; background:var(--card,#fff); position:relative; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:var(--graphite-soft);
  transition:transform .12s ease;
  will-change:transform;}   /* §1: свой слой на чип (см. .s7wc) */
.s7dc::before{content:""; position:absolute; inset:0; border:1.5px solid var(--wk, var(--graphite));
  border-radius:12px; filter:url(#squiggle); pointer-events:none;}
.s7dc small{font-family:'Neucha',cursive; font-size:9px; color:var(--pencil); margin-top:2px;}
.s7dc:hover:not(:disabled),.s7dc.hov{background:var(--marker); color:var(--graphite); transform:translateY(-4px);}
.s7dc.hov::before{border-width:2.5px;}
.s7dc.past{opacity:.5; cursor:default;}
.s7dc.past::before{border-style:dashed; border-color:var(--pencil);}
.s7dc.past{background-image:repeating-linear-gradient(-45deg,
  transparent 0 5px, rgba(139,133,120,.28) 5px 6.5px);}
.s7dc.today::after{content:""; position:absolute; bottom:4px; left:50%; margin-left:-2px;
  width:4px; height:4px; border-radius:50%; background:var(--wk, var(--ink-blue));}
/* «назад» — полноценная ghost-кнопка (нижний ряд в выборе спрятан, она — выход) */
.s7back{
  height:40px; padding:0 24px; border-radius:10px; position:relative;
  display:inline-flex; align-items:center; gap:6px; background:none; cursor:pointer;
  font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:var(--graphite-soft);
}
.s7back::before{content:""; position:absolute; inset:0; border:1.5px dashed var(--pencil);
  border-radius:10px; filter:url(#squiggle); pointer-events:none;}
.s7back:hover{color:var(--graphite);}
.s7back:active{transform:scale(.95);}
/* лампа-приглашение: пейджер зовёт в следующую неделю (вс не тупик) / смена страницы */
.s7wl.blink,.s7pg.blink{animation:s7blink .5s ease;}
@keyframes s7blink{50%{transform:scale(1.14);}}

/* ── финалка ── */
.s7done{position:absolute; inset:0; z-index:5; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;}
.s7done.on{display:flex;}
.s7done h3{font-family:'Caveat',cursive; font-weight:700; font-size:24px; margin:0;}
.s7sum{background:var(--card,#fff); border-radius:16px; position:relative; padding:12px 20px;
  display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--graphite-soft);
  min-width:200px; max-width:min(420px, 92%);}
.s7sum::before{content:""; position:absolute; inset:0; border:1.5px solid var(--graphite);
  border-radius:16px; filter:url(#squiggle); pointer-events:none;}
.s7sum b{font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite);}
.s7done-btns{justify-content:center; margin-top:2px;}
/* экран «свои разобраны!»: кнопки столбиком, одной ширины, «готово» ниже и
   акцентная; остальной интерфейс на время предложения приглушается */
.s7rest-btns{flex-direction:column; align-items:center; gap:8px; width:100%;}
.s7rest-btns .btn{
  width:min(280px, 86%); box-sizing:border-box; text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
}
.s7-frame:has(#sx-rest.on) .s7z{opacity:.1;}
.s7-frame:has(#sx-rest.on) .s7row{opacity:.18; pointer-events:none; transition:opacity .24s ease;}
.s7-frame:has(#sx-rest.on) .s7title,
.s7-frame:has(#sx-rest.on) .s7cnt{opacity:.35; transition:opacity .24s ease;}
.s7-frame:has(#sx-rest.on) .s7undo,
.s7-frame:has(#sx-rest.on) .s7x{opacity:.5;}   /* живые (вернуть свою / выйти), но тихие */

/* ── нижний ряд кнопок-дублей: 60×48 R12 · штрих 2.0 · мусорка red dashed ── */
.s7row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:16px;}
.s7b{flex:1 1 0; min-width:0; height:48px; padding:0 4px; border-radius:12px; background:var(--card,#fff);
  position:relative; cursor:pointer;   /* 4 равные кнопки в одну строку: (343−3×8)/4 ≈ 80 */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transition:transform .12s ease;}
.s7b::before{content:""; position:absolute; inset:0; border:2px solid var(--graphite);
  border-radius:12px; filter:url(#squiggle); pointer-events:none;}
.s7b .w{display:flex; align-items:center; gap:3px; line-height:1;
  font-family:'Caveat',cursive; font-weight:700; font-size:13px; color:var(--graphite); white-space:nowrap;}
.s7b .w svg{width:12px; height:12px; flex:none;}
.s7b kbd{font-family:'Neucha',cursive; font-size:9px; color:var(--pencil); line-height:1;}
.s7b:hover{transform:translateY(-3px);}
.s7b:active{transform:translateY(0) scale(.96);}
.s7b.done::before{border-color:var(--green);}
.s7b.done .w{color:var(--green);}

/* конфетти-контейнер (частицы .sx-cf/@sx-fall — общие, из board.js sxConfetti()) */
.s7cfw{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; border-radius:inherit;}

/* узкий портрет (TG Mini App 320–390): карта ужимается, kbd прячем */
@media (max-width:400px){
  .s7card{width:min(264px, calc(100vw - 96px)); margin-left:calc(min(264px, 100vw - 96px) * -0.5);}
  .s7b kbd{display:none;}
}
/* низкие экраны: ландшафт телефона / открытая клавиатура TG */
@media (max-height:560px){
  .s7field{min-height:260px; margin-top:8px;}
  .s7top h2.s7title{font-size:1.35rem;}
  .s7card{min-height:116px; padding:12px 14px 10px; margin-top:-58px;}   /* центр для карты 116 */
  .s7card .t{font-size:20px; margin:2px 0 5px;}
  .s7z .zs{display:none;}
  .s7z.u,.s7z.d{height:52px;}
  .s7z.l,.s7z.r{top:64px; bottom:68px; padding-top:12px;}   /* рельсы под ужатую «сегодня» */
  .s7row{padding-top:8px;}
  .s7b kbd{display:none;}
  .s7uc{bottom:calc(66px + var(--safe-bottom, 0px));}
}
@media (prefers-reduced-motion:reduce){
  .s7card,.s7card.top,.s7b,.s7dc,.s7undo,.s7x,.s7trk,.s7pg{transition:none;}
  .s7card.pop{animation:none;}
  .s7uc.show .tm{animation:none; transform:scaleX(0);}
}