/* Раздел «Гороскоп на день»: фигуры созвездий, карточки знаков, полосы.

   Как и лунный виджет, файл собран на токенах, которые есть и в тёмной теме
   сайта, и в светлой теме кабинета, и в палитре листа справочника:
   --panel, --panel2, --brd, --brd2, --head, --txt, --muted, --gold, --aura.
   Переназначение на границе листа — в конце файла.

   Площадка с созвездием всегда тёмная, в любой теме. Причина та же, что у
   Луны: звёздам нужна ночь, а белые точки на белой карточке не видны. */

/* ---------- фигура созвездия ---------- */

.zf { width: 100%; height: 100%; display: block; overflow: visible; }
.zf-lines line {
  stroke: rgba(186,204,255,.34);
  stroke-width: .7;
  stroke-linecap: round;
}
.zf-core { fill: #FFF8EA; }
.zf-glow { opacity: .75; }

/* Небо под созвездием. Отдельным элементом, а не фоном svg: так его можно
   скруглить и положить поверх градиент, не трогая сам рисунок. */
.zf-sky {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 72% 14%, rgba(110,139,255,.22), transparent 60%),
    radial-gradient(100% 110% at 16% 88%, rgba(227,192,138,.13), transparent 62%),
    linear-gradient(165deg, #0A0E1C 0%, #05070F 60%, #04050B 100%);
}
.zf-sky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 88% 34%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 42% 86%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 70% 68%, rgba(255,255,255,.3), transparent);
}
.zf-sky .zf { position: relative; padding: 10px; }

/* ---------- шапка раздела: дата и переключение ---------- */

.gor-daybar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 1.4rem;
}
.gor-daybar .gor-date {
  font-size: 15px; font-weight: 650; color: var(--head);
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.gor-daybar .gor-date span {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- карточки знаков на хабе ---------- */

.gor-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}
a.gor-card {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px; padding: 14px;
  border: 1px solid var(--brd); border-radius: 18px;
  background: var(--panel);
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s;
}
a.gor-card:hover {
  border-color: var(--brd2); transform: translateY(-2px);
}
.gor-card .zf-sky { width: 92px; height: 92px; }

.gor-card-head { min-width: 0; }
.gor-card-name {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 17px; font-weight: 700; color: var(--head); line-height: 1.2;
}
/* Символы знаков (♈…♓) входят в эмодзи-набор, и часть систем рисует их
   цветным шрифтом — лиловыми плашками, не слушающимися color. В данных к
   символу дописан селектор U+FE0E, а это правило — вторая линия обороны
   для движков, которые селектор игнорируют. */
.gor-card-name i, .gor-switch i, .side-list a {
  font-variant-emoji: text;
}
.gor-card-name i {
  font-style: normal; font-size: 19px; color: var(--gold); line-height: 1;
}
.gor-card-dates {
  font-size: 11.5px; color: var(--muted); margin: 2px 0 9px;
}

/* Компактные полосы: на карточке важна не точность чтения, а то, что
   разница между знаками видна с одного взгляда. */
.gor-mini { display: grid; gap: 5px; }
.gor-mini-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 30px;
  align-items: center; gap: 7px;
}
.gor-mini-row b {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gor-mini-row em {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--head);
  font-variant-numeric: tabular-nums; text-align: right;
}

.gor-bar {
  position: relative;
  height: 5px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--brd);
  overflow: visible;      /* свечению нужно выходить за края дорожки */
}
/* Заполненная часть светится: у полосы появляется источник света, и она
   читается как показатель, а не как чертёж. Свечение того же цвета, что
   заливка, — иначе оно выглядит ореолом вокруг чужого предмета. */
.gor-bar > i {
  /* position нужен как точка отсчёта для точки на конце: без него она
     считается от всей дорожки и уезжает в её правый край — то есть
     показывает сто процентов при любом значении. */
  position: relative;
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(227,192,138,.5), var(--gold));
  box-shadow: 0 0 10px -1px rgba(227,192,138,.75);
}
/* Кончик полосы ярче остального: глаз цепляется за него и сразу видит,
   где заканчивается значение. */
.gor-bar > i::after {
  content: "";
  position: absolute; top: 50%; right: 0;
  width: 7px; height: 7px; margin: -3.5px -3px 0 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px 1px rgba(227,192,138,.9);
}
/* Цвет полосы по уровню: напряжённый день не должен выглядеть как удачный.
   Это не «плохо» и не «хорошо» — это подсказка, куда сегодня легче. */
.gor-bar.low > i {
  background: linear-gradient(90deg, rgba(168,67,58,.45), #B4564A);
  box-shadow: 0 0 10px -1px rgba(180,86,74,.7);
}
.gor-bar.low > i::after {
  background: #B4564A; box-shadow: 0 0 9px 1px rgba(180,86,74,.85);
}
.gor-bar.mid > i {
  background: linear-gradient(90deg, rgba(154,116,35,.45), #C79A3A);
  box-shadow: 0 0 10px -1px rgba(199,154,58,.7);
}
.gor-bar.mid > i::after {
  background: #C79A3A; box-shadow: 0 0 9px 1px rgba(199,154,58,.85);
}
.gor-bar.high > i {
  background: linear-gradient(90deg, rgba(79,191,168,.45), #4FBFA8);
  box-shadow: 0 0 10px -1px rgba(79,191,168,.7);
}
.gor-bar.high > i::after {
  background: #4FBFA8; box-shadow: 0 0 9px 1px rgba(79,191,168,.85);
}

/* Начало гороскопа на карточке. Занимает обе колонки: в правой, рядом с
   фигурой знака, на него остаётся 160 px — это две трети слова в строке. */
.gor-card-text {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--brd);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.gor-card-more {
  display: block; margin-top: 7px;
  font-size: 12px; font-weight: 600; color: var(--gold);
  opacity: .82; transition: opacity .2s;
}
a.gor-card:hover .gor-card-more { opacity: 1; }

/* ---------- страница знака ---------- */

.gor-hero {
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px; align-items: start;
  margin: 0 0 1.6rem;
}
.gor-hero .zf-sky { width: 168px; height: 168px; }
.gor-hero-meta { min-width: 0; }
.gor-hero-meta h1 { margin: 0 0 .3rem; }
.gor-props {
  display: flex; flex-wrap: wrap; gap: 6px; margin: .6rem 0 0;
}
.gor-prop {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--brd2); background: var(--panel2); color: var(--txt);
}

/* Крупные полосы на странице знака: здесь их читают, а не сравнивают. */
.gor-bars { display: grid; gap: 12px; margin: 0 0 1.4rem; }
.gor-bars .gor-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
}
.gor-bars .gor-row b { font-size: 14px; font-weight: 650; color: var(--head); }
.gor-bars .gor-row b span {
  display: block; font-size: 11.5px; font-weight: 400; color: var(--muted);
}
.gor-bars .gor-row em {
  font-style: normal; font-size: 19px; font-weight: 750; color: var(--head);
  font-variant-numeric: tabular-nums;
}
.gor-bars .gor-bar { grid-column: 1 / -1; height: 8px; }
.gor-bars .gor-bar > i::after { width: 10px; height: 10px; margin: -5px -4px 0 0; }

.gor-marks {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2rem 0;
}
.gor-mark {
  flex: 1 1 132px; padding: 10px 12px;
  border: 1px solid var(--brd); border-radius: 12px; background: var(--panel2);
}
.gor-mark span {
  display: block; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  margin-bottom: 3px;
}
.gor-mark b { font-size: 14.5px; font-weight: 700; color: var(--head); }

/* Плашка про запасной текст. Показываем прямо, а не прячем: человек имеет
   право знать, что текст на эту дату собран из аспектов, а не написан. */
.gor-fallback {
  padding: 11px 14px; margin: 0 0 1.2rem;
  border: 1px solid var(--brd2); border-radius: 12px;
  background: var(--panel2);
  font-size: 13px; color: var(--muted); line-height: 1.55;
}

/* Двенадцать знаков полосой внизу страницы знака. */
.gor-switch {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px; margin: 0;
}
.gor-switch a {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--brd); background: var(--panel2);
  text-decoration: none; color: var(--txt); font-size: 12.5px; font-weight: 600;
}
.gor-switch a:hover { border-color: var(--brd2); color: var(--head); }
.gor-switch a.cur { border-color: var(--gold); color: var(--head); }
.gor-switch i { font-style: normal; font-size: 15px; color: var(--gold); }

@media (max-width: 560px) {
  .gor-hero { grid-template-columns: minmax(0, 1fr); }
  .gor-hero .zf-sky { width: 132px; height: 132px; }
  a.gor-card { grid-template-columns: 72px minmax(0, 1fr); }
  .gor-card .zf-sky { width: 72px; height: 72px; }
}

/* ---------- внутри листа справочника ----------
   У страниц раздела содержательная часть — лист со своей палитрой
   (--paper/--ink/--rule в seo.css), которая под prefers-color-scheme: dark
   становится тёмной. Без переназначения карточки берут тёмные значения
   лендинга, и на светлом листе названия знаков (--head, почти белый) не
   читаются. Тот же приём, что в luna.css и в cabinet.css. */
.layout .gor-grid,
.layout .gor-daybar,
.layout .gor-hero,
.layout .gor-bars,
.layout .gor-marks,
.layout .gor-fallback,
.layout .gor-switch {
  --panel: var(--paper-raised);
  --panel2: var(--paper);
  --brd: var(--rule);
  --brd2: var(--rule-strong);
  --head: var(--ink);
  --txt: var(--ink);
  --muted: var(--ink-soft);
  --gold: var(--gold-ink);
}

/* ---------- блоки, появившиеся 04.09.2026 ----------
   Луна дня для знака, ряд двенадцати знаков по средней оценке и стихии дня
   на хабе. Собраны на тех же токенах, что и всё выше, и намеренно на уже
   существующих кирпичах: марки Луны и камни — это .gor-marks/.gor-mark,
   полосы стихий — .gor-bars/.gor-bar с теми же классами уровня. Новой
   разметки ровно столько, сколько нельзя было переиспользовать. */

/* Одна фраза про Луну и стихию знака. Выделена как цитата, а не как плашка
   предупреждения: это вывод, а не сообщение об ошибке. */
.gor-luna-rule {
  margin: 1.1rem 0 .9rem; padding: 12px 15px;
  border: 1px solid var(--brd); border-left: 2px solid var(--gold);
  border-radius: 12px; background: var(--panel2);
  font-size: 14.5px; line-height: 1.62; color: var(--head);
}

/* Двенадцать знаков в ряд по средней оценке дня: две колонки по три. */
.gor-rank {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 18px 20px; margin: 0 0 1rem;
}
.gor-rank-col { min-width: 0; }
.gor-rank-col h3 {
  margin: 0 0 .6rem; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--muted);
}
.gor-rank-list { display: grid; gap: 8px; }
a.gor-rank-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline; gap: 3px 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--brd); background: var(--panel2);
  text-decoration: none; color: var(--txt);
}
a.gor-rank-row:hover { border-color: var(--brd2); }
.gor-rank-row i { font-style: normal; font-size: 16px; color: var(--gold); }
.gor-rank-row b { font-size: 14px; font-weight: 650; color: var(--head); }
.gor-rank-row em {
  font-style: normal; font-size: 15px; font-weight: 750; color: var(--head);
  font-variant-numeric: tabular-nums;
}
/* Приписка про стихии уходит под название на всю ширину строки: в три
   колонки она сжималась до двух слов в строке. */
.gor-rank-row > span {
  grid-column: 2 / -1; font-size: 12px; line-height: 1.5; color: var(--muted);
}

/* Стихии дня на хабе. Полосы те же, что у сфер, поэтому здесь только
   подпись: под названием стихии стоят три её знака ссылками. */
.gor-elems { margin: .2rem 0 1rem; }
.gor-elems .gor-row b span { font-weight: 400; }
/* Знаки в подписи — ссылки, и это должно быть видно. Наследовать цвет
   подписи нельзя: подчёркивание листа на 11,5 пикселях почти не различимо,
   и три ссылки читались как обычный текст. */
.gor-elems .gor-row b span a { color: var(--gold); }

/* На телефоне обе новые сетки — в одну колонку. auto-fit это сделал бы и
   сам, но только при ширине блока меньше 252 пикселей; на 360-пиксельном
   экране с полями до этого не доходит, и две колонки по 130 пикселей
   ломают строку названия знака. */
@media (max-width: 560px) {
  .gor-rank { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gor-luna-rule { padding: 11px 13px; font-size: 14px; }
}

/* Внутри листа справочника — то же переназначение палитры и по той же
   причине, что у блоков выше: без него карточки берут тёмные значения
   лендинга, и на светлом листе названия знаков не читаются. Отдельным
   правилом, а не дописыванием в список выше, чтобы правка была видна
   целиком в одном месте. */
.layout .gor-rank,
.layout .gor-luna-rule {
  --panel: var(--paper-raised);
  --panel2: var(--paper);
  --brd: var(--rule);
  --brd2: var(--rule-strong);
  --head: var(--ink);
  --txt: var(--ink);
  --muted: var(--ink-soft);
  --gold: var(--gold-ink);
}