/* ═══════════════════════════════════════════════════════════════════════
   ФОРМА СИНАСТРИИ. СВОЕГО ЗДЕСЬ — ТОЛЬКО ВТОРОЙ ПАРТНЁР.

   Раскладка страницы НЕ трогается ни одной строкой. Форма стоит в тех же
   обёртках, что у базового калькулятора (.chart-container > .row >
   .col-md-6), и два столбца — форма слева, круг справа — делает сам сайт.
   В круге С8 здесь лежали свои правила для .row и .col-md-6: они спорили с
   критическим стилем сайта, и форма то растягивалась во всю ширину, то
   вставала в один столбец. Своих правил раскладки больше нет.

   Дальше идёт ровно четыре вещи: повтор базовой геометрии полей для НИЖНЕЙ
   формы, разделение двух партнёров, список подсказок городов и строка
   галочки.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. ГЕОМЕТРИЯ ПОЛЕЙ ДЛЯ ОБЕИХ ФОРМ ───────────────────────────────────
   Базовый стиль задаёт её через `#ncc-form`. Такой id на странице может быть
   только один, и он отдан ВЕРХНЕЙ форме — им же выключается общесайтовый
   natal2.js, обёрнутый в `if (!document.getElementById('ncc-form'))`. Нижней
   форме те же правила нужны не меньше, поэтому они повторены классом. Это
   копия базовых значений, а не ссылка на них: правило ветки — переносить
   копией. Значения совпадают дословно, спорить правилам не о чем. */
.syn-form input:not([type="checkbox"]):not([type="radio"]),
.syn-form select {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 42px;
  min-height: 42px;
  line-height: 20px;
  font-size: 14px;
  padding: 10px 14px;
  margin: 0;
  border-radius: 10px;
  vertical-align: middle;
  background: #fff !important;
  color: var(--text, #1a1a2e);
}
.syn-form input[type="time"] { padding-right: 8px; }
.syn-form .ncc-dob { display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch; }
.syn-form .ncc-dob .ncc-dob__f { flex: 1 1 0; width: auto; min-width: 0; }
/* Месяцу нужно больше места — в нём слова, а не цифры. Базовый стиль задаёт
   это по id одного поля; у нас таких полей четыре, и метка стоит классом. */
.syn-form .ncc-dob select.syn-dob__m { flex: 1.6 1 0; }
.syn-form .ncc-dob select.syn-dob__d { flex: 1.25 1 0; }
.syn-form .ncc-dob select.syn-dob__y { flex: 1.15 1 0; }
.syn-form .ncc-dob select { padding-right: 26px; }
@media (max-width: 420px) {
  .syn-form input:not([type="checkbox"]):not([type="radio"]),
  .syn-form select { height: 40px; min-height: 40px; font-size: 13px; padding: 9px 10px; }
  .syn-form .ncc-dob { gap: 6px; }
  .syn-form .ncc-dob .ncc-dob__f { padding-left: 6px; padding-right: 6px; }
  .syn-form .ncc-dob select.syn-dob__m { flex: 1.95 1 0; }
  .syn-form .ncc-dob select.syn-dob__d { flex: .95 1 0; }
}

/* ── 2. ДВОЕ ПАРТНЁРОВ ───────────────────────────────────────────────────
   Блоки идут друг под другом и разделены чертой: без неё два одинаковых
   набора полей читаются как один длинный, и человек не видит, где кончается
   первый партнёр. */
.syn-person + .syn-person { margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border, rgba(0,0,0,.12)); }
.syn-person__h { font-weight: 600; font-size: 15px; margin: 0 0 10px;
  color: var(--text, #1a1a2e); }

/* ── 3. ПОДСКАЗКИ ГОРОДОВ ────────────────────────────────────────────────
   Список висит НАД страницей и прижат к полю: у базовой формы его положение
   задано прямо в разметке, здесь — стилем, потому что полей три. */
.syn-sugg { position: absolute; left: 0; right: 0; z-index: 1000;
  max-height: 200px; overflow-y: auto; background: #fff;
  border: 1px solid var(--border, #ccc); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); text-align: left; }
.syn-sugg__i { padding: 8px 12px; cursor: pointer; font-size: 14px; color: #1a1a2e; }
.syn-sugg__i:hover { background: #f2f5fa; }

/* ── 4. ГАЛОЧКА «ВРЕМЯ НЕИЗВЕСТНО» И ОШИБКИ ─────────────────────────────
   Галочка стоит в одну строку с подписью: сайт-носитель задаёт полям
   display:block, и без этого правила квадратик уезжает над текстом. */
/* Селектор НАРОЧНО с элементом: базовый стиль объявляет
   `.ncc-form label { display: block }` — класс плюс элемент, вес выше
   одного класса. Пока здесь стоял только `.syn-notime`, правило не
   применялось вовсе: галочка и подпись раскладывались строчно,
   квадратик сидел на базовой линии текста, а `gap` не работал.

   Квадратик прижат к левому краю строки, и левый край строки есть
   левый край поля времени: оба — прямые дети одной колонки, и ни
   отступа, ни втяжки у строки нет. */
.ncc-form label.syn-notime { display: flex; align-items: center; gap: 8px;
  justify-content: flex-start; margin: 8px 0 0; padding-left: 0; text-indent: 0;
  width: 100%; max-width: 100%; box-sizing: border-box;
  font-size: 13px; font-weight: 400; cursor: pointer; }
/* `!important` здесь НЕ упрямство, а единственный способ. Критический стиль
   сайта объявляет `.natal_form input { width: 100% !important }` — правило
   верное для текстовых полей формы и неверное для галочки. Без этой пометки
   квадратик растягивался на всю колонку (замерено: 144 px вместо 16), а
   подпись выбрасывало за правый край формы. Перебиваем ровно один элемент. */
.ncc-form label.syn-notime input[type="checkbox"] {
  width: 16px !important; min-width: 16px; max-width: 16px;
  height: 16px; min-height: 0; margin: 0; padding: 0;
  flex: 0 0 16px; vertical-align: middle; }
.syn-err { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; color: #7a1f1f; background: #fdecec;
  border: 1px solid #f0c2c2; }

/* ── 5. КАРТЫ СИНАСТРИИ ───────────────────────────────────────────────────
   Круг и таблица аспектов рисовались старым движком — картинками PNG со своей
   палитрой и английскими подписями. Теперь это наш круг и наша разметка, и
   краски здесь те же, что в круге натального калькулятора: песочные кольца,
   тёмный текст, зелёный для мягких связей и терракотовый для напряжённых. */
.syn-wheel-box { max-width: 720px; margin: 0 auto 6px; }
.syn-wheel-key { margin: 2px 0 14px; font-size: 13px; color: var(--muted, #6b6b6b);
  text-align: center; }
.syn-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 4px; }
.syn-key--1 { background: #1d2733; }
.syn-key--2 { background: #8a5a2b; }

/* Таблица листается вбок на узком экране, а не ломается: правило страницы
   натального калькулятора, то же и здесь. */
.syn-grid-wrap { overflow-x: auto; margin: 0 0 14px; }
.syn-grid { border-collapse: collapse; font-size: 15px; margin: 0 auto; }
.syn-grid caption { caption-side: top; text-align: left; padding: 0 0 8px;
  font-size: 13px; color: var(--muted, #6b6b6b); }
.syn-grid th, .syn-grid td { border: 1px solid #ddd7c9; width: 30px; height: 30px;
  text-align: center; vertical-align: middle; padding: 0; }
.syn-grid__corner { background: #f7f4ee; font-size: 11px; font-weight: 400;
  color: #8a7f68; white-space: nowrap; padding: 0 6px; width: auto; }
.syn-grid__h { background: #f7f4ee; color: #8a7f68; font-weight: 400; }
.syn-grid__r { background: #f7f4ee; color: #8a7f68; font-weight: 400;
  white-space: nowrap; text-align: left; padding: 0 8px; width: auto; }
.syn-grid__rn { font-size: 12px; margin-left: 6px; color: #9a927f; }
.syn-grid__c { background: #fff; }
.syn-asp--hard { color: #c0563f; }
.syn-asp--soft { color: #2f8f6b; }
.syn-asp--conj { color: #8a7f68; }
.syn-asp--quin { color: #5a6b8c; }
.syn-grid__key { font-size: 13px; color: var(--muted, #6b6b6b); }

/* Положения обоих — двумя столбцами, как было у картинки. */
.syn-pos-pair { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 12px; }
.syn-pos { flex: 1 1 240px; min-width: 0; }
.syn-pos__h { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.syn-pos__h--1 { color: #1d2733; }
.syn-pos__h--2 { color: #8a5a2b; }
.syn-pos__t { width: 100%; border-collapse: collapse; font-size: 13px; }
.syn-pos__t td { padding: 3px 4px; border-bottom: 1px solid #efece4; }
.syn-pos__g { width: 22px; color: #8a7f68; }
.syn-pos__n { color: #4a4a4a; }
.syn-pos__d { text-align: right; white-space: nowrap; color: #7b7360; }
.syn-pos__rx { color: #b23b3b; }