/* ═══════════════════════════════════════════════════════════════════════
   ВКЛАДКА «СЕЙЧАС» · СОСТОЯНИЕ «ИДЁТ» — рабочий экран занятия

   Пара к /cabinet/js/now-idet.js. Подключать ПОСЛЕ /styles-tab-сейчас.css:
   здесь только то, чего в дизайн-системе и в слое вкладки ещё нет.

   Порядок слоёв: /system.css (токены обеих тем) → /cabinet.css (компоненты)
   → /styles-кабинет.css (экран) → /styles-tab-*.css (вкладки) → этот файл.

   Своих цветов здесь нет и быть не может — только токены системы, поэтому
   обе темы получаются сами. Единственное «своё» пятно — точка «идёт»: она
   красится --live, тем же красным, что живой индикатор записи.

   ЧТО ПЕРЕИСПОЛЬЗОВАНО, А НЕ НАПИСАНО ЗАНОВО:
   · .next.meet  — тёмный герой ближайшей встречи (cabinet.css). Кнопка зума
     это его же .next a, размеры и цвета оттуда;
   · .nzs-seg    — дорожка шагов на герое (styles-tab-сейчас.css);
   · .copybtn    — кнопка копирования вместе с состоянием .ok; её подпись и
     значок меняет copyText() из core.js;
   · .msback     — тихая пунктирная кнопка во всю ширину (cabinet.css); на ней
     стоит переключатель «остальное».

   Правила системы, которые тут легко нарушить:
   · один плотный объект на экране — герой. Карточка шага стеклянная, плашка
     промпта внутри неё берёт только заливку --glass-3, без своего blur:
     стекло в стекле читается как грязь;
   · эмодзи в интерфейсе нет — стрелки, галочка и значок зума приезжают из
     now-idet.js линейными SVG в currentColor;
   · обводки на полях нет и полей здесь нет вовсе; фокус на кнопках —
     общий :focus-visible из system.css, его не трогаем.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Рельса этапов на время занятия уезжает ──────────────────────────────
   Она висит НАД карточкой (index.html: #rail стоит до #p-prep) и на рабочем
   экране первой перехватывает взгляд, хотя её настоящий дом — вкладка
   «Записи» (туда её переносит tab-recs.js при первом открытии).

   Почему правилом, а не через NOW.блоки: спрятанное движком возвращается при
   смене фазы, а рельса переезжает на ЧУЖУЮ вкладку в произвольный момент — и
   унесла бы наш hidden с собой. CSS-правило привязано к нашей вкладке и к
   нашему же узлу: не стало героя — рельса на месте, ушли на «Записи» —
   правило не действует вовсе. */
.wrap[data-nz="now"]:has(#nzs-now .ns-hero) #rail{display:none}

/* ── Герой: где я во времени и как подключиться ──────────────────────── */

/* Точка «идёт» встаёт в строку с подписью, поэтому .when становится флексом.
   Текст лежит в своём span — так он переносится по словам, а точка остаётся
   на месте и не растягивается. */
.ns-hero .when{display:flex;align-items:center;gap:7px}
.ns-hero .when>span{min-width:0}
.ns-live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live);
  animation:ns-pulse 2.6s var(--ease) infinite}
/* Одна тихая пульсация на весь экран: она означает «прямо сейчас» и больше
   ничего. Кольцо, а не мигание цветом — мигающая точка на рабочем экране
   отвлекает сильнее, чем сообщает. */
@keyframes ns-pulse{
  0%{box-shadow:0 0 0 0 var(--live-ring)}
  70%{box-shadow:0 0 0 7px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
@media (prefers-reduced-motion:reduce){.ns-live{animation:none}}

/* Кнопка зума — это .next a: размеры, радиус и цвета уже там. Здесь только
   значок, которого у обычной ссылки героя не было. */
.ns-hero .ns-zoom svg{flex:none;width:17px;height:17px}

/* Дорожка шагов у .nzs-seg знает два состояния: пройден и «вы здесь», причём
   «вы здесь» объявлено последним и перебивает пройденный. На листаемом экране
   это даёт вранье: открыл последний, уже пройденный шаг — и полоса выглядит
   недоделанной. Третий случай «пройден И открыт» красим в полную силу. */
.ns-hero .nzs-seg i.pass.on{background:var(--hero-ink)}

/* ── Карточка текущего шага ──────────────────────────────────────────── */

.ns-card{padding:16px 17px 17px;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%)}
/* Номер шага слева, дорога к полному плану справа: две подписи одной строкой,
   выровненные по базовой линии, а не по коробкам — иначе мелкий капслок
   «висит» относительно ссылки. */
.ns-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ns-kick{font-family:var(--mono);font-size:10.5px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--taupe)}
.ns-all{flex:none;font-size:12.5px;font-weight:620;color:var(--blue);text-decoration:none;
  border-bottom:1.5px solid var(--open-line)}
.ns-all:active{background:var(--blue-soft)}
/* Главное слово экрана. Переносится, а не режется многоточием: обрезанное
   название шага посреди занятия не отличить от соседнего. */
.ns-name{font-family:var(--font-head);font-size:19px;font-weight:680;letter-spacing:-.02em;
  line-height:1.22;margin:8px 0 0;overflow-wrap:anywhere}
/* «Что делаем» набрано строками, а не абзацем: без pre-line браузер схлопнул
   бы инструкцию в простыню. */
.ns-about{font-size:14px;line-height:1.62;color:var(--ink2);margin:11px 0 0;
  white-space:pre-line;overflow-wrap:anywhere}

/* ── Промпт ──────────────────────────────────────────────────────────────
   То, за чем на этот экран и приходят. Моноширинный, на отдельной плашке,
   кнопка копирования в шапке блока — до неё не надо докручивать длинный
   промпт. Свой backdrop-filter не ставим: плашка лежит на стекле карточки. */
.ns-pr{margin-top:var(--s4);border:1px solid var(--glass-line);border-radius:var(--r-m);
  background:var(--glass-3);overflow:hidden}
.ns-pr-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 7px 7px 13px;border-bottom:1px solid var(--glass-line)}
/* ⚠️ Только прямой потомок: рядом стоит кнопка, и её подпись тоже <span>.
   Без > она набиралась бы мелким моноширинным капслоком заодно с меткой. */
.ns-pr-h>span{font-family:var(--mono);font-size:10px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe)}
/* У .copybtn свой верхний отступ — он рассчитан на кнопку ПОД блоком кода
   в шторке шага. Здесь она стоит в строке заголовка, отступ лишний. */
.ns-pr .copybtn{margin-top:0}
.ns-pr pre{margin:0;padding:12px 13px;font-family:var(--mono);font-size:12.5px;line-height:1.66;
  color:var(--ink);white-space:pre-wrap;word-break:break-word}

/* Длинный промпт свёрнут. Не скроллом внутри скролла — в вебвью телеграма
   вложенная прокрутка ловит палец и человек не может пролистать страницу;
   просто обрезаем высоту, а внизу честная кнопка. Хвост уводим в прозрачность
   маской: ровно обрубленная строка читается как поломка вёрстки. Маску не
   поняли — текст обрежется прямоугольником, кнопка всё объяснит. */
.ns-cut pre{max-height:186px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,0));
  mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,0))}
.ns-full{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  min-height:42px;padding:0 var(--s3);cursor:pointer;font:inherit;font-size:12.5px;font-weight:620;
  border:0;border-top:1px solid var(--glass-line);background:transparent;color:var(--btn-ink);
  transition:background-color var(--dur) var(--ease)}
.ns-full:hover{background:var(--hover-bg)}
.ns-full svg{flex:none;width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.ns-pr:not(.ns-cut) .ns-full svg{transform:rotate(180deg)}

/* ── Отметка и переходы ──────────────────────────────────────────────────
   Главное действие шага — «пройден»: оно же переносит на следующий шаг.
   Поэтому оно стеклянной кнопкой во всю ширину, а «Назад» и «Дальше» под
   ним прозрачные: это перелистывание, а не работа. */

.ns-done{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  min-height:48px;margin-top:var(--s4);padding:0 var(--s5);border-radius:var(--r-m);cursor:pointer;
  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;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform .1s var(--ease)}
/* Значок приезжает из ядра (CHECK) — без собственных атрибутов обводки,
   их задаёт контейнер. Здесь как в .copybtn, только крупнее. */
.ns-done svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.ns-done:hover{transform:translateY(-1px)}
.ns-done:active{transform:translateY(1px)}
/* Пройденный шаг: уже не призыв, а отметка. Нажатие всё ещё снимает её —
   поэтому курсор остаётся указателем, а не превращается в стрелку. */
.ns-done.on{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent;box-shadow:none}
.ns-done.on:hover,.ns-done.on:active{transform:none}
/* Пока ответ сервера в пути, повторное нажатие ничего не улучшит. */
.ns-done:disabled{cursor:default;transform:none;opacity:.7}

.ns-nav{display:flex;gap:var(--s2);margin-top:var(--s3)}
.ns-nav button,.ns-again{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 var(--s3);border-radius:var(--r-m);cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink);text-decoration:none;
  font:inherit;font-size:13.5px;font-weight:620;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform .1s var(--ease)}
.ns-nav button svg{flex:none;width:16px;height:16px}
.ns-nav button:hover,.ns-again:hover{background:var(--hover-bg);border-color:var(--hair)}
.ns-nav button:active,.ns-again:active{transform:translateY(1px)}
/* Занятую кнопку глушим фоном и цветом подписи, а не прозрачностью: она
   съедает и плашку, и слова разом. */
.ns-nav button:disabled,.ns-nav button:disabled:hover{cursor:default;transform:none;
  background:transparent;border-color:var(--line);color:var(--muted)}

/* ── Шагов нет: ждём ведущего, не пришли, не завели ──────────────────────
   Тихая плашка пунктиром — «здесь пока ничего», а не сломанная карточка. */
.ns-wait{padding:16px 17px;border:1px dashed var(--soon-line);border-radius:var(--r-l);
  background:var(--soon-bg)}
.ns-wait b{display:block;font-family:var(--font-head);font-size:15.5px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:5px}
.ns-wait span{display:block;font-size:13px;line-height:1.55;color:var(--ink2)}
.ns-again-row{display:flex;gap:var(--s2);margin-top:var(--s3)}

/* ── Всё остальное — одной строкой ───────────────────────────────────────
   Подготовка, покупки и уроки никуда не делись: строка внизу разворачивает
   РОДНЫЕ блоки кабинета, которые лежат под нашей карточкой. Своей копии у
   них здесь нет и быть не должно. */
.ns-more{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  margin-top:var(--s4)}
.ns-more svg{flex:none;width:15px;height:15px;
  transition:transform var(--dur) var(--ease)}
.ns-more.on svg{transform:rotate(180deg)}

/* ── Веб ─────────────────────────────────────────────────────────────────
   От 900px .wrap раздаётся до 1320px. Колонок здесь не собираем — экран
   про одно действие, и вторая колонка только уводила бы взгляд. Просто не
   даём строке промпта разъехаться на полтора метра. */
@media (min-width:900px){
  .ns-hero,.ns-card,.ns-wait,.ns-more{max-width:760px}
  .ns-name{font-size:23px}
  .ns-about{max-width:64ch}
  /* Кнопки перестают быть во всю ширину: на телефоне это была вынужденная
     мера (палец), на экране растянутая подпись читается как ошибка вёрстки. */
  .ns-done{width:fit-content;min-width:260px}
  .ns-nav button,.ns-again{flex:0 0 auto;min-width:150px}
}