/* =========================================================
   FORM RENDER — shared styles for any place a Lumara form is
   actually rendered live: the builder's Design/Preview modes,
   the template library's preview modal, and (in a later phase)
   the real published public form page.

   Colors, radius, shadow, spacing, and typography are supplied
   per-render by the scoped <style> block buildDesignCss()/
   LumaraFormRenderer inject against #formPreviewRoot — this file
   only covers structure that doesn't vary by design.
   ========================================================= */

.device-toggle { display: inline-flex; background: var(--bg-surface-2); border-radius: var(--radius-full); padding: 3px; flex-shrink: 0; }
.device-toggle button {
  border: none; background: none; padding: 0.4rem 0.9rem; border-radius: var(--radius-full);
  font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary);
}
.device-toggle button.is-active { background: var(--bg-surface); color: var(--lumara-purple-600); box-shadow: var(--shadow-sm); }

.device-frame { margin: 0 auto; transition: max-width var(--duration-base) var(--ease-standard); }
.device-desktop { max-width: 720px; }
.device-tablet { max-width: 540px; }
.device-mobile { max-width: 360px; }

.form-render { padding: var(--space-6); }
.form-render-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.form-render-logo {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.02em;
}
.form-render-brandname { font-weight: 700; font-size: 0.85rem; }
.form-render-tagline { font-size: 0.75rem; }
.form-render-title { margin-bottom: 4px; font-family: var(--font-display); font-weight: 800; }
.form-render-desc { margin-bottom: var(--space-5); }
.form-render-footer { margin-top: var(--space-6); padding-top: var(--space-4); text-align: center; font-size: 0.72rem; }