/* Каталог дел — главный экран мини-приложения «Карман Ai Помощник».
   Подключать после ../../tokens.css и ../../components.css. Все цвета, отступы и шрифты — из токенов. */
.cat-screen{padding-bottom:calc(var(--screen-tabbar) + var(--s-4))}
.status{position:relative}
/* Шапка: знак + полное название + плашка тарифа (без цифр) */
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--screen-padding-x) 0;min-height:52px}
.cat-brand{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.cat-brand svg{flex:none}
.cat-brand h1{font:600 17px/22px var(--font-display);letter-spacing:-.2px;color:var(--c-text-heading);min-width:0;white-space:nowrap}
.cat-top.is-free .cat-brand h1{white-space:normal}
/* Класс .is-free ставится на .cat-top у бесплатного тарифа. Если справа кнопка «Получить Pro», заголовок переносится на две строки: «Карман Ai» / «Помощник» */
.plan-pill{display:inline-flex;align-items:center;gap:5px;height:32px;white-space:nowrap;padding:0 12px;border-radius:var(--r-pill);background:var(--c-secondary);color:var(--c-text-on-primary);font:800 13px/1 var(--font-body);flex:none}
.plan-pill .i{color:var(--c-accent-sand)}
/* Поле «Поручить своими словами» + микрофон */
.ask{display:flex;gap:var(--s-2);align-items:center;margin:var(--s-4) var(--screen-padding-x) 0;padding:6px 6px 6px var(--s-4);background:var(--c-surface);border-radius:var(--r-pill);box-shadow:var(--sh-card),inset 0 0 0 1.5px var(--c-line)}
.ask-field{flex:1;min-width:0}
.ask input{width:100%;border:0;outline:0;background:transparent;font:var(--t-body);font-size:16px;color:var(--c-text);height:44px}
.ask input::placeholder{color:var(--c-text-subtle)}
.ask:focus-within{box-shadow:var(--sh-card),inset 0 0 0 2px var(--c-primary)}
.ask-mic{width:var(--size-tap-min);height:var(--size-tap-min);border-radius:50%;border:0;flex:none;background:var(--c-primary);color:var(--c-text-on-primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-primary)}
.ask-mic:active{background:var(--c-primary-pressed)}
/* Ряд разделов (быстрый переход), прокрутка вбок */
.cat-chips{display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-4) var(--screen-padding-x) var(--s-1);scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips .chip{text-decoration:none;flex:none}
/* Раздел */
.cat-sec{padding:var(--s-5) var(--screen-padding-x) 0;scroll-margin-top:var(--s-3)}
.cat-h{font:var(--t-h3);color:var(--c-text-heading)}
.cat-note{font:var(--t-small);color:var(--c-text-muted);margin-top:2px}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s-3)}
/* Карточка дела: обычная / «Скоро» / нажатая */
.cc{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:132px;padding:14px 14px 15px;background:var(--c-surface);border-radius:var(--r-l);box-shadow:var(--sh-card);text-decoration:none;color:var(--c-text);transition:transform var(--motion-fast) var(--motion-easing),background var(--motion-fast)}
.cc-ic{width:var(--size-icon-tile);height:var(--size-icon-tile);border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;background:var(--c-primary-soft);color:var(--c-primary)}
.cc[data-tone=sand] .cc-ic{background:#FAEBD3;color:#A86A1E}
.cc[data-tone=green] .cc-ic{background:var(--c-secondary-soft);color:var(--c-secondary)}
.cc-t{font:var(--t-title);font-size:15px;line-height:19px;margin-top:10px;color:var(--c-text)}
.cc-s{font:var(--t-small);font-size:12.5px;line-height:16px;color:var(--c-text-muted);margin-top:3px}
.cc:active,.cc.is-pressed{transform:scale(.97);background:var(--c-surface);box-shadow:inset 0 0 0 2px var(--c-primary)}
.cc.is-soon{background:var(--c-surface-2);box-shadow:none}
.cc.is-soon .cc-ic{background:var(--c-line);color:var(--c-text-subtle)}
.cc.is-soon .cc-t{color:var(--c-text-muted)}
.cc.is-soon .cc-s{color:var(--c-text-subtle)}
.cc.is-soon:active{transform:none}
.cc-badge{position:absolute;top:14px;right:12px;border-radius:var(--r-pill);padding:5px 9px;font:800 11px/1 var(--font-body);letter-spacing:.2px;background:var(--c-surface);color:var(--c-text-subtle)}
/* «Лучшее» — акцентный раздел: оранжевая плитка иконки и тёплый фон */
.cat-grid.best .cc:not(.is-soon){background:linear-gradient(160deg,#FFFFFF 40%,var(--c-primary-soft) 140%)}
.cat-grid.best .cc:not(.is-soon) .cc-ic{background:var(--c-primary);color:var(--c-text-on-primary)}
/* Нижняя навигация прибита к низу окна */
.cat-tabbar{position:fixed;left:0;right:0;bottom:0;width:var(--screen-width);margin:0 auto;z-index:4}
.cat-tabbar .tab{text-decoration:none}
.homebar{position:fixed}

/* Плашка тарифа: is-buy — бесплатный тариф, кнопка покупки (ведёт в тарифы); is-active — Pro оплачен, спокойная плашка (ведёт в профиль).
   Флажок первой версии: класс .no-plan-pill на .cat-top скрывает плашку целиком. */
.plan-pill{text-decoration:none}
.plan-pill.is-buy{background:var(--c-primary);color:var(--c-text-on-primary);box-shadow:var(--sh-primary)}
.plan-pill.is-buy .i{color:var(--c-text-on-primary)}
.plan-pill.is-buy:active{background:var(--c-primary-pressed)}
.plan-pill.is-active{background:var(--c-secondary);color:var(--c-text-on-primary);box-shadow:none}
.plan-pill.is-active .i{color:var(--c-accent-sand)}
.no-plan-pill .plan-pill{display:none}
/* Окно «Скоро появится» */
.cat-screen.is-cut{height:var(--screen-height);min-height:0}
.soon-ov{z-index:6}
.soon-sheet{z-index:7;text-align:center;padding-bottom:44px}
.soon-ic{width:56px;height:56px;border-radius:var(--r-m);background:var(--c-surface-2);color:var(--c-text-muted);display:flex;align-items:center;justify-content:center;margin:0 auto}
.soon-k{font:var(--t-small);color:var(--c-text-subtle);margin-top:var(--s-3)}
.soon-sheet .h-l{margin-top:2px}
.soon-tx{font:var(--t-body);color:var(--c-text-muted);margin:var(--s-2) auto 0;max-width:320px}
.soon-act{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
.soon-done{height:var(--size-button-h);border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:8px;background:var(--c-success-soft);color:var(--c-success);font:var(--t-button)}
.is-cut .homebar{z-index:8}