/* Легенда игры: обложка и пять сцен. Одни и те же правила обслуживают
   наложение поверх кабинета и отдельную страницу `/legend` - разметка у них
   общая, различается только оболочка.

   Порядок правил важен для одного: ничего не спрятано по умолчанию. Плавное
   появление сцен включает признак `data-legend-motion`, который ставит скрипт
   и только там, где сам же умеет его снять. Без скрипта, на телефоне и при
   запрете анимации виден весь текст сразу.

   Цвета взяты из `app.css`: тот же тёмно-синий шапки, та же синяя кнопка и та
   же оранжевая рамка фокуса. */

.legend-dialog {
  /* Полный экран: собственные поля и рамка `dialog` сняты, иначе браузер
     центрирует коробку и оставляет просвет по краям. */
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #f4f6f8;
  color: #172033;
  overflow: hidden;
}
.legend-dialog::backdrop { background: rgba(10, 18, 32, .82); }
/* `showModal` поднимает диалог в верхний слой браузера, поэтому никакой
   `z-index` страницы его не перекрывает и назначать свой не нужно. */

.legend-page {
  margin: 0;
  background: #f4f6f8;
  color: #172033;
  font-family: system-ui, sans-serif;
}

/* Родной `hidden` сильнее любой раскладки этого файла. Без этой строки
   `display: flex` у кнопок показывал бы их и без скрипта: кнопки «До» и
   «После» без обработчика мертвы, а «Пауза» до запуска показа не значит
   ничего. Правило ограничено историей и ничего на странице не трогает. */
.legend-story [hidden] { display: none !important; }

.legend-story {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}
.legend-story,
.legend-story * { box-sizing: border-box; }
.legend-page .legend-story { height: 100svh; }

.legend-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .5rem clamp(.75rem, 3vw, 1.5rem);
  border-bottom: 1px solid #d8dde5;
  background: white;
}
.legend-brand,
.legend-bar-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.legend-brand { color: #172033; font-size: .78rem; white-space: nowrap; }
.legend-brand img { display: block; width: 7rem; height: auto; }
.legend-print-author-tag { display: none; }
.legend-scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.legend-page .legend-scroller { overflow: visible; }
.legend-scroller:focus { outline: none; }

.legend-control {
  min-height: 44px;
  min-width: 44px;
  padding: .7rem 1.1rem;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: .3rem;
  background: #175ea8;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.legend-control--quiet {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, .55);
}
.legend-control--start { font-size: 1.05rem; margin-top: 1rem; }
.legend-control:focus-visible,
.legend-scroller :focus-visible { outline: 3px solid #ef9b0f; outline-offset: 2px; }
.legend-control[aria-pressed="true"] { background: #17365d; border-color: #17365d; }
.legend-bar .legend-control--quiet {
  color: #17365d;
  border-color: #8693a6;
}
.legend-bar .legend-control--quiet[aria-pressed="true"] { color: white; }

.legend-scene {
  display: grid;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3rem) clamp(.75rem, 4vw, 3rem);
  max-width: 1820px;
  margin-inline: auto;
}
.legend-figure { margin: 0; }
.legend-heading {
  margin: 0 0 .6rem;
  color: #17365d;
  font-size: clamp(1.4rem, 4.5vw, 2.4rem);
  line-height: 1.2;
}
.legend-text p { margin: 0 0 .8rem; font-size: clamp(1rem, 1.9vw, 1.15rem); }
.legend-image,
.legend-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: .5rem;
  background: #e4e9ef;
}

/* Пара «до/после». Без скрипта оба снимка стоят один над другим и подписаны:
   сравнение доступно и так. Скрипт поднимает две кнопки, и тогда снимки
   ложатся в одну клетку сетки: рисунок крупнее, а «До» сменяется «После»
   растворением. Переключение остаётся за человеком. */
.legend-pair { display: grid; gap: .6rem; }
.legend-shot { margin: 0; }
.legend-shot figcaption {
  margin-top: .35rem;
  font-weight: 700;
  color: #17365d;
}
.legend-pair-controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.legend-pair-controls .legend-control {
  background: white;
  color: #17365d;
  border: 1px solid #8693a6;
}
.legend-pair-controls .legend-control[aria-pressed="true"] {
  background: #17365d;
  color: white;
  border-color: #17365d;
}
/* Снимок вне очереди спрятан `visibility`, а не `display`: он должен уехать
   из чтения с экрана и из порядка обхода, но остаться на месте, иначе
   растворять нечего. Задержка `.45s` у `visibility` держит его видимым
   ровно столько, сколько идёт переход; у показанного снимка задержка снята.

   Площадка снимков держит место и высоту сама: оба снимка лежат в одной
   клетке сетки и заданы размерами в разметке, поэтому при смене ничего не
   дергается и указатель не теряет цель. Кто из снимков показан, говорит
   `data-legend-pair-shown` - его ставит скрипт и по кнопке, и по наведению.
   CSS здесь отвечает только за растворение. */
.legend-pair-stage { display: grid; gap: .6rem; }
.legend-pair[data-legend-pair-switched] .legend-pair-stage { gap: 0; }
.legend-pair[data-legend-pair-switched] .legend-shot {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
/* Подписи «До» и «После» сняты вместе с раскладкой в стопку: наложенные друг
   на друга, они читались бы одна поверх другой. Что показано сейчас, называют
   кнопки - у нажатой стоит `aria-pressed="true"`. */
.legend-pair[data-legend-pair-switched] .legend-shot figcaption { display: none; }
.legend-pair[data-legend-pair-switched][data-legend-pair-shown="before"] .legend-shot[data-legend-shot="before"],
.legend-pair[data-legend-pair-switched][data-legend-pair-shown="after"] .legend-shot[data-legend-shot="after"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.legend-note {
  margin: 0;
  padding: 0 clamp(.75rem, 4vw, 3rem) clamp(1.5rem, 6vw, 3rem);
  max-width: 1180px;
  margin-inline: auto;
  color: #586779;
  font-size: .9rem;
}

/* Обложка. На узком экране это обычная сцена: рисунок, потом заголовок и
   кнопка. Текст поверх рисунка появляется только там, где под него есть
   ширина, - иначе подложка съедает строки. */
[data-legend-cover] .legend-image { border-radius: 0; }

@media (min-width: 768px) {
  .legend-scene {
    grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr);
    min-height: 100%;
  }
  .legend-scene[data-legend-side="right"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.63fr);
  }
  .legend-scene[data-legend-side="right"] .legend-figure { order: 2; }
  .legend-scene[data-legend-cover] {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    max-width: none;
    position: relative;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  [data-legend-cover] .legend-figure {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
  }
  [data-legend-cover] .legend-image {
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center bottom;
  }
  [data-legend-cover] .legend-text {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(2rem, 8vw, 5rem) clamp(1.5rem, 6vw, 5rem);
    color: white;
    background: linear-gradient(to top, rgba(10, 18, 32, .92) 35%, rgba(10, 18, 32, 0));
    max-width: 46rem;
  }
  [data-legend-cover] .legend-heading {
    color: white;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
  }
  [data-legend-cover] .legend-text p { font-size: clamp(1.05rem, 2vw, 1.35rem); }
}

@media (min-width: 768px) and (max-height: 700px) {
  [data-legend-cover] .legend-text {
    padding: clamp(1rem, 4vh, 2rem) clamp(1.5rem, 6vw, 5rem);
  }
  [data-legend-cover] .legend-heading {
    font-size: clamp(1.8rem, 6vh, 3rem);
  }
  [data-legend-cover] .legend-text p {
    margin-bottom: .45rem;
    font-size: clamp(1rem, 2.5vh, 1.15rem);
  }
  .legend-control--start { margin-top: .4rem; }
}

/* Появление сцены при прокрутке. Признак ставит скрипт, и он же снимает его
   с каждой сцены, до которой дошла прокрутка, поэтому непоказанного текста не
   остаётся ни при одном исходе. */
[data-legend-motion] .legend-scroller { scroll-behavior: smooth; }
[data-legend-motion] .legend-scene {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s ease, transform .7s ease;
}
[data-legend-motion] .legend-scene[data-legend-seen] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Запрет анимации сильнее любого признака: ни плавной прокрутки, ни
     проявления, ни скрытой сцены. Листает человек. */
  [data-legend-motion] .legend-scroller { scroll-behavior: auto; }
  /* Снимки меняются мгновенно: ни растворения, ни задержки у `visibility`. */
  .legend-pair[data-legend-pair-switched] .legend-shot {
    transition-duration: 0s;
    transition-delay: 0s;
  }
  [data-legend-motion] .legend-scene {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  @page { margin-bottom: 16mm; }
  .legend-bar { display: none; }
  .legend-print-author-tag {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    font-size: 9pt;
  }
  .legend-scene { break-inside: avoid; }
}