/* The documentation page: one card with the filter bar over the guide cards, which open the website. */

.doc-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.doc-card[hidden] { display: none; }
.doc-card.in { animation: doc-rise .35s ease both; }
.doc-card-sub { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-4); }

.doc-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.doc-pager[hidden] { display: none; }

@keyframes doc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .doc-card.in { animation: none; }
}

@media (max-width: 720px) {
  .doc-card { grid-template-columns: minmax(0, 1fr) auto; }
  .doc-card .ic-flow { grid-column: 1 / -1; }
}