.card-grid, .source-grid, .template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.card-grid { margin-top: 24px; }
.card-grid h3 { margin: 0; font-size: 16px; }
.card-grid dl { margin: 0; display: grid; gap: 6px; }
.card-grid dt { font-size: 14px; color: var(--kb-surface-text-muted); }
.card-grid dd { margin: 0 0 12px; overflow-wrap: anywhere; }
.kb-inset p { margin-bottom: 0; }
.card-actions { display: flex; gap: 12px; flex-wrap: wrap; }
#surface-status { color: var(--kb-surface-text-muted); font-size: 14px; }
.source-grid figure { margin: 0; min-width: 0; }
.source-grid img { width: 100%; height: auto; display: block; }
.source-grid figcaption { margin-top: 8px; }
.kb-dialog h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.kb-dialog-header p { margin: 6px 0 0; font-size: 14px; line-height: 20px; }
.kb-dialog .kb-field { margin-top: 24px; }
.choice-fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.choice-fieldset legend { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.kb-choice { font-size: 14px; line-height: 20px; }
.kb-choice small { display: block; font-size: 12px; line-height: 18px; margin-top: 8px; color: inherit; }
.kb-dialog summary { cursor: pointer; margin-top: 16px; }
@media (max-width: 767px) { .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) { .card-grid, .source-grid, .choice-grid, .template-grid { grid-template-columns: 1fr; } .kb-dialog h2 { font-size: 18px; } }
/* Match the actual wizard's content gutters at the audited breakpoints. */
main { max-width: 1152px; padding: 32px; }
@media (max-width: 1023px) { main { padding: 24px; } }
@media (max-width: 639px) { main { padding: 16px 12px; } }