/* _build/doc-styles.css
 *
 * Shared components lifted out of functional-index-ranks.html, which was the
 * only page using them. Loaded as a stylesheet rather than inlined so the
 * bytes are cached once across the site instead of duplicated into every
 * page — the guide pages already carry 17k of inline CSS each and there is
 * no reason to add to it.
 *
 * Currently: the next-step card pair that closes a guide. The ranks page had
 * this and nothing else did, so every other guide simply stopped at the last
 * paragraph.
 *
 * Markup is generated by build-doc-layout.js between the
 * <!-- NEXT_STEPS_START --> / <!-- NEXT_STEPS_END --> markers. Do not
 * hand-edit the markup; it is regenerated on every build.
 */

.next-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  margin: 2.5rem 0 0;
}

.next-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.25rem;
  border: 1px solid var(--border, rgba(18,21,27,.1));
  border-radius: 12px;
  text-decoration: none;
  background: #fff;
  transition: border-color .2s, transform .2s;
}

.next-card:hover {
  border-color: var(--gold, #b99356);
  transform: translateY(-2px);
}

.next-card-gold {
  background: rgba(217,188,133,.09);
  border-color: rgba(217,188,133,.5);
}

.next-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute, #6b7280);
  font-weight: 700;
}

.next-title {
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy, #12151b);
  line-height: 1.25;
}

.next-sub {
  font-size: 13px;
  color: var(--mute, #6b7280);
  line-height: 1.5;
}

/* One column on a phone, and drop the lift — a transform on tap reads as a
   glitch on touch devices rather than as feedback. */
@media (max-width: 640px) {
  .next-row { grid-template-columns: 1fr; }
  .next-card { transition: none; }
  .next-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .next-card { transition: none; }
  .next-card:hover { transform: none; }
}