/* /einbinden/ only. Tokens from site.css. Split hero: copy left, code right; framed live preview; facts list. */

/* ---------- shared: code panel ---------- */
.codebox {
  --code-bg: #10252a;
  background: var(--code-bg);
  color: #d5e7e8;
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(16, 37, 42, 0.12), 0 12px 32px -12px rgba(16, 37, 42, 0.35);
  overflow: hidden;
}
.codebox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(213, 231, 232, 0.16);
}
.codebox__label { font-size: var(--fs-small); color: #a9c3c6; }
.codebox pre {
  margin: 0; padding: var(--space-4);
  font: 0.9375rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-width: none;
}
.codebox pre::selection, .codebox pre *::selection { background: #2f6c78; color: #fff; }
.codebox .t { color: #ffffff; }
.codebox .s { color: #9fd3d6; }

.copy-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target); padding: 8px 16px;
  border: 0; border-radius: var(--radius-input);
  background: #e8f0f0; color: var(--teal);
  font-size: var(--fs-small); font-weight: 600;
  transition: background-color 120ms ease-out;
}
.copy-btn:hover { background: #ffffff; }
.copy-btn:focus-visible { outline-color: #9fd3d6; }
.copy-btn svg { width: 18px; height: 18px; flex: none; }
.copy-btn .i-done { display: none; }
.copy-btn[data-done] .i-copy { display: none; }
.copy-btn[data-done] .i-done { display: block; }

/* ---------- shared: browser frame around the live preview ---------- */
.browser {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 42, 46, 0.06), 0 24px 48px -24px rgba(28, 42, 46, 0.28);
}
.browser__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: #f3f7f7; border-bottom: 1px solid #c9d6d7;
}
.browser__url {
  flex: 1; min-width: 0;
  padding: 2px var(--space-3);
  background: var(--surface); border: 1px solid #c9d6d7; border-radius: var(--radius-pill);
  font-size: var(--fs-small); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 28rem;
}
.browser iframe { display: block; width: 100%; height: 900px; border: 0; }

/* ---------- shared: facts list (term + answer, hairlines) ---------- */
.facts { max-width: none; display: grid; }
.facts > div { padding-block: var(--space-4); border-top: 1px solid #c3d0d1; display: grid; gap: var(--space-1); }
.facts > div:last-child { border-bottom: 1px solid #c3d0d1; }
.facts dt { font-weight: 600; }
.facts dd { color: var(--ink-2); max-width: 60ch; }

.emb .stand { color: var(--ink-2); }

/* ---------- split hero ---------- */
.emb .split { display: grid; gap: var(--space-6); align-items: center; }
.emb .split__copy > * + * { margin-block-start: var(--space-4); }
.emb .split__copy h1 { max-width: 18ch; }
.emb .ticks { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.emb .ticks li { display: flex; gap: var(--space-3); align-items: baseline; margin: 0; }
.emb .ticks svg { width: 18px; height: 18px; flex: none; color: var(--teal); transform: translateY(3px); }
.emb .hint { font-size: var(--fs-small); color: var(--ink-2); margin-block-start: var(--space-3); }
.emb .facts { grid-template-columns: 1fr; column-gap: var(--space-7); }
@media (min-width: 60rem) {
  .emb .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); }
  .emb .facts { grid-template-columns: 1fr 1fr; }
  .emb .facts > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid #c3d0d1; }
}

@media (prefers-reduced-motion: reduce) { .copy-btn { transition: none; } }