/* ─── Приложение: логин, DnD, грипы, формы, комментарии, telegram, toast ─── */

/* long-press открывает редактор — глушим выделение текста / iOS callout */
.note, .pill, .mini, .sn-item, .mile, .yrow, .trow{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* ── pointer-based drag & drop ──
   класс именно drag-ghost: просто .ghost конфликтует с модификатором
   «призрачных» подсказок из прототипа (.more.ghost, .yfirst.ghost) */
.drag-ghost{
  position:fixed !important;
  left:0 !important; top:0 !important;   /* позиция — ТОЛЬКО transform из positionGhost() */
  z-index:1000;
  margin:0 !important;
  pointer-events:none;
  opacity:.92;
  /* §1: свой слой — squiggle-фильтры клона растеризуются один раз, drag едет
     на GPU. transform ведёт JS (translate3d + rotate 2deg + scale 1.05);
     здесь только стартовое значение до первого кадра, БЕЗ !important. */
  will-change:transform;
  transform:rotate(2deg) scale(1.05);
  box-shadow:4px 7px 14px rgba(44,42,38,.35) !important;
  max-width:343px;   /* лист 03: контентная полоса доски 343 (была произвольная 300) */
}
.drag-src{opacity:.35;}
body.dragging-now{user-select:none; -webkit-user-select:none; cursor:grabbing;}
.drop-hint{
  outline:2.5px dashed var(--ink-blue);
  outline-offset:2px;
  background-color:var(--marker) !important;
}

/* ── точный дроп: подсветка слота (колонка ганта) скользит за курсором ── */
.slot-hint{
  position:absolute; top:-2px; bottom:-2px; z-index:0;
  background:var(--marker);
  outline:2px dashed var(--ink-blue);
  outline-offset:-2px;
  border-radius:14px 80px 10px 90px / 90px 12px 80px 12px;
  pointer-events:none;
  transition:left .09s ease, width .09s ease;
  animation:slot-pop .18s ease;
}
.gantt-pad .slot-hint{top:26px;} /* не заезжать на подпись «сейчас» */
@keyframes slot-pop{from{transform:scaleY(.6); opacity:.3;}}

/* «пузырь» у пальца: куда именно упадёт задача («14:30», «чт 2», «17 июля») */
.drop-bubble{
  position:fixed; left:0; top:0; z-index:1001;
  /* позиция — ТОЛЬКО transform из showDropBubble() (translate3d к пальцу +
     -50% + rotate -2deg); свой слой — пузырь не перерисовывается на 120 Гц.
     Появление — только opacity: keyframe с transform перетёр бы JS-позицию. */
  will-change:transform;
  font-family:'Caveat',cursive; font-size:1.3rem; font-weight:600; color:var(--red);
  background:#fff; padding:1px 14px; white-space:nowrap;
  border:2px solid var(--red);
  border-radius:48% 52% 55% 45% / 55% 48% 52% 45%;
  box-shadow:2px 3px 8px rgba(44,42,38,.25);
  pointer-events:none;
  animation:bubble-in .15s ease;
}
@keyframes bubble-in{from{opacity:0;}}

/* ── мобильный «режим прицела»: ячейки-слоты поверх секций во время drag ── */
.drop-ovl{
  position:absolute; inset:2px; z-index:6;
  display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:1fr; gap:5px; padding:8px;
  background:rgba(250,247,238,.95);
  border-radius:14px;
  animation:ovl-in .16s ease;
}
@keyframes ovl-in{from{opacity:0; transform:scale(.97);}}
.drop-cell{
  display:flex; align-items:center; justify-content:center;
  min-height:32px; min-width:0; overflow:hidden;
  font-family:'Caveat',cursive; font-size:1.05rem; color:var(--graphite-soft);
  border:1.6px dashed var(--pencil-faint);
  border-radius:var(--r-input);
  transition:transform .1s ease, background .1s ease;
}
.drop-cell.wide{grid-column:1/-1; min-height:36px;}
.drop-cell.today-cell{color:var(--red); font-weight:600;}
.drop-cell.busy{
  background:
    radial-gradient(circle at 82% 22%, var(--pencil) 2.6px, transparent 3.4px);
}
.drop-cell.hot{
  background:var(--marker); color:var(--graphite);
  border:2px solid var(--ink-blue);
  transform:scale(1.16);
  box-shadow:2px 4px 10px rgba(44,42,38,.22);
}
/* чтобы даже пустым секциям хватило места под ячейки */
body.drop-mode #sec-today .frame{min-height:160px;}
body.drop-mode #sec-week .frame{min-height:64px;}
body.drop-mode #sec-month .frame{min-height:220px;}

/* ── модалка «развести по времени»: горизонтальная шкала (как «Сегодня»),
   задачи дорожками, тягаются влево/вправо ── */
#time-strip{position:relative; margin:4px 0 2px; touch-action:none; overflow:hidden;}
.ts-hour{
  position:absolute; top:0; bottom:0;
  font-size:.72rem; color:var(--pencil);
  border-left:1px dotted var(--pencil-faint);
  padding-left:3px; pointer-events:none; white-space:nowrap;
}
.ts-task{
  position:absolute; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:3px 14px;
  background:#fff;
  border:2px solid var(--c, var(--ink-blue));
  border-radius:var(--r-input);
  box-shadow:var(--shadow);
  cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
/* подпись (чипы + название); у широкого блока — внутри */
.ts-lab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:0; max-width:100%;
}
/* узкий блок: честная ширина-полоска с заливкой цветом, подпись — выноской
   сбоку на светлой подложке (в своей дорожке, линии не пересекаются) */
.ts-task.slim{padding:3px 2px;}
.ts-task.slim{background:color-mix(in srgb, var(--c, var(--ink-blue)) 20%, #fff);}
.ts-task.slim .ts-lab{
  position:absolute; top:50%; transform:translateY(-50%);
  max-width:none; /* left задаёт JS: сбоку от полоски, в пределах шкалы */
  background:var(--paper);
  border:1.5px solid var(--pencil-faint);
  border-radius:11px;
  box-shadow:1.5px 2px 0 rgba(44,42,38,.08);
  padding:3px 9px;
}
/* линия-выноска от пузыря к полоске — видно с первого взгляда, чьё это время */
.ts-line{
  position:absolute; top:50%; height:0; margin-top:-1px;
  border-top:1.6px dashed var(--pencil);
  pointer-events:none;
}
/* хвостик комикс-пузыря: смотрит на свою полоску */
.ts-task.slim .ts-lab::before,
.ts-task.slim .ts-lab::after{
  content:''; position:absolute; top:50%;
  border:solid transparent; pointer-events:none;
}
.ts-lab.tail-l::before{
  right:100%; margin-top:-8px;
  border-width:8px 10px 8px 0; border-right-color:var(--pencil-faint);
}
.ts-lab.tail-l::after{
  right:calc(100% - 2.8px); margin-top:-6px;
  border-width:6px 8px 6px 0; border-right-color:var(--paper);
}
.ts-lab.tail-r::before{
  left:100%; margin-top:-8px;
  border-width:8px 0 8px 10px; border-left-color:var(--pencil-faint);
}
.ts-lab.tail-r::after{
  left:calc(100% - 2.8px); margin-top:-6px;
  border-width:6px 0 6px 8px; border-left-color:var(--paper);
}
.ts-task.drag{
  cursor:grabbing; z-index:2;
  transform:rotate(-1deg) scale(1.04);
  box-shadow:3px 6px 14px rgba(44,42,38,.3);
}
.ts-task .tt{
  font-size:.85rem; line-height:1.1; color:var(--graphite);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
/* время на блоке: два чипа-«кнопки» — очевидно кликабельные,
   тап на мобильном открывает системный ввод времени */
.ts-task .tw{display:flex; align-items:center; gap:4px; white-space:nowrap;}
.ti-dash{color:var(--pencil); flex:none;}
input.ti{
  font-family:'Caveat',cursive; font-size:1.12rem; font-weight:600; line-height:1.2;
  color:var(--red); background:#fff;
  border:1.5px solid var(--graphite-soft);
  border-radius:var(--r-input);
  padding:0 2px; width:56px; min-width:0;
  text-align:center; cursor:pointer;
  box-shadow:1.5px 2px 0 rgba(44,42,38,.14);
  appearance:none; -webkit-appearance:none;
  transition:transform .08s ease;
}
input.ti::-webkit-calendar-picker-indicator{display:none;}
input.ti:hover{transform:rotate(-1deg);}
input.ti:active{transform:scale(.94);}
input.ti:focus-visible{outline:2.5px solid var(--ink-blue); outline-offset:1px;}
/* ручки на левом/правом краю блока: тянуть = менять начало/конец;
   выступают наружу, чтобы даже 15-минутную полоску было за что взять */
.tz{
  position:absolute; top:0; bottom:0; width:16px;
  cursor:ew-resize; touch-action:none; z-index:2;
}
.tz-l{left:-8px;}
.tz-r{right:-8px;}
.tz::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  height:26px; width:4px; border-radius:3px;
  background:var(--c, var(--ink-blue)); opacity:.35;
}
.tz-l::after{left:6px;}
.tz-r::after{right:6px;}
.tz:hover::after, .ts-task.drag .tz::after{opacity:.9;}
@media (hover:none){ .tz::after{opacity:.55;} }
/* кнопка сохранения — справа; ширина всегда полная (контент шкалы
   абсолютный и сам ширину не создаёт — на телефоне .m-frame иначе схлопнется) */
#time-dialog{width:min(520px, calc(100vw - 24px));}
#time-dialog .m-actions{justify-content:flex-end;}
/* телефон / Mini App: модалка узкая — компактнее чипы и блоки */
@media (max-width:639px){
  .ts-task{padding:3px 12px;}
  .tz{width:12px;}
  input.ti{width:50px; font-size:1.05rem;}
  .ts-task .tw{gap:2px;}
}

/* ── грипы растягивания баров по краям; кап 40%, чтобы у однодневного
   бара оставалась кликабельная середина ── */
.rz{
  position:absolute;
  top:-6px;
  bottom:-6px;
  width:clamp(14px, 40%, 28px);
  cursor:ew-resize;
  touch-action:none;
  z-index:2;
}
.rz-l{left:-8px;}
.rz-r{right:-8px;}
.rz::after{
  content:'';
  position:absolute;
  top:12px; bottom:12px;
  width:3px;
  background:rgba(44,42,38,.4);
  border-radius:2px;
  opacity:0;
}
.rz-l::after{left:9px;}
.rz-r::after{right:9px;}
.pill:hover .rz::after{opacity:1;}
/* на тач-экранах hover нет — грипы чуть видны всегда */
@media (hover:none){
  .rz::after{opacity:.45;}
}

/* подсказка-призрак в пустых зонах */
.ghost-hint{
  font-family:'Caveat',cursive; font-size:1.05rem;
  color:var(--pencil); opacity:.7; transform:rotate(-1deg);
}

/* ── логин ── */
#login{
  position:fixed; inset:0;
  background:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1.1px, transparent 1.3px);
  background-size:26px 26px;
  display:flex; align-items:center; justify-content:center;
  z-index:50; padding:14px;
}
.login-box{
  background:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1px, transparent 1.2px);
  background-size:24px 24px;
  border-radius:var(--r-sketch);
  padding:34px 44px;
  text-align:center;
  box-shadow:7px 9px 0 rgba(44,42,38,.22);
  transform:rotate(-.4deg);
  position:relative;
  max-width:420px;
}
.login-box::before{
  content:""; position:absolute; inset:0;
  border:2px solid var(--graphite); border-radius:var(--r-sketch);
  filter:url(#squiggle); pointer-events:none;
}
/* Словомарка/росчерк/таглайн — теперь .a-mark/.a-under/.a-tag в login.css (лист 15). */
/* Язык — тот же тихий текст, что и соседние строки; отличается лишь тонкой
   рамкой-affordance. Скоуп на .login-box, чтобы не трогать селект в шапке. */
.login-box .lang-select{
  display:block; margin:0 auto 14px;
  font-family:'Neucha',cursive; font-size:.95rem; line-height:1.4;
  color:var(--pencil);
  /* нативный <select> игнорирует line-height и режет хвостики (g, y) у Neucha —
     снимаем нативный вид, рисуем свою стрелку, высоту задаём line-height+padding */
  -webkit-appearance:none; appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1.5%201.5%206%206%2010.5%201.5'%20fill='none'%20stroke='%238B8578'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--pencil-faint); border-radius:var(--r-input);
  padding:5px 32px 5px 14px; max-width:9.5rem; cursor:pointer;
  transition:border-color .15s ease;
}
.login-box .lang-select:hover, .login-box .lang-select:focus-visible{border-color:var(--pencil);}
.login-box .lang-select option{font-family:inherit; color:var(--graphite); background:var(--paper);}
.login-pencil{
  position:absolute; right:-32px; bottom:-36px; width:58px;
  transform:rotate(18deg); pointer-events:none;
  animation:bob 3.2s ease-in-out infinite;
}
@media (max-width:639px){
  .login-box{padding:26px 22px;}
  .login-pencil{right:-10px; bottom:-40px; width:50px;}
}
#login-dev{display:flex; gap:8px; justify-content:center;}
#login-telegram{display:flex; justify-content:center; margin-top:0;}
/* Официальный TG-виджет — out-of-process cross-origin <iframe> с прозрачным
   содержимым. В тёмной теме ОС Chrome подкладывает под него собственный
   ТЁМНЫЙ canvas → вокруг синей кнопки чёрный прямоугольник. Форсим светлую
   схему для фрейма, чтобы подложка была светлой; заодно гасим UA-рамку. */
#login-telegram iframe{color-scheme:light; border:none !important;}

/* ── формы в диалогах ── */
dialog form{display:flex; flex-direction:column; gap:10px;}
dialog form .m-body{display:flex; flex-direction:column; gap:10px;}
dialog label{display:flex; flex-direction:column; gap:3px; font-size:.95rem; color:var(--graphite-soft);}
dialog label.check{flex-direction:row; align-items:center; gap:8px; color:var(--graphite); font-size:1rem;}
dialog .lbl-t{font-family:'Caveat',cursive; font-size:1.1rem; color:var(--pencil);}
dialog input, dialog select, dialog textarea, #login-dev input{
  padding:7px 11px; font-size:1rem;
  border:none; border-radius:var(--r-input);
  font-family:'Neucha',cursive; background:#fff; color:var(--graphite);
  outline:none; box-shadow:0 0 0 1.5px var(--pencil);
}
dialog input:focus, dialog select:focus, dialog textarea:focus, #login-dev input:focus{
  box-shadow:0 0 0 2px var(--ink-blue);
}
dialog input[type=checkbox]{box-shadow:none; accent-color:var(--ink-blue); width:18px; height:18px;}
dialog textarea{resize:vertical; min-height:44px;}
dialog .dates, dialog .times{display:flex; gap:10px;}
dialog .dates label, dialog .times label{flex:1;}
dialog .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px;}
dialog .actions .btn{font-size:1rem;}
#task-delete{margin-right:auto;}
#login-dev button{
  font-family:'Neucha',cursive; font-size:1rem;
  background:var(--graphite); color:#fff;
  border:none; border-radius:var(--r-pill); padding:8px 18px; cursor:pointer;
}
#login-dev button:hover{transform:rotate(-1deg);}

/* ── свотчи цвета и заливки ── */
.swatches{display:flex; gap:8px; flex-wrap:wrap;}
.swatch{
  width:30px; height:30px;
  border:none; padding:0;
  cursor:pointer; position:relative;
  border-radius:45% 55% 48% 52% / 52% 45% 55% 48%;
  box-shadow:0 0 0 1.5px var(--pencil), 1px 2px 0 rgba(44,42,38,.12);
  transition:transform .12s ease;
}
.swatch:hover{transform:scale(1.12) rotate(-4deg);}
.swatch.selected{
  outline:3px solid var(--graphite);
  outline-offset:2px;
  transform:rotate(-3deg) scale(1.08);
}
#color-swatches .swatch{background:var(--c, #fff);}
#color-swatches .swatch.auto{
  background:conic-gradient(#CE4A3A, #DD9A2B, #3E8E5A, #2D8C8C, #2E5BC7, #8E4FBF, #CE4A3A);
}
/* превью заливок: плотнее, чем на реальных пилюлях, чтобы читались на 30px */
#fill-swatches .f-hachure{background:repeating-linear-gradient(115deg,
  color-mix(in srgb, var(--c, var(--ink-blue)) 45%, transparent) 0 2px, transparent 2px 7px) #fff;}
#fill-swatches .f-cross{background:
  repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--c, var(--ink-blue)) 40%, transparent) 0 2px, transparent 2px 7px),
  repeating-linear-gradient(25deg,
    color-mix(in srgb, var(--c, var(--ink-blue)) 40%, transparent) 0 2px, transparent 2px 7px) #fff;}
#fill-swatches .f-marker{background:color-mix(in srgb, var(--c, var(--ink-blue)) 35%, #fff);}
#fill-swatches .f-solid{background:var(--c, var(--ink-blue));}
#fill-swatches .f-none{background:#fff; box-shadow:0 0 0 1.5px var(--pencil-faint), 1px 2px 0 rgba(44,42,38,.12);}

/* ── «кто делает»: чипы-исполнители в диалоге задачи ── */
.assignee-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:none; cursor:pointer;
  padding:4px 12px 4px 5px; position:relative;
  font-family:'Neucha',cursive; font-size:.92rem; color:var(--graphite-soft);
  transition:transform .12s ease;
}
.assignee-chip::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-pill);
  filter:url(#squiggle);
}
.assignee-chip:hover{transform:translateY(-2px) rotate(-1deg);}
.assignee-chip.selected{background:var(--graphite); color:#fff; border-radius:var(--r-pill);}
.assignee-chip .nm{max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.assignee-chip .ava{width:22px; height:22px; font-size:.95rem; box-shadow:inset -1px -1px 0 rgba(0,0,0,.12);}

/* ── комментарии ── */
#comments-box{border-top:2px dashed var(--pencil-faint); padding-top:10px;}
#comments-box h3{font-size:1.25rem; margin-bottom:6px; padding-right:0;}
#comments-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:200px; overflow-y:auto;
  overscroll-behavior:contain;
  padding:3px 6px 3px 3px;
  margin:0 -6px 8px -3px;
}
.cempty{font-size:.85rem; color:var(--pencil);}
.comment{display:flex; gap:8px; align-items:flex-start;}
.cbubble{
  flex:1; min-width:0;
  background:#fff; padding:5px 11px 7px;
  position:relative; border-radius:var(--r-sketch2);
}
.cbubble::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.comment.mine .cbubble{background:var(--green-soft);}
.chead{display:flex; align-items:baseline; gap:7px;}
.cname{font-family:'Caveat',cursive; font-size:1rem; color:var(--graphite-soft);}
.ctime{font-size:.72rem; color:var(--pencil); flex:1;}
.cdel{
  border:none; background:none; color:var(--pencil-faint);
  font-size:.95rem; cursor:pointer; padding:0 2px;
  font-family:inherit; visibility:hidden;
}
.comment:hover .cdel{visibility:visible;}
.cdel:hover{color:var(--red);}
.ctext{font-size:.92rem; line-height:1.25; white-space:pre-wrap; word-break:break-word;}
.crow{display:flex; gap:8px;}
.crow input{flex:1; min-width:0;}

/* ── telegram-настройки ── */
#settings-dialog h3{font-size:1.4rem;}
#settings-dialog .hint{margin:0 0 10px; color:var(--pencil); font-size:.88rem;}
#tg-chats{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.tg-chat{
  display:flex; align-items:center; gap:8px;
  padding:7px 11px; background:#fff;
  position:relative; border-radius:var(--r-sketch2);
}
.tg-chat::before{
  content:""; position:absolute; inset:0;
  border:1.4px solid var(--pencil); border-radius:var(--r-sketch2);
  filter:url(#squiggle); pointer-events:none;
}
.tg-chat .tg-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tg-chat .tg-badge, .tg-chat .tg-mode{color:var(--pencil); font-size:.85rem; white-space:nowrap;}
.tg-chat select{padding:3px 6px; font-size:.85rem; position:relative; z-index:1;}
.tg-chat .tg-del{
  border:none; background:none; cursor:pointer;
  color:var(--red); font-size:1.2rem; line-height:1; padding:0 2px;
  position:relative; z-index:1;
}
#tg-connect, #invite-family, #folder-link{width:100%; margin-bottom:10px;}

/* ── telegram mini app: respect device safe areas inside the WebView ── */
/* floor 14px: в sheet-режиме (не fullscreen) safe-top = 0 — без запаса корона
   лидера счёта (.score .crown, торчит над карточкой) режется краем WebView. */
body.in-telegram header.app{padding-top:max(var(--safe-top, 0px), 14px);}
/* Telegram сам подписывает мини-апп «Skrably» в своей шапке — наша словомарка
   дублируется и толкает кластер .hdr-actions (сжатые карточки счёта): прячем. */
body.in-telegram header.app .logo{display:none;}
/* Нижний инсет теперь держит клиренс тап-бара (#board/#calendar/#shelf в
   tabbar.css через --safe-b, куда max()-ом входит --safe-bottom). */

/* ── toast ── переехали в css/notify.css (карточки сверху, js/notify.js) */

/* ── тарифы / paywall ── */
/* Тариф в шапке — слово рядом со словомаркой (перенесён из .hdr-actions к
   логотипу, renderPlanChip), без карандашной карточки. Free = красный акцент
   «Upgrade», оплачено = зелёный «Plus/Pro». Десктоп: «Skrably — Plus» (тире
   через ::before). Mini-app/mobile: слово в левом углу без тире (в TG словомарка
   скрыта → тариф крайний слева). */
.plan-chip{
  align-self:center;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'Caveat',cursive;            /* тот же почерк, что «Skrably» (base.css: h1,h2,h3) */
  font-weight:700; font-size:1.4rem; line-height:1; white-space:nowrap;
  color:var(--red); transition:opacity .12s ease;
}
.plan-chip::before{content:"— "; color:var(--pencil); font-weight:400;}  /* тире от «Skrably» (десктоп) */
/* mini-app/mobile — слово в левом углу без тире. Держим ЗДЕСЬ (app.css грузится
   после screens.css): иначе базовое ::before-тире перебило бы сброс. */
@media (max-width:639px){ .plan-chip::before{content:none;} }
.plan-chip.paid{color:var(--green);}
.plan-chip .plan-in{position:relative; display:inline-block;}
.plan-chip:hover{opacity:.72;}
body.in-telegram .plan-chip::before{content:none;}   /* в TG словомарки нет — тире ни к чему */
#plan-status-line{margin:2px 0 8px;}

.plan-frame{max-width:920px;}
.plan-controls{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:16px;}
.plan-period{display:inline-flex; gap:4px; background:rgba(60,55,45,.06); padding:4px; border-radius:var(--r-pill);}
.plan-period .hbtn{border:none; background:transparent; font:inherit; cursor:pointer; padding:6px 16px; border-radius:var(--r-pill); color:var(--graphite-soft);}
.plan-period .hbtn[aria-pressed="true"]{background:var(--marker); color:var(--graphite); font-weight:700;}
.plan-country{display:inline-flex; gap:6px; align-items:center; color:var(--graphite-soft); font-size:.9rem;}
.plan-country select{font:inherit; padding:5px 9px; border:1.5px solid var(--pencil-faint); border-radius:var(--r-input); background:var(--paper);}

.plan-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:719px){.plan-cards{grid-template-columns:1fr;}}
.plan-card{position:relative; border:2px solid var(--graphite); border-radius:var(--r-sketch); background:var(--paper); box-shadow:var(--shadow); padding:18px 16px; display:flex; flex-direction:column; gap:8px;}
.plan-card.featured{border-color:var(--green);}
.plan-card.current{outline:2px dashed var(--pencil); outline-offset:3px;}
.plan-ribbon{position:absolute; top:-12px; right:14px; background:var(--marker); color:var(--graphite); font-size:.78rem; font-weight:700; padding:2px 10px; border-radius:var(--r-pill); transform:rotate(-2deg);}
.plan-name{margin:0; font-size:1.2rem;}
.plan-price{font-size:2rem; font-weight:800; color:var(--graphite); line-height:1.05;}
.plan-per{font-size:.85rem; font-weight:500; color:var(--graphite-soft);}
.plan-save{color:var(--green); font-weight:700; font-size:.85rem;}
.plan-feats{list-style:none; margin:6px 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; flex:1;}
.plan-feats li{position:relative; padding-left:20px; font-size:.92rem; color:var(--graphite-soft);}
.plan-feats li::before{content:"✎"; position:absolute; left:0; color:var(--pencil);}
.plan-card .btn{width:100%;}
.plan-card .plan-current-btn{opacity:.7;}

.plan-methods{margin-top:16px; border-top:1.5px dashed var(--pencil-faint); padding-top:14px; display:flex; flex-direction:column; gap:8px;}
.plan-methods-title{font-weight:700; margin-bottom:4px;}
.paymethod-btn{width:100%;}

/* ── «У меня есть код» — активация промо-ключа (тот же карандашный стиль) ── */
.plan-redeem{margin-top:16px; border-top:1.5px dashed var(--pencil-faint); padding-top:14px; display:flex; flex-direction:column; gap:8px;}
.plan-redeem-title{font-weight:700;}
.plan-redeem-row{display:flex; gap:8px; align-items:stretch;}
.plan-redeem-row input{flex:1; min-width:0; padding:9px 12px; font:inherit; color:inherit; border:1.5px solid var(--pencil-faint); border-radius:10px; background:var(--paper,#fff);}
.plan-redeem-row input:focus{outline:none; border-color:var(--ink,#2c2a26);}
.plan-redeem-msg{color:var(--danger,#c0392b); margin:0;}
.plan-redeem-msg:empty{display:none;}

/* ── архив: выцветший грифель и дальняя полка ── */
/* просроченное (время/дата прошли, не сделано); done стилизуется отдельно */
.is-past{filter:grayscale(.92); opacity:.6;}
.sn-item.is-past .when{color:var(--pencil);}

/* ящичек «Архив» в сайдбаре: заголовок-кнопка с каретками */
/* архив-аккордеон слит с «Сделано» в секцию доски (css/tasks.css) */

/* поле архивного тега в настройках */
.archive-tag-input{
  display:block; max-width:12rem; margin:2px 0 6px;
  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);
}
.archive-tag-input:focus{box-shadow:0 0 0 2px var(--ink-blue);}