/* Арканатлас - дополнения к присланной дизайн-системе.
 *
 * Здесь только то, чего в прототипе не было, потому что у него не было наших
 * данных: таблицы положений и аспектов, колесо карты, плитки куспидов,
 * подсказки под полями. Токены не переопределяются - цвет, ритм и гарнитуры
 * берутся из tokens.css без изменений.
 */

/* ── ссылки на инструменты в панели ─────────────────────── */
.panel .kv a { border: none; color: var(--muted); }
.panel .kv a:hover { color: var(--text); }
.panel .kv a.is-current { color: var(--signal); }

/* ── форма расчета ──────────────────────────────────────── */
.controls .field input { width: 100%; }
.controls .field { min-width: 130px; }
.controls .field.wide { flex: 1 1 200px; }

/* Подсказка мест под полем. Место под нее отведено заранее, чтобы появление
   подсказки не сдвигало кнопку. */
.suggest {
  min-height: 16px;
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

/* ── таблицы данных ─────────────────────────────────────── */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--fs-data);
  letter-spacing: var(--ls-data);
}
table.data-table th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data-table td {
  padding: 5px var(--s-3) 5px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  white-space: nowrap;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--panel); }
table.data-table td.key { color: var(--text); }
table.data-table td.sym { color: var(--signal); width: 1.4em; text-align: center; }

/* Аспекты различаются и цветом, и рисунком линии: цвет не должен быть
   единственным носителем смысла. */
.aline { display: inline-block; width: 26px; height: 0; vertical-align: middle; }
.aline.tense { border-top: 1px solid var(--flare); }
.aline.easy { border-top: 1px dashed var(--signal); }
.aline.conj { border-top: 3px double var(--text-dim); }

.atag { font-size: var(--fs-data); }
.atag.tense { color: var(--flare); }
.atag.easy { color: var(--signal); }
.atag.conj { color: var(--text-dim); }

/* ── сетка результата ───────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--s-6);
}
.grid-2 > * { background: var(--void); padding: var(--s-5); min-width: 0; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.block-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  margin-bottom: var(--s-3);
}

.scroll-x { overflow-x: auto; }

/* ── колесо карты ───────────────────────────────────────── */
.wheel-holder { display: grid; place-items: center; padding: var(--s-3) 0; }
.wheel { width: 100%; max-width: 420px; height: auto; display: block; }
.wheel-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center; margin-top: var(--s-3);
  font-family: var(--mono); font-size: var(--fs-data); color: var(--muted);
}
.wheel-legend i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }

/* ── плитки куспидов ────────────────────────────────────── */
.cusps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cusp { background: var(--void); padding: var(--s-2) var(--s-1); text-align: center; }
.cusp b {
  display: block; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); color: var(--muted); font-weight: 400;
}
.cusp span { font-family: var(--mono); font-size: var(--fs-data); color: var(--text); }

/* ── трактовка: режим чтения ────────────────────────────── */
.reading { max-width: var(--measure); margin-top: var(--s-5); }
.reading h3 { margin: var(--s-6) 0 var(--s-2); color: var(--text); }
.reading h3:first-child { margin-top: 0; }
.reading p { color: var(--text-dim); }

/* ── статьи ─────────────────────────────────────────────── */
.prose { max-width: var(--measure); }
.prose h2 { margin: var(--s-10) 0 var(--s-3); }
.prose h3 { margin: var(--s-6) 0 var(--s-2); }
.prose p { color: var(--text-dim); }

/* Кнопка второго шага прячется до расчета: нечего трактовать, пока нет
   чисел. */
#explain[hidden] { display: none; }

.err { color: var(--flare); font-family: var(--mono); font-size: var(--fs-data); }

/* ── сетка ссылок раздела ───────────────────────────────────
   Плитки строго одного размера, текст подгоняется под сетку, а не сетка
   под текст: «Овен и Козерог» и «Рак» в одном ряду не должны давать
   ступеньку. Минимум 160 px - столько нужно самому длинному сочетанию
   знаков без переноса на трех строках.
   Столбцом эти списки не идут: сто сорок четыре ссылки подряд взгляду
   не за что зацепить, а сетка дает ритм и читается по диагонали. */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.link-tile {
  display: flex;
  align-items: center;
  min-height: 44px;               /* пригодная для пальца цель на телефоне */
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.link-tile:hover,
.link-tile:focus-visible {
  border-color: var(--line-2);
  color: var(--text);
}

/* ── витрина инструментов на главной ────────────────────────
   Шесть плиток равного размера: человек сравнивает их между собой,
   и разная высота читалась бы как разная важность. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.tool-card {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: var(--s-5);
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .15s;
}
.tool-card:hover,
.tool-card:focus-visible { border-color: var(--flare); }
.tool-card b {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.tool-card span { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.tool-card .go {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--flare);
}

/* ── хлебные крошки ─────────────────────────────────────────
   Человек приходит из поиска сразу на вложенную страницу, минуя главную.
   Без крошек единственный путь дальше - кнопка «назад» в браузере,
   то есть уход с сайта. */
.crumbs {
  font-family: var(--mono);
  font-size: var(--fs-data);
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs span { padding: 0 var(--s-2); color: var(--line-2); }

/* ── показания расчета: раскрывающийся блок ─────────────────
   На широком экране это прежняя панель, и заголовок блока не нужен.
   На телефоне панель встает над содержимым, поэтому показания
   сворачиваются: человек, пришедший из поиска, должен увидеть сайт,
   а не «азимут курсора». */
.panel-data > summary,
.panel-nav > summary {
  display: none;
}

@media (max-width: 900px) {
  .panel-data > summary,
  .panel-nav > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: var(--s-3) 0;
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
    border-top: 1px solid var(--line);
  }
  .panel-data > summary::-webkit-details-marker,
  .panel-nav > summary::-webkit-details-marker { display: none; }
  .panel-data > summary::after,
  .panel-nav > summary::after {
    content: " ▾";
    color: var(--line-2);
  }
  .panel-data[open] > summary::after,
  .panel-nav[open] > summary::after { content: " ▴"; }

  /* Инструменты и разделы на телефоне идут сеткой, а не столбцом:
     двенадцать строк подряд - это лишний экран прокрутки до содержимого. */
  .panel-tools .kv {
    display: inline-flex;
    width: auto;
    margin: 0 var(--s-2) var(--s-2) 0;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
  }
  .panel-tools .kv a { font-size: var(--fs-small); }
}

/* Вопрос человека над названием инструмента. Теплый цвет, потому что это
   обращение к человеку, а не показание прибора. */
.tool-card .asks {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--flare);
}
.tool-card b { font-size: var(--fs-body); }

/* Галочка «знаю время рождения». Цель для пальца не меньше 44 пикселей:
   на телефоне это первое, чего человек касается на странице. */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  margin-top: var(--s-3);
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--flare);
  cursor: pointer;
}
.check:hover span { color: var(--text); }
.check input:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; }

/* Строка входа внизу панели. Приглушенная намеренно: это не действие,
   которого мы ждем от человека, а возможность, которой он может
   воспользоваться. */
.panel-account {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-data);
  letter-spacing: var(--ls-data);
}
.panel-account a { color: var(--muted); text-decoration: none; }
.panel-account a:hover { color: var(--signal); }

/* Кнопка входа через VK. Фирменный синий - требование VK к оформлению
   кнопки, и это тот случай, когда чужой цвет на нашей странице оправдан:
   человек узнает кнопку до того, как прочтет надпись. */
.vk-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  background: #0077FF;
  color: #FFFFFF;
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  border: none;
}
.vk-button:hover { background: #0066DD; }
.vk-button:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; }

/* Второстепенная кнопка: сохранение расчета стоит рядом с «Получить
   трактовку», но не спорит с ней за внимание. Главное действие на этих
   страницах - разбор, а не хранение. */
button.ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
}
button.ghost:hover:not(:disabled) { border-color: var(--flare); color: var(--text); }
button.ghost:disabled { opacity: .5; cursor: default; }

/* ── карты расклада ─────────────────────────────────────────
   Пропорция 2:3 - обычная для карточной колоды, и отступать от нее
   незачем: человек узнает форму раньше, чем прочтет название.
   Карты одного размера независимо от длины названия: «Шут» и «Королева
   Пентаклей» в одном ряду не должны давать ступеньку. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.tcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 2 / 3;
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line-2);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.tcard:hover,
.tcard:focus-visible { border-color: var(--flare); transform: translateY(-2px); }

.tcard .pos {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}
.tcard .ttl {
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
}
.tcard .ori { font-family: var(--mono); font-size: var(--fs-data); color: var(--signal); }

/* Перевернутая карта помечена и цветом, и поворотом названия: одним
   цветом обозначать смысл нельзя - его не увидит тот, кто не различает
   оттенки. */
.tcard.rev { border-style: dashed; }
.tcard.rev .ttl { transform: rotate(180deg); transform-origin: center; }
.tcard.rev .ori { color: var(--flare); }

/* ── первый экран главной ───────────────────────────────────
   Задача экрана одна: за три секунды сказать, что здесь можно получить,
   и дать это сделать. Прежняя редакция начиналась с рассказа о методе,
   и человек, пришедший узнать про себя, уходил, не найдя ни слова
   о себе. */
.hero-lead h1 { margin-bottom: var(--s-4); }
.hero-lead .lede { max-width: 52ch; }

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* Главное действие - сплошная теплая заливка. На всей странице такая
   кнопка одна: две одинаково заметные кнопки означают, что выбор
   не сделан за человека, а он пришел не выбирать. */
.lead-primary,
.lead-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--s-6);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.lead-primary { background: var(--flare); color: var(--void); }
.lead-primary:hover { background: #F5B27A; }
.lead-secondary { border-color: var(--line-2); color: var(--text); }
.lead-secondary:hover { border-color: var(--flare); color: var(--flare); }
.lead-primary:focus-visible,
.lead-secondary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.lead-note {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Карточки должны читаться как отдельные предметы, а не как текст
   на общем фоне. Замер 08.09.2026: контраст поверхности с фоном был
   1,03 при минимально различимых 3,0. */
.tool-card { border-color: var(--line-2); }
.tool-card:hover { background: #131C28; }

@media (max-width: 900px) {
  /* На телефоне панель стоит над содержимым, и слоган в ней съедает
     треть первого экрана, ничего не сообщая. */
  .brand-sub { display: none; }
  .lead-actions { flex-direction: column; align-items: stretch; }
  .lead-primary, .lead-secondary { justify-content: center; }
}

/* ── шапка на телефоне ──────────────────────────────────────
   Замер 08.09.2026: до заголовка страницы человек прокручивал 450 пикселей
   служебной панели - логотип, слоган, две свернутые строки и «Войти».
   Все это не сообщало ничего о том, ради чего он пришел.

   Правило простое: над содержимым остается только то, без чего нельзя
   уйти со страницы, - название и меню. Остальное складывается. */
@media (max-width: 900px) {
  .panel { padding-top: var(--s-4); padding-bottom: var(--s-2); }
  .brand { font-size: var(--fs-small); }

  /* Название в верхней полосе дублирует название в панели: на узком
     экране они стоят одно под другим в двух сантиметрах друг от друга. */
  .topbar .label { display: none; }
  .topbar { padding-top: var(--s-3); padding-bottom: var(--s-3); }

  .panel-data > summary,
  .panel-nav > summary { padding: var(--s-2) 0; }

  .panel section { margin-top: var(--s-3); }
  .panel-account { margin-top: var(--s-3); padding-top: var(--s-3); }

  /* Показания расчета на телефоне не нужны до расчета: это приборы,
     а не содержание. Складываются в одну строку и открываются по нажатию. */
  .panel-data { border-bottom: 1px solid var(--line); }
}

/* Карточки различаются не заливкой, а границей: на почти черном фоне
   поднять поверхность настолько, чтобы она читалась, значит сломать
   всю глубину сцены. Поэтому работает граница, и она доведена
   до различимой величины - замер 08.09.2026 показывал 1,75 при
   минимально различимых 3,0. */
.tool-card,
.link-tile { border-color: #3A4B63; }
.tool-card:hover,
.tool-card:focus-visible { border-color: var(--flare); background: #16202D; }
.link-tile:hover,
.link-tile:focus-visible { border-color: var(--flare); }

/* ── блок «сегодня» ─────────────────────────────────────────
   Три ячейки равного размера: они однородны по смыслу, и разная высота
   читалась бы как разная важность. */
.today-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.today-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 132px;
  padding: var(--s-5);
  background: var(--panel);
  border: 1px solid #3A4B63;
  text-decoration: none;
}
.today-cell b {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--signal);
  line-height: 1.15;
}
.today-note { font-size: var(--fs-small); color: var(--muted); line-height: 1.45; margin-top: auto; }

/* Карта дня кликабельна, и это видно: теплый цвет отведен под то,
   что можно нажать. */
.today-card b { color: var(--flare); }
.today-card:hover, .today-card:focus-visible { border-color: var(--flare); }

/* ── форма на двоих ─────────────────────────────────────────
   Две колонки равной ширины. Равенство намеренное: отношения
   несимметричны по сути, но ввод данных симметричен, и разная разметка
   намекала бы, что один человек в паре главный. */
.pair-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-5);
}
.pair-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--panel);
  border: 1px solid #3A4B63;
}
.pair-side .block-label { margin-bottom: var(--s-1); }
.pair-side .field { margin: 0; }
.pair-side .check { margin-top: 0; min-height: 36px; }

@media (max-width: 700px) {
  .pair-forms { gap: var(--s-4); }
}

/* ── карта команды ──────────────────────────────────────────
   Карточки участников одного размера: разная высота читалась бы как
   разная важность людей, а разбор про связки, а не про иерархию.
   Руководитель отличается только рамкой, не размером. */
.team-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.team-context .field.wide { grid-column: 1 / -1; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid #3A4B63;
}
.team-card.is-leader { border-color: var(--flare); }
.team-card input[type="text"],
.team-card input[type="date"],
.team-card input[type="time"] { width: 100%; }
.team-card .label { margin-top: var(--s-1); }
.team-card .check { margin-top: var(--s-1); min-height: 36px; }
.team-card-head { display: flex; justify-content: space-between; align-items: center; }
.team-extra { display: flex; flex-direction: column; gap: var(--s-2); }
.team-remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--fs-data);
  color: var(--muted);
  cursor: pointer;
}
.team-remove:hover, .team-remove:focus-visible { color: var(--flare); }

/* Доли стихий и крестов: плитки одного размера в ряд. */
.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.share-grid.three { grid-template-columns: repeat(3, 1fr); }
.share-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid #3A4B63;
}
.share-tile b {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.share-bar { display: block; height: 4px; background: var(--line); }
.share-bar i { display: block; height: 100%; background: var(--signal); }
.share-role { font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.share-mark {
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.share-tile.is-strong { border-color: var(--flare); }
.share-tile.is-strong .share-bar i { background: var(--flare); }
.share-tile.is-strong .share-mark { color: var(--flare); }
.share-tile.is-weak { border-style: dashed; }
.share-tile.is-weak .share-mark { color: var(--muted); }

@media (max-width: 700px) {
  .share-grid, .share-grid.three { grid-template-columns: repeat(2, 1fr); }
}

/* Атрибут hidden обязан побеждать любой display. Без этой строки блок
   со своим display: flex или grid остается видимым, хотя скрыт:
   проверка 06.10.2026 нашла поля времени, открытые в каждой карточке
   участника при снятой галочке. Ошибка тихая - страница работает,
   просто выглядит перегруженной. */
[hidden] { display: none !important; }

/* Поле «что болит» - самое ценное во всей форме: без него разбор выходит
   общим. Оно занимает всю ширину, а не обрезает подсказку на середине. */
.team-context .field.wide input { width: 100%; }

/* Опубликованный разбор: текст и блоки данных чередуются, и между ними
   нужен воздух, иначе таблица прилипает к абзацу. */
.report-text { margin-top: var(--s-6); }
.report-text h2 { margin-top: var(--s-12); }
.report-text h3 { margin-top: var(--s-6); color: var(--signal); }
.report-block { margin-top: var(--s-6); }
.report-table td { white-space: normal; }