/* ═══ ВКЛАДКА «СЕЙЧАС» · СОСТОЯНИЕ «ПОСЛЕ» ═══════════════════════════════════
   Пара к /cabinet/js/now-posle.js. Подключать ПОСЛЕ /styles-tab-сейчас.css:
   там объявлена дорожка шагов (.nzs-seg), которой пользуется и это состояние.

   Экран «после» почти весь собран из готового: герой — та же .next.meet, что
   у ближайшей встречи, дорожка — тот же .nzs-seg. Своего здесь ровно три вещи,
   которых в дизайн-системе ещё нет:

     .nzp-card  — спокойная карточка «что дальше» (запись, вопрос куратору);
     .nzp-go    — тихое действие внутри такой карточки;
     .nzp-count — счёт пройденных шагов строкой под дорожкой, на герое.

   Своих цветов нет ни одного: только токены system.css, поэтому обе темы
   получаются сами — при смене темы меняются значения, а не эти правила.
   Иконки — SVG в currentColor, эмодзи в интерфейсе не бывает.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Карточка «что дальше» ───────────────────────────────────────────────────
   Рецепт стекла дословно повторяет .msplan (cabinet.css): те же кромка,
   радиус, подложка, тень и размытие. Своя карточка нужна не ради другого вида,
   а ради другого состава — заголовок со значком и действие внизу. Меняется
   материал в .msplan — меняется и здесь.

   Отступ снизу тоже как у .msplan (11px): карточки этого экрана стоят в одной
   стопке с блоками ступени, и разнобой в зазорах был бы виден сразу. */
.nzp-card{display:flex;flex-direction:column;gap:7px;padding:15px 16px;margin-bottom:11px;
  border:1px solid var(--glass-line);border-radius:var(--r-l);background:var(--pane);
  box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
/* Текст карточки — это абзац, а не подпись: в системе для тела положен --ink2.
   Прямой потомок, чтобы правило не доставало до текста внутри кнопки. */
.nzp-card > span{font-size:13px;color:var(--ink2);line-height:1.55}

/* Заголовок со значком. Плитка значка — та же, что у иконки материала в
   карточке занятия (.les .ic): один размер и один материал на весь кабинет. */
.nzp-top{display:flex;align-items:center;gap:10px}
.nzp-top b{font-family:var(--font-head);font-size:15.5px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink)}
.nzp-i{flex:none;width:34px;height:34px;border-radius:var(--r-s);
  display:grid;place-items:center;color:var(--blue);
  background:var(--fi-bg);border:1px solid var(--fi-line)}
.nzp-i svg{width:18px;height:18px}

/* ── Действие карточки ───────────────────────────────────────────────────────
   Тихая кнопка, а не акцент: единственный акцент экрана уже занят кнопкой в
   герое («Доделать шаги»). Рецепт — тот же, что у .ask a и .more в
   cabinet.css. Кнопка и ссылка выглядят одинаково: разница между ними в том,
   куда ведут, а не в том, как выглядят.

   44px по высоте — нижняя граница попадания пальцем; на 375px обе подписи
   («Смотреть запись», «Написать куратору») умещаются в строку. */
.nzp-go{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  align-self:flex-start;max-width:100%;min-height:44px;margin-top:4px;padding:0 var(--s5);
  border-radius:var(--r-m);border:1px solid var(--btn-line);
  color:var(--btn-ink);background:var(--btn-bg);box-shadow:var(--inset-1);
  font:inherit;font-size:14px;font-weight:650;text-align:center;text-decoration:none;
  cursor:pointer;transition:transform var(--dur) var(--ease)}
.nzp-go:hover{transform:translateY(-1px)}
.nzp-go:active{transform:translateY(1px)}

/* ── Счёт шагов под дорожкой ─────────────────────────────────────────────────
   Дорожка .nzs-seg помечена aria-hidden, значит число обязано быть словами:
   иначе «сколько осталось» читается только глазами. Стоит на герое, поэтому
   перо героя (--hero-sub), а не общий --taupe. Микро-метка того же набора,
   что .when сверху: моно, капс, разрядка. */
.nzp-count{margin-top:7px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--hero-sub)}

/* Заметка под кнопкой следующей ступени: ответ на действие, а не украшение. */
.nzp-note{display:block;font-size:11.5px;color:var(--taupe);line-height:1.45;margin-top:6px}
.nzp-note:empty{display:none}

/* ── Карточка продолжения курса ──────────────────────────────────────────────
   Продажа следующей ступени. Единственное место экрана, где карточке МОЖНО
   выделяться: остальные говорят про начатое, эта — про решение. Материал тот
   же, что у .nzp-card, но кромка и подложка взяты синие (--open-line /
   --blue-soft поверх стекла), а действие внутри акцентное — рецепт кнопки
   дословно повторяет .upbtn2 из cabinet.css.

   Плотный герой при этом остаётся один: тот, что вверху. Здесь не тёмная
   плита, а то же стекло с синим оттенком — второй «главный» объект экрана
   спорил бы с первым, а карточке хватает акцента на кнопке и цене. */
.nzp-sell{display:flex;flex-direction:column;margin-bottom:11px;padding:17px 16px 16px;
  border:1px solid var(--open-line);border-radius:var(--r-l);background:var(--open-bg);
  box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}

/* Кик-строка — тем же шрифтом и разрядкой, что .ukick на экране урока. */
.nzp-kick{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue)}
.nzp-name{font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:-.02em;
  line-height:1.22;color:var(--ink);margin-top:7px}
.nzp-sub{font-size:13.5px;color:var(--ink2);line-height:1.5;margin-top:6px}

/* Что внутри: галка + строка. Список без маркеров — маркер здесь и есть значок. */
.nzp-list{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.nzp-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink2);line-height:1.45}
.nzp-list svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--blue)}

/* Ценник. Крупно и отдельной строкой над кнопкой: цена — это часть решения,
   а не подпись мелким шрифтом. Линия сверху отделяет её от списка. */
.nzp-price{display:flex;align-items:baseline;gap:9px;margin-top:15px;padding-top:13px;
  border-top:1px solid var(--glass-line)}
.nzp-price b{font-family:var(--font-head);font-size:25px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.nzp-price i{font-style:normal;font-size:12.5px;color:var(--taupe)}

/* Главное действие карточки — тот же рецепт, что у .upbtn2. */
.nzp-buy{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;
  min-height:48px;padding:0 var(--s5);border:0;border-radius:var(--r-m);cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:650;color:var(--accent-ink);
  background:var(--accent-bg);
  box-shadow:0 16px 34px -18px var(--accent-glow),inset 0 1px var(--accent-sheen);
  transition:transform var(--dur) var(--ease)}
.nzp-buy:hover{transform:translateY(-1px)}
.nzp-buy:active{transform:translateY(1px)}
/* Тихая кнопка под акцентной — во всю ширину, чтобы пара читалась столбиком. */
.nzp-sell .nzp-go{align-self:stretch;margin-top:9px}

/* ── Крестик на карточке шагов ───────────────────────────────────────────────
   Напоминание про недоделанные шаги можно закрыть: не всякий возвращается к
   ним, а карточка в полэкрана каждый день — это упрёк, а не помощь. Кнопка
   тихая (цвет подписи героя) и становится заметнее под пальцем.

   Позиция абсолютная, поэтому карточке нужен свой контекст — .nzp-hero. Кик и
   заголовок ужимаем справа, чтобы длинная строка не заезжала под крестик. */
.nzp-hero{position:relative}
.nzp-hero .when,.nzp-hero .tt{padding-right:32px}
.nzp-x{position:absolute;top:6px;right:6px;width:40px;height:40px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:none;color:var(--hero-sub);cursor:pointer;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.nzp-x svg{width:17px;height:17px}
.nzp-x:hover{color:var(--hero-ink);background:var(--hero-hair)}
.nzp-x:active{transform:scale(.94)}