/* /achievements — переиспользует .ach*/.v3-panel/.v3-gate из farm.css и
   pool.css; здесь только то, чего у них нет: шапка страницы, сводные
   плашки, чуть более просторная карточка достижения и подсказка «чего
   не хватает». */

.ach-hero { padding: 28px; margin-bottom: 18px; }
.ach-hero h1 { margin: 8px 0 10px; }
.ach-hero .lede { max-width: 62ch; color: var(--dim); text-wrap: balance; }
.ach-hero__grid { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.ach-hero__stat { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--dim); }
.ach-hero__stat b { font-size: 22px; color: var(--text); }
#hero-bonus { color: var(--profit); }

.ach-cat { margin-top: 18px; }
.ach-cat:first-of-type { margin-top: 0; }

/* Карточка на всю ширину — просторнее, чем в кабинете: тут это весь смысл страницы. */
.ach--full { grid-template-columns: 40px 1fr 68px; padding: 16px 18px; }
.ach--full .ach__name { font-size: 15px; }
.ach--full .ach__desc { font-size: 13px; }
.ach--full .ach__pct { font-size: 14px; }
.ach__missing { font-size: 12px; color: var(--dim-2); margin-top: 6px; font-family: var(--mono); }

.ach-note { margin-top: 18px; }
.ach-note p { color: var(--dim); font-size: 13.5px; line-height: 1.7; margin: 0; max-width: 90ch; }

#ach-connect { margin-top: 18px; }

@media (max-width: 620px) {
  .ach-hero { padding: 20px; }
  .ach-hero__grid { gap: 18px; }
  .ach--full { grid-template-columns: 32px 1fr; }
  .ach--full .ach__pct { grid-column: 2; text-align: left; margin-top: 6px; }
}