/* Data & code page. Reuses .method-grid/.method from methods.css and .tbl-wrap from main.css. */
.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 1.5em 0;
}
.dcard {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
}
.dcard h3 {
  font-size: 1.08rem;
  margin: 4px 0 .4em;
  font-weight: 600;
}
.dcard p { margin: 0 0 .9em; font-size: .96rem; color: var(--ink-soft); }
.dcard p code { font-size: .82em; }
.dtag {
  font-family: system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.dlink {
  margin-top: auto;
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.dlink:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .dgrid { grid-template-columns: 1fr; gap: 12px; }
}