/* ─────────────────────────────────────────────────────────────
   «Шкаф 2.0» — семейная база знаний. Реформат по прототипу shkaf-v2
   (2026-07-23): L0 = лоток «кучи» (скрапсы + gold «Разобрать · N»,
   js/shelf-pile.js) + сетка ящиков 2×N «с ручками» (плитки 96, подложки
   skTabbar.mount вторым проходом). Ящик и карточка открываются МОДАЛКАМИ
   (#shelf-box-view / #shelf-item-view — единый паттерн с задачами на мобиле
   и десктопе; карточка стеком поверх ящика). Уровень «карточка»: живой
   рецепт (степпер порций, шаги с маркер-номерами), заметка (js/shelf-card.js).
   Чипы захвата в доке (.shp-*) и чипы колоды (.pd-*) — тоже здесь (домен
   шкафа); скин самой колоды — общий .sx-* (sortbox.css). На экране шкафа
   body — flex-колонка на 100dvh, сетка скроллится, шапка/лоток закреплены.
   ───────────────────────────────────────────────────────────── */
:root{
  --sh-card:#FFFDF6;
  --sh-gold:#D9A832;              /* единственный акцент экрана (лист 05·4) */
  /* закон один: r = h/4, потолок R16, капсулы ✕ (лист 05). Прямые значения
     по высоте контрола: строка/инпут 48→R12 · ящик 64→R16 · чип 40→R10 ·
     степпер 32→R8 · бейдж/чекбокс 24→R6 · крупная карточка→R16 */
  --sh-r-body:16px;
  --sh-r-it:12px;
}

/* ── экран шкафа: колонка на всю высоту вьюпорта под шапкой; снизу — место
   под единый док С композером (шкаф-режим захвата), как #board 176 ── */
#shelf{max-width:980px; width:100%; margin:0 auto; padding:0 20px calc(150px + var(--safe-bottom));
  display:flex; flex-direction:column; min-height:0; overflow:hidden;}
#shelf[hidden]{display:none;}   /* id-правило перебило бы [hidden] — вернём */
body.shelf-active{display:flex; flex-direction:column; height:100dvh; overflow:hidden;}
body.shelf-active #shelf{flex:1 1 auto; align-self:center;}
#shelf .board-head{flex:none; padding-left:0; padding-right:0; width:100%;}

/* Карандашик-копатель — в правом нижнем углу экрана; копает при поиске.
   pointer-events:none — не перехватывает клики по «＋ ящик» под ним. */
.shelf-masc{position:fixed; right:14px; bottom:calc(60px + var(--safe-bottom)); z-index:40;
  width:60px; height:76px; background:none; border:none; padding:0; pointer-events:none;}
.shelf-masc svg{width:100%; height:100%; overflow:visible;}
.shelf-masc .arm{transform-box:view-box; transform-origin:32px 46px;}
.shelf-masc.digging .arm{animation:sh-dig .5s ease-in-out infinite;}
@keyframes sh-dig{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(18deg)}}
.cv{font-family:'Caveat',cursive; font-weight:700;}

/* ── лупа в шапке: поиск свёрнут в иконку-кнопку 40 R10 (не ест вертикаль);
     тап раскрывает строку. Кнопка — справа на строке заголовка «Шкаф». ── */
.shelf-bh{position:relative;}
.sq-open{position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:40px; height:40px; background:none; border:none; cursor:pointer;
  color:var(--graphite-soft); display:flex; align-items:center; justify-content:center;
  transition:transform .09s ease;}
.sq-open::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.sq-open svg{width:24px; height:24px;}
.sq-open:active{transform:translateY(-50%) scale(.94);}
/* строка раскрыта — лупа-кнопка «нажата» маркером */
.sq-open[aria-expanded="true"]{background:var(--marker); color:var(--graphite); border-radius:10px;}

/* ── поиск: карандашная карточка (mountPencil R12), лупа line 2.5/24 слева,
     счётчик-лампа-круг 24 справа — тикает на ввод (skLamp в renderShelf) ── */
.shelf-search{position:relative; margin:8px 0 0; flex:none; min-height:48px;
  display:flex; align-items:center; gap:8px; padding:0 12px 0 16px;
  animation:shp-in .24s ease;}
.shelf-search .shelf-lens{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.shelf-search .shelf-lens svg{width:100%; height:100%; display:block;}
.shelf-search input{
  flex:1; min-width:0; height:48px; background:none; border:none; position:relative;
  /* max(…,16px): на мобиле rem-шкала = 15px (tokens.css), а поле <16px iOS зумит при фокусе */
  font-family:'Neucha',cursive; font-size:max(1.05rem,16px); color:var(--graphite);
}
.shelf-search input:focus{outline:none;}
.shelf-search input::placeholder{color:var(--pencil); font-style:italic;}
.shelf-search input::-webkit-search-cancel-button{cursor:pointer;}
.shelf-search:focus-within{transform:translateY(-1px);}
/* счётчик — лампа-круг 24 (маркер + карандашная обводка); виден при поиске */
.shelf-cnt{display:none; min-width:24px; height:24px; padding:0 5px; flex:none;
  align-items:center; justify-content:center; border-radius:50%;
  background:var(--marker); box-shadow:0 0 0 1.5px var(--graphite);
  font-family:'Caveat',cursive; font-weight:700; font-size:.95rem; color:var(--graphite);}
body.shelf-searching .shelf-cnt{display:inline-flex;}
/* .sh-lit (не .tick — тот занят tasks.css: .tick{display:grid}) — вспышка счётчика */
.shelf-cnt.sh-lit{animation:sh-tick .36s ease;}
@keyframes sh-tick{0%,100%{transform:none}45%{transform:scale(1.22)}}

/* ── модалки просмотра ящика/карточки (#shelf-box-view / #shelf-item-view):
   единый паттерн с модалкой задачи; габариты — как у колод (sortbox.css
   задаёт их адресно по id — повторяем у себя). Поиск прячет L0-разделы. ── */
body.shelf-searching .pile-tray, body.shelf-searching .cab{display:none;}
#shelf-box-view, #shelf-item-view{
  max-width:min(640px, calc(100vw - 16px));
  width:100%;
  height:min(690px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px));
}
.shv-frame{height:100%; display:flex; flex-direction:column; padding:14px 14px 12px;}
.shv-frame .shl-head{padding-right:48px;}   /* место под ✕ (.m-close 44) */

/* шапка модалки просмотра: [имя Caveat 20] [лампа-счётчик 24] [✎ ib40];
   кнопка — квадрат 40 R10 с карандашной рамкой + line-иконка 2.5/24 */
.shl-head{display:flex; align-items:center; gap:8px; flex:none; min-height:56px; padding:8px 2px 4px;}
.shl-edit{flex:none; width:40px; height:40px; border-radius:10px; position:relative;
  background:none; border:none; cursor:pointer; font-family:inherit; color:var(--pencil);
  display:flex; align-items:center; justify-content:center; transition:transform .09s ease;}
.shl-edit::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.shl-edit svg{width:22px; height:22px;}
.shl-edit:active{transform:scale(.96);}
.shl-t{flex:1; min-width:0; font-family:'Caveat',cursive; font-weight:700; font-size:1.35rem;
  color:var(--graphite); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.shl-n{flex:none; min-width:24px; height:24px; padding:0 5px; border-radius:50%;
  background:var(--marker); box-shadow:0 0 0 1.5px var(--graphite);
  font-family:'Caveat',cursive; font-weight:700; font-size:.85rem; color:var(--graphite);
  display:inline-flex; align-items:center; justify-content:center;}
.shl-n:empty{display:none;}

/* скролл-зона уровней ящика/карточки — бока 2px (одна линия с сеткой L0) */
.shl-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:6px 2px 14px;}

/* ── L0: «куча» — лоток неразобранных бумажек (прототип shkaf-v2) ──
   Скрапсы-декор торчат над кромкой (transform rotate, статика), внутри —
   единственный gold L0 «Разобрать · N» (рамку лотка и gold-кнопку рисует
   mountPencil в wireShelfPile). Пустая куча — ghost-пунктир с подписью. */
/* Выравнивание: ВСЕ секции L0 (поиск, лоток, сетка, панель) сидят на одной
   левой/правой линии контентной полосы #shelf; место под выступающие
   карандашные подложки даём отрицательными полями скролл-зоны, а не сдвигом
   контента (иначе лесенка зазоров). */
.pile-tray{position:relative; flex:none; margin:16px 0 0; min-height:64px;
  display:flex; align-items:center; justify-content:center; padding:8px 12px;}
.pile-tray > *{position:relative;}
.pile-tray.empty::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:16px; filter:url(#squiggle);}
.pile-tray.empty > .sk-tabbar-bg{display:none;}   /* пустой лоток — только ghost-пунктир */
.pt-scraps{position:absolute; left:8px; right:8px; top:-12px; height:24px; pointer-events:none;}
.pt-scraps .scrap{position:absolute; top:0; width:44px; height:20px; background:var(--sh-card);
  border:1.6px solid var(--pencil); border-radius:3px; filter:url(#squiggle);}
.pt-scraps .scrap::after{content:""; position:absolute; left:6px; right:8px; top:8px;
  border-top:1.4px dashed var(--pencil-faint);}
.pt-sort{height:48px; padding:0 20px; position:relative; background:none; border:none;
  cursor:pointer; font-family:'Caveat',cursive; font-weight:700; font-size:1.25rem; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .09s;}
.pt-sort:active{transform:scale(.96);}
.pt-sort .tx{position:relative;}
.pt-sort .tx b{font-weight:700;}
.pt-empty{font-family:'Neucha',cursive; font-size:.88rem; color:var(--pencil); font-style:italic;
  text-align:center; padding:4px 0;}
.pile-tray:not(.empty) .pt-empty{display:none;}

/* ── L0: скролл-зона ящиков ── */
.cab{margin-top:4px; padding:2px 0 8px; position:relative;
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
/* сетка ящиков 2 колонки (прототип shkaf-v2): плитки «с ручками».
   Подложки плиток выступают на pad+тень (~11px): место даём паддингом,
   а визуальный край возвращаем на линию полосы отрицательным margin —
   скролл не ловит X-оверфлоу, и лесенки зазоров нет. */
.drawers{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start;
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  margin:0 -12px; padding:12px 12px 12px;}
.drawer{display:flex; flex-direction:column; min-width:0;}

/* плитка-«фронт ящика» (без наклона): внешняя панель R12 (skTabbar.mount),
   внутренняя филёнка 1.5 (::before, inset 6), ручка-планка 32×8 на панели;
   строка контента [значок] [имя · лампа N] — счётчик сразу у имени,
   глаза его не ищут по углам */
.dfront{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:32px 16px 14px; min-height:96px; width:100%;
  background:none; position:relative; text-align:center; cursor:pointer;
  border:none; font-family:inherit; color:inherit; transition:transform .14s ease;
}
.dfront > *{position:relative;}
/* филёнка фронта — вторая линия внутри панели (мебельность);
   z-index:1 — иначе её закрашивает бумага подложки skTabbar (первый child) */
.dfront::before{content:""; position:absolute; inset:6px; pointer-events:none; z-index:1;
  border:1.5px solid var(--pencil-faint); border-radius:8px; filter:url(#squiggle);}
/* ручка ящика — планка 32×8 на филёнке, штрих 2, карандашная дрожь */
.dfront::after{content:""; position:absolute; top:14px; left:50%; margin-left:-16px;
  width:32px; height:8px; border:2px solid var(--graphite); border-radius:2px;
  background:var(--paper); filter:url(#squiggle);}
.dfront.pull, .dfront:active{transform:translateY(3px);}   /* «выдвижение ящика» на себя */
.dfront .em{font-size:1.3rem; line-height:1;}
/* «[значок] имя · N» одним МАЗКОМ хайлайтера: фон — отдельный слой ::before
   (цвет — var(--hl) с плитки/шапки) с карандашной дрожью #squiggle, рваными
   углами-блобом и лёгким скосом — как провели фломастером, а не залили
   прямоугольник. z-index:0 — свой стек-контекст, иначе слой(-1) провалится
   под бумагу подложки skTabbar. ВАЖНО: overflow-обрезка длинных имён живёт
   на ВНУТРЕННЕМ .nm-tx — на внешнем спане её нет, иначе рваный мазок
   срезается прямоугольником. */
.nm-hl{min-width:0; max-width:100%; font-family:'Caveat',cursive; font-weight:700;
  font-size:1.15rem; color:var(--graphite);
  display:inline-flex; align-items:center;
  position:relative; z-index:0; padding:3px 12px;}
/* значок · [имя ≤2 строк] · [счётчик всегда цел]: имя переносится на две
   строки (кламп листа 18, дальше «…»), значок и «· N» — flex:none */
.nm-hl .nm-tx{min-width:0; display:inline-flex; align-items:center; gap:6px;}
.nm-hl .em{flex:none;}
.nm-hl .nm-name{min-width:0; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; white-space:normal;
  overflow-wrap:anywhere; line-height:1.15;}
.nm-hl .nm-cnt{flex:none; white-space:nowrap;}
/* длинные имена — ступенькой мельче (порог 16 и 28 знаков, js shNameCls) */
.nm-hl .nm-s{font-size:.98rem;}
.nm-hl .nm-xs{font-size:.86rem;}

/* «предел названия» — мягкая подсказка под строкой в диалоге ящика */
.f-limit{margin:2px 2px 6px; font-family:'Neucha',cursive; font-size:.8rem;
  color:var(--graphite-soft); animation:shp-in .24s ease;}
@media (prefers-reduced-motion:reduce){ .f-limit{animation:none;} }
.nm-hl::before{content:""; position:absolute; inset:1px -4px 2px -6px; z-index:-1;
  background:var(--hl, var(--marker));
  border-radius:16px 7px 13px 9px / 9px 14px 7px 12px;
  transform:rotate(-1.2deg) skewX(-7deg);
  filter:url(#squiggle);}
.dfront .dedit{position:absolute; top:6px; left:6px; font-size:.95rem; color:var(--pencil);
  padding:2px 4px; border-radius:8px; opacity:0; transition:opacity .12s;}
.dfront:hover .dedit{opacity:1;}
.dfront .dedit:hover{color:var(--graphite); background:rgba(0,0,0,.05);}

/* перестановка ящиков: исходник гаснет, призрак летит на transform (§1) */
.drawer.drag-src{opacity:.35;}
.drawer-ghost{position:fixed; left:0; top:0; z-index:80; pointer-events:none;
  will-change:transform;}

/* описание ящика — пара строк под шапкой модалки, gs-цветом */
.shl-desc{margin:0 2px 10px; font-family:'Neucha',cursive; font-size:.88rem;
  color:var(--graphite-soft); line-height:1.4; overflow-wrap:anywhere;}

/* пустой шкаф — плитки-подсказки (пунктирную подложку рисует mount dashed) */
.drawer.ghost .dfront{opacity:.85;}
.drawer.ghost .add-hint{flex:none; font-size:1.1rem; color:var(--pencil);}
.drawer.ghost .dfront:hover{transform:translateY(-2px); opacity:1;}
.drawer.ghost .dfront::after{border-color:var(--pencil); border-style:dashed;}
.drawer.ghost .dfront::before{border-style:dashed;}

/* «＋ ящик» — ghost-слот в конце сетки на всю ширину (прототип .addslot):
   просто кнопка 48 R12, тап открывает диалог ящика */
.drawer-add{grid-column:1 / -1; height:48px; position:relative;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:none; border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.92rem; color:var(--pencil);}
.drawer-add::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:12px; filter:url(#squiggle);}
.drawer-add:hover{color:var(--graphite); background:var(--marker);}
.drawer-add:active{transform:scale(.98);}

/* ── L1: карточки ящика — строки 48 R12, иконка line 2.5/24, бейдж R6, шеврон ── */
.items{display:flex; flex-direction:column; gap:8px;}
.empty-note{color:var(--pencil); font-size:.88rem; padding:5px 4px;}

.it{background:var(--sh-card); border-radius:12px; position:relative;}
.it::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.it:hover{background:#FFFCEC;}
.it .row{display:flex; align-items:center; gap:8px; width:100%; padding:0 12px;
  min-height:48px; text-align:left; background:none; border:none; font-family:inherit; color:inherit; cursor:pointer;}
.it .ic{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.it .ic svg{width:100%; height:100%; display:block;}
.it .t{flex:1; min-width:0; font-size:.98rem; color:var(--graphite); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.it .badge{flex:none; height:24px; max-width:40%; border-radius:6px; padding:0 8px; position:relative;
  font-size:.78rem; color:var(--graphite-soft); display:inline-flex; align-items:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.it .badge::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.4px solid var(--pencil-faint); border-radius:6px; filter:url(#squiggle);}
.it .dt{flex:none; font-size:.72rem; color:var(--pencil);}
.it .chev{flex:none; color:var(--pencil-faint); font-size:1.05rem; pointer-events:none;}
.it .bt{padding:0 12px 10px 44px; font-size:.8rem; color:var(--graphite-soft); overflow-wrap:anywhere;}
.it .iedit{position:absolute; top:50%; transform:translateY(-50%); right:10px; font-size:.9rem; color:var(--pencil);
  padding:3px 5px; border-radius:8px; opacity:0; transition:opacity .12s; cursor:pointer; background:var(--sh-card);}
.it:hover .iedit{opacity:1;}
.it .iedit:hover{color:var(--graphite); background:rgba(0,0,0,.05);}

/* быстрый ввод карточки: инпут 48 R12 + кнопка-квадрат 48 R12 (line-плюс 2.5/24) */
.iadd{display:flex; gap:8px; margin-top:8px;}
.iadd input{flex:1; min-width:0; height:48px; background:var(--sh-card); border:none; padding:0 14px;
  border-radius:12px; box-shadow:0 0 0 1.5px var(--pencil-faint);
  /* 16px фикс.: поле <16px iOS зумит при фокусе (rem не годится — на мобиле шкала 15px) */
  font-family:'Neucha',cursive; font-size:16px; color:var(--graphite);}
.iadd input:focus{outline:none; box-shadow:0 0 0 2px var(--ink-blue);}

.iadd .btn{width:48px; height:48px; flex:none; border-radius:12px; background:var(--sh-card);
  position:relative; color:var(--graphite-soft); padding:0; min-height:0;
  display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer;}
.iadd .btn::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.iadd .btn svg{width:24px; height:24px;}
.iadd .btn:hover{background:var(--marker); color:var(--graphite);}

/* «вставить текст» — пунктирная строка-приглашение 48 R12 под быстрым вводом */
.paste-row{display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:8px; height:48px; font-family:'Neucha',cursive; font-size:.88rem; color:var(--pencil);
  background:none; border:none; cursor:pointer; position:relative;}
.paste-row::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:12px; filter:url(#squiggle);}
.paste-row:hover{color:var(--graphite); background:var(--marker);}

/* подпись-цитата внизу шкафа */
.shelf-foot{flex:none; padding:8px 0 2px;}
body.shelf-searching .shelf-foot{display:none;}

/* ── результаты поиска (оверлей вместо сцены): задачи · шкаф · внутри рецептов ── */
.shelf-res{display:none; margin-top:8px; flex-direction:column; gap:14px;}
body.shelf-searching .shelf-res{display:flex; flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:2px;}
.rgroup h3{font-size:1.15rem; color:var(--graphite-soft); margin:0 2px 7px;}
.rgroup .items{gap:7px;}
.rempty{display:flex; align-items:center; gap:10px; padding:14px; position:relative;
  color:var(--graphite-soft); font-size:.9rem;}
.rempty::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:var(--sh-r-body); filter:url(#squiggle);}
.rempty .e{width:28px; height:28px; flex:none; color:var(--graphite-soft);}
.rempty .e svg{width:100%; height:100%; display:block;}
mark{background:var(--marker); padding:0 2px; border-radius:5px; color:inherit;}

/* ── L2: карточка — мета-чипы 24 R6, line-иконка 2/14 ── */
.sh-meta{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 10px;}
.sh-mc{height:24px; border-radius:6px; padding:0 8px; display:inline-flex; align-items:center; gap:5px;
  font-size:.78rem; color:var(--graphite-soft); position:relative; text-decoration:none;}
.sh-mc::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.4px solid var(--pencil-faint); border-radius:6px; filter:url(#squiggle);}
.sh-mc svg{width:14px; height:14px; flex:none;}
a.sh-link{color:var(--ink-blue); cursor:pointer;}
a.sh-link:hover{background:var(--marker); color:var(--graphite);}

/* секции: заголовок Caveat 700·17 + степпер порций справа (32 R8, не круг) */
.sh-sect{display:flex; align-items:center; gap:8px; margin:12px 0 4px; min-height:32px;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.05rem; color:var(--graphite-soft);}
.sh-serv{display:flex; align-items:center; gap:8px; margin-left:auto;
  font-family:'Neucha',cursive; font-size:.72rem; color:var(--pencil);}
.sh-serv b{font-family:'Caveat',cursive; font-weight:700; font-size:1.2rem;
  min-width:24px; text-align:center; color:var(--graphite);}
.sh-serv button{width:32px; height:32px; border-radius:8px; background:var(--sh-card);
  position:relative; border:none; cursor:pointer; color:var(--graphite-soft);
  display:inline-flex; align-items:center; justify-content:center; transition:transform .09s;}
.sh-serv button::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.sh-serv button svg{width:16px; height:16px;}
.sh-serv button:hover{background:var(--marker);}
.sh-serv button:active{transform:scale(.94);}
.sh-sedit{margin-left:auto; width:32px; height:32px; position:relative; color:var(--pencil);
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .09s;}
.sh-sedit::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.sh-sedit svg{width:16px; height:16px;}
.sh-sedit:active{transform:scale(.94);}
.sh-sedit:hover{color:var(--graphite); background:var(--marker);}

/* ингредиенты (лист 05·4): [чекбокс «уже есть» 24] [имя] [кол-во Caveat 700·17],
   строка 40, пунктир-разделитель. Отмеченное гаснет h-done — «в корзину» идут
   только неотмеченные. Правка кол-ва/удаление — через «⤵ разложить» (парсер). */
.sh-ing{display:flex; flex-direction:column;}
.sh-ing .ir{display:flex; align-items:center; gap:8px; min-height:40px; padding:0 2px;
  border-bottom:1.4px dashed var(--pencil-faint); cursor:pointer;}
.sh-ing .ir:last-child{border-bottom:none;}
.sh-ing .rcheck{width:24px; height:24px; flex:none; border-radius:6px; background:var(--sh-card);
  position:relative; box-shadow:0 0 0 2px var(--graphite); cursor:pointer;}
.sh-ing .rcheck svg{position:absolute; inset:2px; width:20px; height:20px;}
.sh-ing .rcheck svg path{stroke:#3E8E5A; stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24;}
.sh-ing .rcheck.on svg path{animation:sh-tick-draw .24s ease forwards;}
@keyframes sh-tick-draw{to{stroke-dashoffset:0;}}
.sh-ing .inm{flex:1; min-width:0; background:none; border:none; padding:0;
  font-family:'Neucha',cursive; font-size:max(.98rem,16px); color:var(--graphite);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sh-ing input.inm:focus{outline:none; background:var(--marker); border-radius:6px; padding:0 4px;}
.sh-ing .q{font-family:'Caveat',cursive; font-weight:700; font-size:1.05rem;
  white-space:nowrap; color:var(--graphite); flex:none;}
.sh-ing .ir.done{background-image:repeating-linear-gradient(-45deg,
  transparent 0 5px, rgba(139,133,120,.28) 5px 6.5px);}
.sh-ing .ir.done .inm{color:var(--pencil); text-decoration:line-through;}
.sh-ing .ir.done .q{color:var(--pencil);}

.sh-add-ing{display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:8px; height:40px; font-family:'Neucha',cursive; font-size:.85rem; color:var(--pencil);
  background:none; border:none; cursor:pointer; position:relative;}
.sh-add-ing::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle);}
.sh-add-ing:hover{color:var(--graphite); background:var(--marker);}

/* шаги: номер в маркер-жёлтом рисованном кружке */
.sh-steps{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:8px;
  margin:0; padding:0;}
.sh-steps li{counter-increment:s; position:relative; padding-left:32px;
  font-size:.9rem; color:var(--graphite-soft); overflow-wrap:anywhere;}
.sh-steps li::before{content:counter(s); position:absolute; left:0; top:0; width:24px; height:24px;
  background:var(--marker); border-radius:50%; box-shadow:0 0 0 1.5px var(--graphite);
  display:flex; align-items:center; justify-content:center;
  font-family:'Caveat',cursive; font-weight:700; color:var(--graphite); font-size:.85rem;}
#sh-steps-ta{width:100%; min-height:120px; background:var(--paper); border:none; resize:vertical;
  padding:10px 11px; border-radius:var(--r-input); box-shadow:0 0 0 1.4px var(--pencil-faint);
  font-family:'Neucha',cursive; font-size:16px; color:var(--graphite); line-height:1.4;}
#sh-steps-ta:focus{outline:none; box-shadow:0 0 0 2px var(--ink-blue);}
.sh-steps-btns{display:flex; gap:8px; margin-top:8px; justify-content:flex-end;}

/* действия карточки (48 R12): [🛒 в корзину — плоский gold, mountPencil] + карандашные;
   иконки line 2.3/24 (20 в кнопке) */
.sh-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.sh-abtn{flex:1 1 auto; height:48px; padding:0 16px; position:relative;
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--graphite-soft);
  background:none; border:none; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:transform .09s;}
.sh-abtn::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.sh-abtn svg{width:20px; height:20px; flex:none;}
.sh-abtn:hover{background:var(--marker); color:var(--graphite);}
.sh-abtn:active{transform:scale(.97);}
.sh-abtn.pr{font-family:'Caveat',cursive; font-weight:700; font-size:1.2rem; color:#fff;}
.sh-abtn.pr::before{display:none;}   /* фон рисует mountPencil (плоский gold #D9A832) */
.sh-abtn.pr > span{position:relative; display:inline-flex; align-items:center; gap:6px;}
.sh-steps-btns .sh-abtn{flex:0 0 auto;}

/* заметка: текст-карточка + подсказки */
.sh-note{background:var(--sh-card); padding:12px 13px; position:relative;
  font-size:.92rem; color:var(--graphite-soft); line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere;}
/* заметка, разобранная richtext.js (таблица/списки): переносы уже в вёрстке */
.sh-note.sh-note-rt{white-space:normal;}
.sh-note::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.6px solid var(--pencil-faint); border-radius:var(--sh-r-body); filter:url(#squiggle);}
.sh-hint{font-size:.85rem; color:var(--pencil); padding:8px 2px;}
.sh-phint{font-size:.78rem; color:var(--pencil); margin:2px 2px 0;}

/* выбор типа карточки (в модалках) */
.kinds{display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 4px;}
.kind{display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:40px;
  background:var(--sh-card); position:relative; border:none; cursor:pointer;
  font-family:'Neucha',cursive; font-size:.9rem; color:var(--graphite);}
.kind::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--pencil-faint); border-radius:10px; filter:url(#squiggle);}
.kind .ki{width:20px; height:20px; flex:none; color:var(--graphite-soft); display:inline-flex;}
.kind .ki svg{width:100%; height:100%;}
.kind.sel{background:var(--marker);}
.kind.sel::before{border-color:var(--graphite);}
/* заголовок модалки просмотра — сам вход в правку (рука тянется к маркеру);
   hover-контур — по рваной форме мазка (::before), не по прямоугольнику спана */
.shl-t{cursor:pointer;}
.shl-t:hover .nm-hl::before{box-shadow:0 0 0 1.5px var(--pencil);}

/* ── пикер значка (js/emoji-pick.js): кнопка-превью 48 R12 + панель
   [поиск 40 R10] [сетка значков, скролл до 5 рядов] ── */
.emo-btn{width:84px; height:48px; border-radius:12px; background:var(--sh-card);
  border:none; cursor:pointer; font-size:1.5rem; line-height:1; position:relative;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .09s;}
.emo-btn::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--pencil-faint); border-radius:12px; filter:url(#squiggle);}
.emo-btn:active{transform:scale(.95);}
.emo-btn[aria-expanded="true"]::before{border:2px solid var(--graphite);}
.emo-pick{margin:2px 0 6px;}
.emo-pick .emo-q{width:100%; height:40px; background:var(--sh-card); border:none;
  padding:0 12px; border-radius:10px; box-shadow:0 0 0 1.5px var(--pencil-faint);
  font-family:'Neucha',cursive; font-size:16px; color:var(--graphite);}
.emo-pick .emo-q:focus{outline:none; box-shadow:0 0 0 2px var(--ink-blue);}
.emo-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr));
  gap:4px; max-height:216px; overflow-y:auto; margin-top:8px; padding:2px;}
.emo-c{height:40px; border-radius:10px; background:none; border:none; cursor:pointer;
  font-size:1.35rem; line-height:1; display:flex; align-items:center; justify-content:center;}
.emo-c:hover{background:var(--marker);}
.emo-c:active{transform:scale(.9);}
.emo-custom{box-shadow:inset 0 0 0 1.5px var(--pencil); border-radius:10px;}
.emo-empty{grid-column:1 / -1; padding:14px 4px; font-family:'Neucha',cursive;
  font-size:.88rem; color:var(--pencil); text-align:center;}

/* мазки-свотчи хайлайтера ящика: 40×24, рваный блоб со скосом (как мазок),
   выбранный — карандашная рамка */
.hlrow{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px;}
.hsw{width:40px; height:24px; border:none; cursor:pointer;
  border-radius:14px 6px 12px 8px / 8px 13px 6px 11px;
  transform:rotate(-1.4deg) skewX(-6deg);
  filter:url(#squiggle);
  position:relative; transition:transform .09s ease;}
.hsw:nth-child(even){transform:rotate(1deg) skewX(-6deg);}
.hsw::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid transparent; border-radius:inherit;}
.hsw.sel::before{border-color:var(--graphite); border-width:2px;}
.hsw:active{transform:scale(.92) skewX(-6deg);}

#shelf-box-form .boxrow{display:flex; gap:10px;}
#shelf-box-form .emoji-l{flex:none; width:84px;}
#shelf-box-form .name-l{flex:1; min-width:0;}
#shelf-box-form .emoji-l input{text-align:center; font-size:1.3rem;}

/* ── чипы захвата в доке (шкаф-режим композера, js/shelf-pile.js):
   «в ящик X?» — ghost dashed «?» (гипотеза, лист 10) · «в календарь ↗» blue ·
   «мимо — в кучу» / сервисные — pencil · «корзина ×» — red dashed. Высота 32 R8. */
.shp-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 2px 8px;}
.shp-chips[hidden]{display:none;}
.shp-note{max-width:40%; min-width:0; font-family:'Neucha',cursive; font-size:.8rem;
  color:var(--pencil); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.shp-chip{height:32px; padding:0 12px; position:relative; background:var(--sh-card);
  border:none; cursor:pointer; font-family:'Neucha',cursive; font-size:.88rem;
  color:var(--graphite); display:inline-flex; align-items:center; gap:5px;
  transition:transform .09s ease;}
.shp-chip::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);}
.shp-chip:active{transform:scale(.95);}
.shp-chip.hint::before{border-style:dashed;}
.shp-chip.hint{color:var(--graphite);}
.shp-chip.cal{color:var(--ink-blue);}
.shp-chip.cal::before{border-color:var(--ink-blue);}
.shp-chip.gray{color:var(--graphite-soft);}
.shp-chip.gray::before{border-color:var(--pencil);}
.shp-chip.danger{color:var(--red);}
.shp-chip.danger::before{border-color:var(--red); border-style:dashed;}
/* появление чипов — только transform/opacity (§1) */
.shp-chip, .shp-note{animation:shp-in .24s ease;}
@keyframes shp-in{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}}

/* летящая бумажка «строка → ящик/лоток» (transform/opacity, 550 мс) */
.shp-flyer{position:fixed; z-index:70; pointer-events:none; max-width:220px;
  background:var(--sh-card); border:1.6px solid var(--graphite); border-radius:8px;
  padding:4px 10px; font-family:'Neucha',cursive; font-size:.85rem; color:var(--graphite);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:transform .55s cubic-bezier(.4,.7,.5,1), opacity .55s ease; will-change:transform;}

/* ── «разбор кучи» (#pile-dialog): габариты как у колод sortbox/handoff
   (sortbox.css задаёт их адресно по id — повторяем у себя, файл-домен шкафа) ── */
#pile-dialog{
  max-width:min(640px, calc(100vw - 16px));
  width:100%;
  height:min(690px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px));
}
#pd-cnt:empty{display:none;}   /* пустая маркер-пилюля на финалке не нужна */
/* line-иконки хинтов направлений (у sortbox-скина .ic — эмодзи-спан) */
#pile-dialog .sx-hint .ic{display:flex;}
#pile-dialog .sx-hint .ic svg{width:24px; height:24px; display:block;}

/* ── чипы «разбора кучи» (#pile-dialog): ящики 40 R10 (главное действие),
   саджест — ghost dashed «?», сервисные 32 R8 отдельным рядом ── */
.pd-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding-top:10px;}
.pd-chips .pdc{height:40px; padding:0 14px; position:relative; background:var(--sh-card);
  border:none; cursor:pointer; font-family:'Caveat',cursive; font-weight:700; font-size:1.1rem;
  color:var(--graphite); display:inline-flex; align-items:center; gap:6px;
  transition:transform .09s ease;}
.pd-chips .pdc::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.pd-chips .pdc:active{transform:scale(.95);}
.pd-chips .pdc .em{font-size:1rem;}
.pd-chips .pdc.sug::before{border-style:dashed;}
.pd-chips .pdc.sug .q{color:var(--ink-blue); font-size:.95rem;}
.pd-chips .pdc kbd{font-family:'Neucha',cursive; font-size:.68rem; color:var(--pencil);
  border:1.2px solid var(--pencil-faint); border-radius:4px; padding:0 4px; line-height:1.35;}
.pd-sep{width:100%; height:0;}
.pd-chips .pds{height:32px; padding:0 12px; position:relative; background:none;
  border:none; cursor:pointer; font-family:'Neucha',cursive; font-size:.85rem;
  color:var(--graphite-soft); display:inline-flex; align-items:center; gap:5px;}
.pd-chips .pds::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--pencil); border-radius:8px; filter:url(#squiggle);}
.pd-chips .pds.cal{color:var(--ink-blue);}
.pd-chips .pds.cal::before{border-color:var(--ink-blue);}
.pd-chips .pds.danger{color:var(--red);}
.pd-chips .pds.danger::before{border-color:var(--red); border-style:dashed;}
/* возраст бумажки на карте колоды */
.sx-card .pd-age{font-size:.72rem; color:var(--pencil);}

/* адаптив */
@media (max-width:640px){
  #shelf{padding-left:12px; padding-right:12px;}
  .shelf-masc{width:54px; height:66px;}
  .sh-actions .sh-abtn{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .shelf-masc.digging .arm{animation:none !important;}
  .dfront, .dfront .ring{transition:none;}
  .shp-chip, .shp-note{animation:none;}
  .shp-flyer{transition:none; display:none;}
  .shelf-search{animation:none;}
}
/* Клавиатура сжала вьюпорт (Mini App) — прячем маскота, иначе он наползает
   на поле добавления в и без того тесной видимой области. */
@media (max-height:560px){
  .shelf-masc{display:none;}
}