/* Controles compartidos de las demos; reutilizan los tokens de la home. */
.blueprint-demo { --demo-gap: 20px; }
.demo-workspace { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--site-radius-card); background: var(--surface); box-shadow: var(--shadow-flat); }
.demo-workspace fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.demo-grid { display: grid; gap: var(--demo-gap); }
.demo-grid > * { min-width: 0; }
.demo-field { display: block; margin: 0 0 20px; color: var(--ink); font-size: 14px; font-weight: 600; }
.demo-field :is(input, textarea, select) { display: block; width: 100%; max-width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--site-radius-button); background: var(--ivory); color: var(--ink); font: inherit; font-weight: 400; line-height: 1.6; }
.demo-field textarea { min-height: 150px; resize: vertical; }
.demo-field textarea[data-code] { font-family: var(--site-font-mono); font-size: 13px; }
.demo-field small { display: block; margin-top: 6px; color: var(--stone); font-weight: 400; }
.demo-workspace :is(input, textarea, select):focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.demo-workspace .cta-row { margin-top: 12px; }
.demo-workspace fieldset > :is(button, .cta-row) + :is(.demo-grid, .demo-field) { margin-top: 20px; }
.demo-workspace button { cursor: pointer; font-family: var(--site-font-sans); }
.demo-workspace .btn-primary { border: 1px solid var(--copper); }
.demo-workspace button:disabled { cursor: not-allowed; opacity: .5; }
.demo-status { margin-top: 24px; padding: 16px; border-left: 3px solid var(--teal); background: var(--teal-tint); color: var(--ink); overflow-wrap: anywhere; }
.demo-result { margin-top: 20px; overflow-wrap: anywhere; }
.demo-result li { font-size: 14px; }
.demo-result pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.demo-check { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0; font-size: 14px; }
.demo-check input { flex-shrink: 0; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--copper); }
.demo-help { margin-top: 16px; font-size: 14px; }
@media (min-width: 768px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .demo-workspace { padding: 20px; } }