/* ========================
   ПЕРЕСЫЛКА — якорь у заголовка
   ======================== */

/* Отдельный файл по той же причине, что и rooms.css: у зоны свой кэш CSS на четыре часа, и
   посетитель с прежним стилем получил бы разметку, для которой в его копии правил нет. Файл,
   которого ни один браузер не видел, приезжает вместе с HTML, где он назван.

   Якорь дописывает app.js — в разметке его нет, поэтому здесь нет и риска, что он останется
   голым «#» при выключенном JavaScript. */

.anchor-link {
  margin-left: .4em;
  color: var(--line-2);
  text-decoration: none;
  /* Не тянет строку и не сдвигает заголовок: висит в своей ширине, выравнивание по базовой. */
  font: inherit;
  opacity: 0;
  transition: opacity .15s;
}

/* Появляется, когда заголовок под курсором, и ВСЕГДА при фокусе с клавиатуры — иначе для
   клавиатуры его бы не существовало. На касании :hover не наступает, поэтому там он виден сразу. */
h2:hover > .anchor-link,
h3:hover > .anchor-link,
h4:hover > .anchor-link,
.anchor-link:focus-visible {
  opacity: 1;
}

.anchor-link:hover,
.anchor-link:focus-visible {
  color: var(--accent);
}

@media (hover: none) {
  .anchor-link {
    opacity: .45;
  }
}

/* Подтверждение — рядом, а не всплывашкой: ответ на действие должен быть там, где действие. */
.anchor-link[data-said]::after {
  content: attr(data-said);
  margin-left: .5em;
  font: 400 11px 'IBM Plex Mono';
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}