/* ============================================================================
   /gramoty/ — список → стопка листов.
   Листы уложены веером через --i: читаться должно как НЕСКОЛЬКО документов,
   а не один. Макет листа намеренно строгий — таким он и выходит из DOCX.
   ========================================================================= */

.grd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }

.grd__kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.grd__kind {
  border: 1px solid var(--lp-border); background: var(--lp-surface); color: var(--lp-muted);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .78rem; cursor: pointer;
  letter-spacing: .03em; transition: background .18s var(--lp-ease), color .18s var(--lp-ease), border-color .18s var(--lp-ease);
}
.grd__kind:hover { color: var(--lp-text); border-color: var(--lp-primary); }
.grd__kind.is-on { background: var(--lp-primary); border-color: var(--lp-primary); color: #fff; }

.grd__lbl { display: block; font-size: .85rem; color: var(--lp-muted); margin-bottom: 6px; }
.grd__area {
  width: 100%; border: 1px solid var(--lp-border); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: .92rem; line-height: 1.55; color: var(--lp-text);
  background: var(--lp-surface); resize: vertical; min-height: 150px;
}
.grd__area:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 1px; }
.grd__hint { margin: 8px 0 0; font-size: .8rem; color: var(--lp-muted); }

.grd__stack { position: relative; min-height: 260px; padding: 8px 0 0 0; }
.grd__empty { margin: 0; padding: 90px 12px; text-align: center; color: var(--lp-muted); border: 1px dashed var(--lp-border); border-radius: var(--lp-r-lg); }

.grd__sheet {
  position: absolute; inset: 0 auto auto 0; width: calc(100% - 26px);
  transform: translate(calc(var(--i) * 9px), calc(var(--i) * 9px));
  background: #fff; color: #16161d; border: 3px double #8b5e34; border-radius: 4px;
  padding: 16px 14px; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .13);
  transition: transform .3s var(--lp-ease);
}
.grd__sheet-h { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; }
.grd__sheet-c { margin: 0 0 4px; font-size: .78rem; font-style: italic; }
.grd__sheet-n { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.grd__sheet-r { margin: 0 0 6px; font-size: .76rem; font-style: italic; }
.grd__sheet-t { margin: 0; font-size: .78rem; }

.grd__count { margin: 12px 0 0; font-weight: 600; color: var(--lp-text); }
.grd__status { grid-column: 1 / -1; margin: 0; }

@media (prefers-reduced-motion: reduce) { .grd__sheet { transition: none; } }
@media (max-width: 760px) {
  .grd { grid-template-columns: 1fr; }
  .grd__stack { min-height: 230px; }
}