mashlib 2.1.4-test.2 → 2.1.4-test.3

package/dist/mashlib.js

@@ -13886,40 +13886,38 @@ var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __nested_webpack_
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessibility */
-.visually-hidden {
-  position: absolute !important;
-  height: 1px; width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-}
-
-/* Focus indicator for keyboard navigation */
-.personRow:focus, .dataCell:focus, tr[tabindex="0"]:focus {
+___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard navigation */
+.contactPane table tr[tabindex="0"]:focus {
   outline: var(--focus-ring-width) solid var(--color-primary);
   outline-offset: 2px;
-  background: #e3f2fd;
+  background: var(--color-info-bg);
 }
 /* contactsPane styles — extracted from inline styles in contactsPane.js */
 /* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
 
 /* ── Layout: Three-column browser ────────────────────────────── */
 
+.contactPane .peopleSection .selected {
+  background-color: var(--color-info-bg) !important;
+}
+
 .contactPane .detailSection {
   flex: 1 1 400px;
   min-width: 300px;
-  overflow-y: auto;
-  background: var(--color-section-bg);
   box-sizing: border-box;
+  background: var(--color-section-bg);
 }
 
 .contactPane .detailsSectionContent {
   min-height: 200px;
   padding: var(--spacing-lg);
+  max-width: 900px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.contactPane .detailsSectionContent--wide {
+  max-width: 900px;
 }
 
 .contactPane .cardFooter {
@@ -13930,19 +13928,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   margin-top: var(--spacing-md);
 }
 
-.contactPane .groupsHeader {
-  min-width: 10em;
-  padding-bottom: 0.2em;
-}
-
-.contactPane .peopleHeader {
-  min-width: 18em;
-}
-
-.contactPane .peopleMain {
-  overflow: scroll;
-}
-
 .contactPane .detailsSectionContent {
   margin: 0;
 }
@@ -13957,28 +13942,23 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 }
 
 .contactPane .contactTypeChooser h3 {
-  margin: 0 0 4px 0;
-  font-size: 1.1em;
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-lg);
 }
 
 .contactPane .contactTypeSelect {
-  height: 38px;
+  height: var(--min-touch-target);
   border: 1px solid var(--color-border-pale);
   border-radius: var(--border-radius-base);
-  padding: 0 10px;
+  padding: 0 var(--spacing-sm);
   font-size: var(--font-size-sm);
   background: var(--color-section-bg);
 }
 
-.contactPane .groupsMain,
-.contactPane .groupsFooter {
-  padding: 0.1em;
-}
-
 /* ── Search ──────────────────────────────────────────────────── */
 
 .contactPane .allGroupsButton {
-  border-radius: 22px !important;
+  border-radius: var(--border-radius-full) !important;
   /* existing styles */
 }
 .contactPane .searchInput {
@@ -13996,12 +13976,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   box-sizing: border-box;
 }
 
-/* ── Data cells ──────────────────────────────────────────────── */
-
-.contactPane .dataCell {
-  padding: 0.1em;
-}
-
 /* ── Contact toolbar (top-right link + delete) ──────────────── */
 
 .contactPane .contact-toolbar {
@@ -14018,11 +13992,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   margin: 0;
 }
 
-/* ── Delete button ───────────────────────────────────────────── */
-
-.contactPane .deleteButton {
-}
-
 /* ── "All" groups button ─────────────────────────────────────── */
 
 .contactPane .allGroupsButton {
@@ -14046,7 +14015,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 /* ── Selection & visibility states ───────────────────────────── */
 
 .contactPane .group-loading {
-  background-color: #ffe;
 }
 
 .contactPane .hidden {
@@ -14056,45 +14024,55 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 /* ── Mint new address book ───────────────────────────────────── */
 
 .contactPane .claimSuccess {
-  font-size: 140%;
+  font-size: var(--font-size-xl);
+}
+
+.contactPane {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .contactPane .addressBook-grid {
   display: flex;
   flex-wrap: wrap;
+  flex: 1;
   min-width: 50%;
   align-items: stretch;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .contactPane .addressBookSection {
   flex: 1 1 350px;
-  max-width: 450px;
+  max-width: 485px;
   box-sizing: border-box;
-  margin-bottom: var(--spacing-md);
 }
 
-@media (min-width: 900px) {
+@media ((min-width: 500px) and (max-width: 900px)) {
   .contactPane .addressBookSection {
-    margin-bottom: 0;
+    max-width: 900px;
+  }
+  .contactPane .addressBookSection section {
+    max-width: 485px;
   }
 }
 
-/* Section Title - primary colored heading */
-.contactPane .section-title {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: var(--color-primary);
-  margin: 0;
+@media (max-width: 500px) {
+  .contactPane .addressBookSection {
+    max-width: 485px;
+  }
 }
 
 /* Card Section Background */
 .contactPane .section-bg {
   background: var(--color-section-bg);
   padding: var(--spacing-md);
+  box-sizing: border-box;
 }
 
 /* Primary Button */
-.btn-primary {
+.contactPane .btn-primary {
   min-height: var(--min-touch-target);
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--color-primary);
@@ -14106,23 +14084,23 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   transition: all var(--animation-duration) ease;
 }
 
-.btn-primary:hover {
+.contactPane .btn-primary:hover {
   background: color-mix(in srgb, var(--color-primary) 90%, black);
   box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
 }
 
-.btn-primary:active {
+.contactPane .btn-primary:active {
   box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
 }
 
-.btn-primary:disabled {
-  opacity: 0.6;
+.contactPane .btn-primary:disabled {
+  opacity: var(--opacity-disabled, 0.6);
   cursor: not-allowed;
   transform: none;
 }
 
 /* Secondary button */
-.btn-secondary {
+.contactPane .btn-secondary {
   min-height: var(--min-touch-target);
   padding: var(--spacing-sm) var(--spacing-md);
   border: var(--border-width-thin) solid var(--color-secondary);
@@ -14138,18 +14116,18 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   justify-content: center;
 }
 
-.btn-secondary:hover {
+.contactPane .btn-secondary:hover {
   background: color-mix(in srgb, var(--color-secondary) 85%, black);
 }
 
-.btn-secondary:disabled {
+.contactPane .btn-secondary:disabled {
   opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 
 /* Action Button Focus - used by ChatWithMe, ProfileCard */
-.action-button-focus:focus,
-.action-button-focus:focus-visible {
+.contactPane .action-button-focus:focus,
+.contactPane .action-button-focus:focus-visible {
   outline: 3px solid var(--color-primary) !important;
   outline-offset: 2px !important;
   box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;
@@ -14177,7 +14155,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 
 .contactPane .buttonSection::-webkit-scrollbar-thumb {
   background: var(--color-border-pale);
-  border-radius: 3px;
+  border-radius: var(--border-radius-base);
 }
 
 .contactPane .buttonSection::-webkit-scrollbar-track {
@@ -14193,9 +14171,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 }
 
 .contactPane .buttonSection .groupButtonsList {
-  margin-left: 4px;
-  margin-right: 4px;
-  padding-left: 0px;
+  margin-left: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+  padding-left: 0;
 }
 
 .contactPane .groupButtonsList li {
@@ -14206,77 +14184,73 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   white-space: nowrap;
   flex-shrink: 0;
   min-width: max-content;
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 /* Groups list in details section — flexible 2-column grid */
 .contactPane .detailsSectionContent .groupButtonsList {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--spacing-sm);
   list-style: none;
   padding: 0;
-  max-width: 512px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .contactPane .detailsSectionContent .groupButtonsList li {
   width: 100%;
   aspect-ratio: 1 / 1;
-  max-width: 250px;
 }
 
 .contactPane .detailsSectionContent .groupButtonsList button {
   width: 100%;
   height: 100%;
   text-align: center;
-  border-radius: 12px;
+  border-radius: var(--border-radius-base);
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
-@media (max-width: 899px) {
+@media (max-width: 599px) {
   .contactPane .detailsSectionContent .groupButtonsList {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-xs);
-    max-width: 100%;
-  }
-
-  .contactPane .detailsSectionContent .groupButtonsList li {
-    max-width: 120px;
   }
 
   .contactPane .detailsSectionContent .groupButtonsList button {
-    font-size: 0.8rem;
-    border-radius: 8px;
-  }
-
-  .contactPane .detailsSectionContent .newGroupBtn {
-    max-width: 100%;
+    font-size: var(--font-size-sm);
+    border-radius: var(--border-radius-base);
   }
+}
 
-  .contactPane .detailsSectionContent .newGroupBtn {
-    max-width: 383px !important;
+@media (min-width: 900px) {
+  .contactPane .detailsSectionContent .groupButtonsList {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
 .contactPane .detailsSectionContent .newGroupBtn {
   width: 100%;
-  max-width: 512px;
   box-sizing: border-box;
   margin-top: var(--spacing-sm);
 }
 
 .contactPane .detailsSectionContent h3 {
-  font-size: 1.5rem;
+  font-size: var(--font-size-xl);
   margin-bottom: var(--spacing-sm);
+  padding-left: 0;
 }
 
-/* Delete confirmation popup — centered overlay in details section */
+/* Delete confirmation POPUP — centered overlay in details section */
 .contactPane .detailSection {
   position: relative;
 }
 
-.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] {
+.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"],
+.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"],
+.contactPane .detailsSectionContent .contact-toolbar  > div[style*="position: relative"],
+.contactPane .detailsSectionContent .group-membership-toolbar > div[style*="position: relative"] {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
@@ -14290,8 +14264,10 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   background: rgba(0, 0, 0, 0.3);
   z-index: 1000;
 }
-
-.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] > div {
+.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div,
+.contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] > div,
+.contactPane .detailsSectionContent .contact-toolbar  > div[style*="position: relative"] > div,
+.contactPane .detailsSectionContent .group-membership-toolbar > div[style*="position: relative"] > div {
   position: relative !important;
   top: auto !important;
   background: var(--color-background);
@@ -14336,10 +14312,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   margin: 0;
 }
 
-.contactPane .dottedHr--thin {
-  border-top-width: 0.5px;
-}
-
 /* ── Search section ─────────────────────────────────────────── */
 
 .contactPane .searchSection {
@@ -14368,7 +14340,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 
 .contactPane .peopleSection li {
   border-top: 1px solid var(--color-border-pale);
-  padding: 5px;
+  padding: var(--spacing-xs);
 }
 
 /* ── Person list item (addressBookPresenter) ─────────────────── */
@@ -14405,13 +14377,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 
 .contactPane .personLi-info {
   flex: 1;
-  margin-left: 12px;
+  margin-left: var(--spacing-sm);
   overflow: hidden;
 }
 
 .contactPane .personLi-name {
   font-weight: bold;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -14421,7 +14393,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
   margin-left: auto;
   display: flex;
   align-items: center;
-}`, "",{"version":3,"sources":["webpack://./src/styles/contactsPane.css"],"names":[],"mappings":"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","sourcesContent":["/* Visually hidden utility for accessibility */\n.visually-hidden {\n  position: absolute !important;\n  height: 1px; width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  white-space: nowrap;\n  border: 0;\n  padding: 0;\n  margin: -1px;\n}\n\n/* Focus indicator for keyboard navigation */\n.personRow:focus, .dataCell:focus, tr[tabindex=\"0\"]:focus {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  background: #e3f2fd;\n}\n/* contactsPane styles — extracted from inline styles in contactsPane.js */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Layout: Three-column browser ────────────────────────────── */\n\n.contactPane .detailSection {\n  flex: 1 1 400px;\n  min-width: 300px;\n  overflow-y: auto;\n  background: var(--color-section-bg);\n  box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent {\n  min-height: 200px;\n  padding: var(--spacing-lg);\n}\n\n.contactPane .cardFooter {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-xs);\n  padding-top: var(--spacing-md);\n  margin-top: var(--spacing-md);\n}\n\n.contactPane .groupsHeader {\n  min-width: 10em;\n  padding-bottom: 0.2em;\n}\n\n.contactPane .peopleHeader {\n  min-width: 18em;\n}\n\n.contactPane .peopleMain {\n  overflow: scroll;\n}\n\n.contactPane .detailsSectionContent {\n  margin: 0;\n}\n\n/* ── Contact type chooser ───────────────────────────────────── */\n\n.contactPane .contactTypeChooser {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  max-width: 360px;\n}\n\n.contactPane .contactTypeChooser h3 {\n  margin: 0 0 4px 0;\n  font-size: 1.1em;\n}\n\n.contactPane .contactTypeSelect {\n  height: 38px;\n  border: 1px solid var(--color-border-pale);\n  border-radius: var(--border-radius-base);\n  padding: 0 10px;\n  font-size: var(--font-size-sm);\n  background: var(--color-section-bg);\n}\n\n.contactPane .groupsMain,\n.contactPane .groupsFooter {\n  padding: 0.1em;\n}\n\n/* ── Search ──────────────────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n  border-radius: 22px !important;\n  /* existing styles */\n}\n.contactPane .searchInput {\n  height: var(--min-touch-target);\n  border: 1px solid var(--color-border-pale);\n  background-color: var(--color-section-bg);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99c.41.41 1.09.41 1.5 0s.41-1.09 0-1.5l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: 8px center;\n  background-size: 20px 20px;\n  border-radius: var(--border-radius-base);\n  padding: 0 var(--spacing-sm) 0 34px;\n  font-size: var(--font-size-base);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ── Data cells ──────────────────────────────────────────────── */\n\n.contactPane .dataCell {\n  padding: 0.1em;\n}\n\n/* ── Contact toolbar (top-right link + delete) ──────────────── */\n\n.contactPane .contact-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a img {\n  width: 1.3em;\n  height: 1em;\n  margin: 0;\n}\n\n/* ── Delete button ───────────────────────────────────────────── */\n\n.contactPane .deleteButton {\n}\n\n/* ── \"All\" groups button ─────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n  margin-left: var(--spacing-md);\n  font-size: var(--font-size-base);\n}\n\n.contactPane .allGroupsButton--loading {\n  background-color: var(--color-primary);\n}\n\n.contactPane .allGroupsButton--active {\n  background-color: var(--color-primary);\n  color: var(--color-background);\n}\n\n.contactPane .allGroupsButton--loaded {\n  background-color: var(--color-primary);\n}\n\n/* ── Selection & visibility states ───────────────────────────── */\n\n.contactPane .group-loading {\n  background-color: #ffe;\n}\n\n.contactPane .hidden {\n  display: none;\n}\n\n/* ── Mint new address book ───────────────────────────────────── */\n\n.contactPane .claimSuccess {\n  font-size: 140%;\n}\n\n.contactPane .addressBook-grid {\n  display: flex;\n  flex-wrap: wrap;\n  min-width: 50%;\n  align-items: stretch;\n}\n\n.contactPane .addressBookSection {\n  flex: 1 1 350px;\n  max-width: 450px;\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n}\n\n@media (min-width: 900px) {\n  .contactPane .addressBookSection {\n    margin-bottom: 0;\n  }\n}\n\n/* Section Title - primary colored heading */\n.contactPane .section-title {\n  font-size: var(--font-size-xl);\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Card Section Background */\n.contactPane .section-bg {\n  background: var(--color-section-bg);\n  padding: var(--spacing-md);\n}\n\n/* Primary Button */\n.btn-primary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: 1px solid var(--color-primary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-primary);\n  color: var(--color-background);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n  background: color-mix(in srgb, var(--color-primary) 90%, black);\n  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Secondary button */\n.btn-secondary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: var(--border-width-thin) solid var(--color-secondary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-secondary);\n  color: var(--color-background);\n  font-weight: var(--font-weight-bold);\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.btn-secondary:hover {\n  background: color-mix(in srgb, var(--color-secondary) 85%, black);\n}\n\n.btn-secondary:disabled {\n  opacity: var(--opacity-disabled);\n  cursor: not-allowed;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n/* ── Button section: horizontal scrollable row ──────────────── */\n\n.contactPane .buttonSection {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: var(--spacing-sm);\n  padding-bottom: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  margin-bottom: 0;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar {\n  height: 6px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-thumb {\n  background: var(--color-border-pale);\n  border-radius: 3px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.contactPane .groupButtonsList {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n  list-style: none;\n}\n\n.contactPane .buttonSection .groupButtonsList {\n  margin-left: 4px;\n  margin-right: 4px;\n  padding-left: 0px;\n}\n\n.contactPane .groupButtonsList li {\n  flex-shrink: 0;\n}\n\n.contactPane .groupButtonsList button {\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: max-content;\n  margin-left: 0px;\n}\n\n/* Groups list in details section — flexible 2-column grid */\n.contactPane .detailsSectionContent .groupButtonsList {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--spacing-sm);\n  list-style: none;\n  padding: 0;\n  max-width: 512px;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  max-width: 250px;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  border-radius: 12px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n@media (max-width: 899px) {\n  .contactPane .detailsSectionContent .groupButtonsList {\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--spacing-xs);\n    max-width: 100%;\n  }\n\n  .contactPane .detailsSectionContent .groupButtonsList li {\n    max-width: 120px;\n  }\n\n  .contactPane .detailsSectionContent .groupButtonsList button {\n    font-size: 0.8rem;\n    border-radius: 8px;\n  }\n\n  .contactPane .detailsSectionContent .newGroupBtn {\n    max-width: 100%;\n  }\n\n  .contactPane .detailsSectionContent .newGroupBtn {\n    max-width: 383px !important;\n  }\n}\n\n.contactPane .detailsSectionContent .newGroupBtn {\n  width: 100%;\n  max-width: 512px;\n  box-sizing: border-box;\n  margin-top: var(--spacing-sm);\n}\n\n.contactPane .detailsSectionContent h3 {\n  font-size: 1.5rem;\n  margin-bottom: var(--spacing-sm);\n}\n\n/* Delete confirmation popup — centered overlay in details section */\n.contactPane .detailSection {\n  position: relative;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"] {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1000;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"] > div {\n  position: relative !important;\n  top: auto !important;\n  background: var(--color-background);\n  border-radius: var(--border-radius-full);\n  padding: var(--spacing-lg);\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);\n  z-index: 1001;\n}\n\n/* Selected state for All contacts button */\n.contactPane .allGroupsButton--selected {\n  background-color: var(--color-primary);\n  color: var(--color-background);\n}\n\n/* ── Header section ──────────────────────────────────────────── */\n\n.contactPane .headerSection {\n  background: var(--color-background);\n  padding: var(--spacing-sm);\n  border-top-left-radius: var(--border-radius-full);\n  border-top-right-radius: var(--border-radius-full);\n  margin-bottom: 0;\n}\n\n.contactPane .headerSection header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0;\n}\n\n.contactPane .headerSection h2 {\n  margin-bottom: 0;\n}\n\n/* ── Dotted horizontal rule ─────────────────────────────────── */\n\n.contactPane .dottedHr {\n  border: none;\n  border-top: 1px dotted var(--color-text-muted);\n  margin: 0;\n}\n\n.contactPane .dottedHr--thin {\n  border-top-width: 0.5px;\n}\n\n/* ── Search section ─────────────────────────────────────────── */\n\n.contactPane .searchSection {\n  padding: var(--spacing-sm);\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n/* ── People list section ────────────────────────────────────── */\n\n.contactPane .peopleSection {\n  display: flex;\n  background: var(--color-background);\n  border-top: 1px dotted var(--color-text-muted);\n  margin-bottom: 0;\n}\n\n.contactPane .peopleSection ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.contactPane .peopleSection li {\n  border-top: 1px solid var(--color-border-pale);\n  padding: 5px;\n}\n\n/* ── Person list item (addressBookPresenter) ─────────────────── */\n\n.contactPane .personLi-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.contactPane .personLi-avatar {\n  width: 45px;\n  height: 45px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.contactPane .personLi-avatar .avatar-placeholder {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.contactPane .personLi-info {\n  flex: 1;\n  margin-left: 12px;\n  overflow: hidden;\n}\n\n.contactPane .personLi-name {\n  font-weight: bold;\n  font-size: 1rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.contactPane .personLi-arrow {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/styles/contactsPane.css"],"names":[],"mappings":"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","sourcesContent":["/* Focus indicator for keyboard navigation */\n.contactPane table tr[tabindex=\"0\"]:focus {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  background: var(--color-info-bg);\n}\n/* contactsPane styles — extracted from inline styles in contactsPane.js */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Layout: Three-column browser ────────────────────────────── */\n\n.contactPane .peopleSection .selected {\n  background-color: var(--color-info-bg) !important;\n}\n\n.contactPane .detailSection {\n  flex: 1 1 400px;\n  min-width: 300px;\n  box-sizing: border-box;\n  background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n  min-height: 200px;\n  padding: var(--spacing-lg);\n  max-width: 900px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent--wide {\n  max-width: 900px;\n}\n\n.contactPane .cardFooter {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-xs);\n  padding-top: var(--spacing-md);\n  margin-top: var(--spacing-md);\n}\n\n.contactPane .detailsSectionContent {\n  margin: 0;\n}\n\n/* ── Contact type chooser ───────────────────────────────────── */\n\n.contactPane .contactTypeChooser {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  max-width: 360px;\n}\n\n.contactPane .contactTypeChooser h3 {\n  margin: 0 0 var(--spacing-xs) 0;\n  font-size: var(--font-size-lg);\n}\n\n.contactPane .contactTypeSelect {\n  height: var(--min-touch-target);\n  border: 1px solid var(--color-border-pale);\n  border-radius: var(--border-radius-base);\n  padding: 0 var(--spacing-sm);\n  font-size: var(--font-size-sm);\n  background: var(--color-section-bg);\n}\n\n/* ── Search ──────────────────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n  border-radius: var(--border-radius-full) !important;\n  /* existing styles */\n}\n.contactPane .searchInput {\n  height: var(--min-touch-target);\n  border: 1px solid var(--color-border-pale);\n  background-color: var(--color-section-bg);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99c.41.41 1.09.41 1.5 0s.41-1.09 0-1.5l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: 8px center;\n  background-size: 20px 20px;\n  border-radius: var(--border-radius-base);\n  padding: 0 var(--spacing-sm) 0 34px;\n  font-size: var(--font-size-base);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ── Contact toolbar (top-right link + delete) ──────────────── */\n\n.contactPane .contact-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a img {\n  width: 1.3em;\n  height: 1em;\n  margin: 0;\n}\n\n/* ── \"All\" groups button ─────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n  margin-left: var(--spacing-md);\n  font-size: var(--font-size-base);\n}\n\n.contactPane .allGroupsButton--loading {\n  background-color: var(--color-primary);\n}\n\n.contactPane .allGroupsButton--active {\n  background-color: var(--color-primary);\n  color: var(--color-background);\n}\n\n.contactPane .allGroupsButton--loaded {\n  background-color: var(--color-primary);\n}\n\n/* ── Selection & visibility states ───────────────────────────── */\n\n.contactPane .group-loading {\n}\n\n.contactPane .hidden {\n  display: none;\n}\n\n/* ── Mint new address book ───────────────────────────────────── */\n\n.contactPane .claimSuccess {\n  font-size: var(--font-size-xl);\n}\n\n.contactPane {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.contactPane .addressBook-grid {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n  min-width: 50%;\n  align-items: stretch;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.contactPane .addressBookSection {\n  flex: 1 1 350px;\n  max-width: 485px;\n  box-sizing: border-box;\n}\n\n@media ((min-width: 500px) and (max-width: 900px)) {\n  .contactPane .addressBookSection {\n    max-width: 900px;\n  }\n  .contactPane .addressBookSection section {\n    max-width: 485px;\n  }\n}\n\n@media (max-width: 500px) {\n  .contactPane .addressBookSection {\n    max-width: 485px;\n  }\n}\n\n/* Card Section Background */\n.contactPane .section-bg {\n  background: var(--color-section-bg);\n  padding: var(--spacing-md);\n  box-sizing: border-box;\n}\n\n/* Primary Button */\n.contactPane .btn-primary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: 1px solid var(--color-primary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-primary);\n  color: var(--color-background);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n.contactPane .btn-primary:hover {\n  background: color-mix(in srgb, var(--color-primary) 90%, black);\n  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.contactPane .btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.contactPane .btn-primary:disabled {\n  opacity: var(--opacity-disabled, 0.6);\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Secondary button */\n.contactPane .btn-secondary {\n  min-height: var(--min-touch-target);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: var(--border-width-thin) solid var(--color-secondary);\n  border-radius: var(--border-radius-base);\n  background: var(--color-secondary);\n  color: var(--color-background);\n  font-weight: var(--font-weight-bold);\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.contactPane .btn-secondary:hover {\n  background: color-mix(in srgb, var(--color-secondary) 85%, black);\n}\n\n.contactPane .btn-secondary:disabled {\n  opacity: var(--opacity-disabled);\n  cursor: not-allowed;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.contactPane .action-button-focus:focus,\n.contactPane .action-button-focus:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n/* ── Button section: horizontal scrollable row ──────────────── */\n\n.contactPane .buttonSection {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: var(--spacing-sm);\n  padding-bottom: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  margin-bottom: 0;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar {\n  height: 6px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-thumb {\n  background: var(--color-border-pale);\n  border-radius: var(--border-radius-base);\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.contactPane .groupButtonsList {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--spacing-xs);\n  list-style: none;\n}\n\n.contactPane .buttonSection .groupButtonsList {\n  margin-left: var(--spacing-xs);\n  margin-right: var(--spacing-xs);\n  padding-left: 0;\n}\n\n.contactPane .groupButtonsList li {\n  flex-shrink: 0;\n}\n\n.contactPane .groupButtonsList button {\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: max-content;\n  margin-left: 0;\n}\n\n/* Groups list in details section — flexible 2-column grid */\n.contactPane .detailsSectionContent .groupButtonsList {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: var(--spacing-sm);\n  list-style: none;\n  padding: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  border-radius: var(--border-radius-base);\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n@media (max-width: 599px) {\n  .contactPane .detailsSectionContent .groupButtonsList {\n    grid-template-columns: repeat(2, 1fr);\n    gap: var(--spacing-xs);\n  }\n\n  .contactPane .detailsSectionContent .groupButtonsList button {\n    font-size: var(--font-size-sm);\n    border-radius: var(--border-radius-base);\n  }\n}\n\n@media (min-width: 900px) {\n  .contactPane .detailsSectionContent .groupButtonsList {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n.contactPane .detailsSectionContent .newGroupBtn {\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-sm);\n}\n\n.contactPane .detailsSectionContent h3 {\n  font-size: var(--font-size-xl);\n  margin-bottom: var(--spacing-sm);\n  padding-left: 0;\n}\n\n/* Delete confirmation POPUP — centered overlay in details section */\n.contactPane .detailSection {\n  position: relative;\n}\n\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"],\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"],\n.contactPane .detailsSectionContent .contact-toolbar  > div[style*=\"position: relative\"],\n.contactPane .detailsSectionContent .group-membership-toolbar > div[style*=\"position: relative\"] {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 1000;\n}\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .contact-toolbar  > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .group-membership-toolbar > div[style*=\"position: relative\"] > div {\n  position: relative !important;\n  top: auto !important;\n  background: var(--color-background);\n  border-radius: var(--border-radius-full);\n  padding: var(--spacing-lg);\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);\n  z-index: 1001;\n}\n\n/* Selected state for All contacts button */\n.contactPane .allGroupsButton--selected {\n  background-color: var(--color-primary);\n  color: var(--color-background);\n}\n\n/* ── Header section ──────────────────────────────────────────── */\n\n.contactPane .headerSection {\n  background: var(--color-background);\n  padding: var(--spacing-sm);\n  border-top-left-radius: var(--border-radius-full);\n  border-top-right-radius: var(--border-radius-full);\n  margin-bottom: 0;\n}\n\n.contactPane .headerSection header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0;\n}\n\n.contactPane .headerSection h2 {\n  margin-bottom: 0;\n}\n\n/* ── Dotted horizontal rule ─────────────────────────────────── */\n\n.contactPane .dottedHr {\n  border: none;\n  border-top: 1px dotted var(--color-text-muted);\n  margin: 0;\n}\n\n/* ── Search section ─────────────────────────────────────────── */\n\n.contactPane .searchSection {\n  padding: var(--spacing-sm);\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n/* ── People list section ────────────────────────────────────── */\n\n.contactPane .peopleSection {\n  display: flex;\n  background: var(--color-background);\n  border-top: 1px dotted var(--color-text-muted);\n  margin-bottom: 0;\n}\n\n.contactPane .peopleSection ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.contactPane .peopleSection li {\n  border-top: 1px solid var(--color-border-pale);\n  padding: var(--spacing-xs);\n}\n\n/* ── Person list item (addressBookPresenter) ─────────────────── */\n\n.contactPane .personLi-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.contactPane .personLi-avatar {\n  width: 45px;\n  height: 45px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.contactPane .personLi-avatar .avatar-placeholder {\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.contactPane .personLi-info {\n  flex: 1;\n  margin-left: var(--spacing-sm);\n  overflow: hidden;\n}\n\n.contactPane .personLi-name {\n  font-weight: bold;\n  font-size: var(--font-size-base);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.contactPane .personLi-arrow {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -14429,15 +14401,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Visually hidden utility for accessi
 /***/ },
 
 /***/ 93
-(module, __nested_webpack_exports__, __nested_webpack_require_32000__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_32495__) {
 
-/* harmony export */ __nested_webpack_require_32000__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_32495__.d(__nested_webpack_exports__, {
 /* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_32000__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_32000__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_32000__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_32000__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_32495__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_32495__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_32495__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_32495__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -14445,39 +14417,40 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ──────────────────────────────── */
 
-.group-membership-container {
+.contactPane .group-membership-container {
   padding: var(--spacing-sm) 0;
 }
 
 /* Grid wrapper — matches detailsSectionContent groupButtonsList */
-.group-pills-wrapper {
+.contactPane .group-pills-wrapper {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--spacing-sm);
   list-style: none;
   padding: 0;
   margin: 0;
-  max-width: 512px;
+  width: 100%;
 }
 
 /* Each group item: button on top, toolbar below */
-.group-membership-item {
+.contactPane .group-membership-item {
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  max-width: 256px;
 }
 
-.group-membership-item > button {
+.contactPane .group-membership-item > button {
   width: 100%;
   text-align: center;
-  border-radius: 12px;
+  border-radius: var(--border-radius-base);
   word-wrap: break-word;
   overflow-wrap: break-word;
   min-height: var(--min-touch-target);
 }
 
 /* Toolbar with link icon and delete button below each group button */
-.group-membership-toolbar {
+.contactPane .group-membership-toolbar {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -14485,25 +14458,32 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
   padding: var(--spacing-xs) 0 0 0;
 }
 
-.group-membership-toolbar a img {
+.contactPane .group-membership-toolbar a img {
   width: 1.3em;
   height: 1em;
   margin: 0;
 }
 
-@media (max-width: 899px) {
-  .group-pills-wrapper {
-    grid-template-columns: repeat(3, 1fr);
+@media (max-width: 599px) {
+  .contactPane .group-pills-wrapper {
+    grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-xs);
     max-width: 100%;
   }
 
-  .group-membership-item > button {
-    font-size: 0.8rem;
-    border-radius: 8px;
+  .contactPane .group-membership-item > button {
+    font-size: var(--font-size-sm);
+    border-radius: var(--border-radius-base);
   }
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/groupMembership.css"],"names":[],"mappings":"AAAA,iEAAiE;;AAEjE;EACE,4BAA4B;AAC9B;;AAEA,kEAAkE;AAClE;EACE,aAAa;EACb,qCAAqC;EACrC,sBAAsB;EACtB,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,gBAAgB;AAClB;;AAEA,kDAAkD;AAClD;EACE,aAAa;EACb,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,mBAAmB;EACnB,qBAAqB;EACrB,yBAAyB;EACzB,mCAAmC;AACrC;;AAEA,qEAAqE;AACrE;EACE,aAAa;EACb,yBAAyB;EACzB,mBAAmB;EACnB,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE,YAAY;EACZ,WAAW;EACX,SAAS;AACX;;AAEA;EACE;IACE,qCAAqC;IACrC,sBAAsB;IACtB,eAAe;EACjB;;EAEA;IACE,iBAAiB;IACjB,kBAAkB;EACpB;AACF","sourcesContent":["/* ── Group Membership Section ──────────────────────────────── */\n\n.group-membership-container {\n  padding: var(--spacing-sm) 0;\n}\n\n/* Grid wrapper — matches detailsSectionContent groupButtonsList */\n.group-pills-wrapper {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--spacing-sm);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  max-width: 512px;\n}\n\n/* Each group item: button on top, toolbar below */\n.group-membership-item {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.group-membership-item > button {\n  width: 100%;\n  text-align: center;\n  border-radius: 12px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  min-height: var(--min-touch-target);\n}\n\n/* Toolbar with link icon and delete button below each group button */\n.group-membership-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xs) 0 0 0;\n}\n\n.group-membership-toolbar a img {\n  width: 1.3em;\n  height: 1em;\n  margin: 0;\n}\n\n@media (max-width: 899px) {\n  .group-pills-wrapper {\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--spacing-xs);\n    max-width: 100%;\n  }\n\n  .group-membership-item > button {\n    font-size: 0.8rem;\n    border-radius: 8px;\n  }\n}\n"],"sourceRoot":""}]);
+
+@media (min-width: 900px) {
+  .contactPane .group-pills-wrapper {
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-sm);
+  }
+}
+`, "",{"version":3,"sources":["webpack://./src/styles/groupMembership.css"],"names":[],"mappings":"AAAA,iEAAiE;;AAEjE;EACE,4BAA4B;AAC9B;;AAEA,kEAAkE;AAClE;EACE,aAAa;EACb,2DAA2D;EAC3D,sBAAsB;EACtB,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,WAAW;AACb;;AAEA,kDAAkD;AAClD;EACE,aAAa;EACb,sBAAsB;EACtB,oBAAoB;EACpB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,wCAAwC;EACxC,qBAAqB;EACrB,yBAAyB;EACzB,mCAAmC;AACrC;;AAEA,qEAAqE;AACrE;EACE,aAAa;EACb,yBAAyB;EACzB,mBAAmB;EACnB,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE,YAAY;EACZ,WAAW;EACX,SAAS;AACX;;AAEA;EACE;IACE,qCAAqC;IACrC,sBAAsB;IACtB,eAAe;EACjB;;EAEA;IACE,8BAA8B;IAC9B,wCAAwC;EAC1C;AACF;;AAEA;EACE;IACE,qCAAqC;IACrC,sBAAsB;EACxB;AACF","sourcesContent":["/* ── Group Membership Section ──────────────────────────────── */\n\n.contactPane .group-membership-container {\n  padding: var(--spacing-sm) 0;\n}\n\n/* Grid wrapper — matches detailsSectionContent groupButtonsList */\n.contactPane .group-pills-wrapper {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: var(--spacing-sm);\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n}\n\n/* Each group item: button on top, toolbar below */\n.contactPane .group-membership-item {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  max-width: 256px;\n}\n\n.contactPane .group-membership-item > button {\n  width: 100%;\n  text-align: center;\n  border-radius: var(--border-radius-base);\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  min-height: var(--min-touch-target);\n}\n\n/* Toolbar with link icon and delete button below each group button */\n.contactPane .group-membership-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xs) 0 0 0;\n}\n\n.contactPane .group-membership-toolbar a img {\n  width: 1.3em;\n  height: 1em;\n  margin: 0;\n}\n\n@media (max-width: 599px) {\n  .contactPane .group-pills-wrapper {\n    grid-template-columns: repeat(2, 1fr);\n    gap: var(--spacing-xs);\n    max-width: 100%;\n  }\n\n  .contactPane .group-membership-item > button {\n    font-size: var(--font-size-sm);\n    border-radius: var(--border-radius-base);\n  }\n}\n\n@media (min-width: 900px) {\n  .contactPane .group-pills-wrapper {\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--spacing-sm);\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -14511,15 +14491,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
 /***/ },
 
 /***/ 479
-(module, __nested_webpack_exports__, __nested_webpack_require_36568__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_37810__) {
 
-/* harmony export */ __nested_webpack_require_36568__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_37810__.d(__nested_webpack_exports__, {
 /* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_36568__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_36568__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_36568__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_36568__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_37810__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_37810__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_37810__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_37810__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -14539,15 +14519,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* individual.js styles — extracted
 /***/ },
 
 /***/ 715
-(module, __nested_webpack_exports__, __nested_webpack_require_38571__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_39813__) {
 
-/* harmony export */ __nested_webpack_require_38571__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_39813__.d(__nested_webpack_exports__, {
 /* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_38571__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_38571__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_38571__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_38571__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_39813__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_39813__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_39813__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_39813__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -14571,15 +14551,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extrac
 /***/ },
 
 /***/ 434
-(module, __nested_webpack_exports__, __nested_webpack_require_40819__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_42061__) {
 
-/* harmony export */ __nested_webpack_require_40819__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_42061__.d(__nested_webpack_exports__, {
 /* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_40819__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_40819__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_40819__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_40819__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_42061__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_42061__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_42061__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_42061__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -14587,6 +14567,18 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 
+/* Vertically center autocomplete input in .formFieldValue */
+.individualPane .formFieldValue > div[style*="flex-direction: row"],
+.contactPane .formFieldValue > div[style*="flex-direction: row"] {
+  align-items: center;
+  display: flex;
+}
+
+.individualPane .formFieldValue input[data-testid="autocomplete-input"],
+.contactPane .formFieldValue input[data-testid="autocomplete-input"] {
+  vertical-align: middle;
+}
+
 .individualPane .hoverControl:has(> img:first-child),
 .contactPane .hoverControl:has(> img:first-child) {
   background-color: transparent !important;
@@ -14720,6 +14712,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .individualPane .formFieldValue td,
 .contactPane .formFieldValue td {
   padding: 0 !important;
+  vertical-align: middle;
+}
+
+.individualPane .formFieldValue table[data-testid="autocomplete-table"],
+.contactPane .formFieldValue table[data-testid="autocomplete-table"] {
+  height: 100%;
 }
 
 .individualPane .formFieldValue input:not([type="color"]),
@@ -14763,6 +14761,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   padding: 0 !important;
 }
 
+/* In contactPane, remove border/padding from all direct child divs. */
+.individualPane > div,
+.contactPane > div {
+  border: none !important;
+  padding: 0 !important;
+}
+
 /* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
 .individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue),
 .contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {
@@ -14771,6 +14776,45 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   margin-bottom: var(--spacing-sm);
 }
 
+/* for the Resume inside corporation choice */
+/* Add space between classifierBox label and select box */
+.individualPane .choiceBox .classifierBox-label,
+.contactPane .choiceBox .classifierBox-label {
+  margin-right: 0;
+  padding-left: 0.3em;
+}
+
+.individualPane .choiceBox .choiceBox-selectBox select,
+.contactPane .choiceBox .choiceBox-selectBox select {
+  margin-left: 2.1em !important;
+}
+
+/* for the Resume orga details */
+/* Add space between classifierBox label and select box */
+.individualPane .classifierBox .classifierBox-label,
+.contactPane .classifierBox .classifierBox-label {
+  margin-right: 0;
+  padding-left: 0.3em;
+  width: 8em;
+  padding: 0.3em;
+  vertical-align: middle;
+}
+
+.individualPane .classifierBox .classifierBox-selectBox,
+.contactPane .classifierBox .classifierBox-selectBox {
+  margin-left: 0 !important;
+}
+
+.individualPane .classifierBox .classifierBox-selectBox select,
+.contactPane .classifierBox .classifierBox-selectBox select {
+  margin-left: 0 !important;
+}
+
+.individualPane .formFieldValue > span > select,
+.contactPane .formFieldValue > span > select {
+  margin-left: 0 !important;
+}
+
 .individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue,
 .contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {
   margin-bottom: 0;
@@ -14814,11 +14858,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .contactPane .formFieldValue textarea {
   appearance: none;
   -webkit-appearance: none;
-  border: .05em solid #88c !important;
+  border: 0.05em solid var(--color-secondary) !important;
   border-style: solid !important;
-  border-width: .05em !important;
-  border-color: #88c !important;
-  border-radius: 0.2em !important;
+  border-width: 0.05em !important;
+  border-color: var(--color-secondary) !important;
+  border-radius: var(--border-radius-base) !important;
   width: 100%;
   box-sizing: border-box;
   margin-top: var(--spacing-xs);
@@ -14826,6 +14870,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   margin-right: 0 !important;
 }
 
+/* Add horizontal gap between label and textarea for all label+textarea pairs. */
+.individualPane div:has(> a) + div:has(textarea),
+.contactPane div:has(> a) + div:has(textarea) {
+  margin-left: var(--spacing-sm);
+}
+
 /* Center textarea label vertically in flex rows. */
 .individualPane div[style*="display: flex"][style*="flex-direction: row"]:has(textarea),
 .contactPane div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) {
@@ -14835,6 +14885,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .individualPane div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) > div:has(> a),
 .contactPane div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) > div:has(> a) {
   padding-left: var(--spacing-xs);
+  padding-top: var(--spacing-sm);
 }
 
 /* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */
@@ -14845,7 +14896,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 
 .individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName,
 .contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
-  padding-top: 0.55em !important;
+  padding-top: var(--spacing-xs) !important;
 }
 
 .individualPane .formFieldValue:has(input[data-testid="autocomplete-input"]),
@@ -14899,9 +14950,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   padding: var(--spacing-xs) !important;
 }
 
-.webidControl table td div.contactPane.namedPane {
+.contactPane .webidControl table td div.contactPane.namedPane {
   border: none !important;
-}`, "",{"version":3,"sources":["webpack://./src/styles/rdfFormsEnforced.css"],"names":[],"mappings":"AAAA,kBAAkB;;AAElB;;EAEE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;EAC3B,yBAAyB;EACzB,mCAAmC;EACnC,kCAAkC;EAClC,eAAe;EACf,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;;EAEE,uBAAuB;EACvB,wBAAwB;EACxB,cAAc;EACd,wBAAwB;EACxB,yBAAyB;EACzB,0BAA0B;EAC1B,+BAA+B;AACjC;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB;AACpB;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;;EAEE,kBAAkB;AACpB;;AAEA;;EAEE,wCAAwC;AAC1C;;AAEA;;EAEE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;AAC7B;;AAEA;;EAEE,mCAAmC;EACnC,kCAAkC;AACpC;;AAEA;;;;;;EAME,eAAe;EACf,YAAY;EACZ,uBAAuB;EACvB,aAAa;EACb,wBAAwB;EACxB,iDAAiD;EACjD,0CAA0C;AAC5C;;AAEA;;EAEE,iDAAiD;EACjD,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;;;;;;;;;;EAUE,mCAAmC;AACrC;;AAEA;;;;;;;;;;EAUE,sEAAsE;EACtE,mBAAmB;EACnB,6CAA6C;AAC/C;;AAEA;;EAEE,WAAW;AACb;;AAEA;;EAEE,YAAY;EACZ,gCAAgC;AAClC;;AAEA;;EAEE,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;;EAEE,qBAAqB;AACvB;;AAEA;;;;;;EAME,WAAW;EACX,eAAe;AACjB;;AAEA;;EAEE,WAAW;EACX,cAAc;EACd,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;;EAEE,yBAAyB;EACzB,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;;EAEE,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,oFAAoF;AACpF;;;;EAIE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,8FAA8F;AAC9F;;EAEE,aAAa;EACb,qBAAqB;EACrB,gCAAgC;AAClC;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;;;;;;;;;;EAUE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;;;;;;;;;;EAUE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;EACtB,OAAO;EACP,YAAY;AACd;;AAEA;;;;EAIE,gBAAgB;EAChB,wBAAwB;EACxB,mCAAmC;EACnC,8BAA8B;EAC9B,8BAA8B;EAC9B,6BAA6B;EAC7B,+BAA+B;EAC/B,WAAW;EACX,sBAAsB;EACtB,6BAA6B;EAC7B,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,mDAAmD;AACnD;;EAEE,uBAAuB;AACzB;;AAEA;;EAEE,+BAA+B;AACjC;;AAEA,2FAA2F;AAC3F;;EAEE,uBAAuB;AACzB;;AAEA;;EAEE,8BAA8B;AAChC;;AAEA;;EAEE,sBAAsB;AACxB;;AAEA;;;;EAIE,oBAAoB;AACtB;;AAEA;;EAEE,wBAAwB;AAC1B;;AAEA;;EAEE,WAAW;EACX,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;;;;;;;;;;;;;;EAcE,oDAAoD;EACpD,mBAAmB;EACnB,aAAa;EACb,uDAAuD;AACzD;;AAEA;;;;EAIE,qCAAqC;AACvC;;AAEA;EACE,uBAAuB;AACzB","sourcesContent":["/* Solid-UI form */\n\n.individualPane .hoverControl:has(> img:first-child),\n.contactPane .hoverControl:has(> img:first-child) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  padding: 0.7em !important;\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.individualPane .hoverControlHide,\n.contactPane .hoverControlHide {\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: block;\n  margin-top: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  margin-bottom: 0.3em !important;\n}\n\n.individualPane .hoverControl:has(> img:first-child) > span,\n.contactPane .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img),\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) {\n  display: inline-flex;\n  align-items: center;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img) > span,\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n}\n\n.individualPane .hoverControl:has(> img:first-child):hover,\n.contactPane .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.individualPane button:has(> img[src$=\".svg\"]),\n.contactPane button:has(> img[src$=\".svg\"]) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n}\n\n.individualPane button,\n.contactPane button {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]),\n.individualPane textarea,\n.contactPane textarea,\n.individualPane select,\n.contactPane select {\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box ;\n  font: inherit;\n  color: var(--color-text);\n  background-color: var(--color-card-bg) !important;\n  border: 1px solid var(--color-border-pale);\n}\n\n.individualPane textarea,\n.contactPane textarea {\n  border-color: var(--color-border-pale) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.individualPane input[type=\"date\"],\n.contactPane input[type=\"date\"],\n.individualPane input[type=\"month\"],\n.contactPane input[type=\"month\"],\n.individualPane input[type=\"week\"],\n.contactPane input[type=\"week\"],\n.individualPane input[type=\"time\"],\n.contactPane input[type=\"time\"],\n.individualPane input[type=\"datetime-local\"],\n.contactPane input[type=\"datetime-local\"] {\n  min-height: var(--min-touch-target);\n}\n\n.individualPane .hoverControl:has(> img:first-child):focus-visible,\n.contactPane .hoverControl:has(> img:first-child):focus-visible,\n.individualPane button:focus-visible,\n.contactPane button:focus-visible,\n.individualPane input:not([type=\"color\"]):focus-visible,\n.contactPane input:not([type=\"color\"]):focus-visible,\n.individualPane textarea:focus-visible,\n.contactPane textarea:focus-visible,\n.individualPane select:focus-visible,\n.contactPane select:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary) !important;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.individualPane input[type=\"url\"],\n.contactPane input[type=\"url\"] {\n  width: 100%;\n}\n\n.individualPane .formFieldValue,\n.contactPane .formFieldValue {\n  min-width: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.individualPane .formFieldValue table,\n.contactPane .formFieldValue table {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.individualPane .formFieldValue td,\n.contactPane .formFieldValue td {\n  padding: 0 !important;\n}\n\n.individualPane .formFieldValue input:not([type=\"color\"]),\n.contactPane .formFieldValue input:not([type=\"color\"]),\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea,\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n  width: 100%;\n  max-width: 100%;\n}\n\n.individualPane select#formSelect,\n.contactPane select#formSelect {\n  width: 100%;\n  max-width: 97%;\n  box-sizing: border-box;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.individualPane span select,\n.contactPane span select {\n  max-width: 96% !important;\n  box-sizing: border-box;\n  margin: 0 !important;\n}\n\n.individualPane .formFieldValue span select,\n.contactPane .formFieldValue span select {\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.individualPane > div:first-of-type,\n.contactPane > div:first-of-type,\n.individualPane > div:first-of-type > div:first-of-type,\n.contactPane > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue),\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n  display: flex;\n  align-items: baseline;\n  margin-bottom: var(--spacing-sm);\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue,\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n  margin-bottom: 0;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  flex: 1;\n  min-width: 0;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n  appearance: none;\n  -webkit-appearance: none;\n  border: .05em solid #88c !important;\n  border-style: solid !important;\n  border-width: .05em !important;\n  border-color: #88c !important;\n  border-radius: 0.2em !important;\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Center textarea label vertically in flex rows. */\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n  padding-left: var(--spacing-xs);\n}\n\n/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]),\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) {\n  align-items: flex-start;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName,\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n  padding-top: 0.55em !important;\n}\n\n.individualPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]),\n.contactPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) {\n  align-self: flex-start;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n  margin: 0 !important;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n  vertical-align: baseline;\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]) {\n  width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.individualPane input:disabled,\n.contactPane input:disabled,\n.individualPane textarea:disabled,\n.contactPane textarea:disabled,\n.individualPane select:disabled,\n.contactPane select:disabled,\n.individualPane input[readonly],\n.contactPane input[readonly],\n.individualPane textarea[readonly],\n.contactPane textarea[readonly],\n.individualPane input:read-only,\n.contactPane input:read-only,\n.individualPane textarea:read-only,\n.contactPane textarea:read-only {\n  background-color: var(--color-background) !important;\n  cursor: not-allowed;\n  opacity: 0.75;\n  border: 0.05em solid var(--color-background) !important;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n  padding: var(--spacing-xs) !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./src/styles/rdfFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* Solid-UI form */\n\n/* Vertically center autocomplete input in .formFieldValue */\n.individualPane .formFieldValue > div[style*=\"flex-direction: row\"],\n.contactPane .formFieldValue > div[style*=\"flex-direction: row\"] {\n  align-items: center;\n  display: flex;\n}\n\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n  vertical-align: middle;\n}\n\n.individualPane .hoverControl:has(> img:first-child),\n.contactPane .hoverControl:has(> img:first-child) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  padding: 0.7em !important;\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.individualPane .hoverControlHide,\n.contactPane .hoverControlHide {\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: block;\n  margin-top: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  margin-bottom: 0.3em !important;\n}\n\n.individualPane .hoverControl:has(> img:first-child) > span,\n.contactPane .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img),\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) {\n  display: inline-flex;\n  align-items: center;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img) > span,\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n}\n\n.individualPane .hoverControl:has(> img:first-child):hover,\n.contactPane .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.individualPane button:has(> img[src$=\".svg\"]),\n.contactPane button:has(> img[src$=\".svg\"]) {\n  background-color: transparent !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n}\n\n.individualPane button,\n.contactPane button {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]),\n.individualPane textarea,\n.contactPane textarea,\n.individualPane select,\n.contactPane select {\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box ;\n  font: inherit;\n  color: var(--color-text);\n  background-color: var(--color-card-bg) !important;\n  border: 1px solid var(--color-border-pale);\n}\n\n.individualPane textarea,\n.contactPane textarea {\n  border-color: var(--color-border-pale) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.individualPane input[type=\"date\"],\n.contactPane input[type=\"date\"],\n.individualPane input[type=\"month\"],\n.contactPane input[type=\"month\"],\n.individualPane input[type=\"week\"],\n.contactPane input[type=\"week\"],\n.individualPane input[type=\"time\"],\n.contactPane input[type=\"time\"],\n.individualPane input[type=\"datetime-local\"],\n.contactPane input[type=\"datetime-local\"] {\n  min-height: var(--min-touch-target);\n}\n\n.individualPane .hoverControl:has(> img:first-child):focus-visible,\n.contactPane .hoverControl:has(> img:first-child):focus-visible,\n.individualPane button:focus-visible,\n.contactPane button:focus-visible,\n.individualPane input:not([type=\"color\"]):focus-visible,\n.contactPane input:not([type=\"color\"]):focus-visible,\n.individualPane textarea:focus-visible,\n.contactPane textarea:focus-visible,\n.individualPane select:focus-visible,\n.contactPane select:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary) !important;\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.individualPane input[type=\"url\"],\n.contactPane input[type=\"url\"] {\n  width: 100%;\n}\n\n.individualPane .formFieldValue,\n.contactPane .formFieldValue {\n  min-width: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.individualPane .formFieldValue table,\n.contactPane .formFieldValue table {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.individualPane .formFieldValue td,\n.contactPane .formFieldValue td {\n  padding: 0 !important;\n  vertical-align: middle;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n  height: 100%;\n}\n\n.individualPane .formFieldValue input:not([type=\"color\"]),\n.contactPane .formFieldValue input:not([type=\"color\"]),\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea,\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n  width: 100%;\n  max-width: 100%;\n}\n\n.individualPane select#formSelect,\n.contactPane select#formSelect {\n  width: 100%;\n  max-width: 97%;\n  box-sizing: border-box;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.individualPane span select,\n.contactPane span select {\n  max-width: 96% !important;\n  box-sizing: border-box;\n  margin: 0 !important;\n}\n\n.individualPane .formFieldValue span select,\n.contactPane .formFieldValue span select {\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.individualPane > div:first-of-type,\n.contactPane > div:first-of-type,\n.individualPane > div:first-of-type > div:first-of-type,\n.contactPane > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.individualPane > div,\n.contactPane > div {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue),\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n  display: flex;\n  align-items: baseline;\n  margin-bottom: var(--spacing-sm);\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.individualPane .choiceBox .classifierBox-label,\n.contactPane .choiceBox .classifierBox-label {\n  margin-right: 0;\n  padding-left: 0.3em;\n}\n\n.individualPane .choiceBox .choiceBox-selectBox select,\n.contactPane .choiceBox .choiceBox-selectBox select {\n  margin-left: 2.1em !important;\n}\n\n/* for the Resume orga details */\n/* Add space between classifierBox label and select box */\n.individualPane .classifierBox .classifierBox-label,\n.contactPane .classifierBox .classifierBox-label {\n  margin-right: 0;\n  padding-left: 0.3em;\n  width: 8em;\n  padding: 0.3em;\n  vertical-align: middle;\n}\n\n.individualPane .classifierBox .classifierBox-selectBox,\n.contactPane .classifierBox .classifierBox-selectBox {\n  margin-left: 0 !important;\n}\n\n.individualPane .classifierBox .classifierBox-selectBox select,\n.contactPane .classifierBox .classifierBox-selectBox select {\n  margin-left: 0 !important;\n}\n\n.individualPane .formFieldValue > span > select,\n.contactPane .formFieldValue > span > select {\n  margin-left: 0 !important;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue,\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n  margin-bottom: 0;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  flex: 1;\n  min-width: 0;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0.05em solid var(--color-secondary) !important;\n  border-style: solid !important;\n  border-width: 0.05em !important;\n  border-color: var(--color-secondary) !important;\n  border-radius: var(--border-radius-base) !important;\n  width: 100%;\n  box-sizing: border-box;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.individualPane div:has(> a) + div:has(textarea),\n.contactPane div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n  padding-left: var(--spacing-xs);\n  padding-top: var(--spacing-sm);\n}\n\n/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]),\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) {\n  align-items: flex-start;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName,\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n  padding-top: var(--spacing-xs) !important;\n}\n\n.individualPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]),\n.contactPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) {\n  align-self: flex-start;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n  margin: 0 !important;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n  vertical-align: baseline;\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]) {\n  width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.individualPane input:disabled,\n.contactPane input:disabled,\n.individualPane textarea:disabled,\n.contactPane textarea:disabled,\n.individualPane select:disabled,\n.contactPane select:disabled,\n.individualPane input[readonly],\n.contactPane input[readonly],\n.individualPane textarea[readonly],\n.contactPane textarea[readonly],\n.individualPane input:read-only,\n.contactPane input:read-only,\n.individualPane textarea:read-only,\n.contactPane textarea:read-only {\n  background-color: var(--color-background) !important;\n  cursor: not-allowed;\n  opacity: 0.75;\n  border: 0.05em solid var(--color-background) !important;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n  padding: var(--spacing-xs) !important;\n}\n\n.contactPane .webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -14909,15 +14960,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 /***/ },
 
 /***/ 295
-(module, __nested_webpack_exports__, __nested_webpack_require_66404__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_72654__) {
 
-/* harmony export */ __nested_webpack_require_66404__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_72654__.d(__nested_webpack_exports__, {
 /* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_66404__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_66404__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_66404__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_66404__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_72654__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_72654__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_72654__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_72654__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -14929,7 +14980,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
 /* ── Tools pane table ────────────────────────────────────────── */
 
 .contactPane .statsLog {
-  font-size: 120%;
+  font-size: var(--font-size-lg);
   margin: var(--spacing-md);
   background-color: var(--color-background);
 }
@@ -14943,22 +14994,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
   max-width: 100%;
 }
 
-/* ── Tools header row ────────────────────────────────────────── */
-
-.contactPane .toolsHeader {
-  min-width: 20em;
-  padding: var(--spacing-md);
-  font-size: 150%;
-  border-bottom: 0.1em solid var(--color-error);
-  margin-bottom: var(--spacing-xl);
-}
-
-/* ── Status block ────────────────────────────────────────────── */
-
-.contactPane .toolsStatusBlock {
-  padding: var(--spacing-xl);
-}
-
 /* ── Tools pane layout ────────────────────────────────────────── */
 
 .contactPane .toolsPane {
@@ -14973,28 +15008,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
   gap: var(--spacing-xs);
 }
 
-/* ── Tools buttons ───────────────────────────────────────────── */
-
-.contactPane .toolsButton {
-  font-size: var(--font-size-base);
-  margin: 0.8em;
-  padding: var(--spacing-xs);
-}
-
-/* ── Load index button states ────────────────────────────────── */
+/* ── Load index button states ──────────────────────────────── */
 
 .contactPane .toolsButton--loading {
-  background-color: #ffc;
 }
 
 .contactPane .toolsButton--error {
-  background-color: #fcc;
+  background-color: var(--color-error);
 }
 
 .contactPane .toolsButton--success {
   background-color: var(--color-primary);
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/toolsPane.css"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,eAAe;EACf,yBAAyB;EACzB,yCAAyC;AAC3C;;AAEA;EACE,0BAA0B;EAC1B,qBAAqB;EACrB,qBAAqB;EACrB,yBAAyB;EACzB,gBAAgB;EAChB,eAAe;AACjB;;AAEA,mEAAmE;;AAEnE;EACE,eAAe;EACf,0BAA0B;EAC1B,eAAe;EACf,6CAA6C;EAC7C,gCAAgC;AAClC;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;AAC5B;;AAEA,oEAAoE;;AAEpE;EACE,aAAa;EACb,sBAAsB;EACtB,sBAAsB;AACxB;;AAEA;EACE,aAAa;EACb,eAAe;EACf,sBAAsB;AACxB;;AAEA,mEAAmE;;AAEnE;EACE,gCAAgC;EAChC,aAAa;EACb,0BAA0B;AAC5B;;AAEA,mEAAmE;;AAEnE;EACE,sBAAsB;AACxB;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE,sCAAsC;AACxC","sourcesContent":["/* toolsPane.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Tools pane table ────────────────────────────────────────── */\n\n.contactPane .statsLog {\n  font-size: 120%;\n  margin: var(--spacing-md);\n  background-color: var(--color-background);\n}\n\n.contactPane .statsLog pre {\n  padding: var(--spacing-md);\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  overflow: hidden;\n  max-width: 100%;\n}\n\n/* ── Tools header row ────────────────────────────────────────── */\n\n.contactPane .toolsHeader {\n  min-width: 20em;\n  padding: var(--spacing-md);\n  font-size: 150%;\n  border-bottom: 0.1em solid var(--color-error);\n  margin-bottom: var(--spacing-xl);\n}\n\n/* ── Status block ────────────────────────────────────────────── */\n\n.contactPane .toolsStatusBlock {\n  padding: var(--spacing-xl);\n}\n\n/* ── Tools pane layout ────────────────────────────────────────── */\n\n.contactPane .toolsPane {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.contactPane .toolsButtonsContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-xs);\n}\n\n/* ── Tools buttons ───────────────────────────────────────────── */\n\n.contactPane .toolsButton {\n  font-size: var(--font-size-base);\n  margin: 0.8em;\n  padding: var(--spacing-xs);\n}\n\n/* ── Load index button states ────────────────────────────────── */\n\n.contactPane .toolsButton--loading {\n  background-color: #ffc;\n}\n\n.contactPane .toolsButton--error {\n  background-color: #fcc;\n}\n\n.contactPane .toolsButton--success {\n  background-color: var(--color-primary);\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/toolsPane.css"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,yBAAyB;EACzB,yCAAyC;AAC3C;;AAEA;EACE,0BAA0B;EAC1B,qBAAqB;EACrB,qBAAqB;EACrB,yBAAyB;EACzB,gBAAgB;EAChB,eAAe;AACjB;;AAEA,oEAAoE;;AAEpE;EACE,aAAa;EACb,sBAAsB;EACtB,sBAAsB;AACxB;;AAEA;EACE,aAAa;EACb,eAAe;EACf,sBAAsB;AACxB;;AAEA,iEAAiE;;AAEjE;AACA;;AAEA;EACE,oCAAoC;AACtC;;AAEA;EACE,sCAAsC;AACxC","sourcesContent":["/* toolsPane.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Tools pane table ────────────────────────────────────────── */\n\n.contactPane .statsLog {\n  font-size: var(--font-size-lg);\n  margin: var(--spacing-md);\n  background-color: var(--color-background);\n}\n\n.contactPane .statsLog pre {\n  padding: var(--spacing-md);\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  overflow: hidden;\n  max-width: 100%;\n}\n\n/* ── Tools pane layout ────────────────────────────────────────── */\n\n.contactPane .toolsPane {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.contactPane .toolsButtonsContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-xs);\n}\n\n/* ── Load index button states ──────────────────────────────── */\n\n.contactPane .toolsButton--loading {\n}\n\n.contactPane .toolsButton--error {\n  background-color: var(--color-error);\n}\n\n.contactPane .toolsButton--success {\n  background-color: var(--color-primary);\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -15002,25 +15028,21 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
 /***/ },
 
 /***/ 886
-(module, __nested_webpack_exports__, __nested_webpack_require_71764__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_76650__) {
 
-/* harmony export */ __nested_webpack_require_71764__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_76650__.d(__nested_webpack_exports__, {
 /* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_71764__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_71764__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_71764__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_71764__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_76650__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_76650__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_76650__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_76650__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* webidControl.js styles — extracted from inline styles */
-/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
-
-/* ── Named pane (rendered sub-pane) ──────────────────────────── */
-
+___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pane) ──────────────────────────── */
 .contactPane .namedPane {
   border: 0.1em solid var(--color-text-muted);
   border-radius: var(--border-radius-base);
@@ -15029,11 +15051,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* webidControl.js styles — extracte
 /* ── Persona row ─────────────────────────────────────────────── */
 
 .contactPane .personaRow {
-  padding: 0.2em;
+  padding: var(--spacing-xs);
 }
 
 .contactPane .personaRow--webid {
-  background-color: #ffe6ff;
+  background-color: var(--color-info-bg);
 }
 
 /* ── Full-width elements ─────────────────────────────────────── */
@@ -15053,17 +15075,17 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* webidControl.js styles — extracte
 /* ── Section heading ─────────────────────────────────────────── */
 
 .contactPane .webidHeading {
-  font-size: 110%;
+  font-size: var(--font-size-lg);
   font-weight: bold;
   color: var(--color-primary);
-  padding: 0.2em;
-  margin: 0.7em 0;
+  padding: var(--spacing-xs);
+  margin: var(--spacing-sm) 0;
 }
 
 /* ── Prompt text ─────────────────────────────────────────────── */
 
 .contactPane .webidPrompt {
-  padding: 0.7em;
+  padding: var(--spacing-sm);
   border: none;
   font-size: var(--font-size-base);
   white-space: pre-wrap;
@@ -15078,7 +15100,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* webidControl.js styles — extracte
 .contactPane .collapsed {
   visibility: collapse;
 }
-`, "",{"version":3,"sources":["webpack://./src/styles/webidControl.css"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,2CAA2C;EAC3C,wCAAwC;AAC1C;;AAEA,mEAAmE;;AAEnE;EACE,cAAc;AAChB;;AAEA;EACE,yBAAyB;AAC3B;;AAEA,mEAAmE;;AAEnE;EACE,WAAW;AACb;;AAEA,mEAAmE;;AAEnE;EACE,YAAY;EACZ,6BAA6B;EAC7B,YAAY;AACd;;AAEA,mEAAmE;;AAEnE;EACE,eAAe;EACf,iBAAiB;EACjB,2BAA2B;EAC3B,cAAc;EACd,eAAe;AACjB;;AAEA,mEAAmE;;AAEnE;EACE,cAAc;EACd,YAAY;EACZ,gCAAgC;EAChC,qBAAqB;AACvB;;AAEA,mEAAmE;;AAEnE;EACE,aAAa;AACf;;AAEA;EACE,oBAAoB;AACtB","sourcesContent":["/* webidControl.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Named pane (rendered sub-pane) ──────────────────────────── */\n\n.contactPane .namedPane {\n  border: 0.1em solid var(--color-text-muted);\n  border-radius: var(--border-radius-base);\n}\n\n/* ── Persona row ─────────────────────────────────────────────── */\n\n.contactPane .personaRow {\n  padding: 0.2em;\n}\n\n.contactPane .personaRow--webid {\n  background-color: #ffe6ff;\n}\n\n/* ── Full-width elements ─────────────────────────────────────── */\n\n.contactPane .fullWidth {\n  width: 100%;\n}\n\n/* ── Open/close profile button ───────────────────────────────── */\n\n.contactPane .personaOpenButton {\n  float: right;\n  background-color: transparent;\n  border: none;\n}\n\n/* ── Section heading ─────────────────────────────────────────── */\n\n.contactPane .webidHeading {\n  font-size: 110%;\n  font-weight: bold;\n  color: var(--color-primary);\n  padding: 0.2em;\n  margin: 0.7em 0;\n}\n\n/* ── Prompt text ─────────────────────────────────────────────── */\n\n.contactPane .webidPrompt {\n  padding: 0.7em;\n  border: none;\n  font-size: var(--font-size-base);\n  white-space: pre-wrap;\n}\n\n/* ── Visibility / display helpers ────────────────────────────── */\n\n.contactPane .hidden {\n  display: none;\n}\n\n.contactPane .collapsed {\n  visibility: collapse;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/webidControl.css"],"names":[],"mappings":"AAAA,mEAAmE;AACnE;EACE,2CAA2C;EAC3C,wCAAwC;AAC1C;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;AAC5B;;AAEA;EACE,sCAAsC;AACxC;;AAEA,mEAAmE;;AAEnE;EACE,WAAW;AACb;;AAEA,mEAAmE;;AAEnE;EACE,YAAY;EACZ,6BAA6B;EAC7B,YAAY;AACd;;AAEA,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,iBAAiB;EACjB,2BAA2B;EAC3B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;EAC1B,YAAY;EACZ,gCAAgC;EAChC,qBAAqB;AACvB;;AAEA,mEAAmE;;AAEnE;EACE,aAAa;AACf;;AAEA;EACE,oBAAoB;AACtB","sourcesContent":["/* ── Named pane (rendered sub-pane) ──────────────────────────── */\n.contactPane .namedPane {\n  border: 0.1em solid var(--color-text-muted);\n  border-radius: var(--border-radius-base);\n}\n\n/* ── Persona row ─────────────────────────────────────────────── */\n\n.contactPane .personaRow {\n  padding: var(--spacing-xs);\n}\n\n.contactPane .personaRow--webid {\n  background-color: var(--color-info-bg);\n}\n\n/* ── Full-width elements ─────────────────────────────────────── */\n\n.contactPane .fullWidth {\n  width: 100%;\n}\n\n/* ── Open/close profile button ───────────────────────────────── */\n\n.contactPane .personaOpenButton {\n  float: right;\n  background-color: transparent;\n  border: none;\n}\n\n/* ── Section heading ─────────────────────────────────────────── */\n\n.contactPane .webidHeading {\n  font-size: var(--font-size-lg);\n  font-weight: bold;\n  color: var(--color-primary);\n  padding: var(--spacing-xs);\n  margin: var(--spacing-sm) 0;\n}\n\n/* ── Prompt text ─────────────────────────────────────────────── */\n\n.contactPane .webidPrompt {\n  padding: var(--spacing-sm);\n  border: none;\n  font-size: var(--font-size-base);\n  white-space: pre-wrap;\n}\n\n/* ── Visibility / display helpers ────────────────────────────── */\n\n.contactPane .hidden {\n  display: none;\n}\n\n.contactPane .collapsed {\n  visibility: collapse;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -15377,13 +15399,13 @@ module.exports = insertStyleElement;
 /***/ },
 
 /***/ 56
-(module, __unused_webpack_exports, __nested_webpack_require_83786__) {
+(module, __unused_webpack_exports, __nested_webpack_require_88507__) {
 
 
 
 /* istanbul ignore next  */
 function setAttributesWithoutAttributes(styleElement) {
-  var nonce =   true ? __nested_webpack_require_83786__.nc : 0;
+  var nonce =   true ? __nested_webpack_require_88507__.nc : 0;
   if (nonce) {
     styleElement.setAttribute("nonce", nonce);
   }
@@ -15513,7 +15535,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_86951__(moduleId) {
+/******/ 	function __nested_webpack_require_91672__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -15527,24 +15549,24 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_86951__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_91672__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
 /******/ 	
 /******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__nested_webpack_require_86951__.m = __webpack_modules__;
+/******/ 	__nested_webpack_require_91672__.m = __webpack_modules__;
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/compat get default export */
 /******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__nested_webpack_require_86951__.n = (module) => {
+/******/ 		__nested_webpack_require_91672__.n = (module) => {
 /******/ 			var getter = module && module.__esModule ?
 /******/ 				() => (module['default']) :
 /******/ 				() => (module);
-/******/ 			__nested_webpack_require_86951__.d(getter, { a: getter });
+/******/ 			__nested_webpack_require_91672__.d(getter, { a: getter });
 /******/ 			return getter;
 /******/ 		};
 /******/ 	})();
@@ -15552,9 +15574,9 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_86951__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_91672__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_86951__.o(definition, key) && !__nested_webpack_require_86951__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_91672__.o(definition, key) && !__nested_webpack_require_91672__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -15563,12 +15585,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_86951__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_91672__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/jsonp chunk loading */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_86951__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
+/******/ 		__nested_webpack_require_91672__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
 /******/ 		
 /******/ 		// object to store loaded and loading chunks
 /******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
@@ -15594,43 +15616,43 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	
 /******/ 	/* webpack/runtime/nonce */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_86951__.nc = undefined;
+/******/ 		__nested_webpack_require_91672__.nc = undefined;
 /******/ 	})();
 /******/ 	
 /************************************************************************/
 var __nested_webpack_exports__ = {};
 
 // EXPORTS
-__nested_webpack_require_86951__.d(__nested_webpack_exports__, {
+__nested_webpack_require_91672__.d(__nested_webpack_exports__, {
   "default": () => (/* binding */ src_contactsPane)
 });
 
 // EXTERNAL MODULE: external {"commonjs":"solid-logic","commonjs2":"solid-logic","amd":"solid-logic","root":"SolidLogic"}
-var external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_ = __nested_webpack_require_86951__(941);
+var external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_ = __nested_webpack_require_91672__(941);
 // EXTERNAL MODULE: external {"commonjs":"solid-ui","commonjs2":"solid-ui","amd":"solid-ui","root":"UI"}
-var external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_ = __nested_webpack_require_86951__(104);
+var external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_ = __nested_webpack_require_91672__(104);
 // EXTERNAL MODULE: external {"commonjs":"rdflib","commonjs2":"rdflib","amd":"rdflib","root":"$rdf"}
-var external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_ = __nested_webpack_require_86951__(53);
+var external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_ = __nested_webpack_require_91672__(53);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
-var injectStylesIntoStyleTag = __nested_webpack_require_86951__(72);
-var injectStylesIntoStyleTag_default = /*#__PURE__*/__nested_webpack_require_86951__.n(injectStylesIntoStyleTag);
+var injectStylesIntoStyleTag = __nested_webpack_require_91672__(72);
+var injectStylesIntoStyleTag_default = /*#__PURE__*/__nested_webpack_require_91672__.n(injectStylesIntoStyleTag);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleDomAPI.js
-var styleDomAPI = __nested_webpack_require_86951__(825);
-var styleDomAPI_default = /*#__PURE__*/__nested_webpack_require_86951__.n(styleDomAPI);
+var styleDomAPI = __nested_webpack_require_91672__(825);
+var styleDomAPI_default = /*#__PURE__*/__nested_webpack_require_91672__.n(styleDomAPI);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertBySelector.js
-var insertBySelector = __nested_webpack_require_86951__(659);
-var insertBySelector_default = /*#__PURE__*/__nested_webpack_require_86951__.n(insertBySelector);
+var insertBySelector = __nested_webpack_require_91672__(659);
+var insertBySelector_default = /*#__PURE__*/__nested_webpack_require_91672__.n(insertBySelector);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js
-var setAttributesWithoutAttributes = __nested_webpack_require_86951__(56);
-var setAttributesWithoutAttributes_default = /*#__PURE__*/__nested_webpack_require_86951__.n(setAttributesWithoutAttributes);
+var setAttributesWithoutAttributes = __nested_webpack_require_91672__(56);
+var setAttributesWithoutAttributes_default = /*#__PURE__*/__nested_webpack_require_91672__.n(setAttributesWithoutAttributes);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertStyleElement.js
-var insertStyleElement = __nested_webpack_require_86951__(540);
-var insertStyleElement_default = /*#__PURE__*/__nested_webpack_require_86951__.n(insertStyleElement);
+var insertStyleElement = __nested_webpack_require_91672__(540);
+var insertStyleElement_default = /*#__PURE__*/__nested_webpack_require_91672__.n(insertStyleElement);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js
-var styleTagTransform = __nested_webpack_require_86951__(113);
-var styleTagTransform_default = /*#__PURE__*/__nested_webpack_require_86951__.n(styleTagTransform);
+var styleTagTransform = __nested_webpack_require_91672__(113);
+var styleTagTransform_default = /*#__PURE__*/__nested_webpack_require_91672__.n(styleTagTransform);
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/webidControl.css
-var webidControl = __nested_webpack_require_86951__(886);
+var webidControl = __nested_webpack_require_91672__(886);
 ;// ./src/styles/webidControl.css
 
       
@@ -15879,6 +15901,8 @@ async function renderIdControl (person, dataBrowserContext, options) {
       profileIsVisible = !profileIsVisible
       main.classList.toggle('collapsed', !profileIsVisible)
       openButton.children[0].src = profileIsVisible ? UP_ARROW : DOWN_ARROW // @@ fragile
+      openButton.setAttribute('aria-expanded', profileIsVisible ? 'true' : 'false')
+      openButton.setAttribute('aria-label', profileIsVisible ? 'Collapse profile' : 'Expand profile')
     }
     function renderNewRow (webidObject) {
       const webid = new external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_.Literal(webidObject.uri)
@@ -15922,6 +15946,8 @@ async function renderIdControl (person, dataBrowserContext, options) {
     const rhs = nav.children[2]
     const openButton = rhs.appendChild(widgets.button(dom, DOWN_ARROW, 'View', profileOpenHandler))
     openButton.classList.add('personaOpenButton')
+    openButton.setAttribute('aria-expanded', 'true')
+    openButton.setAttribute('aria-label', 'Collapse profile')
     const paneName = isOrganization(person) || isOrganization(persona) ? 'profile' : 'profile' // was default for org
 
     widgets.publicData.loadPublicDataThing(kb, person, persona).then(_resp => {
@@ -16004,8 +16030,114 @@ async function renderIdControl (person, dataBrowserContext, options) {
   return div
 }
 
+;// ./src/localUtils.js
+
+
+
+
+const localUtils_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
+const localUtils_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
+let dom
+
+function setDom (d) {
+  dom = d
+}
+
+/**
+ * Normalize group URIs to ensure consistent representation.
+ * Groups should be referenced with fragment #this, e.g., ...Group/AnotherGroup.ttl#this
+ * If a group URI ends with .ttl (without #this), add #this
+ * @param {string} uri - The group URI to normalize
+ * @returns {string} The normalized group URI
+ */
+function normalizeGroupUri (uri) {
+  if (uri && uri.endsWith('.ttl')) {
+    return uri + '#this'
+  }
+  return uri
+}
+
+function complain (div, d, message) {
+  error('contactsPane: ' + message)
+  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.errorMessageBlock(d, message, 'pink')
+}
+function complainIfBad (div, dom, ok, body) {
+  if (!ok) {
+    complain(div, dom, 'Error: ' + body)
+  }
+}
+
+function localUtils_getSameAs (kb, item, doc) {
+  return kb.each(item, localUtils_ns.owl('sameAs'), null, doc).concat(
+    kb.each(null, localUtils_ns.owl('sameAs'), item, doc))
+}
+//  For deleting an addressbook sub-folder eg person - use with care!
+// @@ move to solid-logic
+function deleteRecursive (kb, folder) {
+  return new Promise(function (resolve, reject) {
+    kb.fetcher.load(folder).then(function () {
+      const promises = kb.each(folder, localUtils_ns.ldp('contains')).map(file => {
+        if (kb.holds(file, localUtils_ns.rdf('type'), localUtils_ns.ldp('BasicContainer'))) {
+          return deleteRecursive(kb, file)
+        } else {
+          log('Recursie delete - we delete file ' + file.uri)
+          return kb.fetcher.webOperation('DELETE', file.uri)
+        }
+      })
+      log('Recursie delete - we delete folder ' + folder.uri)
+      promises.push(kb.fetcher.webOperation('DELETE', folder.uri))
+      Promise.all(promises).then(_res => {
+        resolve()
+      }).catch(reject)  
+    }).catch(reject)    
+  })
+}
+
+// In a LDP work, deletes the whole document describing a thing
+// plus patch out ALL mentiosn of it!    Use with care!
+// beware of other data picked up from other places being smushed
+// together and then deleted.
+async function deleteThingAndDoc (x) {
+  const name = nameFor(x)
+  if (!confirm('Really DELETE ' + name + '?')) {
+    return
+  }
+  log('deleteThingAndDoc - to be deleted ' + x)
+  const ds = localUtils_kb.statementsMatching(x).concat(localUtils_kb.statementsMatching(undefined, undefined, x))
+  try {
+    await localUtils_kb.updater.updateMany(ds)
+    await localUtils_kb.fetcher.delete(x.doc())
+    log('deleteThingAndDoc - deleted')
+  } catch (err) {
+    external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.complain('Error deleting ' + x + ': ' + err)
+    throw err
+  }
+}
+
+function compareForSort (self, other) {
+  let s = nameFor(self)
+  let o = nameFor(other)
+  if (s && o) {
+    s = s.toLowerCase()
+    o = o.toLowerCase()
+    if (s > o) return 1
+    if (s < o) return -1
+  }
+  if (self.uri > other.uri) return 1
+  if (self.uri < other.uri) return -1
+  return 0
+}
+
+// organization-name is a hack for Mac records with no FN which is mandatory.
+function nameFor (x) {
+  const name =
+    localUtils_kb.any(x, localUtils_ns.vcard('fn')) ||
+    localUtils_kb.any(x, localUtils_ns.foaf('name')) ||
+    localUtils_kb.any(x, localUtils_ns.vcard('organization-name'))
+  return name ? name.value : '???'
+}
+
 ;// ./src/contactLogic.js
-// Logic for solid contacts
 
 
 
@@ -16132,6 +16264,7 @@ async function addPersonToGroup (thing, group) {
   try {
     await contactLogic_kb.fetcher.load(toBeFetched)
   } catch (e) {
+    //complain(dom, 'Error loading data for ' + thing + ' or ' + group + ': ' + e)
     throw new Error('addPersonToGroup: ' + e)
   }
 
@@ -16209,18 +16342,13 @@ function isLocal (group, item) {
   return local
 }
 
-function contactLogic_getSameAs (kb, item, doc) {
-  return kb.each(item, contactLogic_ns.owl('sameAs'), null, doc).concat(
-    kb.each(null, contactLogic_ns.owl('sameAs'), item, doc))
-}
-
 async function getDataModelIssues (groups) {
   const del = []
   const ins = []
   groups.forEach(group => {
     const members = contactLogic_kb.each(group, contactLogic_ns.vcard('hasMember'), null, group.doc())
     members.forEach((member) => {
-      const others = contactLogic_getSameAs(contactLogic_kb, member, group.doc())
+      const others = localUtils_getSameAs(contactLogic_kb, member, group.doc())
       if (others.length && isLocal(group, member)) { // Problem: local ID used instead of webID
         for (const other of others) {
           if (!isLocal(group, other)) { // Let's use this one as the immediate member for CSS ACLs'
@@ -16239,96 +16367,6 @@ async function getDataModelIssues (groups) {
 
 // Ends
 
-;// ./src/localUtils.js
-
-
-
-
-const localUtils_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
-const localUtils_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
-
-function complain (div, dom, message) {
-  log('contactsPane: ' + message)
-  div.appendChild(external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.errorMessageBlock(dom, message, 'pink'))
-}
-function complainIfBad (div, dom, ok, body) {
-  if (!ok) {
-    complain(div, dom, 'Error: ' + body)
-  }
-}
-
-function localUtils_getSameAs (kb, item, doc) {
-  return kb.each(item, localUtils_ns.owl('sameAs'), null, doc).concat(
-    kb.each(null, localUtils_ns.owl('sameAs'), item, doc))
-}
-//  For deleting an addressbook sub-folder eg person - use with care!
-// @@ move to solid-logic
-function deleteRecursive (kb, folder) {
-  return new Promise(function (resolve) {
-    kb.fetcher.load(folder).then(function () {
-      const promises = kb.each(folder, localUtils_ns.ldp('contains')).map(file => {
-        if (kb.holds(file, localUtils_ns.rdf('type'), localUtils_ns.ldp('BasicContainer'))) {
-          return deleteRecursive(kb, file)
-        } else {
-          log('deleteRecursive file: ' + file)
-          if (!confirm(' Really DELETE File ' + file)) {
-            throw new Error('User aborted delete file')
-          }
-          return kb.fetcher.webOperation('DELETE', file.uri)
-        }
-      })
-      log('deleteRecirsive folder: ' + folder)
-      if (!confirm(' Really DELETE folder ' + folder)) {
-        throw new Error('User aborted delete file')
-      }
-      promises.push(kb.fetcher.webOperation('DELETE', folder.uri))
-      Promise.all(promises).then(_res => {
-        resolve()
-      })
-    })
-  })
-}
-
-// In a LDP work, deletes the whole document describing a thing
-// plus patch out ALL mentiosn of it!    Use with care!
-// beware of other data picked up from other places being smushed
-// together and then deleted.
-async function deleteThingAndDoc (x) {
-  log('deleteThingAndDoc: ' + x)
-  const ds = localUtils_kb.statementsMatching(x).concat(localUtils_kb.statementsMatching(undefined, undefined, x))
-  try {
-    await localUtils_kb.updater.updateMany(ds)
-    log('Deleting resoure ' + x.doc())
-    await localUtils_kb.fetcher.delete(x.doc())
-    log('Delete thing ' + x + ': complete.')
-  } catch (err) {
-    complain('Error deleting thing ' + x + ': ' + err)
-  }
-}
-
-function compareForSort (self, other) {
-  let s = nameFor(self)
-  let o = nameFor(other)
-  if (s && o) {
-    s = s.toLowerCase()
-    o = o.toLowerCase()
-    if (s > o) return 1
-    if (s < o) return -1
-  }
-  if (self.uri > other.uri) return 1
-  if (self.uri < other.uri) return -1
-  return 0
-}
-
-// organization-name is a hack for Mac records with no FN which is mandatory.
-function nameFor (x) {
-  const name =
-    localUtils_kb.any(x, localUtils_ns.vcard('fn')) ||
-    localUtils_kb.any(x, localUtils_ns.foaf('name')) ||
-    localUtils_kb.any(x, localUtils_ns.vcard('organization-name'))
-  return name ? name.value : '???'
-}
-
 ;// ./src/mintNewAddressBook.js
 
 
@@ -16501,7 +16539,7 @@ function mintNewAddressBook (dataBrowserContext, context) {
 }
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/mugshotGallery.css
-var mugshotGallery = __nested_webpack_require_86951__(715);
+var mugshotGallery = __nested_webpack_require_91672__(715);
 ;// ./src/styles/mugshotGallery.css
 
       
@@ -16748,6 +16786,7 @@ function renderMugshotGallery (dom, subject) {
   function elementForImage (image) {
     const img = dom.createElement('img')
     img.classList.add('mugshotImage')
+    img.setAttribute('alt', image ? 'Contact photo' : 'Drop photo here')
     external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.makeDropTarget(
       img,
       handleURIsDroppedOnMugshot,
@@ -16802,7 +16841,9 @@ function renderMugshotGallery (dom, subject) {
     const button = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.button(
       dom,
       external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.icons.iconBase + 'noun_925021.svg',
-      'Drag here to delete'
+      'Drag here to delete',
+      undefined,
+      { 'aria-label': 'Delete photo - drag image here' }
     )
     async function droppedURIHandler (uris) {
       const images = mugshotGallery_kb
@@ -16867,7 +16908,7 @@ function renderMugshotGallery (dom, subject) {
 }
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/groupMembership.css
-var groupMembership = __nested_webpack_require_86951__(93);
+var groupMembership = __nested_webpack_require_91672__(93);
 ;// ./src/styles/groupMembership.css
 
       
@@ -16902,6 +16943,7 @@ var groupMembership_update = injectStylesIntoStyleTag_default()(groupMembership/
 
 
 
+
 const groupMembershipControl_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
 const groupMembershipControl_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
 
@@ -16909,7 +16951,7 @@ const groupMembershipControl_kb = external_commonjs_solid_logic_commonjs2_solid_
 function groupMembershipControl_groupMembership (person) {
   let groups = groupMembershipControl_kb.statementsMatching(null, groupMembershipControl_ns.owl('sameAs'), person).map(st => st.why)
     .concat(groupMembershipControl_kb.each(null, groupMembershipControl_ns.vcard('hasMember'), person))
-  const strings = new Set(groups.map(group => group.uri)) // remove dups
+  const strings = new Set(groups.map(group => normalizeGroupUri(group.uri))) // remove dups with normalized URIs
   groups = [...strings].map(uri => groupMembershipControl_kb.sym(uri))
   return groups
 }
@@ -16945,12 +16987,13 @@ async function renderGroupMemberships (person, context) {
           del = del.concat(kb.statementsMatching(undefined, undefined, webid, group.doc()))
         }
       })
-      kb.updater.update(del, [], function (uri, ok, err) {
-        if (!ok) {
-          const message = 'Error removing member from group ' + group + ': ' + err
-          container.appendChild(external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.errorMessageBlock(dom, message, 'pink'))
-        }
-      })
+      try {
+        await kb.updater.update(del, [])
+      } catch (err) {
+        const message = 'Error removing member from group ' + group + ': ' + err
+        container.appendChild(external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.errorMessageBlock(dom, message, 'pink'))
+        return
+      }
       log('Removed ' + pname + ' from group ' + gname)
       // to allow refresh of card groupList
       kb.fetcher.unload(group.doc())
@@ -17052,7 +17095,7 @@ const individualAndOrganizationForm_namespaceObject = "# This turtle file define
 ;// ./src/ontology/vcard.ttl
 const vcard_namespaceObject = "@prefix : <http://www.w3.org/2006/vcard/ns#> .\n@prefix owl: <http://www.w3.org/2002/07/owl#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .\n@prefix xml: <http://www.w3.org/XML/1998/namespace> .\n@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .\n\n:Acquaintance a owl:Class ;\n    rdfs:label \"Acquaintance\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Agent a owl:Class ;\n    rdfs:label \"Agent\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:BBS a owl:Class ;\n    rdfs:label \"BBS\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType ;\n    owl:deprecated true .\n\n:Car a owl:Class ;\n    rdfs:label \"Car\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType ;\n    owl:deprecated true .\n\n:Cell a owl:Class ;\n    rdfs:label \"Cell\"@en ;\n    rdfs:comment \"Also called mobile telephone\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:Child a owl:Class ;\n    rdfs:label \"Child\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Colleague a owl:Class ;\n    rdfs:label \"Colleague\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Contact a owl:Class ;\n    rdfs:label \"Contact\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Coresident a owl:Class ;\n    rdfs:label \"Coresident\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Coworker a owl:Class ;\n    rdfs:label \"Coworker\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Crush a owl:Class ;\n    rdfs:label \"Crush\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Date a owl:Class ;\n    rdfs:label \"Date\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Dom a owl:Class ;\n    rdfs:label \"Dom\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Emergency a owl:Class ;\n    rdfs:label \"Emergency\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Fax a owl:Class ;\n    rdfs:label \"Fax\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:Female a owl:Class ;\n    rdfs:label \"Female\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Gender .\n\n:Friend a owl:Class ;\n    rdfs:label \"Friend\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Home a owl:Class ;\n    rdfs:label \"Home\"@en ;\n    rdfs:comment \"This implies that the property is related to an individual's personal life\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type .\n\n:ISDN a owl:Class ;\n    rdfs:label \"ISDN\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Internet a owl:Class ;\n    rdfs:label \"Internet\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Intl a owl:Class ;\n    rdfs:label \"Intl\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Kin a owl:Class ;\n    rdfs:label \"Kin\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Label a owl:Class ;\n    rdfs:label \"Label\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Male a owl:Class ;\n    rdfs:label \"Male\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Gender .\n\n:Me a owl:Class ;\n    rdfs:label \"Me\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Met a owl:Class ;\n    rdfs:label \"Met\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Modem a owl:Class ;\n    rdfs:label \"Modem\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType ;\n    owl:deprecated true .\n\n:Msg a owl:Class ;\n    rdfs:label \"Msg\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType ;\n    owl:deprecated true .\n\n:Muse a owl:Class ;\n    rdfs:label \"Muse\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Neighbor a owl:Class ;\n    rdfs:label \"Neighbor\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:None a owl:Class ;\n    rdfs:label \"None\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Gender .\n\n:Other a owl:Class ;\n    rdfs:label \"Other\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Gender .\n\n:PCS a owl:Class ;\n    rdfs:label \"PCS\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType ;\n    owl:deprecated true .\n\n:Pager a owl:Class ;\n    rdfs:label \"Pager\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:Parcel a owl:Class ;\n    rdfs:label \"Parcel\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Parent a owl:Class ;\n    rdfs:label \"Parent\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Postal a owl:Class ;\n    rdfs:label \"Postal\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Pref a owl:Class ;\n    rdfs:label \"Pref\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:Sibling a owl:Class ;\n    rdfs:label \"Sibling\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Spouse a owl:Class ;\n    rdfs:label \"Spouse\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Sweetheart a owl:Class ;\n    rdfs:label \"Sweetheart\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :RelatedType .\n\n:Tel a owl:Class ;\n    rdfs:label \"Tel\"@en ;\n    rdfs:comment \"This class is deprecated. Use the hasTelephone object property.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:Text a owl:Class ;\n    rdfs:label \"Text\"@en ;\n    rdfs:comment \"Also called sms telephone\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:TextPhone a owl:Class ;\n    rdfs:label \"Text phone\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:Unknown a owl:Class ;\n    rdfs:label \"Unknown\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Gender .\n\n:Video a owl:Class ;\n    rdfs:label \"Video\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:Voice a owl:Class ;\n    rdfs:label \"Voice\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :TelephoneType .\n\n:Work a owl:Class ;\n    rdfs:label \"Work\"@en ;\n    rdfs:comment \"This implies that the property is related to an individual's work place\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type .\n\n:X400 a owl:Class ;\n    rdfs:label \"X400\"@en ;\n    rdfs:comment \"This class is deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Type ;\n    owl:deprecated true .\n\n:adr a owl:ObjectProperty ;\n    rdfs:label \"address\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasAddress .\n\n:agent a owl:ObjectProperty ;\n    rdfs:label \"agent\"@en ;\n    rdfs:comment \"This object property has been deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:anniversary a owl:DatatypeProperty ;\n    rdfs:label \"anniversary\"@en ;\n    rdfs:comment \"The date of marriage, or equivalent, of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range [ a rdfs:Datatype ;\n            owl:unionOf ( xsd:dateTime xsd:gYear ) ] .\n\n:bday a owl:DatatypeProperty ;\n    rdfs:label \"birth date\"@en ;\n    rdfs:comment \"To specify the birth date of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range [ a rdfs:Datatype ;\n            owl:unionOf ( xsd:dateTime xsd:dateTimeStamp xsd:gYear ) ] .\n\n:category a owl:DatatypeProperty ;\n    rdfs:label \"category\"@en ;\n    rdfs:comment \"The category information about the object, also known as tags\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:class a owl:DatatypeProperty ;\n    rdfs:label \"class\"@en ;\n    rdfs:comment \"This data property has been deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:email a owl:ObjectProperty ;\n    rdfs:label \"email\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasEmail .\n\n:extended-address a owl:DatatypeProperty ;\n    rdfs:label \"extended address\"@en ;\n    rdfs:comment \"This data property has been deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:geo a owl:ObjectProperty ;\n    rdfs:label \"geo\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasGeo .\n\n:hasAdditionalName a owl:ObjectProperty ;\n    rdfs:label \"has additional name\"@en ;\n    rdfs:comment \"Used to support property parameters for the additional name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCalendarBusy a owl:ObjectProperty ;\n    rdfs:label \"has calendar busy\"@en ;\n    rdfs:comment \"To specify the busy time associated with the object. (Was called FBURL in RFC6350)\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCalendarLink a owl:ObjectProperty ;\n    rdfs:label \"has calendar link\"@en ;\n    rdfs:comment \"To specify the calendar associated with the object. (Was called CALURI in RFC6350)\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCalendarRequest a owl:ObjectProperty ;\n    rdfs:label \"has calendar request\"@en ;\n    rdfs:comment \"To specify the calendar user address to which a scheduling request be sent for the object. (Was called CALADRURI in RFC6350)\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCategory a owl:ObjectProperty ;\n    rdfs:label \"has category\"@en ;\n    rdfs:comment \"Used to support property parameters for the category data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCountryName a owl:ObjectProperty ;\n    rdfs:label \"has country name\"@en ;\n    rdfs:comment \"Used to support property parameters for the country name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasFN a owl:ObjectProperty ;\n    rdfs:label \"has formatted name\"@en ;\n    rdfs:comment \"Used to support property parameters for the formatted name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasFamilyName a owl:ObjectProperty ;\n    rdfs:label \"has family name\"@en ;\n    rdfs:comment \"Used to support property parameters for the family name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasGender a owl:ObjectProperty ;\n    rdfs:label \"has gender\"@en ;\n    rdfs:comment \"To specify  the sex or gender identity of the object. URIs are recommended to enable interoperable sex and gender codes to be used.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasGivenName a owl:ObjectProperty ;\n    rdfs:label \"has given name\"@en ;\n    rdfs:comment \"Used to support property parameters for the given name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasHonorificPrefix a owl:ObjectProperty ;\n    rdfs:label \"has honorific prefix\"@en ;\n    rdfs:comment \"Used to support property parameters for the honorific prefix data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasHonorificSuffix a owl:ObjectProperty ;\n    rdfs:label \"has honorific suffix\"@en ;\n    rdfs:comment \"Used to support property parameters for the honorific suffix data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasInstantMessage a owl:ObjectProperty ;\n    rdfs:label \"has messaging\"@en ;\n    rdfs:comment \"To specify the instant messaging and presence protocol communications with the object. (Was called IMPP in RFC6350)\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasLanguage a owl:ObjectProperty ;\n    rdfs:label \"has language\"@en ;\n    rdfs:comment \"Used to support property parameters for the language data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasLocality a owl:ObjectProperty ;\n    rdfs:label \"has locality\"@en ;\n    rdfs:comment \"Used to support property parameters for the locality data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasNickname a owl:ObjectProperty ;\n    rdfs:label \"has nickname\"@en ;\n    rdfs:comment \"Used to support property parameters for the nickname data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:seeAlso :nickname .\n\n:hasNote a owl:ObjectProperty ;\n    rdfs:label \"has note\"@en ;\n    rdfs:comment \"Used to support property parameters for the note data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasOrganizationName a owl:ObjectProperty ;\n    rdfs:label \"has organization name\"@en ;\n    rdfs:comment \"Used to support property parameters for the organization name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasOrganizationUnit a owl:ObjectProperty ;\n    rdfs:label \"has organization unit name\"@en ;\n    rdfs:comment \"Used to support property parameters for the organization unit name data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasPostalCode a owl:ObjectProperty ;\n    rdfs:label \"has postal code\"@en ;\n    rdfs:comment \"Used to support property parameters for the postal code data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasRegion a owl:ObjectProperty ;\n    rdfs:label \"has region\"@en ;\n    rdfs:comment \"Used to support property parameters for the region data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasRelated a owl:ObjectProperty ;\n    rdfs:label \"has related\"@en ;\n    rdfs:comment \"To specify a relationship between another entity and the entity represented by this object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasRole a owl:ObjectProperty ;\n    rdfs:label \"has role\"@en ;\n    rdfs:comment \"Used to support property parameters for the role data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasSource a owl:ObjectProperty ;\n    rdfs:label \"has source\"@en ;\n    rdfs:comment \"To identify the source of directory information of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasStreetAddress a owl:ObjectProperty ;\n    rdfs:label \"has street address\"@en ;\n    rdfs:comment \"Used to support property parameters for the street address data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasTitle a owl:ObjectProperty ;\n    rdfs:label \"has title\"@en ;\n    rdfs:comment \"Used to support property parameters for the title data property\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasUID a owl:ObjectProperty ;\n    rdfs:label \"has uid\"@en ;\n    rdfs:comment \"To specify a value that represents a globally unique identifier corresponding to the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasValue a owl:ObjectProperty ;\n    rdfs:label \"has value\"@en ;\n    rdfs:comment \"Used to indicate the resource value of an object property that requires property parameters\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:label a owl:DatatypeProperty ;\n    rdfs:label \"label\"@en ;\n    rdfs:comment \"This data property has been deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:language a owl:DatatypeProperty ;\n    rdfs:label \"language\"@en ;\n    rdfs:comment \"To specify the language that may be used for contacting the object. May also be used as a property parameter.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:latitude a owl:DatatypeProperty ;\n    rdfs:label \"latitude\"@en ;\n    rdfs:comment \"This data property has been deprecated. See hasGeo\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:longitude a owl:DatatypeProperty ;\n    rdfs:label \"longitude\"@en ;\n    rdfs:comment \"This data property has been deprecated. See hasGeo\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:mailer a owl:DatatypeProperty ;\n    rdfs:label \"mailer\"@en ;\n    rdfs:comment \"This data property has been deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:note a owl:DatatypeProperty ;\n    rdfs:label \"note\"@en ;\n    rdfs:comment \"A note associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:org a owl:ObjectProperty ;\n    rdfs:label \"organization\"@en ;\n    rdfs:comment \"This object property has been mapped. Use the organization-name data property.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :organization-name .\n\n:organization-unit a owl:DatatypeProperty ;\n    rdfs:label \"organizational unit name\"@en ;\n    rdfs:comment \"To specify the organizational unit name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string ;\n    rdfs:subPropertyOf :organization-name .\n\n:post-office-box a owl:DatatypeProperty ;\n    rdfs:label \"post office box\"@en ;\n    rdfs:comment \"This data property has been deprecated\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:prodid a owl:DatatypeProperty ;\n    rdfs:label \"product id\"@en ;\n    rdfs:comment \"To specify the identifier for the product that created the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:rev a owl:DatatypeProperty ;\n    rdfs:label \"revision\"@en ;\n    rdfs:comment \"To specify revision information about the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:dateTime .\n\n:role a owl:DatatypeProperty ;\n    rdfs:label \"role\"@en ;\n    rdfs:comment \"To specify the function or part played in a particular situation by the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:sort-string a owl:DatatypeProperty ;\n    rdfs:label \"sort as\"@en ;\n    rdfs:comment \"To specify the string to be used for national-language-specific sorting. Used as a property parameter only.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:title a owl:DatatypeProperty ;\n    rdfs:label \"title\"@en ;\n    rdfs:comment \"To specify the position or job of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:tz a owl:DatatypeProperty ;\n    rdfs:label \"time zone\"@en ;\n    rdfs:comment \"To indicate time zone information that is specific to the object. May also be used as a property parameter.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:value a owl:DatatypeProperty ;\n    rdfs:label \"value\"@en ;\n    rdfs:comment \"Used to indicate the literal value of a data property that requires property parameters\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:Address a owl:Class ;\n    rdfs:label \"Address\"@en ;\n    rdfs:comment \"To specify the components of the delivery address for the  object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentClass [ a owl:Class ;\n            owl:unionOf ( [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :country-name ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :country-name ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :locality ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :locality ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :postal-code ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :postal-code ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :region ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :region ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :street-address ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :street-address ] ) ] ) ] .\n\n:Email a owl:Class ;\n    rdfs:label \"Email\"@en ;\n    rdfs:comment \"To specify the electronic mail address for communication with the object the vCard represents. Use the hasEmail object property.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:deprecated true .\n\n:Group a owl:Class ;\n    rdfs:label \"Group\"@en ;\n    rdfs:comment \"Object representing a group of persons or entities.  A group object will usually contain hasMember properties to specify the members of the group.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Kind ;\n    owl:disjointWith :Individual,\n        :Location,\n        :Organization ;\n    owl:equivalentClass [ a owl:Class ;\n            owl:intersectionOf ( [ a owl:Restriction ;\n                        owl:onProperty :hasMember ;\n                        owl:someValuesFrom :Kind ] [ a owl:Restriction ;\n                        owl:minQualifiedCardinality \"1\"^^xsd:nonNegativeInteger ;\n                        owl:onClass :Kind ;\n                        owl:onProperty :hasMember ] ) ] .\n\n:Individual a owl:Class ;\n    rdfs:label \"Individual\"@en ;\n    rdfs:comment \"An object representing a single person or entity\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Kind ;\n    owl:disjointWith :Location,\n        :Organization .\n\n:Name a owl:Class ;\n    rdfs:label \"Name\"@en ;\n    rdfs:comment \"To specify the components of the name of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentClass [ a owl:Class ;\n            owl:unionOf ( [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :additional-name ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:minCardinality \"0\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :additional-name ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :family-name ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :family-name ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :given-name ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :given-name ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :honorific-prefix ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:minCardinality \"0\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :honorific-prefix ] ) ] [ a owl:Class ;\n                        owl:intersectionOf ( [ a owl:Restriction ;\n                                    owl:onProperty :honorific-suffix ;\n                                    owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n                                    owl:minCardinality \"0\"^^xsd:nonNegativeInteger ;\n                                    owl:onProperty :honorific-suffix ] ) ] ) ] .\n\n:VCard a owl:Class ;\n    rdfs:label \"VCard\"@en ;\n    rdfs:comment \"The vCard class is  equivalent to the new Kind class, which is the parent for the four explicit types of vCards (Individual, Organization, Location, Group)\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentClass :Kind .\n\n:fn a owl:DatatypeProperty ;\n    rdfs:label \"formatted name\"@en ;\n    rdfs:comment \"The formatted text corresponding to the name of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:hasAddress a owl:ObjectProperty ;\n    rdfs:label \"has address\"@en ;\n    rdfs:comment \"To specify the components of the delivery address for the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range :Address .\n\n:hasEmail a owl:ObjectProperty ;\n    rdfs:label \"has email\"@en ;\n    rdfs:comment \"To specify the electronic mail address for communication with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range :Email .\n\n:hasGeo a owl:ObjectProperty ;\n    rdfs:label \"has geo\"@en ;\n    rdfs:comment \"To specify information related to the global positioning of the object. May also be used as a property parameter.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasKey a owl:ObjectProperty ;\n    rdfs:label \"has key\"@en ;\n    rdfs:comment \"To specify a public key or authentication certificate associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :key .\n\n:hasLogo a owl:ObjectProperty ;\n    rdfs:label \"has logo\"@en ;\n    rdfs:comment \"To specify a graphic image of a logo associated with the object \"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :logo .\n\n:hasName a owl:ObjectProperty ;\n    rdfs:label \"has name\"@en ;\n    rdfs:comment \"To specify the components of the name of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range :Name ;\n    owl:equivalentProperty :n .\n\n:hasPhoto a owl:ObjectProperty ;\n    rdfs:label \"has photo\"@en ;\n    rdfs:comment \"To specify an image or photograph information that annotates some aspect of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :photo .\n\n:hasSound a owl:ObjectProperty ;\n    rdfs:label \"has sound\"@en ;\n    rdfs:comment \"To specify a digital sound content information that annotates some aspect of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :sound .\n\n:hasTelephone a owl:ObjectProperty ;\n    rdfs:label \"has telephone\"@en ;\n    rdfs:comment \"To specify the telephone number for telephony communication with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :tel .\n\n:hasURL a owl:ObjectProperty ;\n    rdfs:label \"has url\"@en ;\n    rdfs:comment \"To specify a uniform resource locator associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :url .\n\n:key a owl:ObjectProperty ;\n    rdfs:label \"key\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasKey .\n\n:logo a owl:ObjectProperty ;\n    rdfs:label \"logo\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasLogo .\n\n:n a owl:ObjectProperty ;\n    rdfs:label \"name\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasName .\n\n:nickname a owl:DatatypeProperty ;\n    rdfs:label \"nickname\"@en ;\n    rdfs:comment \"The nick name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:photo a owl:ObjectProperty ;\n    rdfs:label \"photo\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasPhoto .\n\n:sound a owl:ObjectProperty ;\n    rdfs:label \"sound\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasSound .\n\n:tel a owl:ObjectProperty ;\n    rdfs:label \"telephone\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasTelephone .\n\n:url a owl:ObjectProperty ;\n    rdfs:label \"url\"@en ;\n    rdfs:comment \"This object property has been mapped\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentProperty :hasURL .\n\n:Location a owl:Class ;\n    rdfs:label \"Location\"@en ;\n    rdfs:comment \"An object representing a named geographical place\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Kind ;\n    owl:disjointWith :Organization .\n\n:additional-name a owl:DatatypeProperty ;\n    rdfs:label \"additional name\"@en ;\n    rdfs:comment \"The additional name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:country-name a owl:DatatypeProperty ;\n    rdfs:label \"country name\"@en ;\n    rdfs:comment \"The country name associated with the address of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:family-name a owl:DatatypeProperty ;\n    rdfs:label \"family name\"@en ;\n    rdfs:comment \"The family name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:given-name a owl:DatatypeProperty ;\n    rdfs:label \"given name\"@en ;\n    rdfs:comment \"The given name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:hasMember a owl:ObjectProperty ;\n    rdfs:label \"has member\"@en ;\n    rdfs:comment \"To include a member in the group this object represents. (This property can only be used by Group individuals)\"@en ;\n    rdfs:domain :Group ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range :Kind .\n\n:honorific-prefix a owl:DatatypeProperty ;\n    rdfs:label \"honorific prefix\"@en ;\n    rdfs:comment \"The honorific prefix of the name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:honorific-suffix a owl:DatatypeProperty ;\n    rdfs:label \"honorific suffix\"@en ;\n    rdfs:comment \"The honorific suffix of the name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:locality a owl:DatatypeProperty ;\n    rdfs:label \"locality\"@en ;\n    rdfs:comment \"The locality (e.g. city or town) associated with the address of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:organization-name a owl:DatatypeProperty ;\n    rdfs:label \"organization name\"@en ;\n    rdfs:comment \"To specify the organizational name associated with the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:postal-code a owl:DatatypeProperty ;\n    rdfs:label \"postal code\"@en ;\n    rdfs:comment \"The postal code associated with the address of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:region a owl:DatatypeProperty ;\n    rdfs:label \"region\"@en ;\n    rdfs:comment \"The region (e.g. state or province) associated with the address of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:street-address a owl:DatatypeProperty ;\n    rdfs:label \"street address\"@en ;\n    rdfs:comment \"The street address associated with the address of the object\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:range xsd:string .\n\n:Organization a owl:Class ;\n    rdfs:label \"Organization\"@en ;\n    rdfs:comment \"\"\"An object representing an organization.  An organization is a single entity, and might represent a business or government, a department or division within a business or government, a club, an association, or the like.\n\"\"\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    rdfs:subClassOf :Kind .\n\n:Gender a owl:Class ;\n    rdfs:label \"Gender\"@en ;\n    rdfs:comment \"Used for gender codes. The URI of the gender code must be used as the value for Gender.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:Kind a owl:Class ;\n    rdfs:label \"Kind\"@en ;\n    rdfs:comment \"The parent class for all objects\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n    owl:equivalentClass [ a owl:Restriction ;\n            owl:minQualifiedCardinality \"1\"^^xsd:nonNegativeInteger ;\n            owl:onDataRange xsd:string ;\n            owl:onProperty :fn ],\n        :VCard .\n\n:Type a owl:Class ;\n    rdfs:label \"Type\"@en ;\n    rdfs:comment \"Used for type codes. The URI of the type code must be used as the value for Type.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:TelephoneType a owl:Class ;\n    rdfs:label \"Phone\"@en ;\n    rdfs:comment \"Used for telephone type codes. The URI of the telephone type code must be used as the value for the Telephone Type.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:RelatedType a owl:Class ;\n    rdfs:label \"Relation Type\"@en ;\n    rdfs:comment \"Used for relation type codes. The URI of the relation type code must be used as the value for the Relation Type.\"@en ;\n    rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n<http://www.w3.org/2006/vcard/ns> a owl:Ontology ;\n    rdfs:label \"Ontology for vCard\"@en ;\n    rdfs:comment \"Ontology for vCard based on RFC6350\"@en ;\n    owl:versionInfo \"Final\"@en .\n\n\n";
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/individual.css
-var individual = __nested_webpack_require_86951__(479);
+var individual = __nested_webpack_require_91672__(479);
 ;// ./src/styles/individual.css
 
       
@@ -17081,7 +17124,7 @@ var individual_update = injectStylesIntoStyleTag_default()(individual/* default
        /* harmony default export */ const styles_individual = (individual/* default */.A && individual/* default */.A.locals ? individual/* default */.A.locals : undefined);
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/rdfFormsEnforced.css
-var rdfFormsEnforced = __nested_webpack_require_86951__(434);
+var rdfFormsEnforced = __nested_webpack_require_91672__(434);
 ;// ./src/styles/rdfFormsEnforced.css
 
       
@@ -17213,16 +17256,18 @@ async function renderIndividual (dom, div, subject, dataBrowserContext) {
 
   div.appendChild(await renderGroupMemberships(subject, dataBrowserContext))
 
-  // Allow to attach documents etc to the contact card
-  const h3 = div.appendChild(dom.createElement('h3'))
-  h3.textContent = 'Attach any document to this contact'
-  h3.classList.add('webidHeading')
+  if ( external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.currentUser()) {
+    // Allow to attach documents etc to the contact card
+    const h3 = div.appendChild(dom.createElement('h3'))
+    h3.textContent = 'Attach any document to this contact'
+    h3.classList.add('webidHeading')
 
-  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.attachmentList(dom, subject, div, {
-    modify: editable
-    // promptIcon: UI.icons.iconBase +  'noun_681601.svg',
-    // predicate: UI.ns.vcard('url') // @@@@@@@@@ ,--- no, the vcard ontology structure uses a bnode.
-  })
+    external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.attachmentList(dom, subject, div, {
+      modify: editable
+      // promptIcon: UI.icons.iconBase +  'noun_681601.svg',
+      // predicate: UI.ns.vcard('url') // @@@@@@@@@ ,--- no, the vcard ontology structure uses a bnode.
+    })
+  }
 
   if (isOrganization) {
     div.appendChild(await renderPublicIdControl(subject, dataBrowserContext))
@@ -17235,7 +17280,7 @@ async function renderIndividual (dom, div, subject, dataBrowserContext) {
 } // renderIndividual
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/toolsPane.css
-var toolsPane = __nested_webpack_require_86951__(295);
+var toolsPane = __nested_webpack_require_91672__(295);
 ;// ./src/styles/toolsPane.css
 
       
@@ -17280,6 +17325,7 @@ const VCARD = toolsPane_ns.vcard
 let book
 let selectedGroups
 let logSpace
+let refreshGroupsFn
 
 function toolsPane_toolsPane (
   selectAllGroups,
@@ -17287,10 +17333,12 @@ function toolsPane_toolsPane (
   groupsMainTable,
   bookParam,
   dataBrowserContext,
-  me
+  me,
+  refreshGroups
 ) {
   book = bookParam
   selectedGroups = selectedGroupsParam
+  refreshGroupsFn = refreshGroups
   const dom = dataBrowserContext.dom
 
   const pane = dom.createElement('div')
@@ -17917,7 +17965,7 @@ function stats (logSpace) {
   const totalContacts = toolsPane_kb.each(undefined, VCARD('inAddressBook'), book).length
   toolsPane_log(logSpace, '' + totalContacts + ' contacts loaded. ')
   let groups = toolsPane_kb.each(book, VCARD('includesGroup'))
-  const strings = new Set(groups.map(group => group.uri)) // remove dups
+  const strings = new Set(groups.map(group => normalizeGroupUri(group.uri))) // remove dups with normalized URIs
   groups = [...strings].map(uri => toolsPane_kb.sym(uri))
   toolsPane_log(logSpace, '' + groups.length + ' total groups. ')
   const gg = []
@@ -17954,7 +18002,7 @@ async function fixGroupless (book) {
   return new Promise(function (resolve) {
     const msg = dom.createElement('p')
     msg.textContent = `Add the ${groupless.length} contacts without groups to a 'No group' group?`
-    logSpace.parentNode.appendChild(msg)
+    logSpace.appendChild(msg)
     const confirmButton = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.continueButton(dom, async function () {
       msg.remove()
       confirmButton.remove()
@@ -17963,9 +18011,10 @@ async function fixGroupless (book) {
         await addPersonToGroup(person, groupOfUngrouped)
       }
       toolsPane_log(logSpace, 'People moved to group.')
+      if (refreshGroupsFn) refreshGroupsFn()
       resolve()
     })
-    logSpace.parentNode.appendChild(confirmButton)
+    logSpace.appendChild(confirmButton)
   })
 }
 
@@ -17983,7 +18032,7 @@ async function getGroupless (book) {
   const reverseIndex = {}
   const groupless = []
   let groups = toolsPane_kb.each(book, VCARD('includesGroup'))
-  const strings = new Set(groups.map(group => group.uri)) // remove dups
+  const strings = new Set(groups.map(group => normalizeGroupUri(group.uri))) // remove dups with normalized URIs
   groups = [...strings].map(uri => toolsPane_kb.sym(uri))
   toolsPane_log(logSpace, '' + groups.length + ' total groups. ')
 
@@ -18039,7 +18088,7 @@ async function fixToOldDataModel (book) {
       return new Promise(function (resolve) {
         const msg = dom.createElement('p')
         msg.textContent = 'Groups can be updated to old data model?'
-        logSpace.parentNode.appendChild(msg)
+        logSpace.appendChild(msg)
         const confirmButton = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.continueButton(dom, async function () {
           msg.remove()
           confirmButton.remove()
@@ -18047,20 +18096,20 @@ async function fixToOldDataModel (book) {
           toolsPane_log(logSpace, 'Update done')
           resolve()
         })
-        logSpace.parentNode.appendChild(confirmButton)
+        logSpace.appendChild(confirmButton)
       })
     } else {
       toolsPane_log(logSpace, 'Nothing to update.\nAll groups already use the old data model.')
     }
   }
   let groups = toolsPane_kb.each(book, VCARD('includesGroup'))
-  const strings = new Set(groups.map(group => group.uri)) // remove dups
+  const strings = new Set(groups.map(group => normalizeGroupUri(group.uri))) // remove dups with normalized URIs
   groups = [...strings].map(uri => toolsPane_kb.sym(uri))
   updateToOldDataModel(groups)
 }
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/contactsPane.css
-var contactsPane = __nested_webpack_require_86951__(903);
+var contactsPane = __nested_webpack_require_91672__(903);
 ;// ./src/styles/contactsPane.css
 
       
@@ -18099,7 +18148,7 @@ var contactsPane_update = injectStylesIntoStyleTag_default()(contactsPane/* defa
 const addressBookPresenter_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
 const addressBookPresenter_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.utils
 const addressBookPresenter_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
-let dom
+let addressBookPresenter_dom
 let addressBookPresenter_selectedGroups = {}
 let selectedPeople = {}
 let ulPeople = null
@@ -18125,7 +18174,7 @@ function setActiveGroupButton (groupsUl, activeBtn) {
 }
 
 function renderGroupButtons (currentBook, groupsUl, options, domElement, groupsSelected, peopleUl, searchEl, cardMainEl, divEl, context, groupClickCallback) {
-  dom = domElement
+  addressBookPresenter_dom = domElement
   addressBookPresenter_selectedGroups = groupsSelected || {}
   if (peopleUl) ulPeople = peopleUl
   if (searchEl) searchInput = searchEl
@@ -18139,18 +18188,37 @@ function renderGroupButtons (currentBook, groupsUl, options, domElement, groupsS
   addressBookPresenter_utils.syncTableToArrayReOrdered(ulGroups, groups, renderGroupLi)
 }
 
+/** Create the common DOM structure for a group list item (li + button).
+ * Returns { groupLi, groupButton, name } so callers can attach their own handlers.
+ */
+function createGroupLi (group) {
+  const name = addressBookPresenter_kb.any(group, addressBookPresenter_ns.vcard('fn'))
+  const groupLi = addressBookPresenter_dom.createElement('li')
+  groupLi.setAttribute('role', 'listitem')
+  groupLi.setAttribute('aria-label', name ? name.value : 'Some group')
+  groupLi.subject = group
+  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.makeDraggable(groupLi, group)
+
+  const groupButton = groupLi.appendChild(addressBookPresenter_dom.createElement('button'))
+  groupButton.setAttribute('type', 'button')
+  groupButton.innerHTML = name ? name.value : 'Some group'
+  groupButton.classList.add('allGroupsButton', 'actionButton', 'btn-secondary', 'action-button-focus')
+
+  return { groupLi, groupButton, name }
+}
+
 function renderGroupLi (group) {
   async function handleURIsDroppedOnGroup (uris) {
-    uris.forEach(function (u) {
+    for (const u of uris) {
       log('Dropped on group: ' + u)
       const thing = addressBookPresenter_kb.sym(u)
       try {
-        addPersonToGroup(thing, group)
+        await addPersonToGroup(thing, group)
       } catch (e) {
         complain(e)
       }
       refreshNames(ulPeople)
-    })
+    }
   }
   function groupLiClickListener (event) {
     event.preventDefault()
@@ -18169,24 +18237,9 @@ function renderGroupLi (group) {
     })
   }
 
-  // Body of renderGroupUl
-  const name = addressBookPresenter_kb.any(group, addressBookPresenter_ns.vcard('fn'))
-  const groupLi = dom.createElement('li')
-  groupLi.setAttribute('role', 'listitem')
-  groupLi.setAttribute('tabindex', '0')
-  groupLi.setAttribute('aria-label', name ? name.value : 'Some group')
-  groupLi.subject = group
-  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.makeDraggable(groupLi, group)
-
-  const groupButton = groupLi.appendChild(dom.createElement('button'))
-  groupButton.setAttribute('type', 'button')
-  groupButton.innerHTML = name ? name.value : 'Some group'
-  groupButton.classList.add('allGroupsButton', 'actionButton', 'btn-secondary', 'action-button-focus')
-  groupButton.addEventListener(
-    'click', groupLiClickListener,
-    false
-  )
+  const { groupLi, groupButton } = createGroupLi(group)
 
+  groupButton.addEventListener('click', groupLiClickListener, false)
   external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.makeDropTarget(groupLi, handleURIsDroppedOnGroup)
   groupLi.addEventListener('click', groupLiClickListener, true)
   return groupLi
@@ -18199,6 +18252,7 @@ function selectAllGroups (
 ) {
   function fetchGroupAndSelect (group, groupLi) {
     groupLi.classList.add('group-loading')
+    groupLi.setAttribute('aria-busy', 'true')
     addressBookPresenter_kb.fetcher.nowOrWhenFetched(group.doc(), undefined, function (
       ok,
       message
@@ -18206,9 +18260,11 @@ function selectAllGroups (
       if (!ok) {
         const msg = 'Can\'t load group file: ' + group + ': ' + message
         badness.push(msg)
-        return complainIfBad(div, dom, ok, msg)
+        groupLi.setAttribute('aria-busy', 'false')
+        return complainIfBad(div, addressBookPresenter_dom, ok, msg)
       }
       groupLi.classList.remove('group-loading')
+      groupLi.setAttribute('aria-busy', 'false')
       groupLi.classList.add('selected')
       selectedGroups[group.uri] = true
       refreshThingsSelected(ulGroups, selectedGroups)
@@ -18220,8 +18276,8 @@ function selectAllGroups (
     })
   }
 
+  const badness = []
   let todo = 0
-  var badness = [] /* eslint-disable-line no-var */
   for (let k = 0; k < ulGroups.children.length; k++) {
     const groupLi = ulGroups.children[k]
     const group = groupLi.subject
@@ -18242,7 +18298,7 @@ function refreshThingsSelected (ul, selectionArray) {
 }
 
 function syncGroupUl (book, options, groupsUl, domElement, groupsSelected, peopleUl, searchEl) {
-  dom = domElement
+  addressBookPresenter_dom = domElement
   if (groupsSelected) addressBookPresenter_selectedGroups = groupsSelected
   if (peopleUl) ulPeople = peopleUl
   if (searchEl) searchInput = searchEl
@@ -18278,10 +18334,12 @@ function groupsInOrder (book, options) {
 
 async function loadAllGroups (book) {
   const groupIndex = addressBookPresenter_kb.any(book, addressBookPresenter_ns.vcard('groupIndex'))
-  await addressBookPresenter_kb.fetcher.load(groupIndex)
-  const gs = book ? addressBookPresenter_kb.each(book, addressBookPresenter_ns.vcard('includesGroup'), null, groupIndex) : []
-  await addressBookPresenter_kb.fetcher.load(gs)
-  return gs
+  if (groupIndex) {
+    await addressBookPresenter_kb.fetcher.load(groupIndex)
+    const gs = book ? addressBookPresenter_kb.each(book, addressBookPresenter_ns.vcard('includesGroup'), null, groupIndex) : []
+    await addressBookPresenter_kb.fetcher.load(gs)
+    return gs
+  } else return
 }
 
 // The book could be the main subject, or linked from a group we are dealing with
@@ -18305,9 +18363,16 @@ function findBookFromGroups (book) {
 /** Refresh the list of names */
 function refreshNames (ulPeople, detailsView, autoSelect = true) {
   function setPersonListener (personLi, person) {
-    personLi.addEventListener('click', function (event) {
+    function handleSelect (event) {
       event.preventDefault()
       selectPerson(ulPeople, person, cardMain)
+    }
+    personLi.addEventListener('click', handleSelect)
+    personLi.addEventListener('keydown', function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        handleSelect(event)
+      }
     })
   }
 
@@ -18328,7 +18393,7 @@ function refreshNames (ulPeople, detailsView, autoSelect = true) {
   }
 
   function renderNameInGroupList (person, ulPeople) {
-    const personLi = dom.createElement('li')
+    const personLi = addressBookPresenter_dom.createElement('li')
     personLi.setAttribute('role', 'listitem')
     personLi.setAttribute('tabindex', '0')
     personLi.classList.add('personLi')
@@ -18336,25 +18401,28 @@ function refreshNames (ulPeople, detailsView, autoSelect = true) {
     external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.makeDraggable(personLi, person)
 
     // Container for the row
-    const rowDiv = dom.createElement('div')
+    const rowDiv = addressBookPresenter_dom.createElement('div')
     rowDiv.classList.add('personLi-row')
 
     // Left: Avatar
-    const avatarDiv = dom.createElement('div')
+    const avatarDiv = addressBookPresenter_dom.createElement('div')
     avatarDiv.classList.add('personLi-avatar')
     // Placeholder avatar (shown initially while person doc loads)
-    const placeholderEl = dom.createElement('div')
+    const placeholderEl = addressBookPresenter_dom.createElement('div')
     placeholderEl.classList.add('avatar-placeholder')
-    placeholderEl.innerHTML = '<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="18" fill="#e0e0e0"/><text x="50%" y="58%" text-anchor="middle" fill="#888" font-size="16" font-family="Arial" dy=".3em">?</text></svg>'
+    placeholderEl.innerHTML = '<svg aria-hidden="true" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="18" fill="#e0e0e0"/><text x="50%" y="58%" text-anchor="middle" fill="#595959" font-size="16" font-family="Arial" dy=".3em">?</text></svg>'
     avatarDiv.appendChild(placeholderEl)
 
+    // Get name early so it can be used in trySetAvatar
+    const name = nameFor(person) || 'Unknown Name'
+
     // Try to set avatar from already-loaded data, or fetch the person's doc
     function trySetAvatar () {
       const avatarUrl = addressBookPresenter_kb.any(person, addressBookPresenter_ns.vcard('hasPhoto'))
       if (avatarUrl && avatarUrl.value) {
-        const img = dom.createElement('img')
+        const img = addressBookPresenter_dom.createElement('img')
         img.src = avatarUrl.value
-        img.alt = 'Avatar'
+        img.alt = name + ' avatar'
         avatarDiv.replaceChild(img, avatarDiv.firstChild)
       }
     }
@@ -18365,21 +18433,20 @@ function refreshNames (ulPeople, detailsView, autoSelect = true) {
     })
 
     // Center: Name
-    const infoDiv = dom.createElement('div')
+    const infoDiv = addressBookPresenter_dom.createElement('div')
     infoDiv.classList.add('personLi-info')
 
-    const name = nameFor(person) || 'Unknown Name'
     personLi.setAttribute('aria-label', name)
-    const nameDiv = dom.createElement('div')
+    const nameDiv = addressBookPresenter_dom.createElement('div')
     nameDiv.classList.add('personLi-name')
     nameDiv.textContent = name
 
     infoDiv.appendChild(nameDiv)
 
     // Right: Arrow icon
-    const arrowDiv = dom.createElement('div')
+    const arrowDiv = addressBookPresenter_dom.createElement('div')
     arrowDiv.classList.add('personLi-arrow')
-    arrowDiv.innerHTML = '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4.5L11.25 9L6 13.5" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+    arrowDiv.innerHTML = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4.5L11.25 9L6 13.5" stroke="#595959" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
 
     // Assemble
     rowDiv.appendChild(avatarDiv)
@@ -18399,6 +18466,8 @@ function selectPerson (ulPeople, person, detailsView) {
   if (!detailsView) return
   if (detailsView.parentNode) detailsView.parentNode.classList.remove('hidden')
   detailsView.innerHTML = 'Loading...'
+  detailsView.setAttribute('aria-busy', 'true')
+  detailsView.classList.add('detailsSectionContent--wide')
   selectedPeople = {}
   selectedPeople[person.uri] = true
   refreshFilteredPeople(ulPeople, false, detailsView) // Color to remember which one you picked
@@ -18408,68 +18477,90 @@ function selectPerson (ulPeople, person, detailsView) {
     message
   ) {
     detailsView.innerHTML = ''
+    detailsView.setAttribute('aria-busy', 'false')
     if (!ok) {
-      return complainIfBad(div, dom, ok, 'Can\'t load card: ' + local + ': ' + message)
+      return complainIfBad(div, addressBookPresenter_dom, ok, 'Can\'t load card: ' + local + ': ' + message)
     }
     // debug.log("Loaded card " + local + '\n')
 
     // Top-right toolbar with link icon and delete button
-    const toolbar = dom.createElement('div')
+    const toolbar = addressBookPresenter_dom.createElement('div')
     toolbar.classList.add('contact-toolbar')
-    const linkEl = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.linkIcon(dom, local)
+    const linkEl = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.linkIcon(addressBookPresenter_dom, local)
     linkEl.setAttribute('title', 'Uri of contact')
     toolbar.appendChild(linkEl)
 
     // Add in a delete button to delete from AB
     const deleteButton = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.deleteButtonWithCheck(
-      dom,
-      detailsView,
+      addressBookPresenter_dom,
+      toolbar, // appends it to toolbar.appendChild(deleteButton)
       'contact',
       async function () {
         const container = person.dir() // ASSUMPTION THAT CARD IS IN ITS OWN DIRECTORY
-        // alert('Container to delete is ' + container)
+    
         const pname = addressBookPresenter_kb.any(person, addressBookPresenter_ns.vcard('fn'))
-        if (confirm('Delete contact ' + pname + ' completely?? ' + container)) {
-          log('Deleting a contact ' + pname)
-          await loadAllGroups() // need to wait for all groups to be loaded in case they have a link to this person
-          // load people.ttl
-          const nameEmailIndex = addressBookPresenter_kb.any(addressBookPresenter_book, addressBookPresenter_ns.vcard('nameEmailIndex'))
-          await addressBookPresenter_kb.fetcher.load(nameEmailIndex)
-
-          //  - delete person's WebID's in each Group
-          //  - delete the references to it in group files and save them back
-          //  - delete the reference in people.ttl and save it back
-
-          // find all Groups
-          const groups = groupMembershipControl_groupMembership(person)
-          let removeFromGroups = []
-          // find person WebID's
-          groups.forEach(group => {
-            const webids = localUtils_getSameAs(addressBookPresenter_kb, person, group.doc())
-            // for each check in each Group that it is not used by an other person then delete
-            webids.forEach(webid => {
-              if (localUtils_getSameAs(addressBookPresenter_kb, webid, group.doc()).length === 1) {
-                removeFromGroups = removeFromGroups.concat(addressBookPresenter_kb.statementsMatching(group, addressBookPresenter_ns.vcard('hasMember'), webid, group.doc()))
-              }
-            })
-          })
-          // debug.log(removeFromGroups)
-          await addressBookPresenter_kb.updater.updateMany(removeFromGroups)
-          await deleteThingAndDoc(person)
-          await deleteRecursive(addressBookPresenter_kb, container)
-          refreshNames(ulPeople, person) // "Doesn't work" -- maybe does now with waiting for async
-          detailsView.innerHTML = 'Contact data deleted.'
+        log('We are about to delete the contact ' + pname)
+        await loadAllGroups() // need to wait for all groups to be loaded in case they have a link to this person
+        // load people.ttl
+        let nameEmailIndex = addressBookPresenter_kb.any(addressBookPresenter_book, addressBookPresenter_ns.vcard('nameEmailIndex'))
+        await addressBookPresenter_kb.fetcher.load(nameEmailIndex)
+
+        //  - delete person's WebID's in each Group
+        //  - delete the references to it in group files and save them back
+        //  - delete the reference in people.ttl and save it back
+
+        // find all Groups
+        const groups = groupMembershipControl_groupMembership(person)
+        let removeFromGroups = []
+        // find person WebID's
+        groups.forEach(group => {
+        const webids = localUtils_getSameAs(addressBookPresenter_kb, person, group.doc())
+        // for each check in each Group that it is not used by an other person then delete
+        webids.forEach(webid => {
+            if (localUtils_getSameAs(addressBookPresenter_kb, webid, group.doc()).length === 1) {
+            removeFromGroups = removeFromGroups.concat(addressBookPresenter_kb.statementsMatching(group, addressBookPresenter_ns.vcard('hasMember'), webid, group.doc()))
+            }
+        })
+        })
+
+        // Only if folder deletion succeeds, proceed with person deletion
+        await addressBookPresenter_kb.updater.updateMany(removeFromGroups)
+        
+        try {
+            await deleteThingAndDoc(person)
+        } catch (err) {
+            log('Contact deletion cancelled or failed: ' + err.message)
+            return // Stop - don't run deleteRecursive
         }
+
+        try {
+            await deleteRecursive(addressBookPresenter_kb, container, toolbar, addressBookPresenter_dom)
+        } catch (err) {
+            log('Deletion cancelled: ' + err.message)
+            return // Exit without continuing with other deletions
+        }
+        complain(div, addressBookPresenter_dom, "Contact data deleted.")
+        refreshNames(ulPeople, detailsView)
+        detailsView.innerHTML = 'Contact data deleted.'
       }
     )
     deleteButton.classList.add('deleteButton')
-    toolbar.appendChild(deleteButton)
     detailsView.appendChild(toolbar)
 
+    detailsView.classList.add('detailsSectionContent--wide')
     detailsView.appendChild(renderPane(local, 'contact'))
   })
 }
 
+function deselectAllPeople (ulPeople) {
+  selectedPeople = {}
+  if (ulPeople) {
+    for (let i = 0; i < ulPeople.children.length; i++) {
+      ulPeople.children[i].classList.remove('selected')
+    }
+  }
+}
+
 function refreshFilteredPeople (ulPeople, active, detailsView) {
   let count = 0
   let lastRow = null
@@ -18519,16 +18610,25 @@ function localNode (person) {
 }
 
 // Check every group is in the list and add it if not.
-async function checkDataModel (book) {
+async function checkDataModel (book, detailsSectionContent) {
   // await kb.fetcher.load(groups) // asssume loaded already
   const groups = await loadAllGroups(book)
 
-  const { del, ins } = await getDataModelIssues(groups)
+  if (groups && groups.length > 0) {
 
-  if (del.length && confirm(`Groups data model need to be updated? (${del.length})`)) {
-    await addressBookPresenter_kb.updater.updateMany(del, ins)
-    alert('Update done')
-  }
+    const { del, ins } = await getDataModelIssues(groups)
+
+    if (del.length) {
+        external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.deleteButtonWithCheck(
+        addressBookPresenter_dom,
+        detailsSectionContent, // where it appends it to
+        'contact',
+        async function () {
+            await addressBookPresenter_kb.updater.updateMany(del, ins)
+            log('Deleted ' + del.length + ' bad statements from groups')
+        })
+    }
+    }
 }
 
 // Prepare book data once so askName forms load instantly
@@ -18613,6 +18713,7 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
     const dom = dataBrowserContext.dom
     const kb = dataBrowserContext.session.store
     const div = dom.createElement('div')
+    setDom(dom) // set dom for ana error handling in other modules
 
     external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.preventBrowserDropEvents(dom) // protect drag and drop
 
@@ -18629,15 +18730,49 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
 
       const t = kb.findTypeURIs(subject)
 
-      let me = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.currentUser()
+      // Render a single contact Individual
+      if (
+        t[contactsPane_ns.vcard('Individual').uri] ||
+        t[contactsPane_ns.foaf('Person').uri] ||
+        t[contactsPane_ns.schema('Person').uri] ||
+        t[contactsPane_ns.vcard('Organization').uri] ||
+        t[contactsPane_ns.schema('Organization').uri]
+      ) {
+        renderIndividual(dom, div, subject, dataBrowserContext).then(() => log('(individual rendered)'))
+      /*
+        //          Render a Group instance
+      } 
+        else if (t[ns.vcard('Group').uri]) {
+        // If we have a main address book, then render this group as a guest group within it
+        UI.login
+          .findAppInstances(context, ns.vcard('AddressBook'))
+          .then(function (context) {
+            const addressBooks = context.instances
+            const options = { foreignGroup: subject }
+            if (addressBooks.length > 0) {
+              // const book = addressBooks[0]
+              renderAddressBook(addressBooks, options)
+            } else {
+              renderAddressBook([], options)
+              // @@ button to Make a new addressBook
+            }
+          })
+          .catch(function (e) {
+            complain(div, dom, '' + e)
+          })
+        */
+      // Render a AddressBook instance
+      } else if (t[contactsPane_ns.vcard('AddressBook').uri]) {
+        renderAddressBook([subject], {})
+      } else {
+        log(
+          'Error: Contact pane: No evidence that ' +
+            subject +
+            ' is anything to do with contacts.'
+        )
+      }
 
-      const context = {
-        target: subject,
-        me,
-        noun: 'address book',
-        div,
-        dom
-      } // missing: statusRegion
+      let me = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.currentUser()
 
       //  Render AddressBook instance
       function renderAddressBook (books, options) {
@@ -18654,13 +18789,23 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
       function renderAddressBookDetails (books, options) {
         const classLabel = contactsPane_utils.label(contactsPane_ns.vcard('AddressBook'))
 
-        const book = books[0] // for now
+        let book = options.foreignGroup // in case we have only a Grouo
+        let title = ''
+        if (books && books.length > 0) {
+          book = books[0] // if we have an Address Book, we prefer this     
+          title = contactsPane_utils.label(book.dir())
+        } else {
+          kb.any(book, contactsPane_ns.dc('title')) || kb.any(book, contactsPane_ns.vcard('fn'))
+          if (paneOptions.solo && title && typeof document !== 'undefined') {
+            document.title = title.value // @@ only when the outermmost pane
+          }
+          title = title ? title.value : classLabel
+        }
+       
         const groupIndex = kb.any(book, contactsPane_ns.vcard('groupIndex'))
         const selectedGroups = {}
         let selectedPeople = {} // Actually prob max 1
 
-        const target = options.foreignGroup || book
-
         let allGroupsLi = null
         let newGroupLi = null
 
@@ -18677,616 +18822,627 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
           }
         }
 
-        // the title of a adddress book has a default value, reason why if we take the name from the document
-        let title = ''
-        if (book) {
-          title = contactsPane_utils.label(book.dir())
-        } else {
-          contactsPane_utils.label(book.dir()) || kb.any(target, contactsPane_ns.dc('title')) || kb.any(target, contactsPane_ns.vcard('fn'))
-          if (paneOptions.solo && title && typeof document !== 'undefined') {
-            document.title = title.value // @@ only when the outermmost pane
-          }
-          title = title ? title.value : classLabel
+        // Shared context passed to all builder functions
+        const ctx = {
+          dom, kb, ns: contactsPane_ns, book, options, title, groupIndex,
+          selectedGroups, get selectedPeople () { return selectedPeople },
+          set selectedPeople (v) { selectedPeople = v },
+          get allGroupsLi () { return allGroupsLi },
+          set allGroupsLi (v) { allGroupsLi = v },
+          get newGroupLi () { return newGroupLi },
+          set newGroupLi (v) { newGroupLi = v },
+          actionButtons, setActiveActionButton,
+          dataBrowserContext, div, me,
+          setMe (v) { me = v },
+          paneOptions,
         }
 
-        // Click on New Group button
-        async function newGroupClickHandler (_event) {
-          showDetailsSection()
-          detailsSectionContent.innerHTML = ''
-          const groupIndex = kb.any(book, contactsPane_ns.vcard('groupIndex'))
-          try {
-            await kb.fetcher.load(groupIndex)
-          } catch (e) {
-            log('Error: Group index  NOT loaded:' + e + '\n')
-          }
-          log(' Group index has been loaded\n')
-
-          const name = await external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.askName(
-            dom, kb, detailsSectionContent, external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns.foaf('name'), contactsPane_ns.vcard('Group'), 'group')
-          if (!name) return // cancelled by user
-          let group
-          try {
-            group = await saveNewGroup(book, name)
-          } catch (err) {
-            log('Error: can\'t save new group:' + err)
-            detailsSectionContent.innerHTML = 'Failed to save group' + err
-            return
-          }
-          for (const key in selectedGroups) delete selectedGroups[key]
-          selectedGroups[group.uri] = true
-
-          // Refresh the group buttons list
-          if (allGroupsLi.parentNode) allGroupsLi.parentNode.removeChild(allGroupsLi)
-          if (newGroupLi.parentNode) newGroupLi.parentNode.removeChild(newGroupLi)
-          syncGroupUl(book, options, ulGroups, dom, selectedGroups, ulPeople, searchInput)
-          ulGroups.insertBefore(allGroupsLi, ulGroups.firstChild)
-          ulGroups.appendChild(newGroupLi)
-          refreshThingsSelected(ulGroups, selectedGroups)
-          // Highlight the new group button in ulGroups and show empty people list
-          const matchingLi = Array.from(ulGroups.children).find(li => li.subject && li.subject.uri === group.uri)
-          setActiveGroupButton(ulGroups, matchingLi ? matchingLi.querySelector('button') : null)
-          refreshNames(ulPeople, null, false)
-
-          detailsSectionContent.innerHTML = ''
-          detailsSectionContent.appendChild(external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.ACLControlBox5(
-            group.doc(), dataBrowserContext, 'group', kb,
-            function (ok, body) {
-              if (!ok) {
-                detailsSectionContent.innerHTML =
-                    'Group sharing setup failed: ' + body
-              }
-            }))
-        } // newGroupClickHandler
-
-        // Render the askName form for the given klass into formContainer
-        function createNewPersonOrOrganization (formContainer, klass) {
-          formContainer.innerHTML = ''
-          external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets
-            .askName(dom, kb, formContainer, external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns.foaf('name'), klass)
-            .then(async (name) => {
-              if (!name) return // cancelled by user
-              detailsSectionContent.innerHTML = 'Indexing...'
-              let person
-              try {
-                person = await saveNewContact(book, name, selectedGroups, klass)
-              } catch (err) {
-                const msg = 'Error: can\'t save new contact: ' + err
-                log(msg)
-                alert(msg)
-                return
-              }
-              selectedPeople = {}
-              selectedPeople[person.uri] = true
-              refreshNames(ulPeople, null) // Add name to list of group
-              detailsSectionContent.innerHTML = '' // Clear 'indexing'
-              const contactPane = dataBrowserContext.session.paneRegistry.byName('contact')
-              const paneDiv = contactPane.render(person, dataBrowserContext)
-              paneDiv.classList.add('renderPane')
-              detailsSectionContent.appendChild(paneDiv)
-            })
-        }
-
-        // //////////////////////////// Contact Browser  - Body
-        // Main wrapper for accessibility and style
-        const main = dom.createElement('main')
-        main.id = 'main-content'
-        main.classList.add('addressBook-grid')
-        main.setAttribute('role', 'main')
-        main.setAttribute('aria-label', 'Address Book')
-        main.setAttribute('tabindex', '-1')
+        // ── Build layout ────────────────────────────────────────────
+        const { main, addressBookSection, detailsSection } = buildMainLayout(ctx)
         div.appendChild(main)
 
-        // Section wrapper for accessibility and style
-        const section = dom.createElement('section')
-        section.setAttribute('aria-labelledby', 'addressBook-section')
-        section.classList.add('addressBookSection', 'section-bg')
-        section.setAttribute('role', 'region')
-        section.setAttribute('tabindex', '-1')
-        main.appendChild(section)
-
-        // Create a section for the header with white background
-        const headerSection = dom.createElement('section')
-        headerSection.classList.add('headerSection')
-
-        const header = dom.createElement('header')
-        header.classList.add('mb-md')
-        const h2 = dom.createElement('h2')
-        h2.id = 'addressBook-heading'
-        h2.setAttribute('tabindex', '-1')
-        h2.textContent = title
-
-        // New Contact button
-        const newContactButton = dom.createElement('button')
-        const container = dom.createElement('div')
-        newContactButton.setAttribute('type', 'button')
-        if (!me) newContactButton.setAttribute('disabled', 'true')
-        external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.checkUser().then(webId => {
-          if (webId) {
-            me = webId
-            newContactButton.removeAttribute('disabled')
-          }
-        })
-        container.appendChild(newContactButton)
-        newContactButton.innerHTML = '+ New contact'
-        newContactButton.classList.add('actionButton', 'btn-primary', 'action-button-focus')
-        let newContactClickGeneration = 0
-        newContactButton.addEventListener('click', async function (_event) {
-          setActiveActionButton(null)
-          const thisGeneration = ++newContactClickGeneration
-          showDetailsSection()
-          detailsSectionContent.innerHTML = ''
-          await ensureBookLoaded()
-          // Bail out if a newer click has taken over
-          if (thisGeneration !== newContactClickGeneration) return
-          detailsSectionContent.innerHTML = ''
-
-          const chooserDiv = dom.createElement('div')
-          chooserDiv.classList.add('contactTypeChooser')
-
-          const selectLabel = dom.createElement('label')
-          selectLabel.textContent = 'Contact type: '
-          selectLabel.setAttribute('for', 'contactTypeSelect')
-          chooserDiv.appendChild(selectLabel)
-
-          const select = dom.createElement('select')
-          select.id = 'contactTypeSelect'
-          select.classList.add('contactTypeSelect')
-          const optIndividual = dom.createElement('option')
-          optIndividual.value = 'Individual'
-          optIndividual.textContent = 'New person'
-          select.appendChild(optIndividual)
-          const optOrganization = dom.createElement('option')
-          optOrganization.value = 'Organization'
-          optOrganization.textContent = 'New organization'
-          select.appendChild(optOrganization)
-          chooserDiv.appendChild(select)
-
-          detailsSectionContent.appendChild(chooserDiv)
-
-          const remark = dom.createElement('p')
-          remark.classList.add('contactCreationRemark')
-          remark.textContent = 'The new contact is added to the already selected group.'
-          detailsSectionContent.appendChild(remark)
-
-          // Container for the askName form, placed below the select
-          const formContainer = dom.createElement('div')
-          formContainer.classList.add('contactFormContainer')
-          detailsSectionContent.appendChild(formContainer)
-
-          function currentKlass () {
-            return select.value === 'Organization'
-              ? contactsPane_ns.vcard('Organization')
-              : contactsPane_ns.vcard('Individual')
-          }
-
-          // Render person form immediately as default
-          createNewPersonOrOrganization(formContainer, currentKlass())
-
-          // Switch form when dropdown changes
-          select.addEventListener('change', function () {
-            createNewPersonOrOrganization(formContainer, currentKlass())
-          })
-        }, false)
-
-        // TODO we should also add if it is public or private
-        header.appendChild(h2)
-        header.appendChild(container)
-        headerSection.appendChild(header)
-        section.appendChild(headerSection)
-
-        // Add a dotted horizontal rule after the header section
-        const dottedHr = dom.createElement('hr')
-        dottedHr.classList.add('dottedHr')
-        section.appendChild(dottedHr)
-
-        // Search input
-        const searchSection = dom.createElement('section')
-        searchSection.classList.add('searchSection')
-        const searchDiv = dom.createElement('div')
-        searchDiv.classList.add('searchDiv')
-        searchSection.appendChild(searchDiv)
-        const searchInput = dom.createElement('input')
-        searchInput.setAttribute('type', 'text')
-        searchInput.setAttribute('aria-label', 'Search contacts')
-        searchInput.classList.add('searchInput')
-        searchInput.setAttribute('placeholder', 'Search by name')
-        searchDiv.appendChild(searchInput)
-        searchInput.addEventListener('input', function (_event) {
-          refreshFilteredPeople(ulPeople, true, detailsSectionContent)
-        })
-        section.appendChild(searchSection)
-
-        // Create a section for the buttons
-        const buttonSection = dom.createElement('section')
-        buttonSection.classList.add('buttonSection')
+        function showDetailsSection () {
+          detailsSection.classList.remove('hidden')
+        }
+        ctx.showDetailsSection = showDetailsSection
+        ctx.detailsSection = detailsSection
 
-        // People list (created early so it can be passed to presenter functions)
+        // Create shared DOM elements needed by multiple builders
         const ulPeople = dom.createElement('ul')
         ulPeople.setAttribute('role', 'list')
         ulPeople.setAttribute('aria-label', 'People list')
+        ctx.ulPeople = ulPeople
 
-        // Card main (created early so it can be passed to presenter functions)
         const detailsSectionContent = dom.createElement('div')
         detailsSectionContent.classList.add('detailsSectionContent')
         detailsSectionContent.setAttribute('role', 'region')
         detailsSectionContent.setAttribute('aria-labelledby', 'detailsSectionContent')
+        detailsSectionContent.setAttribute('aria-live', 'polite')
+        ctx.detailsSectionContent = detailsSectionContent
 
-        if (options.foreignGroup) {
-          selectedGroups[options.foreignGroup.uri] = true
-        }
-
-        // Groups list (all buttons inside ul > li)
-        const ulGroups = dom.createElement('ul')
-        ulGroups.classList.add('groupButtonsList')
-        ulGroups.setAttribute('role', 'list')
-        ulGroups.setAttribute('aria-label', 'Groups list')
-
-        if (book) {
-          // All groups button — leftmost, initially selected
-          allGroupsLi = dom.createElement('li')
-          const allGroupsButton = dom.createElement('button')
-          allGroupsButton.textContent = 'All groups'
-          allGroupsButton.classList.add('allGroupsButton', 'actionButton', 'btn-primary', 'action-button-focus', 'allGroupsButton--selected')
-          allGroupsButton.addEventListener('click', function (_event) {
-            setActiveGroupButton(ulGroups, allGroupsButton)
-            setActiveActionButton(null)
-            // Check if all groups are currently selected
-            const allSelected = Array.from(ulGroups.children).every(function (li) {
-              if (!li.subject) return true // skip non-group items (All groups, New group)
-              return !!selectedGroups[li.subject.uri]
-            })
+        // ── Header (title + New Contact button) ─────────────────────
+        const headerSection = buildHeaderSection(ctx)
+        addressBookSection.appendChild(headerSection)
 
-            if (!allSelected) {
-              allGroupsButton.classList.add('allGroupsButton--loading')
-              selectAllGroups(selectedGroups, ulGroups, function (
-                ok,
-                message
-              ) {
-                if (!ok) return complain(div, dom, message)
-                allGroupsButton.classList.remove('allGroupsButton--loading')
-                allGroupsButton.classList.add('allGroupsButton--active')
-                refreshThingsSelected(ulGroups, selectedGroups)
-                refreshNames(ulPeople, null)
-              })
-            } else {
-              allGroupsButton.classList.remove('allGroupsButton--loading', 'allGroupsButton--active')
-              allGroupsButton.classList.add('allGroupsButton--loaded') // pale green hint groups loaded
-              for (const key in selectedGroups) delete selectedGroups[key]
-              refreshThingsSelected(ulGroups, selectedGroups)
-              refreshNames(ulPeople, null)
-            }
-          }) // on button click
-          allGroupsLi.appendChild(allGroupsButton)
-          ulGroups.appendChild(allGroupsLi) // First item in the list
-
-          // New group button — rightmost (appended after group buttons are rendered)
-          newGroupLi = dom.createElement('li')
-          const newGroupButton = dom.createElement('button')
-          newGroupButton.setAttribute('type', 'button')
-          newGroupButton.innerHTML = '+ New group'
-          newGroupButton.classList.add('allGroupsButton', 'actionButton', 'btn-secondary', 'action-button-focus')
-          actionButtons.push(newGroupButton)
-          newGroupButton.addEventListener(
-            'click', function (event) {
-              setActiveGroupButton(ulGroups, newGroupButton)
-              setActiveActionButton(null)
-              newGroupClickHandler(event)
-            },
-            false
-          )
-          newGroupLi.appendChild(newGroupButton)
-
-          // Append ulGroups to buttonSection, then add New group at the end
-          buttonSection.appendChild(ulGroups)
-
-          kb.fetcher.nowOrWhenFetched(groupIndex.uri, book, function (ok, body) {
-            if (!ok) return complain(div, dom, 'Cannot load group index: ' + body)
-            // Remove special items before sync (syncTableToArrayReOrdered expects .subject on all children)
-            if (allGroupsLi.parentNode) allGroupsLi.parentNode.removeChild(allGroupsLi)
-            if (newGroupLi.parentNode) newGroupLi.parentNode.removeChild(newGroupLi)
-            syncGroupUl(book, options, ulGroups, dom, selectedGroups, ulPeople, searchInput) // Refresh list of groups
-            ulGroups.insertBefore(allGroupsLi, ulGroups.firstChild) // Keep All contacts first
-            ulGroups.appendChild(newGroupLi) // Keep New group last
-
-            // Auto-select all groups and display all contacts on load
-            allGroupsButton.classList.add('allGroupsButton--loading')
-            selectAllGroups(selectedGroups, ulGroups, function (loadOk, message) {
-              if (!loadOk) return complain(div, dom, message)
-              allGroupsButton.classList.remove('allGroupsButton--loading')
-              allGroupsButton.classList.add('allGroupsButton--active')
-              refreshThingsSelected(ulGroups, selectedGroups)
-              refreshNames(ulPeople, null)
-            })
-          })
+        const dottedHr = dom.createElement('hr')
+        dottedHr.classList.add('dottedHr')
+        addressBookSection.appendChild(dottedHr)
 
-          // Remove special items before initial render too
-          if (allGroupsLi.parentNode) allGroupsLi.parentNode.removeChild(allGroupsLi)
-          if (newGroupLi.parentNode) newGroupLi.parentNode.removeChild(newGroupLi)
-          renderGroupButtons(book, ulGroups, options, dom, selectedGroups, ulPeople, searchInput, detailsSectionContent, div, dataBrowserContext, function () {
-            setActiveActionButton(null)
-            // Keep the New contact form open when switching groups
-            if (!detailsSectionContent.querySelector('.contactTypeChooser, .contactFormContainer')) {
-              detailsSectionContent.innerHTML = ''
-              detailsSection.classList.add('hidden')
-            }
-          })
-          ulGroups.insertBefore(allGroupsLi, ulGroups.firstChild) // Keep All contacts first
-          ulGroups.appendChild(newGroupLi) // Ensure New group is last after initial render
-        } else {
-          syncGroupUl(book, options, ulGroups, dom, selectedGroups, ulPeople, searchInput) // Refresh list of groups (will be empty)
-          refreshNames(ulPeople, null)
-          log('No book, only one group -> hide list of groups')
-        } // if not book
+        // ── Search ──────────────────────────────────────────────────
+        const { searchSection, searchInput } = buildSearchSection(ctx)
+        ctx.searchInput = searchInput
+        addressBookSection.appendChild(searchSection)
 
-        section.appendChild(buttonSection)
+        // ── Group bar ───────────────────────────────────────────────
+        const { buttonSection, ulGroups } = buildGroupBar(ctx)
+        ctx.ulGroups = ulGroups
+        addressBookSection.appendChild(buttonSection)
 
-        // List of contacts
+        // ── People list ─────────────────────────────────────────────
         const peopleListSection = dom.createElement('section')
         peopleListSection.classList.add('peopleSection')
-        section.appendChild(peopleListSection)
-
+        addressBookSection.appendChild(peopleListSection)
         peopleListSection.appendChild(ulPeople)
 
-        // Accessible table structure — rendered beside the addressBook section
-        const detailsSection = dom.createElement('section')
-        detailsSection.classList.add('detailSection')
-        detailsSection.setAttribute('role', 'region')
-        detailsSection.setAttribute('aria-label', 'Details section')
-        detailsSection.classList.add('hidden')
-        main.appendChild(detailsSection)
+        // ── Details content section ─────────────────────────────────
+        detailsSection.appendChild(detailsSectionContent)
 
-        function showDetailsSection () {
-          detailsSection.classList.remove('hidden')
-        }
+        // ── Footer buttons ──────────────────────────────────────────
+        const cardFooter = buildFooterButtons(ctx)
+        addressBookSection.appendChild(cardFooter)
 
-        detailsSection.appendChild(detailsSectionContent)
+        checkDataModel(book, detailsSectionContent).then(() => { log('async checkDataModel done.') })
+      }
 
-        // Footer area for action buttons
-        const cardFooter = dom.createElement('div')
-        cardFooter.classList.add('cardFooter')
-        section.appendChild(cardFooter)
-
-        if (book) {
-          // Groups button
-          const groupsButton = cardFooter.appendChild(dom.createElement('button'))
-          groupsButton.setAttribute('type', 'button')
-          groupsButton.innerHTML = 'Groups'
-          groupsButton.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
-          actionButtons.push(groupsButton)
-          groupsButton.addEventListener('click', async function (_event) {
-            setActiveActionButton(groupsButton)
-            showDetailsSection()
-            detailsSectionContent.innerHTML = ''
-
-            // Header
-            const groupsHeader = dom.createElement('h3')
-            groupsHeader.textContent = 'Your groups'
-            detailsSectionContent.appendChild(groupsHeader)
-
-            const groupRemark = dom.createElement('p')
-            groupRemark.classList.add('contactCreationRemark')
-            groupRemark.textContent = 'When deleting a group, all its contacts are deleted too.'
-            detailsSectionContent.appendChild(groupRemark)
-
-            // Load all groups and display them in a list
-            let groups
-            try {
-              groups = await loadAllGroups(book)
-            } catch (err) {
-              detailsSectionContent.appendChild(dom.createTextNode('Failed to load groups: ' + err))
-              return
-            }
+      // /////////////// Fix user when testing on a plane
 
-            const groupsList = dom.createElement('ul')
-            groupsList.setAttribute('role', 'list')
-            groupsList.setAttribute('aria-label', 'All groups')
-            groupsList.classList.add('groupButtonsList')
+      if (
+        typeof document !== 'undefined' &&
+        document.location &&
+        ('' + document.location).slice(0, 16) === 'http://localhost'
+      ) {
+        me = kb.any(subject, external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns.acl('owner')) // when testing on plane with no webid
+        log('Assuming user is ' + me)
+      }
 
-            // Sort groups by name
-            groups.sort((a, b) => {
-              const nameA = (kb.any(a, contactsPane_ns.vcard('fn')) || '').toString().toLowerCase()
-              const nameB = (kb.any(b, contactsPane_ns.vcard('fn')) || '').toString().toLowerCase()
-              return nameA < nameB ? -1 : nameA > nameB ? 1 : 0
-            })
+      return div
+    } // asyncRender
+  } // render function
+}); // pane object
 
-            groups.forEach(function (group) {
-              const name = kb.any(group, contactsPane_ns.vcard('fn'))
-              const groupLi = dom.createElement('li')
-              groupLi.setAttribute('role', 'listitem')
-              groupLi.setAttribute('tabindex', '0')
-              groupLi.setAttribute('aria-label', name ? name.value : 'Some group')
-              groupLi.subject = group
-
-              const groupBtn = groupLi.appendChild(dom.createElement('button'))
-              groupBtn.setAttribute('type', 'button')
-              groupBtn.innerHTML = name ? name.value : 'Some group'
-              groupBtn.classList.add('allGroupsButton', 'actionButton', 'btn-secondary', 'action-button-focus')
-              groupBtn.addEventListener('click', function (event) {
-                event.preventDefault()
-                if (!event.metaKey) {
-                  for (const key in selectedGroups) delete selectedGroups[key]
-                }
-                selectedGroups[group.uri] = !selectedGroups[group.uri]
-                refreshThingsSelected(ulGroups, selectedGroups)
-                // Highlight the matching group button in the sidebar ulGroups
-                const matchingLi = Array.from(ulGroups.children).find(li => li.subject && li.subject.uri === group.uri)
-                setActiveGroupButton(ulGroups, matchingLi ? matchingLi.querySelector('button') : null)
-                kb.fetcher.nowOrWhenFetched(group.doc(), undefined, function (ok, _message) {
-                  if (ok) {
-                    refreshNames(ulPeople, null, false)
-                  }
-                })
-              }, false)
+// ── Helper: handle "New group" button click ──────────────────────────
+async function handleNewGroupClick (ctx) {
+  const { dom, kb, ns, book, options, selectedGroups, dataBrowserContext, div } = ctx
+  ctx.showDetailsSection()
+  ctx.detailsSectionContent.innerHTML = ''
+  const groupIndex = kb.any(book, ns.vcard('groupIndex'))
+  try {
+    await kb.fetcher.load(groupIndex)
+  } catch (e) {
+    log('Error: Group index  NOT loaded:' + e + '\n')
+  }
+  log(' Group index has been loaded\n')
 
-              external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.makeDraggable(groupLi, group)
-              external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.deleteButtonWithCheck(
-                dom,
-                groupLi,
-                'group ' + name,
-                async function () {
-                  await deleteThingAndDoc(group)
-                  delete selectedGroups[group.uri]
-                  // Refresh the group buttons list
-                  if (allGroupsLi.parentNode) allGroupsLi.parentNode.removeChild(allGroupsLi)
-                  if (newGroupLi.parentNode) newGroupLi.parentNode.removeChild(newGroupLi)
-                  syncGroupUl(book, options, ulGroups, dom, selectedGroups, ulPeople, searchInput)
-                  ulGroups.insertBefore(allGroupsLi, ulGroups.firstChild)
-                  ulGroups.appendChild(newGroupLi)
-                  refreshThingsSelected(ulGroups, selectedGroups)
-                  // Refresh the people list to reflect the deleted group
-                  refreshNames(ulPeople, null, false)
-                  // Refresh the groups detail view
-                  groupsButton.click()
-                }
-              )
+  const name = await external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.askName(
+    dom, kb, ctx.detailsSectionContent, external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns.foaf('name'), ns.vcard('Group'), 'group')
+  if (!name) return // cancelled by user
+  let group
+  try {
+    group = await saveNewGroup(book, name)
+  } catch (err) {
+    log('Error: can\'t save new group:' + err)
+    ctx.detailsSectionContent.innerHTML = 'Failed to save group' + err
+    return
+  }
+  for (const key in selectedGroups) delete selectedGroups[key]
+  selectedGroups[group.uri] = true
+
+  // Refresh the group buttons list
+  const allGroupsLi = ctx.allGroupsLi
+  const newGroupLi = ctx.newGroupLi
+  if (allGroupsLi.parentNode) allGroupsLi.parentNode.removeChild(allGroupsLi)
+  if (newGroupLi.parentNode) newGroupLi.parentNode.removeChild(newGroupLi)
+  syncGroupUl(book, options, ctx.ulGroups, dom, selectedGroups, ctx.ulPeople, ctx.searchInput)
+  ctx.ulGroups.insertBefore(allGroupsLi, ctx.ulGroups.firstChild)
+  ctx.ulGroups.appendChild(newGroupLi)
+  refreshThingsSelected(ctx.ulGroups, selectedGroups)
+  // Highlight the new group button in ulGroups and show empty people list
+  const matchingLi = Array.from(ctx.ulGroups.children).find(li => li.subject && li.subject.uri === group.uri)
+  setActiveGroupButton(ctx.ulGroups, matchingLi ? matchingLi.querySelector('button') : null)
+  refreshNames(ctx.ulPeople, null, false)
+
+  ctx.detailsSectionContent.innerHTML = ''
+  ctx.detailsSectionContent.appendChild(external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.ACLControlBox5(
+    group.doc(), dataBrowserContext, 'group', kb,
+    function (ok, body) {
+      if (!ok) {
+        ctx.detailsSectionContent.innerHTML =
+            'Group sharing setup failed: ' + body
+      }
+    }))
+}
 
-              groupsList.appendChild(groupLi)
-            })
+// ── Helper: render askName form for person or organization ───────────
+function createNewPersonOrOrganization (ctx, formContainer, klass) {
+  const { dom, kb, ns, book, selectedGroups, dataBrowserContext } = ctx
+  formContainer.innerHTML = ''
+  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets
+    .askName(dom, kb, formContainer, external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns.foaf('name'), klass)
+    .then(async (name) => {
+      if (!name) return // cancelled by user
+      ctx.detailsSectionContent.innerHTML = 'Indexing...'
+      let person
+      try {
+        person = await saveNewContact(book, name, selectedGroups, klass)
+      } catch (err) {
+        const msg = 'Error: can\'t save new contact: ' + err
+        log(msg)
+        alert(msg)
+        return
+      }
+      ctx.selectedPeople = {}
+      ctx.selectedPeople[person.uri] = true
+      refreshNames(ctx.ulPeople, null) // Add name to list of group
+      ctx.detailsSectionContent.innerHTML = '' // Clear 'indexing'
+      ctx.detailsSectionContent.classList.add('detailsSectionContent--wide')
+      const contactPane = dataBrowserContext.session.paneRegistry.byName('contact')
+      const paneDiv = contactPane.render(person, dataBrowserContext)
+      paneDiv.classList.add('renderPane')
+      ctx.detailsSectionContent.appendChild(paneDiv)
+    })
+}
 
-            detailsSectionContent.appendChild(groupsList)
+// ── Builder: main layout skeleton ────────────────────────────────────
+function buildMainLayout (ctx) {
+  const { dom } = ctx
+  const main = dom.createElement('main')
+  main.id = 'main-content'
+  main.classList.add('addressBook-grid')
+  main.setAttribute('role', 'main')
+  main.setAttribute('aria-label', 'Address Book')
+  main.setAttribute('tabindex', '-1')
+
+  const addressBookSection = dom.createElement('section')
+  addressBookSection.setAttribute('aria-labelledby', 'addressBook-section')
+  addressBookSection.classList.add('addressBookSection', 'section-bg')
+  addressBookSection.setAttribute('role', 'region')
+  addressBookSection.setAttribute('tabindex', '-1')
+  main.appendChild(addressBookSection)
+
+  const detailsSection = dom.createElement('section')
+  detailsSection.classList.add('detailSection')
+  detailsSection.setAttribute('role', 'region')
+  detailsSection.setAttribute('aria-label', 'Details section')
+  detailsSection.classList.add('hidden')
+  main.appendChild(detailsSection)
+
+  return { main, addressBookSection, detailsSection }
+}
+
+// ── Builder: header with title and New Contact button ────────────────
+function buildHeaderSection (ctx) {
+  const { dom, ns, kb, title, me, setMe, setActiveActionButton, paneOptions } = ctx
+
+  const headerSection = dom.createElement('section')
+  headerSection.classList.add('headerSection')
+
+  const header = dom.createElement('header')
+  header.classList.add('mb-md')
+  const h2 = dom.createElement('h2')
+  h2.id = 'addressBook-heading'
+  h2.setAttribute('tabindex', '-1')
+  h2.textContent = title
+
+  // New Contact button
+  const newContactButton = dom.createElement('button')
+  const container = dom.createElement('div')
+  newContactButton.setAttribute('type', 'button')
+  if (!me) newContactButton.setAttribute('disabled', 'true')
+  external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.checkUser().then(webId => {
+    if (webId) {
+      setMe(webId)
+      newContactButton.removeAttribute('disabled')
+    }
+  })
+  container.appendChild(newContactButton)
+  newContactButton.innerHTML = '+ New contact'
+  newContactButton.classList.add('actionButton', 'btn-primary', 'action-button-focus')
+  let newContactClickGeneration = 0
+  newContactButton.addEventListener('click', async function (_event) {
+    setActiveActionButton(null)
+    deselectAllPeople(ctx.ulPeople)
+    const thisGeneration = ++newContactClickGeneration
+    ctx.showDetailsSection()
+    ctx.detailsSectionContent.innerHTML = ''
+    ctx.detailsSectionContent.classList.remove('detailsSectionContent--wide')
+    await ensureBookLoaded()
+    // Bail out if a newer click has taken over
+    if (thisGeneration !== newContactClickGeneration) return
+    ctx.detailsSectionContent.innerHTML = ''
+
+    const chooserDiv = dom.createElement('div')
+    chooserDiv.classList.add('contactTypeChooser')
+
+    const selectLabel = dom.createElement('label')
+    selectLabel.textContent = 'Contact type: '
+    selectLabel.setAttribute('for', 'contactTypeSelect')
+    chooserDiv.appendChild(selectLabel)
+
+    const select = dom.createElement('select')
+    select.id = 'contactTypeSelect'
+    select.classList.add('contactTypeSelect')
+    const optIndividual = dom.createElement('option')
+    optIndividual.value = 'Individual'
+    optIndividual.textContent = 'New person'
+    select.appendChild(optIndividual)
+    const optOrganization = dom.createElement('option')
+    optOrganization.value = 'Organization'
+    optOrganization.textContent = 'New organization'
+    select.appendChild(optOrganization)
+    chooserDiv.appendChild(select)
+
+    ctx.detailsSectionContent.appendChild(chooserDiv)
+
+    const remark = dom.createElement('p')
+    remark.classList.add('contactCreationRemark')
+    remark.textContent = 'The new contact is added to the already selected group.'
+    ctx.detailsSectionContent.appendChild(remark)
+
+    // Container for the askName form, placed below the select
+    const formContainer = dom.createElement('div')
+    formContainer.classList.add('contactFormContainer')
+    ctx.detailsSectionContent.appendChild(formContainer)
+
+    function currentKlass () {
+      return select.value === 'Organization'
+        ? ns.vcard('Organization')
+        : ns.vcard('Individual')
+    }
+
+    // Render person form immediately as default
+    createNewPersonOrOrganization(ctx, formContainer, currentKlass())
+
+    // Switch form when dropdown changes
+    select.addEventListener('change', function () {
+      createNewPersonOrOrganization(ctx, formContainer, currentKlass())
+    })
+  }, false)
 
-            // New group button at the bottom
-            const newGroupBtn = dom.createElement('button')
-            newGroupBtn.setAttribute('type', 'button')
-            newGroupBtn.innerHTML = '+ New group'
-            newGroupBtn.classList.add('actionButton', 'btn-primary', 'action-button-focus', 'newGroupBtn')
-            newGroupBtn.addEventListener('click', newGroupClickHandler, false)
-            detailsSectionContent.appendChild(newGroupBtn)
-          })
+  // TODO we should also add if it is public or private
+  header.appendChild(h2)
+  header.appendChild(container)
+  headerSection.appendChild(header)
+  return headerSection
+}
+
+// ── Builder: search input section ────────────────────────────────────
+function buildSearchSection (ctx) {
+  const { dom } = ctx
+  const searchSection = dom.createElement('section')
+  searchSection.classList.add('searchSection')
+  const searchDiv = dom.createElement('div')
+  searchDiv.classList.add('searchDiv')
+  searchSection.appendChild(searchDiv)
+  const searchInput = dom.createElement('input')
+  searchInput.setAttribute('type', 'text')
+  searchInput.setAttribute('aria-label', 'Search contacts')
+  searchInput.classList.add('searchInput')
+  searchInput.setAttribute('placeholder', 'Search by name')
+  searchDiv.appendChild(searchInput)
+  searchInput.addEventListener('input', function (_event) {
+    refreshFilteredPeople(ctx.ulPeople, true, ctx.detailsSectionContent)
+  })
+  return { searchSection, searchInput }
+}
 
-          // Sharing button
-          const sharingButton = cardFooter.appendChild(dom.createElement('button'))
-          sharingButton.setAttribute('type', 'button')
-          sharingButton.innerHTML = 'Sharing'
-          sharingButton.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
-          actionButtons.push(sharingButton)
-          sharingButton.addEventListener('click', function (_event) {
-            setActiveActionButton(sharingButton)
-            showDetailsSection()
-            detailsSectionContent.innerHTML = ''
-
-            const sharingHeader = dom.createElement('h3')
-            sharingHeader.textContent = 'Sharing'
-            detailsSectionContent.appendChild(sharingHeader)
-
-            detailsSectionContent.appendChild(
-              external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.ACLControlBox5(
-                book.dir(),
-                dataBrowserContext,
-                'book',
-                kb,
-                function (ok, body) {
-                  if (!ok) detailsSectionContent.innerHTML = 'ACL control box Failed: ' + body
-                }
-              )
-            )
+// ── Builder: group buttons bar ───────────────────────────────────────
+function buildGroupBar (ctx) {
+  const { dom, kb, ns, book, options, groupIndex, selectedGroups,
+    actionButtons, setActiveActionButton, div } = ctx
 
-            const sharingContext = {
-              target: book,
-              me,
-              noun: 'address book',
-              div: detailsSectionContent,
-              dom,
-              statusRegion: div
-            }
-            external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.login.registrationControl(sharingContext, book, contactsPane_ns.vcard('AddressBook'))
-              .then(() => log('Registration control finished.'))
-              .catch(e => external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.complain(sharingContext, 'registrationControl: ' + e))
-          })
+  const buttonSection = dom.createElement('section')
+  buttonSection.classList.add('buttonSection')
 
-          // Settings button
-          const toolsButton = cardFooter.appendChild(dom.createElement('button'))
-          toolsButton.setAttribute('type', 'button')
-          toolsButton.innerHTML = 'Tools'
-          toolsButton.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
-          actionButtons.push(toolsButton)
-          toolsButton.addEventListener('click', function (_event) {
-            setActiveActionButton(toolsButton)
-            showDetailsSection()
-            detailsSectionContent.innerHTML = ''
-            detailsSectionContent.appendChild(
-              toolsPane_toolsPane(
-                selectAllGroups,
-                selectedGroups,
-                ulGroups,
-                book,
-                dataBrowserContext,
-                me
-              )
-            )
-          })
-        } // if book
+  const ulGroups = dom.createElement('ul')
+  ulGroups.classList.add('groupButtonsList')
+  ulGroups.setAttribute('role', 'list')
+  ulGroups.setAttribute('aria-label', 'Groups list')
 
-        /*
-        const newBookBtn = newAddressBookButton(book)
-        if (newBookBtn && newBookBtn.classList) {
-          newBookBtn.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
-        }
-        cardFooter.appendChild(newBookBtn)
-        */
+  if (options.foreignGroup) {
+    selectedGroups[options.foreignGroup.uri] = true
+  }
 
-        checkDataModel(book).then(() => { log('async checkDataModel done.') })
+  if (book) {
+    // All groups button — leftmost, initially selected
+    ctx.allGroupsLi = dom.createElement('li')
+    const allGroupsButton = dom.createElement('button')
+    allGroupsButton.textContent = 'All groups'
+    allGroupsButton.classList.add('allGroupsButton', 'actionButton', 'btn-primary', 'action-button-focus', 'allGroupsButton--selected')
+    allGroupsButton.addEventListener('click', function (_event) {
+      setActiveGroupButton(ulGroups, allGroupsButton)
+      setActiveActionButton(null)
+      // Check if all groups are currently selected
+      const allSelected = Array.from(ulGroups.children).every(function (li) {
+        if (!li.subject) return true // skip non-group items (All groups, New group)
+        return !!selectedGroups[li.subject.uri]
+      })
+
+      if (!allSelected) {
+        allGroupsButton.classList.add('allGroupsButton--loading')
+        allGroupsButton.setAttribute('aria-busy', 'true')
+        selectAllGroups(selectedGroups, ulGroups, function (ok, message) {
+          if (!ok) return complain(div, dom, message)
+          allGroupsButton.classList.remove('allGroupsButton--loading')
+          allGroupsButton.setAttribute('aria-busy', 'false')
+          allGroupsButton.classList.add('allGroupsButton--active')
+          refreshThingsSelected(ulGroups, selectedGroups)
+          refreshNames(ctx.ulPeople, null)
+        })
+      } else {
+        allGroupsButton.classList.remove('allGroupsButton--loading', 'allGroupsButton--active')
+        allGroupsButton.setAttribute('aria-busy', 'false')
+        allGroupsButton.classList.add('allGroupsButton--loaded') // pale green hint groups loaded
+        for (const key in selectedGroups) delete selectedGroups[key]
+        refreshThingsSelected(ulGroups, selectedGroups)
+        refreshNames(ctx.ulPeople, null)
+      }
+    }) // on button click
+    ctx.allGroupsLi.appendChild(allGroupsButton)
+    ulGroups.appendChild(ctx.allGroupsLi) // First item in the list
+
+    // New group button — rightmost (appended after group buttons are rendered)
+    ctx.newGroupLi = dom.createElement('li')
+    const newGroupButton = dom.createElement('button')
+    newGroupButton.setAttribute('type', 'button')
+    newGroupButton.innerHTML = '+ New group'
+    newGroupButton.classList.add('allGroupsButton', 'actionButton', 'btn-secondary', 'action-button-focus')
+    actionButtons.push(newGroupButton)
+    newGroupButton.addEventListener(
+      'click', function (event) {
+        setActiveGroupButton(ulGroups, newGroupButton)
+        setActiveActionButton(null)
+        deselectAllPeople(ctx.ulPeople)
+        handleNewGroupClick(ctx)
+      },
+      false
+    )
+    ctx.newGroupLi.appendChild(newGroupButton)
+
+    // Append ulGroups to buttonSection, then add New group at the end
+    buttonSection.appendChild(ulGroups)
+
+    if (groupIndex) {
+      kb.fetcher.nowOrWhenFetched(groupIndex.uri, book, function (ok, body) {
+        if (!ok) return complain(div, dom, 'Cannot load group index: ' + body)
+        // Remove special items before sync (syncTableToArrayReOrdered expects .subject on all children)
+        if (ctx.allGroupsLi.parentNode) ctx.allGroupsLi.parentNode.removeChild(ctx.allGroupsLi)
+        if (ctx.newGroupLi.parentNode) ctx.newGroupLi.parentNode.removeChild(ctx.newGroupLi)
+        syncGroupUl(book, options, ulGroups, dom, selectedGroups, ctx.ulPeople, ctx.searchInput) // Refresh list of groups
+        ulGroups.insertBefore(ctx.allGroupsLi, ulGroups.firstChild) // Keep All contacts first
+        ulGroups.appendChild(ctx.newGroupLi) // Keep New group last
+
+        // Auto-select all groups and display all contacts on load
+        allGroupsButton.classList.add('allGroupsButton--loading')
+        allGroupsButton.setAttribute('aria-busy', 'true')
+        selectAllGroups(selectedGroups, ulGroups, function (loadOk, message) {
+          if (!loadOk) return complain(div, dom, message)
+          allGroupsButton.classList.remove('allGroupsButton--loading')
+          allGroupsButton.setAttribute('aria-busy', 'false')
+          allGroupsButton.classList.add('allGroupsButton--active')
+          refreshThingsSelected(ulGroups, selectedGroups)
+          refreshNames(ctx.ulPeople, null)
+        })
+      })
+    }
+
+    // Remove special items before initial render too
+    if (ctx.allGroupsLi.parentNode) ctx.allGroupsLi.parentNode.removeChild(ctx.allGroupsLi)
+    if (ctx.newGroupLi.parentNode) ctx.newGroupLi.parentNode.removeChild(ctx.newGroupLi)
+    renderGroupButtons(book, ulGroups, options, dom, selectedGroups, ctx.ulPeople, ctx.searchInput, ctx.detailsSectionContent, div, ctx.dataBrowserContext, function () {
+      setActiveActionButton(null)
+      // Keep the details section open when a contact or New contact form is showing
+      if (!ctx.detailsSectionContent.querySelector('.contactTypeChooser, .contactFormContainer, .renderPane')) {
+        ctx.detailsSectionContent.innerHTML = ''
+        ctx.detailsSection.classList.add('hidden')
       }
+    })
+    ulGroups.insertBefore(ctx.allGroupsLi, ulGroups.firstChild) // Keep All contacts first
+    ulGroups.appendChild(ctx.newGroupLi) // Ensure New group is last after initial render
+  } else {
+    syncGroupUl(book, options, ulGroups, dom, selectedGroups, ctx.ulPeople, ctx.searchInput) // Refresh list of groups (will be empty)
+    refreshNames(ctx.ulPeople, null)
+    log('No book, only one group -> hide list of groups')
+  } // if not book
 
-      // ///////////////////////////////////////////////////////////////////////////////////
+  return { buttonSection, ulGroups }
+}
 
-      //              Render a single contact Individual
+// ── Builder: footer action buttons (Groups / Sharing / Tools) ────────
+function buildFooterButtons (ctx) {
+  const { dom, kb, ns, book, options, selectedGroups,
+    actionButtons, setActiveActionButton, dataBrowserContext, div, me } = ctx
 
-      if (
-        t[contactsPane_ns.vcard('Individual').uri] ||
-        t[contactsPane_ns.foaf('Person').uri] ||
-        t[contactsPane_ns.schema('Person').uri] ||
-        t[contactsPane_ns.vcard('Organization').uri] ||
-        t[contactsPane_ns.schema('Organization').uri]
-      ) {
-        renderIndividual(dom, div, subject, dataBrowserContext).then(() => log('(individual rendered)'))
+  const cardFooter = dom.createElement('div')
+  cardFooter.classList.add('cardFooter')
 
-        //          Render a Group instance
-      } else if (t[contactsPane_ns.vcard('Group').uri]) {
-        // If we have a main address book, then render this group as a guest group within it
-        external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.login
-          .findAppInstances(context, contactsPane_ns.vcard('AddressBook'))
-          .then(function (context) {
-            const addressBooks = context.instances
-            const options = { foreignGroup: subject }
-            if (addressBooks.length > 0) {
-              // const book = addressBooks[0]
-              renderAddressBook(addressBooks, options)
-            } else {
-              renderAddressBook([], options)
-              // @@ button to Make a new addressBook
+  if (book) {
+    // Groups button
+    const groupsButton = cardFooter.appendChild(dom.createElement('button'))
+    groupsButton.setAttribute('type', 'button')
+    groupsButton.innerHTML = 'Groups'
+    groupsButton.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
+    actionButtons.push(groupsButton)
+    groupsButton.addEventListener('click', async function (_event) {
+      setActiveActionButton(groupsButton)
+      deselectAllPeople(ctx.ulPeople)
+      ctx.showDetailsSection()
+      ctx.detailsSectionContent.innerHTML = ''
+      ctx.detailsSectionContent.classList.remove('detailsSectionContent--wide')
+
+      // Header
+      const groupsHeader = dom.createElement('h3')
+      groupsHeader.textContent = 'Your groups'
+      ctx.detailsSectionContent.appendChild(groupsHeader)
+
+      const groupRemark = dom.createElement('p')
+      groupRemark.textContent = 'When you delete a group it can happen that some contacts end up groupless.'
+      ctx.detailsSectionContent.appendChild(groupRemark)
+
+      // Load all groups and display them in a list
+      let groups
+      try {
+        groups = await loadAllGroups(book)
+      } catch (err) {
+        ctx.detailsSectionContent.appendChild(dom.createTextNode('Failed to load groups: ' + err))
+        return
+      }
+
+      const groupsList = dom.createElement('ul')
+      groupsList.setAttribute('role', 'list')
+      groupsList.setAttribute('aria-label', 'All groups')
+      groupsList.classList.add('groupButtonsList')
+
+      // Sort groups by name
+      if (groups) {
+        groups.sort((a, b) => {
+          const nameA = (kb.any(a, ns.vcard('fn')) || '').toString().toLowerCase()
+          const nameB = (kb.any(b, ns.vcard('fn')) || '').toString().toLowerCase()
+          return nameA < nameB ? -1 : nameA > nameB ? 1 : 0
+        })
+        groups.forEach(function (group) {
+          const { groupLi, groupButton: groupBtn, name } = createGroupLi(group)
+          groupBtn.addEventListener('click', function (event) {
+            event.preventDefault()
+            if (!event.metaKey) {
+              for (const key in selectedGroups) delete selectedGroups[key]
             }
-          })
-          .catch(function (e) {
-            complain(div, dom, '' + e)
-          })
+            selectedGroups[group.uri] = !selectedGroups[group.uri]
+            refreshThingsSelected(ctx.ulGroups, selectedGroups)
+            // Highlight the matching group button in the sidebar ulGroups
+            const matchingLi = Array.from(ctx.ulGroups.children).find(li => li.subject && li.subject.uri === group.uri)
+            setActiveGroupButton(ctx.ulGroups, matchingLi ? matchingLi.querySelector('button') : null)
+            kb.fetcher.nowOrWhenFetched(group.doc(), undefined, function (ok, _message) {
+              if (ok) {
+                refreshNames(ctx.ulPeople, null, false)
+              }
+            })
+          }, false)
+
+          external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.deleteButtonWithCheck(
+            dom,
+            groupLi,
+            'group ' + name,
+            async function () {
+              await deleteThingAndDoc(group)
+              delete selectedGroups[group.uri]
+              // Refresh the group buttons list
+              const allGroupsLi = ctx.allGroupsLi
+              const newGroupLi = ctx.newGroupLi
+              if (allGroupsLi.parentNode) allGroupsLi.parentNode.removeChild(allGroupsLi)
+              if (newGroupLi.parentNode) newGroupLi.parentNode.removeChild(newGroupLi)
+              syncGroupUl(book, options, ctx.ulGroups, dom, selectedGroups, ctx.ulPeople, ctx.searchInput)
+              ctx.ulGroups.insertBefore(allGroupsLi, ctx.ulGroups.firstChild)
+              ctx.ulGroups.appendChild(newGroupLi)
+              refreshThingsSelected(ctx.ulGroups, selectedGroups)
+              // Refresh the people list to reflect the deleted group
+              refreshNames(ctx.ulPeople, null, false)
+              // Refresh the groups detail view
+              groupsButton.click()
+            }
+          )
 
-        // Render a AddressBook instance
-      } else if (t[contactsPane_ns.vcard('AddressBook').uri]) {
-        renderAddressBook([subject], {})
-      } else {
-        log(
-          'Error: Contact pane: No evidence that ' +
-            subject +
-            ' is anything to do with contacts.'
-        )
+          groupsList.appendChild(groupLi)
+        })
       }
 
-      // /////////////// Fix user when testing on a plane
+      ctx.detailsSectionContent.appendChild(groupsList)
 
-      if (
-        typeof document !== 'undefined' &&
-        document.location &&
-        ('' + document.location).slice(0, 16) === 'http://localhost'
-      ) {
-        me = kb.any(subject, external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns.acl('owner')) // when testing on plane with no webid
-        log('Assuming user is ' + me)
+      // New group button at the bottom
+      const newGroupBtn = dom.createElement('button')
+      newGroupBtn.setAttribute('type', 'button')
+      newGroupBtn.innerHTML = '+ New group'
+      newGroupBtn.classList.add('actionButton', 'btn-primary', 'action-button-focus', 'newGroupBtn')
+      newGroupBtn.addEventListener('click', function () { handleNewGroupClick(ctx) }, false)
+      ctx.detailsSectionContent.appendChild(newGroupBtn)
+    })
+
+    // Sharing button
+    const sharingButton = cardFooter.appendChild(dom.createElement('button'))
+    sharingButton.setAttribute('type', 'button')
+    sharingButton.innerHTML = 'Sharing'
+    sharingButton.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
+    actionButtons.push(sharingButton)
+    sharingButton.addEventListener('click', function (_event) {
+      setActiveActionButton(sharingButton)
+      deselectAllPeople(ctx.ulPeople)
+      ctx.showDetailsSection()
+      ctx.detailsSectionContent.innerHTML = ''
+      ctx.detailsSectionContent.classList.remove('detailsSectionContent--wide')
+
+      const sharingHeader = dom.createElement('h3')
+      sharingHeader.textContent = 'Sharing'
+      ctx.detailsSectionContent.appendChild(sharingHeader)
+
+      ctx.detailsSectionContent.appendChild(
+        external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.ACLControlBox5(
+          book.dir(),
+          dataBrowserContext,
+          'book',
+          kb,
+          function (ok, body) {
+            if (!ok) ctx.detailsSectionContent.innerHTML = 'ACL control box Failed: ' + body
+          }
+        )
+      )
+
+      const sharingContext = {
+        target: book,
+        me,
+        noun: 'address book',
+        div: ctx.detailsSectionContent,
+        dom,
+        statusRegion: div
       }
-      return div
-    } // asyncRender
-  } // render function
-}); // pane object
-// ends
+      external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.login.registrationControl(sharingContext, book, ns.vcard('AddressBook'))
+        .then(() => log('Registration control finished.'))
+        .catch(e => external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.complain(sharingContext, 'registrationControl: ' + e))
+    })
+
+    // Settings button
+    const toolsButton = cardFooter.appendChild(dom.createElement('button'))
+    toolsButton.setAttribute('type', 'button')
+    toolsButton.innerHTML = 'Tools'
+    toolsButton.classList.add('actionButton', 'btn-secondary', 'action-button-focus')
+    actionButtons.push(toolsButton)
+    toolsButton.addEventListener('click', function (_event) {
+      setActiveActionButton(toolsButton)
+      deselectAllPeople(ctx.ulPeople)
+      ctx.showDetailsSection()
+      ctx.detailsSectionContent.innerHTML = ''
+      ctx.detailsSectionContent.classList.add('detailsSectionContent--wide')
+      ctx.detailsSectionContent.appendChild(
+        toolsPane_toolsPane(
+          selectAllGroups,
+          selectedGroups,
+          ctx.ulGroups,
+          book,
+          dataBrowserContext,
+          me,
+          function refreshGroups () {
+            if (ctx.allGroupsLi.parentNode) ctx.allGroupsLi.parentNode.removeChild(ctx.allGroupsLi)
+            if (ctx.newGroupLi.parentNode) ctx.newGroupLi.parentNode.removeChild(ctx.newGroupLi)
+            syncGroupUl(book, options, ctx.ulGroups, dom, selectedGroups, ctx.ulPeople, ctx.searchInput)
+            ctx.ulGroups.insertBefore(ctx.allGroupsLi, ctx.ulGroups.firstChild)
+            ctx.ulGroups.appendChild(ctx.newGroupLi)
+            refreshThingsSelected(ctx.ulGroups, selectedGroups)
+          }
+        )
+      )
+    })
+  } // if book
+
+  return cardFooter
+}
 
 __nested_webpack_exports__ = __nested_webpack_exports__["default"];
 /******/ 	return __nested_webpack_exports__;
@@ -82283,7 +82439,7 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports["default"] = void 0;
 var _default = exports["default"] = {
-  buildTime: '2026-03-05T17:53:35Z',
+  buildTime: '2026-03-07T11:48:05Z',
   commit: 'dfd8ed6d211c4df3ce43c2bd2b220ba2dab03a61',
   npmInfo: {
     'solid-panes': '4.2.3',
@@ -116320,7 +116476,7 @@ var dist = __webpack_require__(7523);
 var solid_logic_esm = __webpack_require__(9332);
 ;// ./src/versionInfo.ts
 /* harmony default export */ const versionInfo = ({
-  buildTime: '2026-03-05T17:54:36Z',
+  buildTime: '2026-03-07T11:49:14Z',
   commit: 'e1941a6329a0d2666cfebf1fca9a73fdd04fd20e',
   npmInfo: {
     'mashlib': '2.1.3',