/* Калькулятор аркана и страницы результата.
   Палитр у портала две, поэтому цвета берутся только из переменных:
   24.08.2026 жёстко заданный тёмный цвет уже дал нечитаемый текст
   на светлой теме. */

.arkan-blok{border:1px solid var(--line);border-radius:var(--r-small);
  background:var(--surface);padding:22px 24px;margin:26px 0;max-width:var(--read)}
.arkan-blok-glavny{border-left:3px solid var(--gold)}

.arkan-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.arkan-form label{display:block;width:100%;margin-bottom:2px;
  font-size:15px;color:var(--text-low)}
.arkan-form input[type="date"]{flex:1 1 190px;min-width:170px;
  padding:11px 13px;font:inherit;font-size:17px;
  color:var(--text-hi);background:var(--bg-base);
  border:1px solid var(--line);border-radius:var(--r-small)}
.arkan-form input[type="date"]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.arkan-form button{padding:12px 22px;font:inherit;font-size:16px;cursor:pointer;
  color:var(--bg-base);background:var(--gold);
  border:0;border-radius:var(--r-small)}
.arkan-form button:hover{opacity:.9}

.arkan-oshibka{margin-top:12px;color:var(--gold);font-size:15px}

/* ОТВЕТ КАЛЬКУЛЯТОРА.
   Прижат к низу карточки формы - отрицательные поля гасят её padding, -
   и открывается плотной золотой полосой. Так он читается как ответ на то,
   что человек только что ввёл, а не как ещё один абзац рядом.

   До 26.08.2026 ответ шёл отдельным блоком через отступ 26 пикселей
   и был залит `--gold-soft` - той же заливкой, что у лида портала.
   На странице аркана он к тому же стоял ВЫШЕ формы: 339 пикселей против
   597, то есть человек вводил дату и получал ответ за экран над полем.
   Заказчик: «выводится в странном месте, не выделен цветом, легко
   не заметить».

   Пара «золото фоном -> цвет фона страницы текстом» уже проверена
   на кнопке калькулятора: контраст 8,11 на тёмной палитре и 5,4
   на светлой, обе выше нормы 4,5. */
.arkan-otvet{margin:22px -24px -22px;overflow:hidden;
  border-radius:0 0 var(--r-small) var(--r-small)}
.arkan-nomer{margin:0;padding:13px 24px;
  background:var(--gold);color:var(--bg-base);
  font-size:20px;font-weight:500;letter-spacing:.01em}
.arkan-otvet-telo{padding:18px 24px 20px;background:var(--gold-soft);
  border-top:1px solid var(--gold-line)}
.arkan-otvet-telo > *:first-child{margin-top:0}
.arkan-otvet-telo > *:last-child{margin-bottom:0}
.arkan-otvet-telo h2{margin:0 0 10px;font-size:24px}
.arkan-karta-ryadom{font-size:16px;color:var(--text-low)}

/* Строка «это ваш аркан» на странице аркана - тело ответа, без своей
   заливки: цветом выделяет полоса над ней. */
.arkan-moy{margin:0;font-size:16px;color:var(--text-hi)}

.arkan-dalshe{margin:16px 0 0}
.arkan-dalshe button{padding:12px 22px;font:inherit;font-size:16px;cursor:pointer;
  color:var(--text-hi);background:var(--surface);
  border:1px solid var(--gold);border-radius:var(--r-small)}
.arkan-dalshe button:hover{background:var(--gold);color:var(--bg-base)}

.arkan-spisok{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;list-style:none;padding:0;margin:18px 0 0}
.arkan-spisok li{padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-small);font-size:16px}
.arkan-spisok span{color:var(--text-low)}

.arkan-nazad{margin-top:34px;font-size:16px}

@media (max-width:600px){
  .arkan-blok{padding:18px 16px}
  .arkan-form button{width:100%}
  /* Поля карточки на мобиле 18x16 - вылет ответа считается от них. */
  .arkan-otvet{margin:18px -16px -18px}
  .arkan-nomer{padding:12px 16px;font-size:18px}
  .arkan-otvet-telo{padding:16px 16px 18px}
}

/* Блок «аркан и карта - это одно и то же?».
   Выделен рамкой намеренно: он отвечает на вопрос, который читатель задаёт
   сам, и держит границу между двумя разделами портала. Без оформления
   он терялся в тексте - поймала `check-classes.py`. */
.band-note{border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-small) var(--r-small) 0;
  background:var(--surface);padding:22px 26px;margin:32px 0;
  max-width:var(--read)}
.band-note h2{margin-top:0}

/* Пометка «это нумерология» у самой формы. Не мелкий серый шрифт:
   портал говорит об этом прямо, это отстройка, а не сноска. */
.arkan-chestno{margin:12px 0 0;font-size:15px;color:var(--text-low);max-width:var(--read)}

/* Образ аркана: скан карты рядом с текстом.
   Картинка не во всю ширину - карта вертикальная, и растянутая на колонку
   она занимала бы весь первый экран. Ровно эта беда была у обложки хаба
   Ленормана 24.08.2026. */
.arkan-obraz{float:left;width:190px;margin:6px 26px 14px 0}
.arkan-obraz img{width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:var(--r-small)}
.arkan-obraz figcaption{margin-top:10px;color:var(--text-low);
  font-size:14px;line-height:1.5}

/* Текст обтекает карту, а не начинается под ней.
   Было `display:flex`: подпись занимала две строки, а блок растягивался
   на высоту карты - справа получалась дыра в треть экрана. Нашёл заказчик
   25.08.2026, прислав снимок с обведённой пустотой. */
.arkan-obraz + .prose::after{content:'';display:block;clear:both}

@media (max-width:600px){
  .arkan-obraz{float:none;width:160px;margin:20px 0 18px}
}


/* КАЛЬКУЛЯТОР СОВМЕСТИМОСТИ.
   Полей два, и на широком экране они стоят рядом, а на узком - друг под
   другом. Кнопка занимает всю ширину под ними: при двух полях в строку
   она ужималась бы в остаток и оказывалась заметно меньше самих полей. */
/* Flex, а не inline-block: при `width:calc(50% - 8px)` и отступе между
   полями сумма перебирала сто процентов на несколько пикселей - вместе
   с пробелом, который браузер оставляет между inline-block элементами, -
   и второе поле переносилось на новую строку. Замер это показал сразу:
   ширина у обоих полей была правильная, а стояли они друг под другом. */
.sovm-form{display:flex;flex-wrap:wrap;gap:14px}
.sovm-pole{flex:1 1 220px;min-width:0}
.sovm-pole label{display:block;margin-bottom:2px;
  font-size:15px;color:var(--text-low)}
.sovm-pole input[type="date"]{width:100%;
  padding:11px 13px;font:inherit;font-size:17px;
  color:var(--text-hi);background:var(--bg-base);
  border:1px solid var(--line);border-radius:var(--r-small)}
.sovm-pole input[type="date"]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.sovm-form button{flex:1 1 100%;padding:12px 22px;font:inherit;font-size:16px;
  cursor:pointer;color:var(--bg-base);background:var(--gold);
  border:0;border-radius:var(--r-small)}
.sovm-form button:hover{opacity:.9}

/* Кто эти двое - две строки под золотой полосой ответа. */
.sovm-kto{list-style:none;padding:0;margin:0}
.sovm-kto li{margin:0 0 10px;font-size:16px;line-height:1.55}
.sovm-kto li:last-child{margin-bottom:0}
.sovm-kto a{color:var(--gold);border-bottom:1px solid var(--gold-line)}

/* Строка про границы под разбором. Не мелкий серый шрифт: она говорит
   то же, что раздел «границы метода», и прятать её незачем. */
.sovm-vyhod{margin-top:26px;padding-top:18px;
  border-top:1px solid var(--line);color:var(--text-mid);font-size:16px}

@media (max-width:600px){
  .sovm-pole{flex:1 1 100%}
}

/* Ссылка на второй калькулятор под списком арканов. Оформлена как врезка,
   а не как строка текста: это следующий шаг, и он должен читаться отдельно
   от перечня. */
.arkan-dalee{margin:26px 0 0;padding:16px 20px;max-width:var(--read);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-small) var(--r-small) 0;
  background:var(--surface);font-size:17px}
.arkan-dalee a{color:var(--gold);border-bottom:1px solid var(--gold-line)}

/* КАЛЬКУЛЯТОР СОЧЕТАНИЙ. Выпадашки вместо полей даты - карт 78,
   и списком по разделам колоды выбирать быстрее, чем набирать название. */
.sovm-pole select{width:100%;padding:11px 13px;font:inherit;font-size:17px;
  color:var(--text-hi);background:var(--bg-base);
  border:1px solid var(--line);border-radius:var(--r-small)}
.sovm-pole select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* Пометка про два разбора и ссылки под ответом: служебные строки,
   а не часть самого разбора - поэтому тише основного текста. */
.pary-dva,.pary-net,.pary-dalshe,.pary-podrobno{margin:14px 0 0;font-size:16px;color:var(--text-mid)}
.pary-net a,.pary-dalshe a,.pary-podrobno a{color:var(--gold);border-bottom:1px solid var(--gold-line)}
.pary-dva{padding-top:12px;border-top:1px solid var(--gold-line)}