/* The builder's edit-mode chrome around a Code block (see code-block.js), not the site's theme. */

.code-block {
  --cb-line: rgba(18, 18, 18, 0.38);
  --cb-muted: rgba(18, 18, 18, 0.55);
  padding: 12px;
  border: 1.5px dashed var(--cb-line);
  border-radius: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.code-block [hidden] { display: none !important; }
.code-block.is-editing { border-style: solid; border-color: #121212; }

.cb-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cb-label {
  margin-right: auto;
  padding: 6px 8px;
  border-radius: 4px;
  background: #121212;
  color: #fff;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-bar button,
.cb-actions button {
  padding: 8px 14px;
  border: 1px solid #121212;
  border-radius: 6px;
  background: #fff;
  color: #121212;
  font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer;
}
.cb-bar .cb-reset,
.cb-actions .cb-cancel {
  border-color: transparent;
  background: transparent;
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
}
.cb-actions .cb-save { background: #121212; color: #fff; }

.cb-editor {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #121212;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.3);
}
.cb-editor textarea {
  display: block;
  width: 100%;
  min-height: 190px;
  padding: 14px;
  border: 0;
  border-radius: 6px;
  background: #1f2023;
  color: #e9e9e9;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
  tab-size: 2;
}
.cb-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.cb-mode {
  margin-right: auto;
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #666;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
}

/* An empty block (or one holding only comments) shows a placeholder, as in the editor. */
.cb-output:empty::before {
  content: "</>  Empty code block. Click Edit to add code.";
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 16px;
  border-radius: 4px;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(18, 18, 18, 0.035) 10px 20px);
  color: var(--cb-muted);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}
.code-block--small .cb-output:empty::before { min-height: 64px; }

.cb-hint {
  margin-top: 14px;
  color: var(--cb-muted, #666);
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

/* On the dark footer. */
.site-footer .code-block {
  --cb-line: rgba(255, 255, 255, 0.4);
  --cb-muted: rgba(255, 255, 255, 0.6);
}
.site-footer .cb-label { background: #fff; color: #121212; }
.site-footer .cb-bar .cb-reset { color: #fff; }