/* «Бобро росте» (hero-stages.md): префікс .hb-. */
.hb-card { margin: 4px 0 6px; }
.hb-card-row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.hb-card-hero .hb-card-fox, .hb-card-fox { width: 88px; height: 97px; display: block; overflow: visible; }
.hb-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--label); }
.hb-next { font-size: 15px; font-weight: 700; color: var(--label) !important; line-height: 1.35; text-wrap: balance; }
.hb-track { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.hb-track::before, .hb-track::after { content: ""; position: absolute; top: 22px; left: 24px; height: 4px; border-radius: 2px; }
.hb-track::before { right: 24px; background: var(--fill2, var(--fill)); }
.hb-track::after { width: calc((100% - 48px) * var(--st, 0) / 3); background: var(--green); }
.hb-step { position: relative; display: flex; flex-direction: column; align-items: center; width: 48px; }
.hb-dot { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; background: var(--bg2); }
.hb-dot svg { display: block; }
.hb-dot.done { border: 2px solid var(--green); }
.hb-dot.cur { width: 56px; height: 56px; margin: -4px 0; background: var(--accent-tint); border: 3px solid var(--accent); }
.hb-dot.cur svg { width: 32px; height: 32px; }
.hb-dot.next { border: 2px dashed var(--label2); }
.hb-dot.next svg { opacity: .55; }
.hb-dot.later { background: var(--fill); border: 2px dashed var(--fill2, var(--label3)); }
.hb-dot.later svg { opacity: .3; }
.hb-check { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.hb-check svg { width: 12px; height: 12px; color: #fff; }
.hb-here { position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg2); border: 2px solid #3b2f2a; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; }
.hb-here svg { width: 24px; height: 24px; display: block; }
.hb-lbl { margin: 6px 0 0 0; width: 76px; font-size: 12px; font-weight: 700; color: var(--label2); text-align: center; line-height: 1.25; text-wrap: balance; }
.hb-dot.cur + .hb-lbl { font-weight: 800; color: var(--label); margin-top: 10px; }
.hb-how { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px !important; font-weight: 700; color: var(--label2) !important; }
.hb-flower { width: 16px; height: 16px; flex: none; display: inline-grid; }
.hb-flower svg { width: 16px; height: 16px; }
.hb-flower:empty { display: none; }

@media (min-width: 701px) {
  .hb-card { display: grid; grid-template-columns: 120px 1fr; column-gap: 20px; }
  .hb-card-row { display: contents; }
  .hb-card-hero { grid-row: 1 / span 4; align-self: center; }
  .hb-card-fox { width: 120px; height: 132px; }
  .hb-card-body { grid-column: 2; }
  .hb-track, .hb-how { grid-column: 2; }
  .hb-lbl { width: 140px; }
}

/* Лист-свято: основа — .tl-up (town-life.css) */
.hb-up-hero { width: 144px; height: 158px; margin: 4px auto 6px; }
.hb-up-hero > svg, .hb-up-fox { width: 100%; height: 100%; display: block; overflow: visible; }
.hb-up-unlock { display: flex !important; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 14px; background: var(--fill); font-size: 14px; font-weight: 700; color: var(--label) !important; text-align: left; }
.hb-up-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.hb-up-ic svg { width: 32px; height: 32px; }
@media (min-width: 401px) { .hb-up-hero { width: 160px; height: 176px; } }
.hb-up .btn:focus-visible, .hb-up .tl-close:focus-visible { outline: 3px solid var(--label); outline-offset: 3px; }

.hb-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: hb-pop .45s .25s both; }
@keyframes hb-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hb-pop { animation: none; } }
html.no-motion .hb-pop { animation: none; }