/* Connect CRM - classification (CRM Plus Phase 1, docs/blueprints/CRM-PLUS-PHASE1-CONTRACT.md section 5.2, session S2).
   Only what this area draws that the screen kit (apps/shared/kit.css) does not: `cl-` classes scoped
   to the area (role chips, the registration form, the form builder, lookup matches). Colour only
   from tokens (--cx-*, --pa-*), no !important, no @layer; Day and Dark come from connect-theme.css;
   Compact (<= 640 px) rules at the end. */

/* ---- role chips: the label always shown; the colour only repeats a choice the business made ---- */
.cl-roles { display: flex; flex-wrap: wrap; gap: var(--pa-s1); min-width: 0; }
.cl-role { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--pa-s1); max-width: 100%; padding: 2px 10px; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text); font-size: var(--cx-text-meta); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.cl-role.is-blue { background: var(--cx-info-soft); color: var(--cx-info-text); border-color: transparent; }
.cl-role.is-green { background: var(--cx-success-soft); color: var(--cx-success-text); border-color: transparent; }
.cl-role.is-amber { background: var(--cx-warning-soft); color: var(--cx-warning-text); border-color: transparent; }
.cl-role.is-red { background: var(--cx-danger-soft); color: var(--cx-danger-text); border-color: transparent; }
.cl-role-note { font-weight: 400; }
.cl-role-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); min-width: 0; }
.cl-role-meta { font-size: var(--cx-text-meta); color: var(--cx-text-2); overflow-wrap: anywhere; }
.cl-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s2); }
.cl-subhead { margin: var(--pa-s4) 0 var(--pa-s1); font-size: var(--cx-text-small); }

/* ---- the registration form and the builder ---- */
.cl-form { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.cl-section { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pa-s3); }
.cl-section > legend { padding: 0; margin-bottom: var(--pa-s2); font-weight: 700; font-size: var(--cx-text-section); color: var(--cx-text); }
.cl-type-picks { display: flex; flex-wrap: wrap; gap: var(--pa-s2); }
.cl-type-pick { display: inline-flex; align-items: center; gap: var(--pa-s2); min-height: var(--pa-tap); padding: 0 var(--pa-s3); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-pill); background: var(--cx-surface); color: var(--cx-text); cursor: pointer; }
.cl-type-pick:has(input:checked) { border-color: var(--cx-action); background: var(--cx-surface-2); font-weight: 600; }
.cl-type-pick:has(input:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cl-form [data-fkey][hidden] { display: none; }
.cl-form .pa-sheet-foot { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--pa-s6)); z-index: 1; }
.cl-lookup { display: flex; flex-direction: column; gap: var(--pa-s2); padding-top: var(--pa-s2); border-top: 1px solid var(--cx-border-soft); }
.cl-lookup-row { flex-wrap: wrap; }
.cl-lookup-row .pa-input { max-width: 10rem; }
.cl-matches .pa-row-main, .cl-dups .pa-row-main { min-width: 0; }
.cl-sources a { color: var(--cx-link); }
.cl-builder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s3); counter-reset: q; }
.cl-builder-row { padding: var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-sm); background: var(--cx-surface); }
.cl-builder-row fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pa-s2); }
.cl-asks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---- Compact ---- */
@media (max-width: 640px) {
  .cl-form .pa-sheet-foot { margin: 0 calc(-1 * var(--pa-s4)); }
  .cl-lookup-row .pa-input { max-width: none; font-size: 16px; }
  .cl-type-pick { flex: 1 1 calc(50% - var(--pa-s2)); }
}

/* The registration form's Address fold (GL's block, CRM Plus Global 5.6): the summary names it, so the block's
   own legend stays for screen readers only; the fold's control is a full touch target. */
.cl-more { margin-top: var(--pa-s3); }
.cl-more > summary { min-height: var(--pa-tap); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: var(--cx-text-small); }
.cl-more .gf-address > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-more:not([open]) > summary svg { transform: rotate(-90deg); }