/* Shared styling for the live embedded framework demos on the examples pages.
   The framework emits class names (reactive-row / reactive-button / …); this
   sheet gives them a look that matches the site. */

.demo {
  padding: 28px; margin: 8px 0 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}

.reactive-row {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 1.2rem; font-variant-numeric: tabular-nums; font-weight: 600;
}

.reactive-button {
  font: inherit; font-size: 1rem; min-width: 2.2em; padding: 6px 12px; cursor: pointer;
  color: #fff; background: var(--accent); border: 0; border-radius: 8px; line-height: 1.4;
}
.reactive-button:hover { background: var(--accent-hover); }

.reactive-input {
  font: inherit; padding: 7px 11px; width: 6em;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px;
}

.reactive-loading {
  margin-top: 10px; padding: 8px 14px;
  display: inline-flex; gap: 12px; align-items: center;
  background: var(--accent-tint); color: var(--accent-hover); border-radius: 8px; font-weight: 550;
}
.reactive-loading .reactive-button { background: var(--accent-2); }

.demo ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.demo li { display: flex; gap: 10px; align-items: center; font-size: 1rem; font-weight: 500; }
.demo li .reactive-button { min-width: 0; padding: 2px 9px; font-size: 0.85rem; background: var(--surface); color: var(--muted); border: 1px solid var(--border-strong); }
.demo li .reactive-button:hover { color: var(--accent); border-color: var(--accent); }
.reactive-checkbox { width: 1.05em; height: 1.05em; accent-color: var(--accent); cursor: pointer; }