/* Connect CRM - Branding Studio (CRM Plus Global, docs/blueprints/CRM-PLUS-GLOBAL-CONTRACT.md section 5.3, session BS).
   Only what this area draws that the screen kit (apps/shared/kit.css) does not: `bs-` classes scoped to the
   area. Connect's own parts take colour only from tokens (--cx-*, --pa-*); no !important, no @layer; Day and
   Dark come from connect-theme.css. The one exception is `.bs-preview`: it shows a business's own colours, set
   by the screen as --bs-* custom properties on that element, and they are used nowhere outside it.
   Compact (<= 640 px) rules at the end. */

/* ---- which unit, and where its brand comes from --------------------------------------------- */
.bs-unit { display: flex; flex-wrap: wrap; align-items: end; gap: var(--pa-s2) var(--pa-s4); margin-bottom: var(--pa-s4); min-width: 0; }
.bs-unit .pa-field { min-width: 0; }
.bs-unit .pa-meta { margin: 0; overflow-wrap: anywhere; }

/* ---- editor beside its preview -------------------------------------------------------------- */
.bs-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--pa-s6); align-items: start; }
.bs-form, .bs-side { min-width: 0; }
.bs-side { position: sticky; top: var(--pa-s4); }
.bs-side h3, .bs-extract h3 { margin: 0 0 var(--pa-s1); font-size: var(--cx-text-section); }
.bs-form .pa-tabpanel { padding-top: var(--pa-s4); }
.bs-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pa-s3); margin-top: var(--pa-s5);
  padding-top: var(--pa-s4); border-top: 1px solid var(--cx-border-soft); }
.bs-form-foot .pa-save-state { margin: 0 auto 0 0; }

/* ---- a colour: the native picker beside its #rrggbb text, and the live ratio under it -------- */
.bs-colour { display: flex; align-items: center; gap: var(--pa-s2); min-width: 0; }
.bs-colour input[type="color"] { inline-size: 44px; block-size: 44px; flex: none; padding: 2px; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  background: var(--cx-surface); cursor: pointer; }
.bs-colour input[type="color"]:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.bs-colour .pa-input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.pa-help.bs-bad { color: var(--cx-danger-text); }

/* ---- website colours -------------------------------------------------------------------------- */
.bs-extract { border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); padding: var(--pa-s4); margin-bottom: var(--pa-s5); }
.bs-extract .pa-inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--pa-s2); }
.bs-extract .pa-inline-form .pa-field { flex: 1 1 240px; min-width: 0; margin: 0; }
.bs-suggest { margin-top: var(--pa-s3); overflow-wrap: anywhere; }
.bs-suggest-lead { margin: 0 0 var(--pa-s2); }
.bs-swatches { list-style: none; margin: 0 0 var(--pa-s3); padding: 0; display: flex; flex-direction: column; gap: var(--pa-s2); }
.bs-swatch { display: flex; align-items: center; gap: var(--pa-s3); min-width: 0; }
.bs-chip { display: inline-grid; place-items: center; inline-size: 44px; block-size: 32px; flex: none; border-radius: var(--cx-radius-sm);
  border: 1px solid var(--cx-border); font-weight: 600; }
.bs-found summary { cursor: pointer; color: var(--cx-link); padding: var(--pa-s2) 0; }
.bs-found summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.bs-found ul { margin: 0; padding-inline-start: var(--pa-s5); }

/* ---- logo, icon, favicon, brand images ------------------------------------------------------- */
.bs-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--pa-s3); margin: var(--pa-s5) 0; }
.bs-file { display: flex; gap: var(--pa-s3); align-items: flex-start; border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); padding: var(--pa-s3); min-width: 0; }
.bs-file-main { min-width: 0; display: flex; flex-direction: column; gap: var(--pa-s1); }
.bs-file-main .pa-help { margin: 0; }
.bs-file-thumb { inline-size: 72px; block-size: 72px; flex: none; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--cx-border); border-radius: var(--cx-radius-sm); background: var(--cx-surface-2); overflow: hidden; }
.bs-file-thumb img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.bs-images { margin-top: var(--pa-s4); }
.bs-image-list { list-style: none; margin: var(--pa-s2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pa-s3); }
.bs-image-list li { display: flex; flex-direction: column; align-items: center; gap: var(--pa-s1); }
.bs-image-list img { inline-size: 96px; block-size: 72px; object-fit: cover; border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-border-soft); }

/* ---- versions ---------------------------------------------------------------------------------- */
.bs-versions .pa-row-sub { overflow-wrap: anywhere; }

/* ---- previews: the business's colours, here and only here ------------------------------------ */
.bs-pv-controls { display: flex; flex-wrap: wrap; gap: var(--pa-s2); margin: var(--pa-s2) 0 var(--pa-s3); }
.bs-preview { border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: var(--pa-s3); background: var(--bs-paper); color: var(--bs-ink); }
.bs-preview.is-mobile { max-inline-size: 360px; margin-inline: auto; }
.bs-pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pa-s3); }
.bs-preview.is-mobile .bs-pv-grid { grid-template-columns: minmax(0, 1fr); }
.bs-pv { margin: 0; min-width: 0; border: 1px solid var(--bs-line); border-radius: var(--cx-radius-sm); padding: var(--pa-s3); overflow-wrap: anywhere; }
.bs-pv figcaption { font-size: var(--cx-text-small); color: var(--bs-muted); margin-bottom: var(--pa-s2); }
.bs-pv p { margin: var(--pa-s1) 0; color: var(--bs-muted); font-size: var(--cx-text-small); }
.bs-pv-logo { max-block-size: 40px; max-inline-size: 140px; object-fit: contain; }
.bs-pv-word { font-weight: 700; }
.bs-pv-doc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s3); flex-wrap: wrap; }
.bs-pv-doc-title { display: flex; flex-direction: column; text-align: end; }
.bs-pv-doc-title span { font-size: var(--cx-text-small); color: var(--bs-muted); font-variant-numeric: tabular-nums; }
.bs-pv-doc-rule { block-size: 4px; background: var(--bs-doc-accent); border-radius: 2px; margin: var(--pa-s2) 0; }
.bs-pv-doc-row, .bs-pv-doc-total { display: flex; justify-content: space-between; gap: var(--pa-s2); font-size: var(--cx-text-small); }
.bs-pv-doc-total { margin-top: var(--pa-s2); padding: var(--pa-s2); background: var(--bs-primary); color: var(--bs-on-primary); border-radius: var(--cx-radius-sm);
  font-variant-numeric: tabular-nums; }
.bs-pv-foot { border-top: 1px solid var(--bs-line); padding-top: var(--pa-s2); }
.bs-pv-mail-band { background: var(--bs-primary); color: var(--bs-on-primary); padding: var(--pa-s3); border-radius: var(--cx-radius-sm) var(--cx-radius-sm) 0 0; }
.bs-pv-mail-band .bs-pv-logo { background: var(--bs-paper); padding: 2px; border-radius: 4px; }
.bs-pv-mail-body { padding: var(--pa-s3) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--pa-s1); }
.bs-pv-btn { display: inline-block; padding: var(--pa-s2) var(--pa-s3); border-radius: var(--cx-radius-sm); background: var(--bs-accent); color: var(--bs-on-accent); font-weight: 600; font-size: var(--cx-text-small); }
.bs-pv-form-box { display: flex; flex-direction: column; gap: var(--pa-s1); padding: var(--pa-s3); background: var(--bs-form-bg); color: var(--bs-form-ink); border-radius: var(--cx-radius-sm); }
.bs-pv-label { font-size: var(--cx-text-small); }
.bs-pv-input { block-size: 28px; border: 1px solid var(--bs-line); border-radius: 4px; background: var(--bs-field); }
.bs-pv-btn.is-form { align-self: flex-start; margin-top: var(--pa-s2); background: var(--bs-form-accent); color: var(--bs-form-on); }
.bs-pv-portal-box { display: flex; flex-direction: column; gap: var(--pa-s1); padding: var(--pa-s3); background: var(--bs-portal-bg); color: var(--bs-portal-ink); border-radius: var(--cx-radius-sm); }
.bs-pv-portal-head { padding-bottom: var(--pa-s2); border-bottom: 3px solid var(--bs-portal-accent); margin-bottom: var(--pa-s2); }
.bs-pv-btn.is-portal { align-self: flex-start; background: var(--bs-portal-accent); color: var(--bs-portal-on); }

/* ---- the setup journey's brand step ------------------------------------------------------------- */
.bs-quick { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.bs-quick h2 { margin: 0; font-size: var(--cx-text-section); }
.bs-quick-site { display: flex; flex-wrap: wrap; align-items: end; gap: var(--pa-s2); }
.bs-quick-site .pa-field { flex: 1 1 240px; min-width: 0; margin: 0; }
.bs-quick-or { margin: var(--pa-s2) 0 0; font-weight: 600; }
.bs-quick-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--pa-s3); }
.bs-quick-foot { justify-content: flex-end; }

/* ---- Compact ------------------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .bs-layout { grid-template-columns: minmax(0, 1fr); }
  .bs-side { position: static; }
}
@media (max-width: 640px) {
  .bs-unit { flex-direction: column; align-items: stretch; }
  .bs-form-foot { justify-content: stretch; }
  .bs-form-foot .pa-btn { flex: 1 1 auto; }
  .bs-files { grid-template-columns: minmax(0, 1fr); }
  .bs-pv-grid { grid-template-columns: minmax(0, 1fr); }
}