/* Карман — компоненты мини-приложения. Подключать после tokens.css */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--c-bg)}
body{font:var(--t-body);color:var(--c-text);-webkit-font-smoothing:antialiased}
.screen{width:var(--screen-width);min-height:var(--screen-height);position:relative;overflow:hidden;background:var(--c-bg);padding-bottom:var(--screen-tabbar)}
.screen.no-tabs{padding-bottom:0}
.i{flex:none;display:block}

/* Статус-бар (только для макета) */
.status{height:var(--screen-status-bar);display:flex;justify-content:space-between;align-items:center;padding:4px 28px 0 32px;font:700 15px/1 var(--font-body);color:var(--c-text)}
.status .si{display:flex;gap:6px;align-items:center}
.on-dark .status{color:var(--c-text-on-primary)}

/* Шапка */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px var(--screen-padding-x) 0;min-height:52px;gap:12px}
.topbar .title{font:var(--t-h3);color:var(--c-text-heading);flex:1;text-align:center}
.brand{display:flex;align-items:center;gap:8px;font:600 19px/1 var(--font-display);color:var(--c-text-heading)}
.icon-btn{width:44px;height:44px;border-radius:50%;background:var(--c-surface);display:flex;align-items:center;justify-content:center;color:var(--c-text-heading);box-shadow:var(--sh-card)}
.icon-btn.ghost{background:transparent;box-shadow:none}

/* Типографика */
.h-xl{font:var(--t-h1);letter-spacing:var(--t-h1-tracking);color:var(--c-text-heading)}
.h-l{font:var(--t-h2);letter-spacing:var(--t-h2-tracking);color:var(--c-text-heading)}
.h-m{font:var(--t-h3);color:var(--c-text-heading)}
.muted{color:var(--c-text-muted)}
.small{font:var(--t-small)}
.px{padding-left:var(--screen-padding-x);padding-right:var(--screen-padding-x)}

/* Кнопки */
.btn{height:var(--size-button-h);border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:8px;font:var(--t-button);padding:0 22px;border:none;width:100%;white-space:nowrap}
.btn-primary{background:var(--c-primary);color:var(--c-text-on-primary);box-shadow:var(--sh-primary)}
.btn-secondary{background:var(--c-secondary);color:var(--c-text-on-primary)}
.btn-soft{background:var(--c-surface);color:var(--c-text-heading);box-shadow:var(--sh-card)}
.btn-ghost{background:transparent;color:var(--c-primary)}
.btn-danger{background:var(--c-surface);color:var(--c-danger);box-shadow:var(--sh-card)}
.btn-disabled{background:var(--c-disabled-bg);color:var(--c-disabled-text);box-shadow:none}
.btn-s{height:var(--size-button-h-s);font-size:14px;padding:0 14px;width:auto}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:8px 14px;font:800 14px/1 var(--font-body);white-space:nowrap}
.pill-pro{background:var(--c-secondary);color:var(--c-text-on-primary)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:9px 14px;font:700 14px/1 var(--font-body);background:var(--c-surface);color:var(--c-text);box-shadow:var(--sh-card);white-space:nowrap}
.chip.on{background:var(--c-secondary);color:var(--c-text-on-primary);box-shadow:none}
.chip.outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c-line-strong)}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-pill);padding:4px 8px;font:800 11px/1 var(--font-body);letter-spacing:.2px}
.badge-pro{background:var(--c-secondary);color:var(--c-accent-sand)}
.badge-soon{background:var(--c-surface-2);color:var(--c-text-subtle)}
.badge-ok{background:var(--c-success-soft);color:var(--c-success)}
.badge-work{background:var(--c-primary-soft);color:var(--c-primary-pressed)}

/* Карточки */
.card{background:var(--c-surface);border-radius:var(--r-l);box-shadow:var(--sh-card)}
.hero-task{background:var(--c-primary);color:var(--c-text-on-primary);border-radius:var(--r-xl);padding:18px;position:relative;box-shadow:var(--sh-primary)}
.icon-tile{width:var(--size-icon-tile);height:var(--size-icon-tile);border-radius:var(--r-s);background:var(--c-primary-soft);color:var(--c-primary);display:flex;align-items:center;justify-content:center;flex:none}
.icon-tile.green{background:var(--c-secondary-soft);color:var(--c-secondary)}
.icon-tile.sand{background:#FAEBD3;color:#A86A1E}
.tile{background:var(--c-surface);border-radius:var(--r-l);padding:13px 14px 14px;box-shadow:var(--sh-card)}
.tile .tt{font:var(--t-title);font-size:15px;line-height:19px;margin-top:9px;color:var(--c-text)}
.tile .ts{font:var(--t-small);font-size:12.5px;line-height:16px;color:var(--c-text-muted);margin-top:3px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.row + .row{border-top:1px solid var(--c-line)}
.row .rt{flex:1;min-width:0}
.row .rt b{display:block;font:var(--t-title);font-size:15px;line-height:19px;color:var(--c-text)}
.row .rt span{display:block;font:var(--t-small);font-size:12.5px;line-height:16px;color:var(--c-text-muted);margin-top:2px}
.row .chev{color:var(--c-text-subtle)}
.sec{display:flex;justify-content:space-between;align-items:baseline;padding:22px var(--screen-padding-x) 10px}
.sec b{font:var(--t-h3);color:var(--c-text-heading)}
.sec a{font:700 14px/1 var(--font-body);color:var(--c-primary);text-decoration:none}

/* Поле ввода */
.input{background:var(--c-surface);border-radius:var(--r-m);min-height:var(--size-input-h);padding:14px 16px;font:var(--t-body);color:var(--c-text);box-shadow:inset 0 0 0 1.5px var(--c-line)}
.input.focus{box-shadow:inset 0 0 0 2px var(--c-primary)}
.placeholder{color:var(--c-text-subtle)}
.seg{display:flex;background:var(--c-surface-2);border-radius:var(--r-pill);padding:4px}
.seg div{flex:1;height:40px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:6px;font:700 14px/1 var(--font-body);color:var(--c-text-muted)}
.seg div.on{background:var(--c-surface);color:var(--c-text-heading);box-shadow:var(--sh-card)}
.check{display:flex;gap:12px;align-items:flex-start;font:var(--t-small);color:var(--c-text)}
.check .box{width:22px;height:22px;border-radius:7px;flex:none;box-shadow:inset 0 0 0 2px var(--c-line-strong);background:var(--c-surface);display:flex;align-items:center;justify-content:center}
.check .box.on{background:var(--c-primary);box-shadow:none;color:#fff}
.progress{height:6px;border-radius:3px;background:var(--c-line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--c-primary);border-radius:3px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:4px;background:var(--c-line-strong)}
.dots i.on{width:24px;background:var(--c-primary)}
.skeleton{background:linear-gradient(90deg,#F1E6D6 0%,#F8F0E4 50%,#F1E6D6 100%);border-radius:8px}

/* Нижнее меню */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--screen-tabbar);background:var(--c-surface);border-top:1px solid var(--c-line);display:flex;justify-content:space-around;padding-top:9px}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font:var(--t-caption);color:var(--c-text-subtle);width:76px}
.tabbar .tab.on{color:var(--c-primary)}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--c-text);z-index:5}

/* Нижняя шторка */
.overlay{position:absolute;inset:0;background:var(--c-overlay)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--c-bg);border-radius:28px 28px 0 0;padding:10px var(--screen-padding-x) 40px;box-shadow:var(--sh-sheet)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--c-line-strong);margin:0 auto 18px}

/* Тост */
.toast{position:absolute;left:20px;right:20px;background:var(--c-secondary);color:var(--c-text-on-primary);border-radius:var(--r-m);padding:13px 16px;display:flex;gap:10px;align-items:center;font:700 14px/1.3 var(--font-body);box-shadow:var(--sh-raised)}

/* Строка-оффер v1: текст в одной переменной --content-paywall-offer-line (tokens.css). Сейчас временный: «Пока мы запускаемся, Карманом можно пользоваться бесплатно»; окончательный даст Копирайтер. Пробного периода в v1 нет. */
.offer-line{display:flex;gap:10px;align-items:center;border-radius:var(--r-m);padding:12px 14px;background:var(--c-secondary-soft);color:var(--c-secondary);font:var(--t-body-strong);font-size:14px;line-height:20px}
.offer-line::after{content:var(--content-paywall-offer-line)}
.offer-line.is-placeholder{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c-accent-sage);border:none;color:var(--c-text-subtle);outline:1.5px dashed var(--c-accent-sage);outline-offset:-1.5px;box-shadow:none}

/* ── Этапы задачи (stages): только реальные шаги; состояния li: .done / .now / (ожидает) ── */
.stages{list-style:none;margin:0;padding:0;position:relative}
.stages li{position:relative;display:flex;align-items:center;gap:12px;min-height:34px;font:700 14.5px/19px var(--font-body);color:var(--c-text-subtle)}
.stages li+li{margin-top:2px}
.stages li::before{content:"";position:absolute;left:11px;top:-14px;height:16px;width:2px;background:var(--c-line-strong);border-radius:1px}
.stages li:first-child::before{display:none}
.stages li.done::before,.stages li.now::before{background:var(--c-success)}
.stages .dot{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--c-surface);box-shadow:inset 0 0 0 2px var(--c-line-strong)}
.stages li.done{color:var(--c-text)}
.stages li.done .dot{background:var(--c-success);box-shadow:none}
.stages li.now{color:var(--c-text-heading);font-weight:800}
.stages li.now .dot{background:var(--c-primary-soft);box-shadow:inset 0 0 0 2px var(--c-primary)}
.stages li.now .dot i{width:8px;height:8px;border-radius:50%;background:var(--c-primary)}
.stages li .when{margin-left:auto;font:600 12px/1 var(--font-body);color:var(--c-text-subtle)}
.stages li.now .when{color:var(--c-primary-pressed)}

/* ── Карточка напоминания (remind): кнопки «Сделано» · «Через час» · «Завтра» ── */
.remind{background:var(--c-surface);border-radius:var(--r-l);box-shadow:var(--sh-card);padding:14px;position:relative;overflow:hidden}
.remind::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c-secondary)}
.remind .rh{display:flex;align-items:center;gap:8px;font:800 12px/1 var(--font-body);letter-spacing:.5px;text-transform:uppercase;color:var(--c-secondary)}
.remind .rh .tm{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--c-text-subtle);font-weight:700}
.remind .rx{font:600 18px/24px var(--font-display);color:var(--c-text-heading);margin-top:8px}
.remind .rs{font:600 13px/18px var(--font-body);color:var(--c-text-muted);margin-top:2px}
.remind .ra{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;margin-top:12px}
.remind .ra .btn{height:42px;padding:0 10px;font-size:14px}

/* ── Счётчик задач (counter) ── */
.counter{display:flex;align-items:center;gap:12px;background:var(--c-surface);border-radius:var(--r-l);box-shadow:var(--sh-card);padding:12px 14px}
.counter .cl{flex:1;min-width:0}
.counter .ct{font:700 13px/16px var(--font-body);color:var(--c-text-muted)}
.counter .cn{font:600 20px/26px var(--font-display);color:var(--c-text-heading);margin-top:2px}
.counter .cn small{font:700 13px/1 var(--font-body);color:var(--c-text-subtle);margin-left:6px}
.counter .progress{margin-top:8px}

/* ── Подписка: «Не продлевать» (выключает автопродление) — обведённая кнопка; подпись — переменная --content-cancel-button.
   «Отмена» (только выход из текущего шага) — текстовая кнопка btn-ghost / kb .ghost. Внешне они не должны совпадать. ── */
.btn-outline{background:transparent;color:var(--c-secondary);box-shadow:inset 0 0 0 2px var(--c-secondary)}
.cancel-label::after{content:var(--content-cancel-button)}
.profile-cancel-label::after{content:var(--content-profile-cancel-button)}
.btn-wrap{white-space:normal;height:auto;min-height:var(--size-button-h);padding:10px 22px;text-align:center;line-height:20px}
.cancel-label,.profile-cancel-label{display:inline!important;font:inherit!important;color:inherit!important;margin:0!important}

.offer-txt::after{content:var(--content-paywall-offer-line)}

/* Статус задачи с этапами: «Название этапа · этап N из M» + полоска (этапов обычно 2–5, текущий сообщает сервер). Без этапов — просто «Думаю…». */
.sprog{margin-top:4px}.sprog span{display:block;font:600 12.5px/17px var(--font-body);color:var(--c-text-muted)}.sprog b{display:inline!important;font:800 12.5px/17px var(--font-body)!important;margin:0!important;color:var(--c-text)}
.sprog .bar{height:5px;border-radius:3px;background:var(--c-line);margin-top:6px;overflow:hidden}.sprog .bar i{display:block;height:100%;border-radius:3px;background:var(--c-primary)}
.sw .sprog{margin:0 0 10px}

/* Версия 1: вкладка «Голос» неактивна, с меткой «скоро» */
.seg div.soon-tab{color:var(--c-text-subtle);opacity:.75}.seg div.soon-tab .badge{font-size:10.5px;padding:3px 6px;margin-left:2px}
.offer-bot::after{content:var(--content-offer-line-bot)}