/* One Brief form: known buyer inputs first, optional context and constraints next. */
@layer components {
  :root[data-register] .persona-creation.page { gap: var(--space-3); }
  .persona-creation .page-head__sub { max-width: 68ch; }
  .brief-template { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
  .brief-form { gap: var(--space-3); }
  .brief-name { max-width: 38rem; }
  .brief-start { min-width: 0; }
  .brief-start__head { display: grid; gap: var(--space-1); }
  .brief-start__head h2 { font-size: var(--type-card-title); font-weight: 600; }
  :root[data-register='card'] .brief-start { padding: 28px 32px; border-radius: 24px; background: var(--surface-raised); }
  :root[data-register='type'] .brief-start { padding-block: var(--space-3); border-block: 1px solid var(--line); }
  .brief-start .catalog-field:has(#persona_brief_job_title) { grid-column: 1 / -1; max-width: 38rem; }
  .brief-start #persona_brief_job_title { height: 3rem; min-height: 3rem; }
  .brief-form .attribute-grid { padding-block: var(--space-2); }
  .brief-options { border-top: 1px solid var(--line); padding-block: var(--space-1); min-width: 0; }
  .brief-options > summary { cursor: pointer; font-weight: 600; padding-block: var(--space-2); min-height: 44px; }
  .brief-options > summary > span { font-size: var(--text-sm); font-weight: 400; color: var(--on-surface-muted); }
  .brief-options > summary:hover { color: var(--accent); }
  .brief-options[open] { display: grid; gap: var(--space-2); }
  .brief-additional__groups { display: grid; gap: var(--space-2); }
  .brief-age-fields { display: grid; gap: var(--space-2); min-width: 0; border: 0; }
  .brief-age-fields > legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); }
  .brief-age-fields .attribute-grid { padding: 0; }
  .template-choices { max-width: 54rem; }
  .template-choice__item { gap: var(--space-2); }
  :root[data-register='card'] .template-choice__item { padding: 32px; border-radius: 24px; }
  .template-choice__action { margin-top: var(--space-2); }
  .template-choice__item .page-head__kicker { color: var(--on-surface-muted); }
  .template-choice__action { color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
  .template-choice__item:hover .template-choice__action { text-decoration: underline; text-underline-offset: 3px; }
  :root:has(.brief-form) { scroll-padding-bottom: 10rem; }
  .brief-form :is(input, select, textarea, summary) { scroll-margin-block: var(--space-3); }
}

@media (max-width: 40rem) {
  :root[data-register='card'] :is(.brief-start, .template-choice__item) { padding: var(--space-3); }
  .brief-start__head .field__hint { font-size: var(--text-md); }
  .brief-actions .btn { padding-inline: var(--space-2); }
  .brief-form .attribute-grid { gap: var(--space-2); }
}