/* Docs hub + article pages — same 8-bit dialect as vitrine */
.docs-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.docs-wrap h1 {
  font-family: var(--pixel);
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--gold, #c9a227);
  margin-bottom: 0.75rem;
}
.docs-wrap h2 {
  font-family: var(--pixel);
  font-size: 1.5rem;
  color: var(--cyan, #00e5ff);
  margin: 2.25rem 0 0.85rem;
}
.docs-wrap h3 {
  font-family: var(--pixel);
  font-size: 1.15rem;
  color: var(--gold, #c9a227);
  margin: 1.5rem 0 0.5rem;
}
.docs-lead {
  color: var(--text, #e8e6e1);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.docs-meta {
  color: var(--text-dim, #a8a6a1);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
.docs-meta a { color: var(--cyan, #00e5ff); }
.docs-wrap p,
.docs-wrap li {
  color: var(--text-dim, #a8a6a1);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.docs-wrap ul,
.docs-wrap ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.docs-wrap blockquote {
  border-left: 3px solid var(--gold, #c9a227);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  background: var(--surface, #12121a);
  color: var(--text, #e8e6e1);
}
.docs-wrap code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--cyan, #00e5ff);
}
.docs-wrap pre {
  background: var(--surface, #12121a);
  border: 2px solid var(--border, rgba(255, 255, 255, 0.1));
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  font-size: 0.85rem;
  color: var(--text, #e8e6e1);
}
.docs-wrap pre code { color: inherit; }
.docs-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-size: 0.85rem;
}
.docs-wrap th,
.docs-wrap td {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
  color: var(--text-dim, #a8a6a1);
}
.docs-wrap th {
  color: var(--gold, #c9a227);
  background: var(--surface, #12121a);
  font-family: var(--pixel);
  font-size: 1rem;
  font-weight: 400;
}
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.docs-card {
  display: block;
  border: 2px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--surface, #12121a);
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.docs-card:hover {
  border-color: var(--cyan, #00e5ff);
  background: rgba(0, 229, 255, 0.06);
}
.docs-card .tag {
  font-family: var(--pixel);
  font-size: 0.95rem;
  color: var(--green, #00c853);
  margin-bottom: 0.35rem;
}
.docs-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}
.docs-card p {
  margin: 0;
  font-size: 0.85rem;
}
.docs-card.external .tag { color: var(--text-dim, #a8a6a1); }
.docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.btn-8bit {
  font-family: var(--pixel);
  font-size: 1.15rem;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  border: 2px solid var(--cyan, #00e5ff);
  color: var(--bg, #0a0a0f);
  background: var(--cyan, #00e5ff);
}
.btn-8bit.secondary {
  background: transparent;
  color: var(--cyan, #00e5ff);
}
.footer {
  background: var(--surface, #12121a);
  border-top: 2px solid var(--border, rgba(255, 255, 255, 0.1));
  padding: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim, #a8a6a1);
}
.footer a { color: var(--gold, #c9a227); text-decoration: none; }