/* Стили карты. Отдельный файл: карта тянет его сама, оболочке помнить не нужно.
   Всё состояние карты — классы, а не атрибуты fill: тема, подсветка и режимы
   просмотра тогда решаются здесь, а не перерисовкой SVG. */

:root {
  /* ── Канонические цвета центров ──────────────────────────────────────────
     В Rave BodyGraph заливка закреплена за ТИПОМ центра, и практик считывает
     несоответствие мгновенно: давление — жёлтый (Голова) и коричневый (Корень),
     осознание — зелёный (Аджна) и коричневый (Селезёнка, Солнечное сплетение),
     моторы — красный (Сакрал, Сердце), идентичность — жёлтый (G),
     проявление — коричневый (Горло). Четыре коричневых, два жёлтых, два
     красных и один зелёный — так выглядит любая профессиональная карта. */
  --hd-yellow: #f6d33c;
  --hd-green:  #6cbf4b;
  --hd-brown:  #9a5b2c;
  --hd-motor:  #e0342b;

  --hd-center-head:         var(--hd-yellow);
  --hd-center-ajna:         var(--hd-green);
  --hd-center-throat:       var(--hd-brown);
  --hd-center-g:            var(--hd-yellow);
  --hd-center-heart:        var(--hd-motor);
  --hd-center-sacral:       var(--hd-motor);
  --hd-center-solar_plexus: var(--hd-brown);
  --hd-center-spleen:       var(--hd-brown);
  --hd-center-root:         var(--hd-brown);

  --hd-ink: #2a2620;          /* Личность — чёрные активации */
  --hd-red: #c0392b;          /* Дизайн — красные активации */
  --hd-line: rgba(42, 38, 32, .18);
  --hd-hint: var(--tg-theme-hint-color, #8b8371);
  --hd-paper: var(--tg-theme-bg-color, #fdfbf6);
  --hd-surface: var(--tg-theme-secondary-bg-color, #efe9db);
  --hd-text: var(--tg-theme-text-color, #211d16);
  --hd-accent: var(--tg-theme-button-color, #b08d2e);
  --hd-accent-text: var(--tg-theme-button-text-color, #fff);
  --hd-highlight: #2f80ed;

  /* Ширина боковой панели на широком экране. Одна величина на два места:
     ею же оболочка резервирует поле справа, чтобы холст не уехал под панель. */
  --hd-side-sheet: 400px;
}

/* Старая выдуманная палитра остаётся необязательной темой: класс на контейнере
   карты. Значением по умолчанию она быть не может — карта перестаёт быть картой. */
.hd-chart--warm {
  --hd-center-head: #f4d35e;
  --hd-center-ajna: #84a98c;
  --hd-center-throat: #a26769;
  --hd-center-g: #e8c547;
  --hd-center-heart: #bc4749;
  --hd-center-sacral: #d62828;
  --hd-center-solar_plexus: #9d4edd;
  --hd-center-spleen: #6a994e;
  --hd-center-root: #774936;
}

/* ───────── Холст ───────── */
.hd-chart { width: 100%; }
.hd-canvas { display: block; width: 100%; height: auto; }

/* На широком экране холст выходит из колонки оболочки: она рассчитана на
   телефон, а карта с колонками по бокам в неё не помещается — бодиграф в ней
   ужимался до трети ширины экрана, оставляя пустыми оба поля. Порог тот же,
   что у WIDE_QUERY в canvas.js: раскладка и ширина обязаны меняться разом. */
@media (min-width: 1000px) {
  .hd-chart {
    --hd-canvas-width: min(920px, calc(100vw - 48px - var(--hd-side-sheet)));
    width: var(--hd-canvas-width);
    margin-left: calc(50% - var(--hd-canvas-width) / 2);
  }
}

/* ───────── Ворота ───────── */
.hd-gate { fill: var(--hd-paper); stroke: var(--hd-ink); }
.hd-gate--personality { fill: var(--hd-ink); }
.hd-gate--design { fill: var(--hd-red); }
.hd-gate--both { fill: url(#hd-both); }
.hd-gate--highlight { stroke: var(--hd-highlight); stroke-width: 7; }
.hd-both__ink { fill: var(--hd-ink); }
.hd-both__red { fill: var(--hd-red); }

/* Тап-зона: копия полоски с толстой прозрачной обводкой. Сама полоска ворот —
   17 единиц viewBox, то есть около 7 CSS-px на телефоне; попасть в неё нельзя. */
.hd-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 34;
  pointer-events: all;
  cursor: pointer;
}
.hd-gate-target { cursor: pointer; pointer-events: all; }
/* Отметка открытого элемента. Кружок с номером и контур центра — единственное,
   что на них можно занять: заливка уже занята активацией и определённостью. */
.hd-center--highlight > path:not([fill]) { fill: var(--hd-highlight); }
/* Кружок с номером — самая крупная мишень; растим её прозрачной обводкой. */
g.hd-gate-target > path { stroke: transparent; stroke-width: 18; pointer-events: all; }
/* Правило ниже по файлу: у обоих селекторов одинаковая специфичность,
   и спор решает порядок — иначе прозрачная обводка мишени перекрыла бы отметку. */
g.hd-badge--highlight > path { stroke: var(--hd-highlight); stroke-width: 3; }
.hd-gate-target:focus-visible,
.hd-center:focus-visible,
.hd-planet-row:focus-visible,
.hd-variable:focus-visible {
  outline: 2px solid var(--hd-highlight);
  outline-offset: 2px;
}

/* ───────── Центры ───────── */
/* Заливку несёт только определённый центр — так в эталоне, и цвет там значит
   ровно одно: центр работает постоянно. Неопределённый отличается от открытого
   не тоном фигуры, а цветом активированных ворот внутри неё: залей мы его
   собственным цветом хотя бы вполсилы — в карте с двумя определёнными центрами
   цветными выглядели бы восемь фигур из девяти.

   Контур центра нарисован ОТДЕЛЬНОЙ фигурой без атрибута fill, то есть чёрной
   по умолчанию SVG. Пока правила на неё не было, в тёмной теме все девять
   границ оставались чёрными на тёмном фоне, а открытый центр, у которого
   и заливка равна фону, пропадал целиком. */
.hd-center { cursor: pointer; }
.hd-center > path[fill] { fill: var(--hd-paper); }
.hd-center > path:not([fill]) { fill: var(--hd-ink); }
.hd-center--defined > path[fill] { fill: var(--hd-center-fill); }

/* ───────── Планетарные колонки ───────── */
.hd-planets__header { fill: var(--hd-hint); letter-spacing: .08em; }
.hd-planet-row { cursor: pointer; }
.hd-planet-row__glyph, .hd-planet-row__value { dominant-baseline: alphabetic; }
.hd-planets--design .hd-planet-row__glyph,
.hd-planets--design .hd-planet-row__value { fill: var(--hd-red); }
.hd-planets--personality .hd-planet-row__glyph,
.hd-planets--personality .hd-planet-row__value { fill: var(--hd-ink); }
.hd-planet-row__value { font-variant-numeric: tabular-nums; font-weight: 600; }
.hd-planet-row:hover .hd-planet-row__hit { fill: var(--hd-surface); }
.hd-planet-row--highlight .hd-planet-row__hit {
  fill: var(--hd-highlight); fill-opacity: .16;
}

/* ───────── Переменные ───────── */
.hd-variable { cursor: pointer; }
.hd-variable--design .hd-variable__arrow { fill: var(--hd-red); }
.hd-variable--personality .hd-variable__arrow { fill: var(--hd-ink); }
.hd-variable__value { fill: var(--hd-text); font-variant-numeric: tabular-nums; }
.hd-variable__name { fill: var(--hd-hint); }
.hd-variables__notation { fill: var(--hd-hint); letter-spacing: .14em; }

/* ───────── Легенда ───────── */
.hd-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 10px 0 0; padding: 0; font-size: .82rem; color: var(--hd-hint);
}
.hd-legend__item { display: flex; align-items: center; gap: 7px; }
.hd-legend__swatch {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid var(--hd-line); flex: none;
}
.hd-legend__swatch--personality { background: var(--hd-ink); }
.hd-legend__swatch--design { background: var(--hd-red); }
.hd-legend__swatch--both {
  background: repeating-linear-gradient(45deg,
    var(--hd-ink) 0 4px, var(--hd-red) 4px 8px);
}
/* Образцы состояний центра. Определённый — залит своим цветом (коричневый взят
   как самый частый: их четыре из девяти). Неопределённый и открытый оба белые,
   и различает их то же, что на карте: у неопределённого внутри есть цветные
   ворота, у открытого нет ни одних. */
.hd-legend__swatch--center-defined { background: var(--hd-brown); }
.hd-legend__swatch--center-undefined {
  background: var(--hd-paper);
  background-image: linear-gradient(90deg,
    transparent 0 34%, var(--hd-ink) 34% 62%, transparent 62%);
}
.hd-legend__swatch--center-open { background: var(--hd-paper); }

/* ───────── Шторка ───────── */
.hd-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 18, 14, .45);
  opacity: 1; transition: opacity .25s;
}
.hd-backdrop--hidden { opacity: 0; pointer-events: none; }

.hd-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 520px; margin: 0 auto;
  max-height: min(78vh, 78dvh);
  display: flex; flex-direction: column;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  background: var(--hd-surface); color: var(--hd-text);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(33, 29, 22, .25);
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), visibility .3s;
  visibility: visible;
}
.hd-sheet--hidden { transform: translateY(110%); visibility: hidden; }
.hd-sheet__grip {
  width: 42px; height: 4px; border-radius: 4px; flex: none;
  background: var(--hd-line); margin: 2px auto 10px; touch-action: none;
}
.hd-sheet__head { display: flex; align-items: flex-start; gap: 10px; touch-action: none; }
.hd-sheet__heading { flex: 1; min-width: 0; }
.hd-sheet__title { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.hd-sheet__subtitle { margin: 4px 0 0; font-size: .88rem; color: var(--hd-hint); }
.hd-sheet__close, .hd-sheet__back {
  flex: none; min-width: 44px; min-height: 44px;
  background: none; border: none; color: var(--hd-hint);
  font-size: 1rem; cursor: pointer;
}
.hd-sheet__body { overflow-y: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
.hd-sheet__summary { margin: 0 0 12px; font-weight: 600; }
.hd-sheet__text { margin: 0 0 12px; line-height: 1.6; }
.hd-sheet__note { margin: 0 0 10px; color: var(--hd-hint); }
.hd-sheet__section { margin: 0 0 16px; }
.hd-sheet__section-title {
  margin: 0 0 8px; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hd-hint);
}
.hd-sheet__links { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-sheet__link {
  min-height: 44px; padding: 10px 14px;
  background: var(--hd-paper); color: var(--hd-text);
  border: 1px solid var(--hd-line); border-radius: 12px;
  font: inherit; text-align: left; cursor: pointer;
}
.hd-sheet__link:hover { border-color: var(--hd-accent); }
.hd-chip {
  display: inline-block; padding: 6px 10px; margin: 0 6px 6px 0;
  background: var(--hd-paper); border: 1px solid var(--hd-line);
  border-radius: 999px; font-size: .82rem; color: var(--hd-hint);
}
.hd-sheet__chips { margin-bottom: 12px; }
.hd-sheet__retry {
  min-height: 44px; padding: 11px 18px;
  background: var(--hd-accent); color: var(--hd-accent-text);
  border: none; border-radius: 12px; font: inherit; cursor: pointer;
}
.hd-sheet__skeleton { display: flex; flex-direction: column; gap: 10px; }
.hd-skeleton-line {
  height: 13px; border-radius: 7px; background: var(--hd-line);
  animation: hd-pulse 1.2s ease-in-out infinite;
}
.hd-skeleton-line:nth-child(2) { width: 92%; }
.hd-skeleton-line:nth-child(3) { width: 68%; }
@keyframes hd-pulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .hd-sheet, .hd-backdrop, .hd-skeleton-line { transition: none; animation: none; }
}

/* На широком экране шторка перестаёт быть шторкой: она встаёт боковой панелью
   справа, и карта во время чтения остаётся видна — так устроен эталон. Место
   под панель резервирует оболочка (webapp/styles.css), поэтому холст под неё
   не уезжает, а панель стоит там всегда — резервировать полосу под то, чего
   на экране нет, значит оставить справа пустоту (docs/adr/0012).
   Порог тот же, что у WIDE_QUERY в canvas.js. */
@media (min-width: 1000px) {
  .hd-sheet {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--hd-side-sheet);
    max-width: none;
    max-height: 100vh;
    margin: 0;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius: 18px 0 0 18px;
    box-shadow: -12px 0 40px rgba(33, 29, 22, .25);
  }
  /* Панель свойств присутствует всегда — так в эталоне, и так место справа
     занято делом, а не зарезервировано впустую (docs/adr/0012). «Закрыто»
     на широком экране означает подсказку вместо карточки. */
  .hd-sheet--hidden { transform: none; visibility: visible; }
  /* Панель не модальная: карта рядом остаётся живой, затемнять её незачем. */
  .hd-sheet__grip { display: none; }
  .hd-backdrop { display: none; }
}