/* Shared role rows: one source/model/account line on desktop, natural wrap on
   narrow screens. Both wizard and Settings load this same component sheet. */
.model-role-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.model-role-group {
    min-width: 0;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-inner);
    background: var(--surface-tray);
}
.model-role-head,
.model-role-controls,
.model-role-order,
.model-role-context {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.model-role-head h4 {
    flex: 1;
    margin: 0;
    font-size: var(--type-body);
    line-height: var(--line-body);
    color: var(--text-primary);
    font-weight: 600;
}
.model-role-head { margin-bottom: var(--space-1); }
.model-role-notes { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); }
.model-role-notes > .model-role-details { flex-basis: 100%; }
.model-role-copy,
.model-role-meta,
.model-role-details {
    font-size: var(--type-meta);
    line-height: var(--line-meta);
    color: var(--text-meta);
}
.model-role-copy { margin: var(--space-1) 0 var(--space-2); }
.model-role-meta:empty { display: none; }
.model-role-meta { margin-top: var(--space-1); }
.model-role-row + .model-role-row { margin-top: var(--space-2); }
.model-role-controls > input,
.model-role-controls > .ui-model-chooser { flex: 2 1 220px; min-width: 0; }
.model-role-controls > select { flex: 1 1 170px; min-width: 0; }
.model-role-controls > [data-model-role-account] { flex-basis: 220px; }
.model-role-order { flex: 0 0 auto; }
.model-role-order .btn { --control-pad-x: var(--space-2); }
.model-role-details { margin-top: var(--space-1); }
/* The context/processing override is the shared disclosure (ui.css details.ui-disclosure: one caret, the quiet
   summary); its name and value are one span (one word space after the "·"), the value in meta ink. padding-inline cancels the 14px that .wizard-collapse summary
   leaks onto the nested Available subagents / Reviewers summaries. */
.model-role-details > summary { padding-block: var(--space-1); padding-inline: 0; }
/* Under a finger the narrow ↑ and ↓ part by their two sideways reaches, and a row's Details stands below its controls'
   reach, so no target covers its neighbour. */
@media (pointer: coarse) {
    .model-role-order { gap: var(--space-4); }
    .model-role-details { margin-top: var(--space-2); }
}
.model-role-details > summary [data-processing-summary] { display: inline-block; color: var(--text-meta); }  /* moves to the next line whole */
.model-role-editor button:focus-visible {
    outline: 2px solid var(--focus-accent-border);
    outline-offset: 2px;
}
/* A context field is the one field anatomy (ui.css .ui-field: label over control over help, left-aligned); its
   action stands beside the control, on the control's line. */
.model-role-context { flex-wrap: wrap; align-items: flex-start; padding-top: var(--space-1); }
.model-role-context label { flex: 0 1 auto; }
.model-role-context input { width: 150px; }
.model-role-context > .btn { margin-top: calc(var(--type-meta) * var(--line-meta) + var(--space-1)); }
.model-role-controls [hidden] { display: none; }
@media (max-width: 720px) {
    .model-role-controls { flex-wrap: wrap; }
    .model-role-controls > input,
.model-role-controls > .ui-model-chooser { flex-basis: 100%; order: 1; }
    .model-role-controls > select { flex-basis: 150px; }
    .model-role-order { order: 2; margin-left: auto; }
}