/* Generator: public form and the draft preview. Extends static/base.css; token values only. */

.generator-intro { max-width: 70ch; margin-bottom: var(--s6); }
.generator-intro h1 { color: var(--navy); }
.generator-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 760px) { .generator-grid { grid-template-columns: 1fr; } }
.generator-form textarea { min-height: calc(var(--s8) * 2); }
.field-required { font-weight: 400; color: var(--text-muted); }
.generator-aside-heading { margin-bottom: var(--s3); color: var(--navy); }
.generator-example-title { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--navy); margin-bottom: var(--s1); }
.generator-example-facts { margin-bottom: var(--s2); }
/* inside .panel-soft (--paper-2) secondary text stays --text: --text-muted fails there */
.generator-example-brand { font-weight: 500; color: var(--text); }
.generator-steps { padding-left: var(--s5); margin-bottom: 0; }
.generator-steps li { margin-bottom: var(--s2); }

/* draft preview, laid out like a voucher page */
.draft .breadcrumbs, .draft .crumbs { margin-bottom: var(--s4); }
.draft-notice { margin-bottom: var(--s5); }
.draft-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 760px) { .draft-layout { grid-template-columns: 1fr; } }
.draft-header { border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.draft-title { margin-bottom: var(--s2); color: var(--navy); }
.draft-brand { font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--text-muted); margin-bottom: var(--s2); }
.draft-facts { font-weight: 600; margin-bottom: var(--s2); }
.draft-buybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); background: var(--paper-2); color: var(--text); border-radius: var(--r-md); margin-bottom: var(--s5); }
.draft-attributes h2, .draft-description h2 { color: var(--navy); margin-bottom: var(--s3); }
.attributes-list { margin: 0 0 var(--s5); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2) var(--s4); }
.attributes-row { display: flex; flex-direction: column; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.attributes-row dt { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.attributes-row dd { margin: 0; font-weight: 600; }
.draft-description p { margin-bottom: var(--s4); }
.ai-disclosure { margin-top: var(--s4); }
.draft-link { font-size: 14px; word-break: break-all; }