/* chart — экран «Моя карта»: натальная карта человека.
   Только токены из tokens.css, все свои классы с префиксом s-chart-. */

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

.s-chart-back{margin:0 0 var(--space-5);padding:0 var(--space-4) 0 var(--space-2);gap:var(--space-2)}
.s-chart-back svg{width:18px;height:18px}

/* ——— момент рождения ——— */

.s-chart-moment__line{
  font-family:var(--font-display);font-size:var(--t-display-m-size);
  line-height:var(--t-display-m-lh);font-weight:var(--t-display-m-weight);
  letter-spacing:var(--t-display-m-tracking);margin:0;
}
.s-chart-moment__place{
  margin:var(--space-4) 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-chart-moment__warn{
  margin:var(--space-5) 0 0;padding-top:var(--space-5);border-top:1px solid var(--c-border);
  color:var(--c-text-2);font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-chart-moment__edit{margin:var(--space-5) 0 0;padding:0;justify-content:flex-start}

/* ——— Асцендент: единственная точка, которую показываем крупнее планет ——— */

.s-chart-asc{border-color:var(--c-accent-quiet);box-shadow:var(--shadow-lift)}
.s-chart-asc__head{display:flex;align-items:center;gap:var(--space-6)}
.s-chart-asc__glyph{
  flex:none;width:62px;height:62px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-gold-soft);color:var(--c-on-gold);
  font-size:32px;line-height:1;box-shadow:var(--shadow-gold);
}
.s-chart-asc__id{min-width:0}
.s-chart-asc__id .a-card__over{margin-bottom:var(--space-2)}
.s-chart-asc__title{
  font-family:var(--font-display);font-size:var(--t-display-m-size);
  line-height:var(--t-display-m-lh);font-weight:var(--t-display-m-weight);
  letter-spacing:var(--t-display-m-tracking);margin:0;
}
.s-chart-asc__text{
  margin:var(--space-6) 0 0;color:var(--c-text-2);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}

/* ——— неполная карта: нет времени или города ——— */

.s-chart-gap{border-color:var(--c-border-2);background:var(--c-surface-2)}
.s-chart-gap__title{
  font-family:var(--font-display);font-size:var(--t-title-size);line-height:var(--t-title-lh);
  font-weight:var(--t-title-weight);letter-spacing:var(--t-title-tracking);margin:0;
}
.s-chart-gap__p{
  margin:var(--space-5) 0 0;color:var(--c-text-2);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-chart-gap__btn{margin-top:var(--space-6);width:100%}

/* ——— списки планет ——— */

/* Заголовки разделов живут внутри .stack: вертикальные отступы задаёт gap,
   собственные поля заголовка тут только раздваивают ритм. */
.s-chart-content .section-title{margin:var(--space-4) 0 0}

.s-chart-hint{
  margin:0;color:var(--c-text-3);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-chart-list{
  list-style:none;margin:0;padding:0;
  background:var(--c-glass);border:1px solid var(--c-glass-border);
  backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;
}
@supports not (backdrop-filter:blur(1px)){ .s-chart-list{background:var(--c-surface)} }

.s-chart-planet{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  align-items:start;gap:var(--space-5);padding:var(--space-6);
}
.s-chart-planet + .s-chart-planet{border-top:1px solid var(--c-border)}
.s-chart-planet__glyph{
  grid-row:1 / span 1;width:44px;height:44px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--c-accent-quiet);color:var(--c-accent);font-size:22px;line-height:1;
}
.s-chart-planet__body{min-width:0}
.s-chart-planet__name{
  margin:0;display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  font-family:var(--font-display);font-size:var(--t-title-size);line-height:var(--t-title-lh);
  font-weight:var(--t-title-weight);letter-spacing:var(--t-title-tracking);
}
.s-chart-planet__pos{
  margin:var(--space-2) 0 0;display:flex;align-items:baseline;gap:var(--space-3);
  color:var(--c-text);font-size:var(--t-body-l-size);line-height:var(--t-body-l-lh);
  font-variant-numeric:tabular-nums;
}
.s-chart-planet__sign{color:var(--c-accent);font-size:17px;line-height:1}
.s-chart-planet__note{
  margin:var(--space-3) 0 0;color:var(--c-text-3);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-chart-planet__warn{
  margin:var(--space-4) 0 0;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-sm);background:var(--warning-bg);color:var(--warning);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}
.s-chart-planet__house{
  align-self:center;flex:none;white-space:nowrap;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:var(--c-sunken);color:var(--c-text-2);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
  font-weight:var(--t-label-weight);font-variant-numeric:tabular-nums;
}

/* Медленные планеты — тот же порядок, но тише: знак у них общий с ровесниками. */
.s-chart-planet--quiet{padding:var(--space-5) var(--space-6)}
.s-chart-planet--quiet .s-chart-planet__glyph{
  width:32px;height:32px;font-size:17px;background:transparent;color:var(--c-text-3);
}
.s-chart-planet--quiet .s-chart-planet__name{
  font-family:var(--font-text);font-size:var(--t-body-size);font-weight:600;
}
.s-chart-planet--quiet .s-chart-planet__pos{
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);color:var(--c-text-2);
}

/* Значок ретроградности. Сам кружок маленький, но нажимаемая зона расширена
   псевдоэлементом до 44px — иначе в него не попасть пальцем. */
.s-chart-retro{
  position:relative;appearance:none;cursor:pointer;
  width:22px;height:22px;flex:none;padding:0;
  border:1px solid var(--c-accent);border-radius:var(--radius-pill);
  background:transparent;color:var(--c-accent);
  font-family:var(--font-text);font-size:var(--t-caption-size);font-weight:700;line-height:1;
  transition:background var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.s-chart-retro::after{content:"";position:absolute;top:50%;left:50%;
  width:var(--tap-min);height:var(--tap-min);transform:translate(-50%,-50%)}
.s-chart-retro:hover{background:var(--c-accent-quiet)}
.s-chart-retro:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ——— аспекты ——— */

.s-chart-aspects__cap{
  margin:0 0 var(--space-6);color:var(--c-text-2);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-chart-aspects__list{list-style:none;margin:0;padding:0}
.s-chart-aspect{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-5) 0;
}
.s-chart-aspect + .s-chart-aspect{border-top:1px solid var(--c-border)}
.s-chart-aspect:last-child{padding-bottom:0}
.s-chart-aspect__pair{
  margin:0;font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--c-text);
}
/* Глиф аспекта живёт отдельным узлом: он спрятан от чтения вслух, а воздух
   вокруг него раньше держался пробелами внутри строки. */
.s-chart-aspect__glyph{margin:0 var(--space-3);color:var(--c-text-3)}
.s-chart-aspect__note{
  margin:0;flex:none;text-align:right;color:var(--c-text-3);
  font-size:var(--t-caption-size);line-height:var(--t-caption-lh);
}

/* ——— пустые состояния и загрузка ——— */

.s-chart-empty{text-align:center;padding:var(--space-9) var(--space-6)}
.s-chart-empty__icon{
  display:inline-flex;width:56px;height:56px;border-radius:var(--radius-pill);
  align-items:center;justify-content:center;
  background:var(--c-accent-quiet);color:var(--c-accent);
}
.s-chart-empty__icon svg{width:30px;height:30px}
.s-chart-empty__title{
  margin:var(--space-6) 0 0;font-family:var(--font-display);
  font-size:var(--t-title-size);line-height:var(--t-title-lh);
  font-weight:var(--t-title-weight);letter-spacing:var(--t-title-tracking);
}
.s-chart-empty__text{
  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-chart-empty__btn{margin-top:var(--space-7);width:100%}
.s-chart-empty__ghost{margin-top:var(--space-3);width:100%}

.s-chart-skel__gap{margin-top:var(--space-5)}

/* ——— общие хвосты ——— */

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

/* ——— шторка про ретроградность ——— */

.s-chart-sheet__title{
  margin:0;font-family:var(--font-display);font-size:var(--t-title-size);
  line-height:var(--t-title-lh);font-weight:var(--t-title-weight);
  letter-spacing:var(--t-title-tracking);
}
.s-chart-sheet__p{
  margin:var(--space-5) 0 0;color:var(--c-text-2);
  font-size:var(--t-body-s-size);line-height:var(--t-body-s-lh);
}
.s-chart-sheet__close{margin-top:var(--space-7);width:100%}

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