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

.s-day-screen{padding-bottom:var(--space-10)}
.s-day-content{margin-top:var(--space-6)}

/* ——— переключатель дат ——— */
.s-day-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);
  padding:var(--space-2);border-radius:var(--radius-pill);
  background:var(--c-sunken);border:1px solid var(--c-border);
}
.s-day-seg__btn{
  appearance:none;border:0;cursor:pointer;background:transparent;color:var(--c-text-2);
  font-family:var(--font-text);font-size:var(--t-body-s-size);font-weight:600;
  letter-spacing:var(--t-body-tracking);
  min-height:var(--tap-min);padding:0 var(--space-4);border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-base) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease),
             box-shadow var(--motion-base) var(--motion-ease);
}
.s-day-seg__btn:focus-visible{outline:none;box-shadow:var(--shadow-glow)}
.s-day-seg__btn--on{
  background:var(--gradient-gold);color:var(--c-on-gold);box-shadow:var(--shadow-gold);
}

/* Дата, пришедшая маршрутом: она стоит на месте переключателя, поэтому и
   выглядит так же — плашкой во всю ширину, только без нажатия. */
.s-day-date{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--tap-min);padding:0 var(--space-5);
  border-radius:var(--radius-pill);
  background:var(--c-sunken);border:1px solid var(--c-border);
  font-family:var(--font-text);font-size:var(--t-body-s-size);font-weight:600;
  letter-spacing:var(--t-body-tracking);color:var(--c-text);text-align:center;
}

/* ——— оценка дня ———
   Ради этих чисел человек и открывает экран утром, поэтому они крупные,
   моноширинные по цифрам и стоят выше всего остального. */
.s-day-score__row{
  display:flex;align-items:baseline;gap:var(--space-4);margin:0;
}
.s-day-score__num{
  font-family:var(--font-display);font-size:60px;line-height:1;font-weight:600;
  letter-spacing:var(--t-display-l-tracking);color:var(--c-accent);
  font-variant-numeric:tabular-nums;
}
.s-day-score__of{
  color:var(--c-text-3);font-size:var(--t-title-size);line-height:var(--t-title-lh);
  font-weight:500;
}
.s-day-score__band{
  margin:var(--space-4) 0 0;color:var(--c-text-2);
  font-size:var(--t-body-size);line-height:var(--t-body-lh);
}
.s-day-score__band:first-letter{text-transform:uppercase}
.s-day-score__scale{
  margin:var(--space-6) 0 0;color:var(--c-text-3);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}
.s-day-score__skel{margin-top:var(--space-5)}

/* ——— четыре сферы ——— */
.s-day-spheres{
  list-style:none;margin:var(--space-7) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);
}
.s-day-sphere{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"emoji title score" "meter meter meter";
  align-items:center;gap:var(--space-4) var(--space-4);
  padding:var(--space-5);border-radius:var(--radius-md);
  background:var(--c-surface-2);border:1px solid var(--c-border);
}
.s-day-sphere__emoji{grid-area:emoji;font-size:15px;line-height:1}
.s-day-sphere__title{
  grid-area:title;min-width:0;color:var(--c-text-2);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  letter-spacing:var(--t-caption-tracking);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.s-day-sphere__score{
  grid-area:score;font-family:var(--font-display);font-size:24px;line-height:1;
  font-weight:600;color:var(--c-text);font-variant-numeric:tabular-nums;
}
.s-day-sphere__meter{grid-area:meter}
.s-day-sphere--skel{display:block}

/* ——— тема дня и советы ——— */
.s-day-theme__title{display:flex;align-items:center;gap:var(--space-4)}
.s-day-theme__emoji{font-size:20px;line-height:1}
.s-day-theme__note{
  margin:var(--space-4) 0 0;color:var(--c-text-2);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-day-theme__head{
  margin:var(--space-7) 0 var(--space-5);
  font-family:var(--font-text);color:var(--c-text);
  font-size:var(--t-label-size);line-height:var(--t-label-lh);
  font-weight:var(--t-label-weight);letter-spacing:var(--t-label-tracking);
  text-transform:uppercase;
}

/* ——— списки «хорошо / лучше не» ——— */
.s-day-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-5)}
.s-day-list__item{display:flex;align-items:flex-start;gap:var(--space-5)}
.s-day-list__mark{
  flex:none;width:26px;height:26px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
}
.s-day-list__mark svg{width:16px;height:16px}
.s-day-list__mark--good{background:var(--success-bg);color:var(--success)}
.s-day-list__mark--bad{background:var(--warning-bg);color:var(--warning)}
.s-day-list__text{
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);color:var(--c-text-2);
  min-width:0;
}
.s-day-list__text:first-letter{text-transform:uppercase}

/* ——— почему день такой ———
   Первая строка — человеческая, вторая мелкая — тот же транзит на языке
   астрологии: кому интересно, тот прочитает, остальным она не мешает. */
.s-day-why__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-6)}
.s-day-why__item{display:flex;align-items:flex-start;gap:var(--space-5)}
.s-day-why__tone{
  flex:none;width:8px;height:8px;margin-top:7px;border-radius:var(--radius-pill);
}
.s-day-why__tone--up{background:var(--success)}
.s-day-why__tone--down{background:var(--warning)}
.s-day-why__body{min-width:0}
.s-day-why__text{
  margin:0;font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--c-text);
  text-wrap:pretty;
}
.s-day-why__detail{
  margin:var(--space-2) 0 0;color:var(--c-text-3);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  overflow-wrap:anywhere;
}

/* ——— пояснения про личный расчёт ——— */
.s-day-note .a-card__text + .a-card__text{margin-top:var(--space-4)}
.s-day-note__btn{margin-top:var(--space-6);width:100%}
.s-day-note__btn svg{width:18px;height:18px}

/* ——— заголовок лунной части ——— */
.s-day-lunar{margin-top:var(--space-8);color:var(--c-text-2)}

/* ——— карточка лунных суток ——— */
.s-day-hero{position:relative;overflow:hidden}
.s-day-hero__top{display:flex;align-items:center;gap:var(--space-6)}
.s-day-orb{
  width:84px;height:84px;flex:none;border-radius:var(--radius-pill);
  object-fit:cover;box-shadow:var(--shadow-gold);
}
.s-day-hero__head{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.s-day-hero__numrow{display:flex;align-items:center;gap:var(--space-4)}
/* Номер суток меньше общей оценки: главное число на экране теперь одно. */
.s-day-hero__num{
  font-family:var(--font-display);font-size:40px;line-height:1;font-weight:600;
  letter-spacing:var(--t-display-l-tracking);color:var(--c-accent);
  font-variant-numeric:tabular-nums;
}
.s-day-hero__unit{
  max-width:6em;color:var(--c-text-3);
  font-size:var(--t-label-size);line-height:var(--t-label-lh);
  font-weight:var(--t-label-weight);letter-spacing:var(--t-label-tracking);
  text-transform:uppercase;
}
.s-day-hero__phase{align-self:flex-start;max-width:100%}
.s-day-hero__date{
  margin:var(--space-6) 0 0;color:var(--c-text-3);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  letter-spacing:var(--t-caption-tracking);
}
.s-day-hero__date:first-letter{text-transform:uppercase}
.s-day-hero__note{
  margin:var(--space-5) 0 0;padding-top:var(--space-5);border-top:1px solid var(--c-border);
  color:var(--c-text-3);font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}
.s-day-hero__skel{margin-top:var(--space-7)}

/* ——— текст суток от Анастасии ——— */
.s-day-text{margin-bottom:var(--space-5)}
.s-day-text__p{
  margin:0 0 var(--space-5);
  font-size:var(--t-body-size);
  line-height:1.62;                 /* её текст длинный, строкам нужен воздух */
  color:var(--c-text);
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.s-day-text__p:last-child{margin-bottom:0}
.s-day-text__empty{
  margin:0;font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);color:var(--c-text-3);
}

/* ——— Луна в знаке ——— */
.s-day-moon{margin-bottom:var(--space-5)}
.s-day-moon__head{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-6)}
.s-day-moon__glyph{
  width:52px;height:52px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius-pill);background:var(--c-accent-quiet);
  font-size:26px;line-height:1;color:var(--c-accent);
}
.s-day-moon__over{margin:0 0 2px}
.s-day-moon__title{margin:0}
.s-day-moon__p{
  margin:0 0 var(--space-5);
  font-size:var(--t-body-s-size);
  line-height:1.6;
  color:var(--c-text-2);
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.s-day-moon__p:last-child{margin-bottom:0}

/* ——— строка по знаку ——— */
.s-day-personal__text{
  margin:0;font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--c-text);
}

/* ——— низ экрана ——— */
/* Дисклеймер внизу: один размер и один отступ на всех четырёх экранах. */
.s-day-caution{
  margin:var(--space-4) 0 0;text-align:center;
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}
.s-day-ask{margin-top:var(--space-8);width:100%}
.s-day-ask svg{width:18px;height:18px}

/* ——— мелкие экраны ——— */
@media (max-width:359px){
  .s-day-orb{width:64px;height:64px}
  .s-day-score__num{font-size:48px}
  .s-day-hero__num{font-size:34px}
  .s-day-sphere__score{font-size:20px}
  .s-day-seg__btn{font-size:var(--t-caption-size);padding:0 var(--space-2)}
}

@media (prefers-reduced-motion:reduce){
  .s-day-seg__btn{transition:none}
}

/* ——— разбор дня словами ——— */
.s-day-text__body{display:flex;flex-direction:column;gap:var(--space-3)}
.s-day-text__p{margin:0;color:var(--c-text);line-height:1.6}