/* Credentials owns its layout: legacy nl63/nl64 card grouping must not
   turn the reconciliation wrapper, page, or individual panels into columns.
   Scope to the component, so SPA navigation needs no global route flag. */
html body .member-react-safe-shell-v108:has(.nl-credential-reconcile-v330) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .member-react-safe-shell-v108 .main-area:has(.nl-credential-reconcile-v330) {
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-inline: clamp(12px, 2vw, 28px) !important;
  container-type: inline-size;
  container-name: credentials-workspace;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330,
html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 > .page,
html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .nl-credential-context {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(h1, h2, p) {
  white-space: normal !important;
  overflow-wrap: anywhere;
  max-width: 100% !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 > .page {
  padding-inline: 0 !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(.page-header, .panel, .stat-card) {
  display: block !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .nl-credential-context-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .credentials-layout {
  display: grid !important;
  grid-template-columns: minmax(340px, .9fr) minmax(0, 1.4fr) !important;
  align-items: start !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .credentials-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .profile-grid.two {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(label, input, select, .credential-card > div, .document-row > div) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(.credential-list, .document-list) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(.credential-card, .document-row, .panel-title, .credential-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(.credential-card, .document-row) {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .credentials-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(.profile-grid.two, .nl-credential-context-stats, .stats-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@container credentials-workspace (max-width: 900px) {
  html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .credentials-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container credentials-workspace (max-width: 540px) {
  html body .member-react-safe-shell-v108 .main-area .nl-credential-reconcile-v330 :is(.profile-grid.two, .nl-credential-context-stats, .stats-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}