/* ─── Шапка, каркас доски, ганты, год, сайдбар, модалки, маскот ─── */

/* шапка — один ряд в стиле дизайн-кита: словомарка слева, справа кластер
   карандашных карточек (счёт · тариф · колокольчик) в .hdr-actions
   (css/notify.css). Разделы живут в нижнем тап-баре; на экране входа всё,
   кроме логотипа, скрыто. */
header.app{
  position:sticky; top:0; z-index:30;
  /* сетка 1fr auto 1fr → счёт всегда ПО ЦЕНТРУ шапки, кластеры прижаты к краям */
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:12px;
  /* Контент шапки держим в той же центрированной сетке (max-width:980px), что и
     контент всех экранов (.tasks-wrap/.board-head — tasks.css; .pgrid; #shelf;
     .cal-wrap), чтобы на широких мониторах логотип и кластер .hdr-actions не
     «улетали» к краям. Фон-бумага и пунктир остаются full-bleed; горизонтальный
     padding центрирует контент, а +20px повторяют его внутренний отступ —
     кромки лого/actions ложатся ровно на кромки карточек. floor 20px держит
     лого у края на экранах уже 980px. */
  --hdr-w:980px;
  --hdr-line-pad:20px;   /* отступ пунктира = горизонт. padding контента (см. ::after) */
  padding:10px max(20px, calc((100% - var(--hdr-w)) / 2 + 20px)) 8px;
  background:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1.1px, transparent 1.3px);
  background-size:26px 26px;
  /* НЕТ position:relative здесь — он перекрывал position:sticky (строка выше) и
     шапка начинала скроллиться вместе с контентом. sticky сам создаёт containing
     block для ::after (position:absolute), так что relative был лишним. */
}
/* Пунктир-разделитель — по ширине КОНТЕНТА (--hdr-w, как .tasks-wrap/.cal-wrap/
   #shelf/.pgrid = 980px), НЕ full-bleed: ложится на кромки лого/actions и карточек.
   Фон-бумага остаётся во всю ширину. Раньше border-bottom тянулся на весь вьюпорт. */
header.app::after{
  content:''; position:absolute; bottom:0;
  left:max(var(--hdr-line-pad), calc((100% - var(--hdr-w)) / 2 + var(--hdr-line-pad)));
  right:max(var(--hdr-line-pad), calc((100% - var(--hdr-w)) / 2 + var(--hdr-line-pad)));
  border-top:2px dashed var(--pencil-faint);
}
header.app .logo{flex:0 1 auto; min-width:0;}
/* левый кластер (лого + тариф) слева, счёт по центру, колокольчик справа */
.hdr-left{display:flex; align-items:center; gap:12px; min-width:0; justify-self:start;}
header.app > .score{justify-self:center;}
header.app > .hdr-actions{justify-self:end;}
.logo{display:flex; flex-direction:column; line-height:1;}
.logo h1{font-size:2rem; font-weight:700; letter-spacing:.5px;}
/* хвост-подчёркивание = ширина словомарки (колонка .logo сайзится по h1), а не
   фикс: длинный хвост распирал .logo и сжимал кластер счёта на узких экранах */
.logo svg{width:100%; max-width:92px; height:10px; margin-top:-2px;}
/* переключатель языка — простой селект под «карандашную» тему
   (живёт в настройках и на экране входа) */
.lang-select{
  font-family:'Neucha',cursive; font-size:.92rem; line-height:1.1;
  color:var(--graphite); background:transparent;
  border:1.6px solid var(--pencil); border-radius:var(--r-input);
  padding:5px 8px; cursor:pointer; max-width:9.5rem;
}
.lang-select:hover{border-color:var(--graphite);}
.lang-select:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.lang-select option{font-family:inherit; color:var(--graphite); background:var(--paper);}
#settings-dialog .lang-select{display:block; margin:2px 0 6px;}

/* Экран «Профиль» переехал на карточную вёрстку — стили в css/profile.css. */

/* Счёт в шапке — без рамки: замкнутый карандашный контур вокруг аватаров, цифр
   и «+» был самой тяжёлой формой в шапке. Акцент держит маркер по цифрам
   (.tally) — единый приём выделения с «разобрать ящичек». */
.score{
  font-family:'Neucha',cursive; font-size:1rem; color:var(--graphite);
  background:none; border:none; cursor:pointer;
  padding:0 4px; position:relative;
  /* высота фиксирована --hdr-h (notify.css, весь кластер одной высоты) —
     контент центрируем флексом, вертикальный padding не нужен */
  display:inline-flex; align-items:center;
  transition:transform .12s ease;
}
.score .score-in{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap; /* «✓ 0» не переносить в столбик при сжатой кнопке */
}
.score:hover{transform:rotate(-1deg) scale(1.03);}
.score:focus-visible{outline:3px solid var(--ink-blue); outline-offset:3px; border-radius:14px;}
/* счёт прошли хайлайтером — рваные радиусы, как у маркерной плашки ящичка */
.score .tally{
  display:inline-flex; align-items:center; gap:5px;
  padding:1px 8px; border-radius:6px 4px 7px 5px;
  background:var(--marker); color:var(--graphite);
}
.score b{font-size:1.1rem; letter-spacing:1px;}
.score .vs{color:var(--graphite-soft);}
.score .lead{position:relative;}
.score .crown{position:absolute; top:-12px; left:1px; width:20px; height:12px; transform:rotate(-12deg);}
.score .crown path{fill:var(--marker); stroke:var(--amber); stroke-width:1.5;}
.score .hintw{font-size:.78rem; color:var(--pencil);}
/* ── модалка «Семья» («+» в счёте): члены списком + раскрывашка «позвать
   нового» с карточками-способами (прототип family-invite-menu-v1) ── */
.fam-frame{min-width:min(400px, calc(100vw - 28px));}
.fam-list{display:flex; flex-direction:column; gap:11px; margin:12px 0 4px;}
.fam-row{display:flex; align-items:center; gap:12px;}
.fam-row .nm{font-size:1.05rem; color:var(--graphite); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fam-invite{margin-top:14px; padding-top:6px; border-top:2px dashed var(--pencil-faint);}
/* заголовок секции инвайта — статичный (блок «позвать нового» всегда раскрыт,
   без сворачивания; аккордеон/шеврон убраны по запросу) */
.fam-inv-head{
  width:100%; min-height:40px; display:flex; align-items:center; gap:9px;
  text-align:left; padding:0 2px;
}
.fam-inv-head .t{font-family:'Caveat',cursive; font-weight:700; font-size:1.35rem; color:var(--graphite);}
.fam-ways{display:flex; flex-direction:column; align-items:stretch; gap:9px; padding-top:4px;}
/* карточка-способ: иконка + заголовок + пояснение */
.fam-way{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  min-height:54px; padding:9px 12px; cursor:pointer;
  background:none; border:1.7px solid var(--pencil-faint); border-radius:var(--r-input);
  color:var(--graphite); font-family:inherit;
  transition:border-color .12s ease;
}
.fam-way:hover{border-color:var(--graphite);}
.fam-way:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.fam-way .ic{width:22px; height:22px; flex:none; color:var(--pencil); transition:color .12s ease;}
.fam-way:hover .ic{color:var(--graphite);}
.fam-way .tx{min-width:0;}
.fam-way .mt{display:block; font-size:.98rem; line-height:1.2;}
.fam-way .mh{display:block; font-size:.8rem; color:var(--pencil); margin-top:1px;}
/* успешное копирование: карточка зеленеет на пару секунд (js/score.js) */
.fam-way.ok{border-color:var(--green);}
.fam-way.ok .ic, .fam-way.ok .mh{color:var(--green);}
/* мостик из счёта */
/* выделенная синяя кнопка-CTA (--ink-blue, палитра v14) — «добавить члена семьи» */
.score-invite{
  display:block; margin:16px auto 0;
  background:var(--ink-blue); color:#fff; border-radius:var(--r-pill);
  font-weight:700; font-size:1.02rem; padding:9px 26px;
}
.score-invite::before{border-color:var(--ink-blue);}

/* слот «позвать» — карандашный квадратик с плюсом (стиль кнопки inv дизайн-кита) */
.score .rival-plus{
  width:25px; height:25px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.7px solid var(--graphite);
  border-radius:8px 10px 9px 8px / 9px 8px 10px 9px;
  color:var(--graphite); font-weight:700; line-height:1; font-size:.95rem;
  cursor:pointer; transition:transform .12s ease; transform:rotate(1.5deg);
}
.score .rival-plus:hover{transform:scale(1.12) rotate(6deg);}

/* ── лента секций-горизонтов (живёт на экране «Календарь», центрируется .cal-wrap) ── */
.col-main{padding:14px 20px 60px; min-width:0;}
.col-main section{margin-bottom:20px;}
.sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:9px;}
.sec-head h2{font-size:1.8rem; font-weight:700;}
.sec-head .hint{font-size:.88rem; color:var(--pencil);}
.sec-head svg{height:9px; flex:1; min-width:30px; max-width:240px; opacity:.7;}
.subblock{margin-top:20px;}
.col-title{
  font-family:'Caveat',cursive; font-size:1.45rem; font-weight:600; margin-bottom:10px;
  display:flex; align-items:baseline; gap:8px;
}
.col-title .doodle{font-size:.95rem; color:var(--pencil);}
.col-hint{font-size:.85rem; color:var(--pencil); margin:-6px 0 12px; transform:rotate(-.6deg);}

/* подпись экрана задач — та же типографика, что .shelf-tt у «Шкафа» */
.board-head{max-width:1560px; margin:0 auto; padding:16px 20px 0;}
.board-head h2{font-family:'Caveat',cursive; font-weight:700; font-size:2.1rem; line-height:1; color:var(--graphite);}
.board-head p{color:var(--pencil); font-size:.9rem; margin-top:3px;}

/* ─── Экран «Задачи» = ящик (инбокс) на всю ширину + фильтры снизу.
   Горизонты (сегодня/неделя/месяц/год) переехали на «Календарь». ─── */
.tasks-wrap{max-width:1560px; margin:0 auto; padding:14px 20px 0;}
.tasks-wrap > .notes-wrap{margin-top:4px;}
.tasks-filters{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px 30px; margin-top:28px;
  border-top:2px dashed var(--pencil-faint); padding-top:20px;
}
.tasks-filters .subblock{margin-top:0;}

/* ─── Экран «Календарь» = те же секции-горизонты, что были на доске ─── */
.cal-wrap{max-width:980px; margin:0 auto;}
.cal-wrap .col-main{padding-bottom:8px;}

/* «+ Добавить задачу» заменил композер-док (css/composer.css) */

/* ── гант: голова, дорожки, маркер «сегодня», линия «сейчас» ── */
.gantt{position:relative;}
.gantt .marker{
  position:absolute; z-index:0; top:-2px; bottom:-2px;
  background:var(--marker);
  border-radius:14px 80px 10px 90px / 90px 12px 80px 12px;
  transform:rotate(.25deg);
  pointer-events:none;
}
.ghead{display:grid; position:relative; z-index:1;}
.ghead .day{
  text-align:center; font-size:.92rem; color:var(--graphite-soft);
  padding:2px 0 8px; min-width:0;
  border-right:1.3px dashed var(--pencil-faint);
}
.ghead .day:last-child{border-right:none;}
.ghead .day b{font-family:'Caveat',cursive; font-size:1.2rem; color:var(--graphite);}
.ghead .day.today b{color:var(--red); position:relative; padding:0 6px;}
.ghead .day.today b::after{
  content:""; position:absolute; inset:-5px -8px;
  border:2px solid var(--red);
  border-radius:48% 52% 55% 45% / 55% 48% 52% 45%;
  filter:url(#squiggle);
  transform:rotate(-4deg);
}
.scale{
  display:grid; position:relative; z-index:1; padding-bottom:4px;
  border-bottom:1.4px solid var(--pencil-faint);
}
.scale i{
  font-style:normal; text-align:center;
  font-size:.72rem; color:var(--pencil);
  border-right:1px dotted var(--pencil-faint);
  overflow:hidden; min-width:0;
}
.scale i.today,.scale i.nowh{color:var(--red); font-weight:bold;}
.scale i.hourlbl{text-align:left; padding-left:3px; border-right:none; border-left:1px dotted var(--pencil-faint);}
.scale i.hourlbl:first-child{border-left:none;}
.lane{display:grid; position:relative; margin-top:8px; z-index:1;}
.lane .pill{margin:0 4px;}
.allday{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:.92rem; color:var(--graphite-soft); flex-wrap:wrap;
}
.allday .lbl{font-family:'Caveat',cursive; font-size:1.05rem; color:var(--pencil); transform:rotate(-1deg);}
.allday .pill{max-width:260px;}
.gantt-pad{padding-top:30px;} /* место под подпись «сейчас» */
.nowline{
  position:absolute; top:30px; bottom:0; width:0; z-index:4;
  border-left:2.4px solid var(--red);
  filter:url(#squiggle); pointer-events:none;
}
.nowline::before{content:"▼"; position:absolute; top:-13px; left:-6px; color:var(--red); font-size:.7rem;}
.nowline::after{
  content:attr(data-label); position:absolute; top:-29px; left:-18px;
  font-family:'Caveat',cursive; font-size:1.05rem; color:var(--red);
  transform:rotate(-3deg); white-space:nowrap;
}
.mile{display:flex; align-items:center; gap:6px; font-size:.95rem; white-space:nowrap; min-width:0; cursor:pointer;}
.mile .pill{flex:1;}
.mile > .star{font-size:1.45rem; text-shadow:1px 1px 0 rgba(44,42,38,.18); color:var(--c, var(--ink-blue));}
.mile.done > .star{opacity:.5;}

/* ── год ── */
.year-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;}
.year-list{display:flex; flex-direction:column; gap:9px;}
.yrow{
  display:flex; align-items:center; gap:10px; text-align:left;
  font-family:'Neucha',cursive; font-size:.98rem; color:var(--graphite);
  background:#fff; border:none; cursor:pointer;
  padding:9px 12px; position:relative;
  border-radius:var(--r-sketch2);
  box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.yrow::before{
  content:""; position:absolute; inset:0;
  border:1.6px solid var(--graphite); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.yrow:hover{transform:translateX(4px);}
.yrow:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.yrow.now{background:var(--marker);}
.yrow .ym{
  font-family:'Caveat',cursive; font-size:1.2rem; font-weight:600;
  width:46px; flex:none; color:var(--graphite-soft);
}
.yrow.now .ym{color:var(--graphite);}
.yrow .yfirst{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.yrow .yfirst.ghost{color:var(--pencil); opacity:.6; font-family:'Caveat',cursive;}
.yrow .yfirst.done{
  color:var(--graphite-soft); opacity:.85;
  text-decoration:line-through;
  text-decoration-color:var(--strike);
  text-decoration-thickness:1.8px;
}
.yrow .ymore{
  font-family:'Caveat',cursive; font-size:1rem; color:var(--pencil);
  flex:none; transform:rotate(-3deg);
}
.mon{
  background:#fff; min-height:84px; padding:7px 10px;
  position:relative; box-shadow:var(--shadow);
  border-radius:var(--r-sketch);
  transition:transform .12s ease;
  cursor:pointer; min-width:0;
}
.mon:nth-child(even){border-radius:var(--r-sketch2); transform:rotate(.35deg);}
.mon:nth-child(odd){transform:rotate(-.3deg);}
.mon:hover{transform:rotate(0) translateY(-3px);}
.mon:focus-visible{outline:3px solid var(--ink-blue); outline-offset:3px;}
.mon::before{
  content:""; position:absolute; inset:0;
  border:1.6px solid var(--graphite); border-radius:inherit;
  filter:url(#squiggle); pointer-events:none;
}
.mon h3{font-size:1.25rem; font-weight:600; color:var(--graphite-soft);}
.mon.now{background:var(--marker);}
.mon.now h3{color:var(--graphite);}
.mon .mini{
  margin-top:6px; font-size:.85rem; padding:3px 8px;
  position:relative; display:flex; gap:5px; align-items:center;
  background:#fff; max-width:100%;
  cursor:grab; border-radius:var(--r-pill);
}
.mon .mini .mtx{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.mon .mini .star{font-size:.95rem; color:var(--c, var(--ink-blue));}
.mon .mini::before{
  content:""; position:absolute; inset:0;
  border:1.3px dashed var(--c, var(--ink-blue)); border-radius:var(--r-pill);
  filter:url(#squiggle); pointer-events:none;
}
.mon .mini.done{
  color:var(--graphite-soft);
  text-decoration:line-through;
  text-decoration-color:rgba(206,74,58,.5);
  text-decoration-thickness:1.6px;
}
.mon .mini.done::before{border-color:var(--pencil);}
.mon .more{
  display:block; margin-top:4px;
  font-family:'Caveat',cursive; font-size:.95rem; color:var(--pencil);
  transform:rotate(-1.5deg);
}
.mon .more.ghost{opacity:.5;}
/* мини-хитмеп месяца: клетка — день (с Пн), гуще цвет — больше задач */
.mon .heat{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:3px; max-width:132px;
  margin-top:8px; padding-top:8px;
  border-top:1.3px dashed var(--pencil-faint);
}
.mon .heat i{
  aspect-ratio:1/1; min-width:0;
  background:rgba(60,55,45,.08);
  border-radius:38% 62% 44% 56% / 56% 44% 62% 38%;
}
.mon .heat i.pad{background:none;}
.mon .heat i.on{
  background:color-mix(in srgb, var(--c, var(--ink-blue)) var(--lvl, 55%), #fff);
  transition:transform .12s ease;
}
.mon .heat i.on:hover{transform:scale(1.3);}
.mon .heat i.today{outline:1.6px solid var(--red); outline-offset:1px;}
.mon .heat i.ms{position:relative;}
.mon .heat i.ms::after{
  content:"★"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:.6rem; line-height:1; color:#fff;
  text-shadow:0 0 2px rgba(44,42,38,.55);
}

/* ── сайдбар: ящичек + теги ── */
.notes-wrap{display:grid; gap:13px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); min-height:60px;}
.side-tags{display:flex; flex-wrap:wrap; gap:9px;}
.tag{
  font-family:'Neucha',cursive; font-size:.92rem;
  background:#fff; color:var(--graphite-soft);
  border:none; cursor:pointer; padding:5px 14px;
  position:relative; transition:transform .12s ease;
}
.tag::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.tag:hover{transform:rotate(1deg) translateY(-2px);}
.tag:focus-visible{outline:3px solid var(--ink-blue); outline-offset:3px; border-radius:14px;}
.tag .n{color:var(--pencil); font-size:.8em;}
.tag.red{color:var(--red);} .tag.red::before{border-color:var(--red);}
.tag.active{background:var(--graphite); color:#fff; border-radius:var(--r-pill);}
.tag.active .n{color:rgba(255,255,255,.7);}
.tag.red.active{background:var(--red);}
.tag.clear{color:var(--pencil);}
.tag.clear::before{border-style:dashed;}

/* ── «По людям»: чипы членов семьи (фильтр + дроп-цель передачи) ── */
.mchip{display:inline-flex; align-items:center; gap:7px; padding:4px 13px 4px 5px;}
.mchip .ava{width:22px; height:22px; font-size:.95rem; box-shadow:inset -1px -1px 0 rgba(0,0,0,.12);}
.mchip.active .n{color:rgba(255,255,255,.7);}

/* тумблер «⇅ по людям» в заголовке ящичка */
.sortbtn{
  margin-left:auto; align-self:center;
  font-family:'Neucha',cursive; font-size:.8rem; color:var(--pencil);
  background:none; border:none; cursor:pointer;
  padding:3px 11px; position:relative;
  transition:transform .12s ease;
}
.sortbtn::before{
  content:""; position:absolute; inset:0;
  border:1.4px dashed var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.sortbtn:hover{transform:translateY(-1px);}
.sortbtn.active{background:var(--graphite); color:#fff; border-radius:var(--r-pill);}
.sortbtn.active::before{border-style:solid; border-color:var(--graphite);}

/* подзаголовок группы в ящичке при сортировке по людям */
.notes-ghead{
  display:flex; align-items:center; gap:7px; margin:3px 0 -5px;
  font-family:'Caveat',cursive; font-size:1.15rem; color:var(--graphite-soft);
}
.notes-ghead .ava{width:20px; height:20px; font-size:.85rem; box-shadow:none;}

/* ── модалки: нативный <dialog> в «бумажной» обёртке ── */
dialog{
  border:none; background:transparent; padding:0;
  margin:auto; /* * { margin:0 } сбивает родное центрирование */
  overflow:visible; max-width:min(520px, calc(100vw - 24px));
}
dialog::backdrop{background:rgba(58,54,46,.38);}
.m-frame{
  background:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1px, transparent 1.2px);
  background-size:24px 24px;
  width:100%; min-width:min(460px, calc(100vw - 28px));
  position:relative; padding:18px 20px 20px;
  border-radius:var(--r-sketch);
  box-shadow:7px 9px 0 rgba(44,42,38,.22);
  transform:rotate(-.4deg);
}
.m-frame::before{
  content:""; position:absolute; inset:0;
  border:2px solid var(--graphite); border-radius:var(--r-sketch);
  filter:url(#squiggle); pointer-events:none;
}
dialog h2, dialog h3{font-family:'Caveat',cursive; font-size:1.7rem; font-weight:700; margin-bottom:8px; padding-right:48px;} /* клиренс под .m-close 44px */
/* 44×44 — минимальный палец-таргет Apple HIG (крестики модалок были 36 и
   промахивались на телефоне); top/right ужаты, чтобы центр глифа не уехал */
.m-close{
  position:absolute; top:8px; right:8px; z-index:2;
  font-family:'Caveat',cursive; font-size:1.6rem; line-height:1;
  background:none; border:none; color:var(--graphite-soft); cursor:pointer;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
}
.m-close:hover{color:var(--red); transform:rotate(8deg);}
.m-close:focus-visible{outline:3px solid var(--ink-blue); border-radius:50%;}
/* буфер по краям + отрицательные поля: скролл-границы шире контента,
   чтобы outline выбранных свотчей, hover-transform и squiggle-рамки не резались */
.m-body{
  max-height:62dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:6px 10px 10px;
  margin:0 -10px -6px;
}
.m-sub{font-size:.9rem; color:var(--pencil); margin-bottom:10px;}
.m-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:9px 0;}
.m-lbl{font-family:'Caveat',cursive; font-size:1.1rem; color:var(--pencil); min-width:86px;}
.m-sep{border:none; border-top:2px dashed var(--pencil-faint); margin:13px 0;}
.m-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}

.star-toggle{background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--pencil-faint);filter:url(#squiggle);}
.star-toggle.on{color:var(--ink-blue);}
.star-toggle:focus-visible{outline:3px solid var(--ink-blue); border-radius:8px;}

.c-input{display:flex; gap:8px; margin-top:10px;}
.c-input input{
  flex:1; min-width:0;
  font-family:'Neucha',cursive; font-size:.95rem;
  background:#fff; border:none; padding:8px 12px; color:var(--graphite);
  border-radius:var(--r-pill);
  outline:none; box-shadow:0 0 0 1.5px var(--pencil);
}
.c-input input:focus{box-shadow:0 0 0 2px var(--ink-blue);}

.tlist{display:flex; flex-direction:column; gap:10px; padding:4px 2px;}
.trow{
  display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;
  background:#fff; padding:9px 14px 9px 12px; cursor:pointer;
  position:relative; border-radius:var(--r-sketch2);
  transition:transform .12s ease;
}
.trow::before{
  content:""; position:absolute; inset:0;
  border:1.5px solid var(--graphite); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.trow:hover{transform:translateX(4px) rotate(-.3deg);}
.trow:focus-visible{outline:3px solid var(--ink-blue); outline-offset:2px;}
.trow .body{flex:1; min-width:0;}
.trow .t{font-size:.98rem; overflow-wrap:break-word;}
.trow .t.done{
  color:var(--graphite-soft); opacity:.85;
  text-decoration:line-through;
  text-decoration-color:var(--strike);
  text-decoration-thickness:2px;
}
/* превью описания — ровно две строки: длинный текст (вставленная таблица,
   ответ нейросети) не должен разносить список месяца на весь экран */
.trow .sub{font-size:.82rem; color:var(--pencil); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.trow .meta{display:flex; gap:7px; align-items:center; margin-top:5px; flex-wrap:wrap;}
.trow .where{
  font-size:.78rem; color:var(--pencil); white-space:nowrap;
  transform:rotate(-2deg); margin-left:auto; flex:none; padding-top:2px; max-width:100%;
}

.tally-row{display:flex; align-items:center; gap:12px; margin:12px 0;}
.tally-row .nm{width:90px; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tally{height:30px; flex:none;}
.tally path{stroke:var(--graphite); stroke-width:2.2; stroke-linecap:round; fill:none;}
.tally-row .tot{font-family:'Caveat',cursive; font-size:1.25rem; color:var(--graphite-soft);}
.tally-row .crown2{width:22px; height:14px; transform:rotate(-10deg); flex:none;}
.tally-row .crown2 path{fill:var(--marker); stroke:var(--amber); stroke-width:1.5;}

/* ── маскот ── */
.mascot{
  /* z-index ВЫШЕ дока (.sk-dock 70): иначе полупрозрачный слой fade дока лёг бы
     поверх карандаша и приглушал/размывал его. Маскот геометрически выше плашки —
     контролы не перекрывает. Тачи и так проходят сквозь (pointer-events:none). */
  position:fixed; right:14px; bottom:12px; z-index:71;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  /* контейнер не рисует ничего сам — но как div со своим layout-боксом
     (включая «пустой» gap между пузырём и карандашом) он ловил тачи ПОВЕРХ
     карточек задач, что стоят под ним при скролле (свайп по такой карточке
     не стартовал — touchstart прилетал сюда, не в .task). Возвращаем
     интерактивность только видимым детям. */
  pointer-events:none;
}
/* Верт. свайп СКВОЗЬ маскота = скролл страницы, а не «залипание» на его
   pointer-events:auto детях. Маскот стоит над контент-зоной (правый бок списка);
   без этого в Telegram Mini App свайп вниз по пузырю/карандашу не двигает список
   → Telegram трактует жест как swipe-to-dismiss и СВОРАЧИВАЕТ апп. pan-y отдаёт
   вертикальный жест браузеру (скролл), tap/клик по кнопкам сохраняются. */
.mascot, .mascot *{ touch-action:pan-y; }
.mascot .bubble, .mascot .pencil-btn{ pointer-events:auto; }
.mascot .bubble{
  max-width:230px; background:#fff; padding:10px 40px 10px 13px;
  min-height:44px;  /* короткий тап не даёт .m-hide (44px, top:0 right:0) вылезти снизу */
  font-size:.9rem; color:var(--graphite);
  position:relative; border-radius:var(--r-sketch2);
  box-shadow:var(--shadow);
  transform:rotate(-1deg);
  display:flex; align-items:flex-start; gap:8px;
}
.mascot .bubble-tip{
  flex:1 1 auto; min-width:0;
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left; line-height:1.35;
  white-space:normal; cursor:pointer;
}
.mascot .bubble-tip:hover #m-tip{ text-decoration:underline dotted; text-underline-offset:2px; }
.mascot .bubble-tip:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:3px; border-radius:8px; }
.mascot .bubble::before{
  content:""; position:absolute; inset:0;
  border:1.6px solid var(--graphite); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.mascot .bubble::after{
  content:""; position:absolute; bottom:-7px; right:26px;
  width:13px; height:13px; background:#fff;
  border-right:1.6px solid var(--graphite); border-bottom:1.6px solid var(--graphite);
  transform:rotate(45deg) skew(8deg,8deg);
}
.mascot .bubble b{font-family:'Caveat',cursive; font-size:1.05rem;}
.pencil-btn{background:none; border:none; cursor:pointer; padding:0; animation:bob 3.2s ease-in-out infinite;}
.pencil-btn:hover svg{transform:rotate(-6deg);}
.pencil-btn svg{width:60px; height:82px; transition:transform .15s ease;}
.pencil-btn:focus-visible{outline:3px solid var(--ink-blue); outline-offset:4px; border-radius:14px;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(2deg);}50%{transform:translateY(-7px) rotate(-2deg);}}
/* угол пузыря, не в ряду с текстом (был зажат сразу после «Карандашик:» —
   крошечная тач-цель посреди строки); 44×44 — минимальный палец-таргет
   Apple HIG, глиф внутри визуально меньше. padding-right пузыря (40px,
   выше) освобождает место под кнопкой — текст/«спросить» под неё не лезут. */
.m-hide{
  position:absolute; top:0; right:0; z-index:1;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-size:1.05rem; color:var(--pencil); line-height:1;
}
.m-hide:hover{color:var(--red);}
.m-hide:focus-visible{outline:3px solid var(--ink-blue); outline-offset:-3px; border-radius:50%;}
.mascot.hidden .bubble{display:none;}
.mascot.hidden .pencil-btn{opacity:.55;}

/* ── ИИ-помощник ── */
.m-ask{
  flex:none; align-self:center; margin-top:2px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Caveat',cursive; font-size:1.05rem; color:var(--ink-blue);
  text-decoration:underline dotted; text-underline-offset:2px;
}
.m-ask:hover{color:var(--red);}
/* маскот несёт нудж — мягко подсветим пузырь */
.mascot.has-nudge .bubble{background:#FFF7E6;}

/* smart sort убран из UI (кнопка «разобрать ящичек» осталась в секции) */

/* подсказка под названием задачи */
.asst-hint{
  margin:-2px 0 2px; padding:8px 10px; font-size:.9rem; color:var(--graphite);
  background:#FFF7E6; border:1.4px dashed var(--pencil-faint); border-radius:12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.asst-hint .ah-txt{flex:1 1 auto; min-width:0;}
.asst-hint .ah-accept{
  flex:none; font-family:'Caveat',cursive; font-size:1.05rem; cursor:pointer;
  background:var(--ink-blue); color:#fff; border:none; border-radius:10px; padding:4px 12px;
}
.asst-hint .ah-accept:hover{filter:brightness(1.08);}
.asst-hint.loading{opacity:.7; font-style:italic;}

/* чат-окно: фрейм = колонка на высоту вьюпорта; шапка и поле ввода пришпилены
   (flex:none), скроллится ТОЛЬКО лист сообщений (.asst-log, flex:1). Без каппа
   фрейма и с max-height:56vh у лога окно вырастало выше экрана и поле ввода
   уезжало под клавиатуру (см. телефон-лист ниже + assistant.js asstWireKeyboard). */
#asst-dialog .asst-frame{
  display:flex; flex-direction:column; min-width:min(460px,calc(100vw - 28px));
  max-height:min(84dvh, 680px);
}
.asst-h{font-family:'Caveat',cursive; font-size:1.7rem; font-weight:700; margin-bottom:8px;
  padding-right:36px; display:flex; align-items:center; gap:9px; flex:none;}
.asst-h .asst-pencil{color:var(--ink-blue);}
.asst-log{
  display:flex; flex-direction:column; gap:8px;
  flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain;
  padding:4px 2px; margin-bottom:10px;
}
.asst-msg{max-width:82%; padding:8px 12px; border-radius:14px; line-height:1.4; font-size:.95rem; white-space:pre-wrap; word-wrap:break-word;}
.asst-msg.user{align-self:flex-end; background:var(--ink-blue); color:#fff; border-bottom-right-radius:4px;}
.asst-msg.bot{align-self:flex-start; background:#fff; border:1.4px solid var(--pencil-faint); border-bottom-left-radius:4px;}
.asst-msg.bot.pending{color:var(--pencil); font-style:italic;}
/* Карточка правок, предложенных Карандашом (закрыть/править/передать). Живёт в
   ленте сообщений отдельным блоком под ответом; применяет их js/assistant.js
   обычным PATCH задачи. Пунктир = «ещё не применено», сплошная = применено.
   Подложка — var(--card,#fff): --card объявлен только в тёмной теме (dark.css),
   поэтому тема переключается сама, без строки в списке ночных оверрайдов. */
.asst-acts{
  align-self:flex-start; max-width:92%; padding:8px 12px; border-radius:14px;
  background:var(--card, #fff); border:1.4px dashed var(--ink-blue); font-size:.92rem;
  display:flex; flex-direction:column; gap:6px;
}
.asst-acts.applied{border-style:solid; border-color:var(--pencil-faint); opacity:.75;}
.asst-acts .aa-row{line-height:1.35; word-wrap:break-word;}
.asst-acts .aa-title{font-weight:600;}
.asst-acts .aa-what{color:var(--pencil);}
.asst-acts .aa-bar{display:flex; gap:8px; margin-top:2px;}
.asst-acts .aa-bar button{
  font-family:'Caveat',cursive; font-size:1.1rem; cursor:pointer;
  border-radius:11px; padding:3px 14px; border:1.4px solid var(--ink-blue);
}
.asst-acts .aa-apply{background:var(--ink-blue); color:#fff;}
.asst-acts .aa-cancel{background:transparent; color:var(--pencil); border-color:var(--pencil-faint);}
.asst-acts .aa-bar button:hover{filter:brightness(1.08);}
.asst-acts .aa-bar button[disabled]{opacity:.5; cursor:default;}
.asst-acts .aa-note{color:var(--pencil);}

.asst-input{display:flex; gap:8px; flex:none;}   /* поле пришпилено под листом сообщений */
.asst-input input{flex:1 1 auto; min-width:0;}
.asst-send{
  flex:none; font-family:'Caveat',cursive; font-size:1.15rem; cursor:pointer;
  background:var(--ink-blue); color:#fff; border:none; border-radius:12px; padding:6px 16px;
}
.asst-send:hover{filter:brightness(1.08);}
.asst-send[disabled]{opacity:.5; cursor:default;}

/* ── шестерёнка + пер-семейные настройки Карандашика ── */
/* шестерёнка — рядом со словом «Карандашик», карандашный SVG (squiggle) вместо ⚙ */
.asst-gear{flex:none; width:25px; height:25px; background:none; border:none; cursor:pointer;
  padding:0; color:var(--pencil); transition:transform .3s;}
.asst-gear svg{width:100%; height:100%; display:block; overflow:visible;}
.asst-gear:hover,.asst-gear.on{color:var(--ink-blue); transform:rotate(45deg);}
.asst-settings{display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-height:0; max-height:60dvh; overflow-y:auto; padding:2px;}
.as-grp{font-family:'Caveat',cursive; font-size:1.15rem; color:var(--pencil); margin-top:8px;
  display:flex; justify-content:space-between; align-items:baseline;}
.as-sv{font-family:'Caveat',cursive; font-size:1.3rem; color:var(--ink-blue);}
.as-chips{display:flex; gap:7px; flex-wrap:wrap;}
.as-chip{font-family:'Neucha',cursive; font-size:.95rem; padding:5px 13px; cursor:pointer;
  background:#fff; border:1.5px solid var(--pencil-faint); border-radius:14px;}
.as-chip.on{background:var(--ink-blue); color:#fff; border-color:var(--ink-blue);}
.asst-settings textarea{font-family:'Neucha',cursive; font-size:.95rem; padding:7px 10px;
  border:1.5px solid var(--pencil-faint); border-radius:10px; resize:vertical; min-height:56px; width:100%;}
.asst-settings input[type=range]{width:100%;}
.as-row{display:flex; align-items:center; gap:10px; margin-top:10px;}
.as-reset{font-family:'Neucha',cursive; font-size:.95rem; background:none; border:none;
  color:var(--pencil); cursor:pointer; text-decoration:underline dotted;}
.as-msg{font-size:.9rem;} .as-msg.ok{color:var(--ink-green,#3E8E5A);} .as-msg.err{color:var(--ink-red,#CE4A3A);}
.as-note{font-size:.8rem; color:var(--pencil); margin-top:4px;}

/* ── телефон / Telegram Mini App: чат Карандашика = нижний лист над клавиатурой ──
   Диалог прижат к низу (как #sk-modal), но при открытой клавиатуре поднимается
   на её высоту: --kb ставит js/assistant.js (asstWireKeyboard) по visualViewport
   — тем же приёмом, что док в composer.js. Фрейм ужимается на высоту клавиатуры,
   поле ввода (flex:none) остаётся пришпилено над ней, лист сообщений скроллится.
   Тап выше листа = по самому <dialog> → закрытие (assistant.js). */
@media (max-width:639px){
  #asst-dialog{
    width:100vw; max-width:100vw; max-height:100dvh;
    margin:auto 0 var(--kb, 0px);
  }
  #asst-dialog .asst-frame{
    width:100vw; min-width:0;
    max-height:calc(88dvh - var(--kb, 0px));
    border-radius:22px 22px 0 0; transform:none;
    box-shadow:0 -8px 30px rgba(44,42,38,.25);
    padding:14px 16px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)));
  }
  #asst-dialog .asst-frame::before{border-radius:22px 22px 0 0; border-bottom:none;}
  .asst-log{min-height:88px;}
  /* клавиатура открыта → нижняя safe-area съедена ею, не дублируем отступ */
  body.asst-kb #asst-dialog .asst-frame{padding-bottom:12px;}
}

.footer-doodle{
  text-align:center; padding:8px 0 120px;
  font-family:'Caveat',cursive; font-size:1.1rem; color:var(--pencil);
}

/* ── адаптив ── */
@media (max-width:1023px){
  header.app{--hdr-line-pad:16px;}   /* линия — под контент .board-head/.tasks-wrap (16px) */
  .board-head{padding:14px 16px 0;}
  .add-bar{padding:12px 16px 0;}
  .tasks-wrap{padding:12px 16px 0;}
  .col-main{padding:12px 16px 30px;}
}
@media (max-width:639px){
  /* узкий экран: тот же ряд, просто компактнее — карточки ужимаются,
     чтобы кластер не вылезал за экран */
  header.app{padding:8px 10px 7px; gap:6px; --hdr-line-pad:12px;}  /* линия — под контент (12px) */
  .hdr-actions{gap:6px;}
  /* на телефоне лого скрыто (как в TG): счёт по центру шапки, слева — слово
     тарифа. Словомарка «Skrably» остаётся на десктопе («Skrably — Plus»). */
  .logo{display:none;}
  .score .hintw{display:none;}
  .score{padding:0 9px;}
  .score .score-in{gap:5px;}
  .score b{font-size:.95rem;}
  .score .rival-plus{width:21px; height:21px;}
  .plan-chip{font-size:1.25rem;}   /* Caveat мельче; тире гасим в app.css (грузится позже) */
  .board-head{padding:12px 12px 0;}
  .board-head h2{font-size:1.8rem;}
  .add-bar{padding:10px 12px 0;}
  .col-main{padding:10px 12px 24px;}
  .tasks-wrap{padding:10px 12px 0;}
  .frame{padding:9px 10px;}
  .sec-head h2{font-size:1.55rem;}
  .m-frame{padding:15px 14px 16px; min-width:0;}
  .m-lbl{min-width:72px;}
  /* на тесном мобильном пузыре инлайн-«спросить» тонул посреди переносов
     текста — кладём его ВНИЗ отдельной яркой кнопкой */
  .mascot .bubble{max-width:180px; font-size:.84rem; flex-direction:column; align-items:stretch;}
  .m-ask{
    align-self:flex-start; margin-top:4px;
    padding:5px 13px 6px; text-decoration:none;
    background:var(--ink-blue); color:#fff;
    border:1.5px solid #2C2A26; border-radius:8px 11px 8px 10px;
    box-shadow:1.5px 2px 0 rgba(44,42,38,.28);
  }
  .m-ask:hover{color:#fff;}
  .pencil-btn svg{width:50px; height:68px;}
  /* нижний клиренс под тап-бар держит #board (tabbar.css); лишний отступ убран */
}