/* ccm-documents.css — shared styles live in ccm.css */

.doc-head {
  margin-left: 12px; padding: 48px 72px 32px;
}

.doc-body { max-width: 1100px; margin: 0 auto; padding: 0 72px 64px; }

.doc-intro {
  font-size: var(--text-base); font-weight: 300; line-height: 1.7;
  color: var(--text-secondary); max-width: 640px; margin-bottom: 32px;
}

.doc-frame-wrap {
  background: var(--surface2); border: 1px solid var(--border);
  height: 70vh; min-height: 480px; overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.doc-frame { width: 100%; height: 100%; border: 0; }

.doc-external-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red); text-decoration: none;
}
.doc-external-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .doc-head { padding: 32px 24px 24px; margin-left: 0; }
  .doc-body { padding: 0 24px 40px; }
  .doc-frame-wrap { height: 60vh; min-height: 400px; }
}