/* ==========================================================================
   Анализ партий GarboChess JS (templates/tools/analysis.html,
   static/chess/analysis/analysis.js). Подключается после main.css и
   chess/board/board.css и берёт их переменные и компоненты: доску (.cb),
   список ходов (.chess-moves), навигацию (.chess-nav), карточки.

   Раскладка переключается контейнерными запросами: на узком экране всё
   идёт столбцом (доска, навигация, ходы, вкладки, FEN), на широком - доска
   с ходами слева и вкладки справа.
   ========================================================================== */

.an {
  container: an / inline-size;
  /* Доска целиком помещается на экране под шапкой сайта. */
  --board-max: max(300px, calc(100vh - 230px));
}
@supports (height: 100svh) {
  .an { --board-max: max(300px, calc(100svh - 230px)); }
}

.an-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "board" "nav" "position" "moves" "side" "fields";
  gap: 12px;
}
.an-board { grid-area: board; min-width: 0; }
.an-grid > .chess-nav { grid-area: nav; }
.an-position { grid-area: position; }
.an-moves { grid-area: moves; }
.an-fields { grid-area: fields; }
.an-side { grid-area: side; min-width: 0; container: an-side / inline-size; }

.an-board .cb { max-width: min(var(--board-max), 640px); margin-inline: auto; }

@container an (min-width: 860px) {
  .an-grid {
    grid-template-columns: minmax(300px, min(var(--board-max), 620px)) minmax(340px, 560px);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "board side"
      "nav side"
      "position side"
      "moves side"
      "fields side";
    justify-content: center;
    align-items: start;
    column-gap: 22px;
  }
  .an-board .cb { max-width: none; }
  .an-moves { max-height: 220px; }
}

/* На телефоне доска - от края до края экрана. */
@media (max-width: 640px) {
  .an-board { margin-inline: -20px; }
  .an-board .cb { border-radius: 0; box-shadow: none; }
}

/* ---------- Текущий ход и очередь хода ---------- */
.an-position {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
}
.an-turn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.an-turn strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.an-turn [data-turn-text] { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.an-turn-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.an-turn[data-color="w"] .an-turn-mark { background: #F2EDE0; }
.an-turn[data-color="b"] .an-turn-mark { background: #111; border-color: var(--muted); }

.an-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.an input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }

/* ---------- FEN и ссылка ---------- */
.an-fields { padding: 14px 16px 16px; }
.an-label {
  display: block;
  margin: 0 0 6px;
  color: var(--hint);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.an-fields .an-label:not(:first-child) { margin-top: 14px; }
.an-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.an-inline input { flex: 1 1 220px; min-width: 0; }
.an-inline .btn { flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap; }
.an input[data-fen],
.an input[data-link],
.an input[data-ed="fen"],
.an textarea[data-pgn] {
  font-family: var(--mono);
  font-size: 0.82rem;
}
.an-error { margin: 6px 0 0; color: var(--danger); font-size: 0.86rem; line-height: 1.45; }
.an-error[hidden],
.an-message[hidden] { display: none; }
.an-message { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.45; }
.an-message[data-tone="good"] { color: var(--link-green); }
.an-message[data-tone="bad"] { color: var(--danger); }

/* ---------- Вкладки ---------- */
.an-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs [role="tab"] {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.an-tabs [role="tab"]:hover { color: var(--text); }
.an-tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.an-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.an-panel {
  padding: 16px 0 0;
}
@container an-side (max-width: 420px) {
  .an-tabs [role="tab"] { padding: 10px 9px; font-size: 0.88rem; }
}
.an-panel[hidden] { display: none; }
.an-subtitle { margin: 20px 0 10px; font-size: 1rem; }

.an-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.an .btn .icon { width: 16px; height: 16px; }
.an .btn:has(.icon) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Настройки движка ---------- */
.an-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
}
.an-settings label span,
.an-ed-fields label span {
  display: block;
  margin-bottom: 4px;
  color: var(--hint);
  font-size: 0.82rem;
  font-weight: 600;
}
.an-settings select { padding: 8px 10px; }
.an-settings select:disabled { opacity: 1; color: var(--muted); }
.an-settings .btn { grid-column: 1 / -1; justify-self: start; padding-block: 9px; }

/* ---------- Вариант движка и оценка ---------- */
.an-engine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.an-preview { width: 100%; max-width: 280px; margin-inline: auto; }
.an-preview-board { cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); }
.an-preview-nav {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  text-align: center;
}
.an-preview-nav button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-block);
  color: var(--text);
  cursor: pointer;
}
.an-preview-nav button:hover:not(:disabled) { background: var(--bg-hover); color: var(--link); }
.an-preview-nav button:disabled { opacity: 0.4; cursor: default; }
.an-preview-nav .icon { width: 20px; height: 20px; }
.an-preview-caption { min-width: 0; line-height: 1.3; }
.an-preview-caption strong { display: block; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-preview-caption span { color: var(--hint); font-size: 0.8rem; }

.an-info-head { display: flex; align-items: center; gap: 14px; }
.an-score {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.an-score[data-side="w"] { background: #EAE3D2; border-color: #EAE3D2; color: #1D1B16; }
.an-score[data-side="b"] { background: #111; border-color: var(--border); color: #F2EDE0; }

.an-status { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.an-status[data-state="done"] { color: var(--link-green); }
.an-status[data-state="off"] { color: var(--hint); }
.an-status-dots { display: none; gap: 4px; }
.an-status[data-state="busy"] .an-status-dots { display: inline-flex; }
.an-status-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: an-dots 1s ease-in-out infinite;
}
.an-status-dots i:nth-child(2) { animation-delay: 0.15s; }
.an-status-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes an-dots {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.an-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 14px 0 0;
}
.an-facts dt { color: var(--hint); font-size: 0.8rem; font-weight: 600; }
.an-facts dd { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Вариант целиком: ходы - кнопки, показанный на доске отмечен. */
.an-pv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-block);
}
.an-pv[hidden] { display: none; }
.an-pv .chess-move-number { padding-left: 4px; }
.an-pv button {
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.an-pv button:hover { background: var(--bg-hover); }
.an-pv button.active { background: var(--accent); color: var(--accent-text); }

@container an-side (min-width: 470px) {
  .an-engine { grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); align-items: start; }
  .an-preview { max-width: none; }
}

/* ---------- График оценки ---------- */
.an-graph canvas {
  display: block;
  width: 100%;
  height: 170px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-block);
  cursor: crosshair;
  touch-action: pan-y;
}

/* ---------- Редактор позиции ---------- */
.an-ed-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
}
.an-ed-board {
  --cb-light: #EFDAB5;
  --cb-dark: #B88762;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: repeating-conic-gradient(var(--cb-dark) 0 25%, var(--cb-light) 0 50%) 0 0 / 25% 25%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  container-type: inline-size;
}
.an-ed-square { position: relative; min-width: 0; touch-action: manipulation; cursor: pointer; }
.an-ed-square .cb-piece-image { position: absolute; inset: 0; touch-action: none; }
.an-ed-square.ghost .cb-piece-image { opacity: 0.3; }
.an-ed-square.drag-over { box-shadow: inset 0 0 0 3px rgba(32, 104, 46, 0.8); }
.an-ed-coord {
  position: absolute;
  font-size: clamp(8px, 2.6cqi, 12px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  color: var(--cb-dark);
}
.an-ed-square.dark .an-ed-coord { color: var(--cb-light); }
.an-ed-coord.rank { top: 0.3em; left: 0.3em; }
.an-ed-coord.file { right: 0.3em; bottom: 0.3em; }

.an-palette {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 380px;
}
.an-palette button {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.an-palette button:hover { background: var(--bg-hover); }
/* Фигуры - на светлом поле, как на доске: так видны и чёрные. */
.an-palette button[data-tool]:not(.an-erase) { background: #E9D6B4; border-color: #E9D6B4; }
.an-palette button[data-tool]:not(.an-erase):hover { background: #F3E6CC; }
.an-palette button[aria-pressed="true"],
.an-palette button[aria-pressed="true"]:not(.an-erase) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.an-palette .an-erase[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); }
.an-palette .cb-piece-image { position: absolute; inset: 8%; }
.an-palette .an-erase {
  grid-column: 7;
  grid-row: 1 / span 2;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
}
.an-palette .an-erase .icon { width: 22px; height: 22px; }

/* Фигура под указателем при перетаскивании. */
.an-ed-drag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}
.an-editor.is-dragging,
.an-editor.is-dragging * { cursor: grabbing; }

@container an-side (min-width: 500px) {
  .an-ed-top { grid-template-columns: minmax(0, 380px) auto; justify-content: center; align-items: start; }
  .an-palette {
    grid-template-columns: repeat(2, 44px);
    grid-template-rows: repeat(6, 44px) auto;
    grid-auto-flow: column;
    width: auto;
  }
  .an-palette .an-erase { grid-column: 1 / span 2; grid-row: 7; aspect-ratio: auto; height: 40px; }
}

.an-ed-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}
.an-ed-fields select,
.an-ed-fields input { padding: 8px 10px; }

.an-castling {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0;
  padding: 8px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.an-castling legend { padding: 0 6px; color: var(--hint); font-size: 0.82rem; font-weight: 600; }
.an-castling label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }

.an input.is-valid { border-color: var(--accent-2); }
.an input.is-invalid { border-color: var(--danger); }

/* ---------- Хранилище ---------- */
.an-repo-list { margin: 0; padding: 0; list-style: none; }
.an-repo-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.an-repo-item:first-child { border-top: 1px solid var(--border); }
.an-repo-text { display: grid; gap: 2px; min-width: 0; }
.an-repo-date { color: var(--hint); font-size: 0.82rem; }
.an-repo-moves { color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.an-repo-actions { display: flex; gap: 6px; }

/* ---------- PGN и информация ---------- */
.an textarea[data-pgn] { min-height: 190px; }
.an-about p { margin: 0 0 12px; color: var(--muted); }
.an-about ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.an-about li { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .an-status-dots i { animation: none; opacity: 1; }
}