/* Generator: public form and the draft preview. Extends static/base.css. */

.generator-intro { max-width: 70ch; margin-bottom: var(--space-6); }
.generator-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .generator-grid { grid-template-columns: 1fr; } }
.generator-form textarea { min-height: 8rem; }
.generator-aside-heading { font-size: 1.05rem; margin-bottom: var(--space-3); }
.generator-example-title { font-weight: 700; font-size: 1.15rem; margin-bottom: var(--space-1); }
.generator-example-facts { margin-bottom: var(--space-2); }
.generator-example-brand { color: var(--muted); font-style: italic; }
.generator-steps { padding-left: 1.25rem; margin-bottom: 0; }
.generator-steps li { margin-bottom: var(--space-2); }

/* draft preview, laid out like a voucher page */
.draft-notice { margin-bottom: var(--space-5); }
.draft-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .draft-layout { grid-template-columns: 1fr; } }
.draft-header { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.draft-title { margin-bottom: var(--space-2); }
.draft-brand { font-size: 1.15rem; color: var(--muted); font-style: italic; margin-bottom: var(--space-2); }
.draft-facts { font-weight: 600; margin-bottom: var(--space-2); }
.draft-buybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); background: var(--paper-2); border-radius: var(--radius-sm); margin-bottom: var(--space-5); }
.attributes-list { margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); }
.attributes-row { display: flex; flex-direction: column; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.attributes-row dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.attributes-row dd { margin: 0; font-weight: 600; }
.draft-description p { margin-bottom: var(--space-4); }
.ai-disclosure { margin-top: var(--space-4); }
.draft-link { font-size: 0.85rem; word-break: break-all; }