/* ============================================================
   DCode — Notion-inspired dark code theme
   Overrides the global dotted-notebook aesthetic with a clean,
   Notion-like sans-serif page.
   ============================================================ */

/* ── Page-level override (kills dotted bg, cursive fonts) ── */
body.dcode-active .notebook-page {
  background-image: none;
  background-color: #191919;
}

.dcode-page {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #e0e0e0;
  line-height: 1.7;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
}

/* ── Typography overrides inside .dcode-page ── */
.dcode-page .note-title {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.dcode-page .note-subtitle {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #888;
  letter-spacing: 0;
  margin-bottom: 1.5rem;
}

.dcode-page .section-heading {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.4rem;
  margin: 2rem 0 0.8rem;
}

.dcode-page .note-text {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #c8c8c8;
  line-height: 1.75;
}

.dcode-page .note-text strong {
  color: #ffffff;
  font-weight: 600;
}

.dcode-page .divider {
  background: rgba(255,255,255,0.06);
  margin: 1.8rem 0;
}

/* ── Toggle section override ── */
.dcode-page .toggle-section {
  border: none;
  border-radius: 0;
  background: transparent;
}

.dcode-page .toggle-btn {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #888;
  padding: 0.6rem 0;
}

.dcode-page .toggle-btn:hover {
  background: transparent;
  color: #ccc;
}

/* ── Flow / pipeline override ── */
.dcode-page .draw-box {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 1.2rem;
}

.dcode-page .draw-title {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
}

.dcode-page .flow {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.dcode-page .flow-box {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  font-size: 0.82rem;
  color: #ccc;
  padding: 0.5rem 1rem;
}

.dcode-page .flow-arrow {
  font-family: -apple-system, sans-serif;
  color: #555;
}

/* ── Code block wrapper (inherits global snippet card) ── */
.dc-code-wrap {
  padding: 0;
  overflow: hidden;
  white-space: normal;
}

/* ── Top bar with dots + language label ── */
.dc-code-wrap .dc-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 4px;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7a7a8e;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
}

/* dc-code-wrap uses .dc-lang for label + dots, so hide the global ::before */
.dc-code-wrap::before { display: none; }
.dc-code-wrap::after  { display: none; }

/* macOS dots inside lang bar */
.dc-code-wrap .dc-lang::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
}

/* ── Code block ── */
.dc-code {
  display: block;
  background: transparent;
  padding: 0 20px 20px;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  color: #d4d4d4;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}

/* ── Copy button — uses global .snippet-copy-btn from style.css ── */

/* ── Syntax colors (inherited from global style.css) ── */

/* ── Step section ── */
.dc-step {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #cba6f7;
  padding: 12px 16px;
  margin: 18px 0 8px 0;
  border-radius: 0 8px 8px 0;
}

.dc-step .step-label {
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #cba6f7;
  margin-bottom: 4px;
}

.dc-step .note-text {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 0;
}

/* ── Tip callout ── */
.dc-tip {
  background: rgba(137, 180, 250, 0.05);
  border: 1px solid rgba(137, 180, 250, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 14px 0;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #bbb;
  line-height: 1.65;
}

.dc-tip strong {
  color: #89b4fa;
}

/* ── Inline code ── */
.dc-inline {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  color: #eb5757;
}