/* Блоки к статье о кличках питомцев.

   Отдельный файл, а не строки в style.css: блоки стоят в одной статье,
   а style.css встраивается в каждую страницу блога. Подключается только
   там, где в тексте есть шорткод [клички:…] — так же, как скрипт
   калькулятора.

   Цвета фирменные: кошки — розовый акцент, собаки — зелёный, серым те,
   кого не удалось разобрать по товарам.

   Внутри блоков нет ни списков, ни figure: разметка собрана из div и
   span. Статья набирается в .prose, и правила оттуда били точнее наших
   («.prose ul > li::before» весит больше, чем «.pn li::before»), поэтому
   в подсказках вылезали розовые маркеры, а отступы обнулялись. Пока в
   блоке нет тегов, на которые .prose нацелен, спорить не с чем. */

.pn {
  margin: 2rem 0;
  padding: 1.5rem var(--block-pad);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font-family: var(--font-ui);
  --pn-cat: var(--accent);
  --pn-dog: var(--good);
  --pn-other: #c9c8ce;
}

.pn__cap {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.2;
  text-align: left;
  color: var(--ink);
}

/* ── Столбики по годам ─────────────────────────────────────────── */

.pn__cols {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  /* Высота поля фиксирована: иначе столбики прыгали бы вслед за
     самым высоким годом, и сравнивать глазами стало бы нечего. */
  min-height: 15rem;
  padding-top: 0.5rem;
}

.pn__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.pn__total {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.pn__stack {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  height: var(--h);
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.pn__seg { display: block; height: var(--v); }
.pn__seg--cat { background: var(--pn-cat); }
.pn__seg--dog { background: var(--pn-dog); }
.pn__seg--other { background: var(--pn-other); }

.pn__year { font-size: 0.95rem; font-weight: 700; }
.pn__sub { font-size: 0.8rem; color: var(--ink-3); }

.pn__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.pn__key { display: inline-flex; align-items: center; gap: 0.4rem; }
.pn__key::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: var(--pn-other);
}
.pn__key--cat::before { background: var(--pn-cat); }
.pn__key--dog::before { background: var(--pn-dog); }

/* ── Полосы рейтинга ───────────────────────────────────────────── */

.pn__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.pn__tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.pn__tabs button {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.pn__tabs button:hover { border-color: var(--ink-3); }

.pn__tabs button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--ink);
  color: #fff;
}

.pn__bars { margin: 0; padding: 0; }

.pn__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 3.6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.28rem 0;
  font-size: 0.95rem;
}

.pn__name { overflow-wrap: anywhere; }

.pn__bar {
  display: block;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--line-soft);
}

.pn__bar i {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: 999px;
  background: var(--pn-cat);
  transition: width 0.25s ease;
}

.pn[data-pn-kind="dog"] .pn__bar i { background: var(--pn-dog); }

.pn__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pn__row--theme {
  grid-template-columns: 12rem 1fr 3.6rem;
  row-gap: 0.1rem;
  padding: 0.5rem 0;
}

.pn__ex {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.pn__note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-3);
}

@media (max-width: 40rem) {
  .pn { padding-inline: 1rem; }
  .pn__row { grid-template-columns: 6.2rem 1fr 3.1rem; font-size: 0.88rem; }
  .pn__row--theme { grid-template-columns: 7.5rem 1fr 3.1rem; }
  /* На узком экране в первой строке кличка и доля, во второй мелким
     серым вид. Раньше доля уезжала вниз и строка подсказки занимала
     два этажа с пустотой посередине. */
  .pn__sug-item { grid-template-columns: 1fr auto; }
  .pn__sug-name { grid-column: 1; grid-row: 1; }
  .pn__sug-share { grid-column: 2; grid-row: 1; min-width: 0; }
  .pn__sug-meta { grid-column: 1; grid-row: 2; }
  .pn__cols { gap: 0.3rem; min-height: 12rem; }
  /* На узком экране столбики ужимаем целиком, вместе с подписями:
     высота приходит с сервера в точках и сама не подстроится. */
  .pn__stack { height: calc(var(--h) * 0.7); }
  .pn__total { font-size: 0.72rem; }
  .pn__year { font-size: 0.8rem; }
  .pn__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pn__bar i { transition: none; }
}

/* ── Поиск по кличкам ──────────────────────────────────────────── */

.pn__search { position: relative; }

.pn__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.pn__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.pn__input:focus {
  outline: none;
  border-color: var(--pn-cat);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.pn__sug {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0.35rem 0 0;
  padding: 0;
  overflow: hidden;
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.pn__sug-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0 0.7rem;
  padding: 0.4rem 0.75rem;
  line-height: 1.25;
  cursor: pointer;
}

/* Разделители вместо промежутков: строк в подсказках до восьми, и на
   телефоне список с воздухом не помещается на экран целиком. */
.pn__sug-item + .pn__sug-item { border-top: 1px solid var(--line-soft); }

.pn__sug-item:hover,
.pn__sug-item.is-active { background: var(--accent-wash); }

.pn__sug-meta { font-size: 0.8rem; color: var(--ink-3); }

.pn__sug-share {
  min-width: 3.6rem;
  text-align: right;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pn__card {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--line-soft);
}

.pn__card-name {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.pn__card-lines { margin: 0; font-size: 0.95rem; }
.pn__card-line + .pn__card-line { margin-top: 0.2rem; }
.pn__card-empty { margin: 0; font-size: 0.95rem; }

.pn__card-similar {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.pn__chip {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.pn__chip:hover { border-color: var(--pn-cat); color: var(--accent-ink); }