/* Explain choices beside their controls; keep the full inventory optional. */
@layer components {
  .discussion-setup { display: grid; gap: var(--space-3); min-width: 0; }
  .discussion-setup__head { display: grid; gap: var(--space-1); }
  .discussion-setup .field { max-width: 48rem; }
  .setup-hint, .discussion-setup__head p { font-size: var(--text-sm); color: var(--on-surface-muted); }
  .setup-context__value { padding-inline-start: var(--space-2); border-inline-start: 2px solid var(--line-strong); white-space: pre-wrap; }
  .setup-context { border: 0; padding: 0; margin: 0; min-width: 0; }
  .setup-context__choice { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .setup-inputs { display: grid; gap: var(--space-2); }
  .setup-input-list { padding-block: var(--space-2); font-size: var(--text-sm); }
  .setup-input-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-1); border-bottom: 1px solid var(--line); }
  .setup-input-list [data-input-status] { color: var(--on-surface-muted); font-size: var(--text-xs); text-align: end; flex: 0 0 10rem; }
  .research-form > .discussion-setup { padding-block-start: var(--space-3); border-top: 1px solid var(--line); }
  /* A Run's setup is numbered: its steps draw their own rules */
  .research-form > .discussion-setup:has(> .form-step) { padding-block-start: 0; border-top: 0; }
  :root[data-register] .chat-setup.page { gap: var(--space-3); }
  :root[data-register] .chat-setup .page-head { gap: var(--space-1); }
  :root[data-register] .chat-setup .page-head__sub { font-size: var(--text-md); font-weight: 400; max-width: 70ch; margin: 0; }

  .research-progress ol { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .research-progress li { display: flex; align-items: center; gap: var(--space-1); padding-block: var(--space-1); border-bottom: 2px solid transparent; color: var(--on-surface-muted); font-size: var(--text-sm); }
  .research-progress li[aria-current='step'] { border-color: var(--selection); color: var(--on-surface); font-weight: 700; }
  .research-progress li > span { font-variant-numeric: tabular-nums; }
  :root[data-register] .research-workspace.page { gap: var(--space-3); }
  :root[data-register] .research-workspace .page-head { gap: var(--space-1); }
  :root[data-register] .research-workspace .page-head__title { font-size: var(--text-3xl); margin: 0; max-width: 30ch; }
  :root[data-register] .research-workspace .page-head__sub { font-size: var(--text-md); font-weight: 400; margin: 0; max-width: 65ch; }
  :root[data-register] .research-workspace .research-form { background: var(--surface-raised); border: 0; border-radius: var(--radius-lg); padding: var(--space-4); gap: var(--space-3); }
  .research-workspace .persona-options > legend { font-size: var(--text-lg); font-weight: 700; }
  .research-workspace .persona-options__hint { grid-column: 1 / -1; }
  .research-workspace .persona-option { align-items: center; }
  .research-workspace .persona-option:has(input:checked) { border-color: var(--line-strong); background: var(--surface-control); }
  .research-workspace .persona-option .avatar { inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-md); }
  .persona-option__identity { min-width: 0; }
  .persona-option__identity > strong { display: block; font-size: var(--text-md); }
  .persona-option__identity > small:not(.status) { color: var(--on-surface-muted); }
  .persona-option-row { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }
  .persona-option-review { padding: 0 var(--space-2); font-size: var(--text-sm); color: var(--on-surface-muted); }
  .persona-option__identity .status { display: inline-flex; margin-top: var(--space-1); }
  :root[data-register] .group-empty { display: grid; justify-items: start; gap: var(--space-2); }
  .group-empty h2 { font-size: var(--text-lg); }
  .group-empty p { max-width: 50ch; }
  .group-readiness { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-lg); }
  .group-readiness h2 { font-size: var(--text-lg); }
  .group-readiness p { max-width: 65ch; color: var(--on-surface-muted); }
  .group-readiness ul { display: grid; gap: var(--space-2); width: 100%; }
  .group-readiness li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
  .group-readiness .avatar { inline-size: 44px; block-size: 44px; border-radius: var(--radius-sm); }
  .group-readiness .link-action { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
  .persona-group-return { display: grid; justify-items: start; gap: var(--space-1); grid-column: 1 / -1; }
  .persona-group-return ul { display: grid; gap: var(--space-1); }
  .persona-group-return a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
  .persona-group-return .btn, .group-readiness .btn { white-space: normal; text-align: start; max-width: 100%; }
  .persona-research-alternatives { border-top: 1px solid var(--line); padding-top: var(--space-2); }
  .research-source { display: grid; justify-items: start; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); min-width: 0; }
  .research-source h2 { font-size: var(--text-md); line-height: 1.35; overflow-wrap: anywhere; }
  .research-source .link-action { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
  :root[data-register] .research-library { max-inline-size: 56rem; gap: var(--space-3); }
  :root[data-register] .research-library .page-head__title { font-size: var(--text-2xl); }
  :root[data-register] .research-library .page-head__sub { font-size: var(--text-md); font-weight: 400; max-width: 55ch; }
  .saved-group-list { display: grid; gap: var(--space-2); }
  .saved-group { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); min-width: 0; }
  :root[data-register='card'] .saved-group { background: var(--surface-raised); }
  :root[data-register='type'] .saved-group { border-top: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
  .saved-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .saved-group__head > div { min-width: 0; }
  .saved-group__head h2 { font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
  .saved-group__portraits { display: flex; }
  .saved-group__portraits .avatar { inline-size: 36px; block-size: 36px; border-radius: var(--radius-sm); border: 2px solid var(--surface-raised); }
  .saved-group__portraits .avatar + .avatar { margin-inline-start: -8px; }
  .saved-group__question { font-size: var(--text-lg); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
  .saved-group__research { display: grid; gap: var(--space-1); }
  .saved-group__meta, .saved-group__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
  .saved-group__meta > :not(.status), .saved-group__hint { color: var(--on-surface-muted); }
  .saved-group__foot { justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--space-1); }
  .saved-group__foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .saved-group__action { font-weight: 600; }
  .saved-group__history { color: var(--on-surface-muted); }
  .saved-research-empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); }
  .saved-research-empty h2 { font-size: var(--text-xl); }
  .saved-research-empty p { max-width: 50ch; }
  .research-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  .research-section-head h2 { font-size: var(--type-section-title); }
  .research-mode h3 { font-size: var(--type-card-title); }
  .research-section-head > a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .research-people, .research-modes { display: grid; gap: var(--space-2); }
  .research-group-details > summary { min-height: 2.75rem; padding-block: var(--space-2); cursor: pointer; font-weight: 600; }
  .research-group-details[open] > .research-people { margin-top: var(--space-2); }
  .research-members, .research-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .research-members .group-member, .research-mode { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-raised); }
  .research-member__identity { display: flex; align-items: center; gap: var(--space-2); }
  .research-member__identity > div { min-width: 0; }
  .research-member__identity .avatar { inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-md); }
  .research-member__identity .item__title { font-size: var(--text-lg); }
  .research-member__identity p { font-size: var(--text-sm); }
  .research-members details { font-size: var(--text-sm); }
  .research-members summary { padding-block: var(--space-2); cursor: pointer; min-height: 2.75rem; }
  .research-mode { grid-template-rows: auto auto 1fr auto; }
  .research-mode p:not(.page-head__kicker) { color: var(--on-surface-muted); max-width: 50ch; }
  .research-mode .btn { justify-self: start; margin-top: var(--space-2); }
  .research-audience > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; cursor: pointer; list-style: none; }
  .research-audience > summary::-webkit-details-marker { display: none; }
  .research-audience summary strong, .research-audience summary small { display: block; }
  .research-audience summary small { font-size: var(--text-sm); color: var(--on-surface-muted); }
  .research-audience__portraits { display: flex; flex-shrink: 0; padding-inline-end: 8px; }
  .research-audience .avatar { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-md); outline: 3px solid var(--surface-page); margin-inline-end: -8px; }
  .question-examples > summary, .research-group-details > summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
  .question-examples > summary::-webkit-details-marker, .research-group-details > summary::-webkit-details-marker { display: none; }
  .research-audience ul { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); }
  .research-audience li { display: grid; font-size: var(--text-sm); }
  .research-audience li > span { color: var(--on-surface-muted); }
  .research-workspace .research-question { max-width: 100%; gap: var(--space-2); }
  .research-question > .field__label { font-size: var(--text-xl); }
  .question-examples { display: grid; gap: var(--space-2); }
  .question-examples > summary { font-weight: 600; cursor: pointer; padding-block: var(--space-2); min-height: 2.75rem; }
  .question-examples[open] > * + * { margin-top: var(--space-2); }
  .question-example { display: grid; width: 100%; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-control); text-align: start; }
  .question-example > span { font-size: var(--text-md); color: var(--on-surface-muted); }
  .question-example .question-example__action { font-size: var(--text-sm); color: var(--on-surface); text-decoration: underline; text-underline-offset: 3px; }
  .question-example:hover { background: var(--surface-sunken); }
  .research-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--surface-emphasis); color: var(--on-emphasis); border-radius: var(--radius-lg); }
  .research-next h2 { font-size: var(--text-xl); margin-block: var(--space-1) var(--space-2); max-width: 32ch; }
  .research-next p:not(.page-head__kicker) { max-width: 60ch; color: var(--on-emphasis-muted); }
  .research-next__actions { display: grid; justify-items: start; gap: var(--space-2); }
  .research-next__actions > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .research-next__actions > a:not(.btn) { color: var(--on-emphasis); font-size: var(--text-sm); }
  .research-next :focus-visible { outline-color: var(--on-emphasis); }
}

/* Dark sections own their foreground, including beneath unlayered page typography. */
:root[data-register] .research-next .page-head__kicker { color: var(--on-emphasis-muted); }

@media (max-width: 40rem) {
  .setup-hint, .discussion-setup__head p, .setup-input-list { font-size: var(--text-md); }
  .setup-input-list [data-input-status] { flex-basis: 7rem; }
  :root[data-register] .research-workspace .page-head__title { font-size: var(--text-2xl); }
  :root[data-register] .research-workspace.page { gap: 1rem; }
  .research-workspace > .study-bar__crumbs:not(:has(a:nth-of-type(2))) { display: none; }
  .research-workspace > .study-bar__crumbs:has(a:nth-of-type(2)) > span,
  .research-workspace > .study-bar__crumbs:has(a:nth-of-type(2)) > a:first-child { display: none; }
  :root[data-register] .research-workspace .research-form { padding: var(--space-3); }
  .research-workspace .research-question > .field__label { font-size: var(--text-lg); }
  .research-workspace .research-question .textarea { min-height: 6rem; }
  .research-workspace:has(.research-source) .research-question .textarea { min-height: 10rem; }
  .research-members, .research-mode-grid { grid-template-columns: minmax(0, 1fr); }
  .research-next { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
}