/* now — экран «Что со мной сейчас»: крупные процессы и их сроки.
   Только токены, ни одного «сырого» цвета. Все классы с префиксом s-now-.

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

.s-now-screen{padding-bottom:var(--space-10)}
/* Кнопка «Назад» — те же размеры, что на «Моей карте». */
.s-now-back{margin:0 0 var(--space-5);padding:0 var(--space-4) 0 var(--space-2);gap:var(--space-2)}
.s-now-back svg{width:18px;height:18px}
.s-now-content{margin-top:var(--space-6)}
.s-now-list{gap:var(--space-6)}

/* ——— карточка процесса ——— */
.s-now-card{
  position:relative;overflow:hidden;
  padding-left:calc(var(--space-6) + var(--space-2));
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);
}
/* Полоска слева — единственный «цветной» признак тона. */
.s-now-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c-border-2);
}
.s-now-card--soft::before{background:var(--gradient-gold)}
.s-now-card--hard::before{background:var(--c-border-2)}

.s-now-card__head{display:flex;align-items:flex-start;gap:var(--space-5);width:100%}
.s-now-card__glyph{
  flex:none;width:44px;height:44px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--c-accent);
  background:var(--c-accent-quiet);
}
.s-now-card--hard .s-now-card__glyph{background:var(--c-surface-2);color:var(--c-text-2)}
.s-now-card__glyphskel{width:44px;height:44px;flex:none;border-radius:var(--radius-pill)}
.s-now-card__headtext{min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.s-now-card__title{font-size:var(--t-title-size);line-height:var(--t-title-lh);
  font-weight:600;letter-spacing:var(--t-title-tracking);color:var(--c-text)}
.s-now-card__term{
  margin:0;font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  letter-spacing:var(--t-caption-tracking);color:var(--c-text-3);
}

.s-now-tone{background:var(--c-accent-quiet);color:var(--c-accent);
  font-size:var(--t-caption-size);font-weight:var(--t-label-weight)}
.s-now-tone--hard{background:var(--c-surface-2);color:var(--c-text-2);
  box-shadow:inset 0 0 0 1px var(--c-border)}

/* Абзацы растягиваем явно: карточка — колоночный flex с align-items:flex-start,
   иначе текст сжимается до содержимого. */
.s-now-card__body,.s-now-card__point,.s-now-card__note{width:100%}
.s-now-card__body{margin:0;font-size:var(--t-body-size);line-height:var(--t-body-lh);
  color:var(--c-text-2)}
.s-now-card__point{margin:0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  color:var(--c-text-3)}
.s-now-card__note{margin:0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  color:var(--c-text-2)}
.s-now-card__barskel{width:100%;padding:var(--space-2) 0}

/* ——— полоса времени: где человек внутри процесса ——— */
.s-now-track{
  position:relative;width:100%;height:8px;margin:var(--space-2) 0 var(--space-1);
  border-radius:var(--radius-pill);background:var(--c-sunken);
  box-shadow:inset 0 0 0 1px var(--c-border);
}
.s-now-track__done{
  position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius-pill);
  background:var(--gradient-gold-soft);
  transition:width var(--motion-slow) var(--motion-ease-out);
}
.s-now-card--hard .s-now-track__done{background:var(--c-border-2)}
/* Пик — засечка, а не тревожная метка. */
.s-now-track__peak{
  position:absolute;top:-3px;bottom:-3px;width:2px;transform:translateX(-1px);
  border-radius:var(--radius-pill);background:var(--c-accent);opacity:.55;
}
/* Сегодняшний день — точка, ради неё вся полоса и рисуется. */
.s-now-track__now{
  position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:var(--radius-pill);background:var(--c-accent);
  box-shadow:0 0 0 3px var(--c-bg),var(--shadow-gold);
  transition:left var(--motion-slow) var(--motion-ease-out);
}
.s-now-track__now--hard{background:var(--c-text-3);box-shadow:0 0 0 3px var(--c-bg)}

/* ——— три даты ——— */
.s-now-dates{
  width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
}
.s-now-date{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.s-now-date__label{
  font-size:var(--t-overline-size);line-height:var(--t-overline-lh);
  font-weight:var(--t-overline-weight);letter-spacing:var(--t-overline-tracking);
  text-transform:uppercase;color:var(--c-text-3);
}
.s-now-date__value{
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  font-weight:600;color:var(--c-text);font-variant-numeric:tabular-nums;
}
.s-now-card--soft .s-now-date__value{color:var(--c-text)}

/* ——— ретроградные планеты ——— */
.s-now-retro{margin-top:var(--space-6)}
.s-now-retro__lead{margin:0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  color:var(--c-text-2)}
.s-now-retro__list{
  list-style:none;margin:var(--space-6) 0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-5);
}
.s-now-retro__item{display:flex;align-items:flex-start;gap:var(--space-5)}
.s-now-retro__glyph{
  flex:none;width:36px;height:36px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;color:var(--c-accent);background:var(--c-accent-quiet);
}
.s-now-retro__text{min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.s-now-retro__name{margin:0;font-size:var(--t-body-size);line-height:var(--t-body-lh);
  font-weight:600;color:var(--c-text)}
.s-now-retro__note{margin:0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  color:var(--c-text-2)}
.s-now-retro__hint{margin:0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
  color:var(--c-text-3)}

/* ——— пустые состояния и низ экрана ——— */
.s-now-empty,.s-now-calm{display:flex;flex-direction:column;align-items:flex-start}
.s-now-empty__btn{margin-top:var(--space-6)}
.s-now-ask{
  width:100%;margin-top:var(--space-8);min-height:var(--tap-comfort);
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
}
/* Дисклеймер внизу: один размер и один отступ на всех четырёх экранах. */
.s-now-caution{
  margin:var(--space-4) 0 0;text-align:center;
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}

@media (max-width:359px){
  .s-now-dates{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .s-now-track__done,.s-now-track__now{transition:none}
}