/* Connect CRM - business (CRM Plus Phase 1, docs/blueprints/CRM-PLUS-PHASE1-CONTRACT.md section 5.1, session S1).
   Only what this area draws that the screen kit (apps/shared/kit.css) does not: `cr-` classes scoped
   to the area. 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. */

.cr-biz-title { display: flex; align-items: center; gap: var(--pa-s2); flex-wrap: wrap; margin-bottom: var(--pa-s2); min-width: 0; }
.cr-biz-another { margin-left: auto; }
.cr-biz-name { margin: 0; font-size: var(--cx-text-h3, 18px); overflow-wrap: anywhere; min-width: 0; }
.cr-biz-overview { display: flex; flex-direction: column; gap: var(--pa-s4); margin-bottom: var(--pa-s5, 20px); }
.cr-biz-facts { margin-top: var(--pa-s4); }
.cr-biz-form { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.cr-biz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cr-biz-group > legend { display: flex; align-items: center; gap: var(--pa-s2); padding: 0; margin-bottom: var(--pa-s2); color: var(--cx-text); font-size: var(--cx-text-body); font-weight: 650; }
.cr-biz-save { justify-content: flex-end; flex-wrap: wrap; }
.cr-biz-step-title { margin: 0; font-size: var(--cx-text-h3, 18px); }
.cr-biz-danger { display: flex; justify-content: space-between; align-items: center; gap: var(--pa-s4); flex-wrap: wrap;
  margin-top: var(--pa-s5, 20px); padding-top: var(--pa-s4); border-top: 1px solid var(--cx-border); }
.cr-biz-danger > div { min-width: 0; flex: 1 1 240px; }
.cr-biz-cell-act { text-align: right; white-space: nowrap; }
.cr-biz-subbar { padding-top: 0; }
.cr-biz-filter { max-width: 240px; }
.cr-biz-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* The setup journey (session O1, onboarding/setup.js): the steps beside the step on screen. */
.cr-ob { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.cr-ob-layout { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: var(--pa-s5, 20px); align-items: start; }
.cr-ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s1, 4px); }
.cr-ob-steps a, .cr-ob-locked { display: flex; align-items: center; gap: var(--pa-s3); padding: var(--pa-s2) var(--pa-s3); border-radius: var(--cx-radius); color: var(--cx-text); text-decoration: none; min-height: 44px; }
.cr-ob-steps a:hover { background: var(--cx-surface-2); }
.cr-ob-steps a[aria-current="step"] { background: var(--cx-action-soft); box-shadow: inset 3px 0 0 var(--cx-accent); }
.cr-ob-locked { color: var(--cx-text-3); }
.cr-ob-mark { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cx-border-strong); font-size: var(--cx-text-small, 13px); font-weight: 600; }
.cr-ob-step.is-done .cr-ob-mark { background: var(--cx-success-soft); border-color: var(--cx-success); color: var(--cx-success-text); }
.cr-ob-steps a[aria-current="step"] .cr-ob-mark { background: var(--cx-action); border-color: var(--cx-action); color: var(--cx-action-ink); }
.cr-ob-step-text { display: flex; flex-direction: column; min-width: 0; }
.cr-ob-step-name { font-weight: 600; overflow-wrap: anywhere; }
.cr-ob-step-state { font-size: var(--cx-text-small, 13px); color: var(--cx-text-meta); }
.cr-ob-body { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.cr-ob-head { display: flex; align-items: center; gap: var(--pa-s2); flex-wrap: wrap; }
.cr-ob-title { margin: 0; font-size: var(--cx-text-h3, 18px); }
.cr-ob-title:focus { outline: none; }   /* focused only to move the reader to the step; not a control */
/* The Profile step: exactly what is still needed, each opening the profile tab that holds it. */
.cr-ob-missing { display: flex; flex-direction: column; gap: var(--pa-s2); padding: var(--pa-s3); border: 1px solid var(--cx-warning);
  border-radius: var(--cx-radius); background: var(--cx-warning-soft); color: var(--cx-text); margin-bottom: var(--pa-s4); }
.cr-ob-missing strong { color: var(--cx-warning-text); }
.cr-ob-missing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pa-s2); }
.cr-ob-foot { flex-wrap: wrap; border-top: 1px solid var(--cx-border); padding-top: var(--pa-s3); }
.cr-ob-gap { flex: 1 1 auto; }

/* The CRM Plus dashboard (session O1, ../screens/dashboard.js): twelve cards, each its own figures. */
.cr-dash { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.cr-dash > .pa-head { margin-bottom: 0; }
.cr-dash-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pa-s1, 4px) var(--pa-s3); margin: calc(-1 * var(--pa-s2)) 0 0; overflow-wrap: anywhere; }
.cr-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--pa-s3); }
.cr-dash-card { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; margin: 0; }
.cr-dash-card-head { display: flex; align-items: center; gap: var(--pa-s2); min-width: 0; }
.cr-dash-card-head h2 { margin: 0; font-size: var(--cx-text-h3, 18px); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cr-dash-icon { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--cx-radius); background: var(--cx-surface-2); color: var(--cx-text-2); }
.cr-dash-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pa-s2) var(--pa-s3); margin: 0; }
.cr-dash-fig { min-width: 0; }
.cr-dash-fig dt { font-size: var(--cx-text-small, 13px); color: var(--cx-text-meta); overflow-wrap: anywhere; }
.cr-dash-fig dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cr-dash-fig dd a { color: var(--cx-text); text-decoration: none; }
.cr-dash-fig dd a:hover { color: var(--cx-link); text-decoration: underline; }
.cr-dash-acts { display: flex; flex-wrap: wrap; gap: var(--pa-s2); margin-top: auto; }
.cr-dash-lock { display: flex; align-items: center; gap: var(--pa-s2); margin: 0; color: var(--cx-text-2); font-weight: 600; }
.cr-dash-points { margin: 0; padding-left: 1.2em; color: var(--cx-text-body); }
.cr-dash-card.is-locked { border-style: dashed; }
.cr-dash-search { display: flex; gap: var(--pa-s2); flex-wrap: wrap; }
.cr-dash-search .pa-input { flex: 1 1 180px; min-width: 0; }
.cr-dash-next h2 { margin: 0 0 var(--pa-s2); font-size: var(--cx-text-h3, 18px); }
.cr-dash-next-list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--pa-s1, 4px); }
.cr-dash-next-list a { overflow-wrap: anywhere; }

/* Customer 360 across Connect (session O1, ../screens/contact.js): one panel per subscribed module. */
.cr-c360-modules { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; margin-top: var(--pa-s3); }
/* Hidden only when no subscribed module has a panel (contact.js sets `hidden`); never by `:empty`, because the
   area is observed for scrolling into view and an element with no box never intersects. */
.cr-c360-modules[hidden] { display: none; }

/* CRM Plus Global (session RG, onboarding/global.js and business/*): country first, Find Business, a value's
   source, list fields (identifiers, tax registrations) and the optional brand step. */
.cr-rg { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.cr-rg-h { margin: 0; font-size: var(--cx-text-body, 15px); font-weight: 600; }
.cr-rg-h:focus { outline: none; }   /* focused only to move the reader to the review; not a control */
.cr-rg-src { display: block; font-size: var(--cx-text-small, 13px); color: var(--cx-text-meta); overflow-wrap: anywhere; }
.cr-rg-value { overflow-wrap: anywhere; min-width: 0; }
.cr-rg-pick { display: flex; align-items: center; gap: var(--pa-s2); min-height: 44px; cursor: pointer; }
.cr-rg-pick input { inline-size: 20px; block-size: 20px; flex: 0 0 auto; accent-color: var(--cx-action); }
.cr-rg-field.is-conflict { box-shadow: inset 3px 0 0 var(--cx-warning); }
.cr-rg-now { color: var(--cx-warning-text); }
.cr-rg-list { border: 0; margin: var(--pa-s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s2); min-width: 0; }
.cr-rg-list > [data-rows] { display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-rg-list > .pa-btn { align-self: flex-start; }
.cr-rg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto; gap: var(--pa-s2); align-items: center; min-width: 0; }
.cr-rg-row > * { min-width: 0; }
/* GL's address and phone inputs (shared/global-fields.js) inside the Legal form for another country. */
.cr-rg-gf { display: flex; flex-direction: column; gap: var(--pa-s3); margin-top: var(--pa-s4); min-width: 0; }
.cr-rg-brand { display: flex; flex-direction: column; gap: var(--pa-s2); margin-top: var(--pa-s4); padding-top: var(--pa-s4); border-top: 1px solid var(--cx-border); }
.cr-rg-brand[hidden] { display: none; }

/* Compact (<= 640 px): row actions wrap under the row rather than run past the edge. */
@media (max-width: 640px) {
  .cr-ob-layout { grid-template-columns: minmax(0, 1fr); }
  /* The steps as a row of numbers; only the step on screen keeps its name in view (all keep it for a screen reader). */
  .cr-ob-steps { flex-direction: row; flex-wrap: wrap; gap: var(--pa-s1, 4px); }
  .cr-ob-steps a, .cr-ob-locked { flex: 0 0 auto; padding: var(--pa-s1, 4px); min-width: 44px; justify-content: center; }
  .cr-ob-steps a[aria-current="step"] { padding-right: var(--pa-s3); }
  .cr-ob-steps a:not([aria-current="step"]) .cr-ob-step-text, .cr-ob-locked .cr-ob-step-text, .cr-ob-step-state {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cr-dash-fig dd { font-size: 20px; }
  .cr-biz-cell-act { text-align: left; white-space: normal; }
  .cr-biz-save { justify-content: stretch; }
  .cr-biz-save > .pa-btn { flex: 1 1 auto; }
  .cr-biz-filter { max-width: none; }
  .cr-rg-row { grid-template-columns: minmax(0, 1fr); }
}

/* CONNECT_ONBOARDING_CATALOGUE_V1 (2026-10-25) - the onboarding completion step's way into My Products & Services. */
.cr-ob-catalogue { display: flex; align-items: center; gap: var(--pa-s3); margin: 0 0 var(--pa-s3); padding: var(--pa-s3) var(--pa-s4);
  border: 1px solid color-mix(in srgb, var(--cx-accent) 30%, var(--cx-border)); border-radius: var(--cx-radius-lg);
  background: color-mix(in srgb, var(--cx-accent) 7%, var(--cx-surface)); }
.cr-ob-catalogue > div { flex: 1 1 auto; min-width: 0; }
.cr-ob-catalogue p { margin: 2px 0 0; }
.cr-ob-catalogue-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--cx-accent); background: color-mix(in srgb, var(--cx-accent) 14%, var(--cx-surface)); }
@media (max-width: 640px) { .cr-ob-catalogue { flex-wrap: wrap; } .cr-ob-catalogue .pa-btn { width: 100%; justify-content: center; } }

/* CONNECT_CUSTOMER_PRODUCTS_V1 (2026-10-25) - Contact 360 > Products & services (contact.js productsPanel). */
.cr-c360-products .pa-row-title, .cr-c360-products .pa-row-sub { overflow-wrap: anywhere; }
/* The Product & Service Master's verified facts under each product (2026-11-02). */
.cr-c360-facts { margin-top: var(--pa-s1); font-size: var(--cx-text-small); color: var(--cx-text-2); }
.cr-c360-facts > summary { cursor: pointer; color: var(--cx-link); }
.cr-c360-facts dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--pa-s1) var(--pa-s3); margin: var(--pa-s2) 0 0; }
.cr-c360-facts dt { font-weight: 600; color: var(--cx-text); }
.cr-c360-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .cr-c360-facts dl { grid-template-columns: minmax(0, 1fr); } .cr-c360-facts dd { margin-bottom: var(--pa-s2); } }
/* CR_UI_TARGETS_V1 (2026-10-30): on a phone Register Another Business wraps under the name instead of running to the edge. */
@media (max-width: 640px) { .cr-biz-another { margin-left: 0; max-width: 100%; white-space: normal; } }