solid-panes 4.2.4-test.6 → 4.2.4-test.7

package/dist/solid-panes.js

@@ -1033,7 +1033,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   background-color: var(--color-info-bg) !important;
 }
 
-.contactPane .detailSection {
+.contactPane .detailSection,
+.contactPane .addressBookSection {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   flex: 1 1 0; /* allow it to grow but not force wrap */
   min-width: 300px;
   box-sizing: border-box;
@@ -1041,6 +1045,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 }
 
 .contactPane .detailsSectionContent {
+  flex: 1 1 auto;
   min-height: 200px;
   padding: var(--spacing-lg);
   max-width: 900px;
@@ -1178,10 +1183,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 .contactPane .group-loading {
 }
 
-.contactPane .hidden {
-  display: none;
-}
-
 /* ── Mint new address book ───────────────────────────────────── */
 
 .contactPane .claimSuccess {
@@ -1220,12 +1221,95 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   }
 }
 
-@media (max-width: 500px) {
+.contactPane.contactPane--narrow .addressBook-grid {
+  flex-direction: column !important;
+  flex-wrap: wrap !important;
+}
+
+.contactPane.contactPane--narrow .addressBookSection,
+.contactPane.contactPane--narrow .detailSection {
+  flex: 1 1 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  width: 100% !important;
+}
+
+@media (max-width: 1000px) {
+  /* Stack sidebar + details vertically on narrow screens */
+  .contactPane {
+    min-height: auto !important;
+  }
+
+  .contactPane .addressBook-grid {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    min-height: auto !important;
+    height: auto !important;
+  }
+
+  .contactPane .addressBookSection,
+  .contactPane .detailSection {
+    order: initial !important;
+    flex: none !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+  }
+
   .contactPane .addressBookSection {
-    max-width: 485px;
+    max-height: 60vh !important;
+    min-height: auto !important;
+    overflow-y: auto !important;
+    padding-bottom: var(--spacing-lg) !important;
+  }
+
+  .contactPane .detailSection {
+    max-height: none !important;
+    min-height: auto !important;
+    overflow-y: visible !important;
+  }
+
+  .contactPane .detailsSectionContent {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+    align-items: stretch !important;
+    min-height: auto !important;
+    height: auto !important;
+    overflow-y: visible !important;
+  }
+
+  .contactPane .detailSection > .detailsSectionContent {
+    padding-top: var(--spacing-sm) !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Small-screen larger text and spacing */
+  .contactPane,
+  .contactPane * {
+    font-size: 2rem !important;
+  }
+
+  .contactPane .actionButton,
+  .contactPane .searchInput,
+  .contactPane .flatButton,
+  .contactPane .buttonSection button,
+  .contactPane .groupButtonsList button {
+    min-height: calc(var(--min-touch-target) + 0.5em) !important;
+    font-size: 2rem !important;
+    padding: 1em 1em !important;
+  }
+
+  .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"],
+  .individualPane .hoverControl img.hoverControlHide, 
+  .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
+    display: inline-flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
   }
 }
 
+
 /* Card Section Background */
 .contactPane .section-bg {
   background: var(--color-section-bg);
@@ -1235,67 +1319,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   border-radius: 0 !important;
 }
 
-/* Primary Button */
-.contactPane .btn-primary {
-  min-height: var(--min-touch-target);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--color-primary);
-  border-radius: var(--border-radius-base);
-  background: var(--color-primary);
-  color: var(--color-background);
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--animation-duration) ease;
-}
-
-.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);
-}
-
-.contactPane .btn-primary:active {
-  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
-}
-
-.contactPane .btn-primary:disabled {
-  opacity: var(--opacity-disabled, 0.6);
-  cursor: not-allowed;
-  transform: none;
-}
-
-/* Secondary button */
-.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);
-  border-radius: var(--border-radius-base);
-  background: var(--color-secondary);
-  color: var(--color-background);
-  font-weight: var(--font-weight-bold);
-  cursor: pointer;
-  transition: all var(--animation-duration) ease;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.contactPane .btn-secondary:hover {
-  background: color-mix(in srgb, var(--color-secondary) 85%, black);
-}
-
-.contactPane .btn-secondary:disabled {
-  opacity: var(--opacity-disabled);
-  cursor: not-allowed;
+/* Keep detail section content anchored at top */
+.contactPane .detailSection {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
 }
 
-/* Action Button Focus - used by ChatWithMe, ProfileCard */
-.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;
-  z-index: 1;
+.contactPane .detailsSectionContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
 }
 
 /* ── Button section: horizontal scrollable row ──────────────── */
@@ -1415,34 +1451,37 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   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;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.3);
-  z-index: 1000;
+.contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {
+  position: static !important;
 }
+
+
 .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);
-  border-radius: var(--border-radius-full);
-  padding: var(--spacing-lg);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
-  z-index: 1001;
+.contactPane .detailsSectionContent .contact-toolbar  > div[style*="position: relative"] > div {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  z-index: 9999 !important;
+  display: grid !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  padding: var(--spacing-btn) !important;
+  min-width: 12em !important;
+  background: var(--color-background) !important;
+  border: var(--border-width-sm) solid var(--color-primary) !important;
+  border-radius: var(--border-radius-base) !important;
+  box-shadow: var(--box-shadow-popup) !important;
+  grid-template-columns: auto auto !important;
+  gap: var(--spacing-xxs) !important;
+}
+
+.contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]),
+.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]),
+.contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]) {
+  background-color: transparent !important;
 }
 
 /* Selected state for All contacts button */
@@ -1565,271 +1604,23 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 
 .contactPane .personLi--error {
   opacity: 0.5;
-}`, "",{"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 0; /* allow it to grow but not force wrap */\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: nowrap; /* keep buttons inline */\n  align-items: center; /* vertical centering if varied heights */\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/* wrapper to position clear icon/button */\n.contactPane .searchDiv {\n  position: relative;\n}\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/* clear button inside search input */\n.contactPane .searchClearButton {\n  position: absolute;\n  right: var(--spacing-sm);\n  top: 50%;\n  transform: translateY(-50%);\n  border: none;\n  background: transparent;\n  font-size: var(--font-size-base);\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-text-muted);\n  /* visibility is controlled via the generic `.hidden` utility class */\n  display: block;\n}\n.contactPane .searchClearButton.hidden {\n  display: none;\n}\n.contactPane .searchClearButton:hover {\n  color: var(--color-text);\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: nowrap; /* keep sections side-by-side */\n  flex: 1;\n  min-width: 50%;\n  align-items: stretch;\n  width: 100%;\n  box-sizing: border-box;\n  overflow-x: auto; /* allow horizontal scroll if needed */\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  border: none !important;\n  border-radius: 0 !important;\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 .buttonSection .selected {\n  background: none !important;\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}\n\n.contactPane .personLi--error {\n  opacity: 0.5;\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.contactPane .addressBookSection {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  flex: 1 1 0; /* allow it to grow but not force wrap */\n  min-width: 300px;\n  box-sizing: border-box;\n  background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n  flex: 1 1 auto;\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: nowrap; /* keep buttons inline */\n  align-items: center; /* vertical centering if varied heights */\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/* wrapper to position clear icon/button */\n.contactPane .searchDiv {\n  position: relative;\n}\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/* clear button inside search input */\n.contactPane .searchClearButton {\n  position: absolute;\n  right: var(--spacing-sm);\n  top: 50%;\n  transform: translateY(-50%);\n  border: none;\n  background: transparent;\n  font-size: var(--font-size-base);\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-text-muted);\n  /* visibility is controlled via the generic `.hidden` utility class */\n  display: block;\n}\n.contactPane .searchClearButton.hidden {\n  display: none;\n}\n.contactPane .searchClearButton:hover {\n  color: var(--color-text);\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/* ── 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: nowrap; /* keep sections side-by-side */\n  flex: 1;\n  min-width: 50%;\n  align-items: stretch;\n  width: 100%;\n  box-sizing: border-box;\n  overflow-x: auto; /* allow horizontal scroll if needed */\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.contactPane.contactPane--narrow .addressBook-grid {\n  flex-direction: column !important;\n  flex-wrap: wrap !important;\n}\n\n.contactPane.contactPane--narrow .addressBookSection,\n.contactPane.contactPane--narrow .detailSection {\n  flex: 1 1 100% !important;\n  max-width: 100% !important;\n  min-width: 0 !important;\n  width: 100% !important;\n}\n\n@media (max-width: 1000px) {\n  /* Stack sidebar + details vertically on narrow screens */\n  .contactPane {\n    min-height: auto !important;\n  }\n\n  .contactPane .addressBook-grid {\n    flex-direction: column !important;\n    flex-wrap: nowrap !important;\n    min-height: auto !important;\n    height: auto !important;\n  }\n\n  .contactPane .addressBookSection,\n  .contactPane .detailSection {\n    order: initial !important;\n    flex: none !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n  }\n\n  .contactPane .addressBookSection {\n    max-height: 60vh !important;\n    min-height: auto !important;\n    overflow-y: auto !important;\n    padding-bottom: var(--spacing-lg) !important;\n  }\n\n  .contactPane .detailSection {\n    max-height: none !important;\n    min-height: auto !important;\n    overflow-y: visible !important;\n  }\n\n  .contactPane .detailsSectionContent {\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: flex-start !important;\n    align-items: stretch !important;\n    min-height: auto !important;\n    height: auto !important;\n    overflow-y: visible !important;\n  }\n\n  .contactPane .detailSection > .detailsSectionContent {\n    padding-top: var(--spacing-sm) !important;\n    box-sizing: border-box !important;\n  }\n\n  /* Small-screen larger text and spacing */\n  .contactPane,\n  .contactPane * {\n    font-size: 2rem !important;\n  }\n\n  .contactPane .actionButton,\n  .contactPane .searchInput,\n  .contactPane .flatButton,\n  .contactPane .buttonSection button,\n  .contactPane .groupButtonsList button {\n    min-height: calc(var(--min-touch-target) + 0.5em) !important;\n    font-size: 2rem !important;\n    padding: 1em 1em !important;\n  }\n\n  .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid=\"deleteButtonWithCheck\"],\n  .individualPane .hoverControl img.hoverControlHide, \n  .individualPane .hoverControl [data-testid=\"deleteButtonWithCheck\"] {\n    display: inline-flex !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\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  border: none !important;\n  border-radius: 0 !important;\n}\n\n/* Keep detail section content anchored at top */\n.contactPane .detailSection {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.contactPane .detailsSectionContent {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\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 .buttonSection .selected {\n  background: none !important;\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 div[style*=\"position: relative\"]:has(> div[style*=\"display: grid\"]) {\n  position: static !important;\n}\n\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  position: absolute !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto !important;\n  z-index: 9999 !important;\n  display: grid !important;\n  pointer-events: auto !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  padding: var(--spacing-btn) !important;\n  min-width: 12em !important;\n  background: var(--color-background) !important;\n  border: var(--border-width-sm) solid var(--color-primary) !important;\n  border-radius: var(--border-radius-base) !important;\n  box-shadow: var(--box-shadow-popup) !important;\n  grid-template-columns: auto auto !important;\n  gap: var(--spacing-xxs) !important;\n}\n\n.contactPane .detailsSectionContent .contact-toolbar > div[style*=\"position: relative\"] > div > button:has(> img[src$=\".svg\"]),\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*=\"position: relative\"] > div > button:has(> img[src$=\".svg\"]),\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"] > div > button:has(> img[src$=\".svg\"]) {\n  background-color: transparent !important;\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}\n\n.contactPane .personLi--error {\n  opacity: 0.5;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ },
 
-/***/ 93
-(module, __nested_webpack_exports__, __nested_webpack_require_35075__) {
+/***/ 686
+(module, __nested_webpack_exports__, __nested_webpack_require_37866__) {
 
-/* harmony export */ __nested_webpack_require_35075__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_37866__.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_35075__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_35075__.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_35075__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_35075__.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, `/* ── Group Membership Section ──────────────────────────────── */
-
-.contactPane .group-membership-container {
-  padding: var(--spacing-sm) 0;
-}
-
-/* Grid wrapper — matches detailsSectionContent groupButtonsList */
-.contactPane .group-pills-wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: var(--spacing-sm);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.contactPane .group-pills-wrapper span {
-  width: max-content;
-}
-
-/* Each group item: button on top, toolbar below */
-.contactPane .group-membership-item {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  max-width: 256px;
-}
-
-.contactPane .group-membership-item > button {
-  width: 100%;
-  text-align: center;
-  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 */
-.contactPane .group-membership-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) 0 0 0;
-}
-
-.contactPane .group-membership-toolbar a img {
-  width: 1.3em;
-  height: 1em;
-  margin: 0;
-}
-
-@media (max-width: 599px) {
-  .contactPane .group-pills-wrapper {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--spacing-xs);
-    max-width: 100%;
-  }
-
-  .contactPane .group-membership-item > button {
-    font-size: var(--font-size-sm);
-    border-radius: var(--border-radius-base);
-  }
-}
-
-@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;EACE,kBAAkB;AACpB;;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.contactPane .group-pills-wrapper span {\n  width: max-content;\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___);
-
-
-/***/ },
-
-/***/ 479
-(module, __nested_webpack_exports__, __nested_webpack_require_40550__) {
-
-/* harmony export */ __nested_webpack_require_40550__.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_40550__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_40550__.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_40550__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_40550__.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, `/* individual.js styles — extracted from inline styles */
-
-/* ── Individual pane container ───────────────────────────────── */
-
-.individualPane {
-  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
-  background: var(--color-section-bg);
-  border-radius: var(--border-radius-full);
-  box-shadow: var(--box-shadow);
-  box-sizing: border-box;
-  max-width: 100%;
-}`, "",{"version":3,"sources":["webpack://./src/styles/individual.css"],"names":[],"mappings":"AAAA,wDAAwD;;AAExD,mEAAmE;;AAEnE;EACE,gFAAgF;EAChF,mCAAmC;EACnC,wCAAwC;EACxC,6BAA6B;EAC7B,sBAAsB;EACtB,eAAe;AACjB","sourcesContent":["/* individual.js styles — extracted from inline styles */\n\n/* ── Individual pane container ───────────────────────────────── */\n\n.individualPane {\n  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  box-sizing: border-box;\n  max-width: 100%;\n}"],"sourceRoot":""}]);
-// Exports
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
-
-
-/***/ },
-
-/***/ 546
-(module, __nested_webpack_exports__, __nested_webpack_require_42917__) {
-
-/* harmony export */ __nested_webpack_require_42917__.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_42917__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_42917__.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_42917__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_42917__.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, `/* CSS for the accessible modal dialogs created by localUtils.js */
-
-/* backdrop / focus trap container */
-.focus-trap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.focus-trap.hidden {
-  display: none;
-}
-
-/* inner dialog box */
-.focus-trap .modal {
-  background: var(--color-background);
-  padding: var(--spacing-lg);
-  border-radius: var(--border-radius-base);
-  max-width: 90%;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-}
-
-/* button container: center buttons horizontally (uses id in markup) */
-#contacts-modal #modal-buttons {
-  margin-top: var(--spacing-md);
-  display: flex;
-  justify-content: center;
-  gap: var(--spacing-sm);
-}
-
-/* buttons themselves use the shared btn-primary rules */
-#contacts-modal .modal button {
-  min-height: var(--min-touch-target);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--color-primary);
-  border-radius: var(--border-radius-base);
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--animation-duration) ease;
-}
-
-#contacts-modal .modal button.btn-primary {
-  background: var(--color-primary);
-  color: var(--color-background);
-}
-
-#contacts-modal .modal button.btn-primary:hover {
-  background: color-mix(in srgb, var(--color-primary) 90%, black);
-  box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
-}
-
-#contacts-modal .modal button.btn-primary:active {
-  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
-}
-
-#contacts-modal .modal button:disabled {
-  opacity: var(--opacity-disabled, 0.6);
-  cursor: not-allowed;
-  transform: none;
-}
-`, "",{"version":3,"sources":["webpack://./src/styles/localUtils.css"],"names":[],"mappings":"AAAA,kEAAkE;;AAElE,oCAAoC;AACpC;EACE,eAAe;EACf,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,aAAa;EACb,8BAA8B;EAC9B,aAAa;EACb,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA;EACE,aAAa;AACf;;AAEA,qBAAqB;AACrB;EACE,mCAAmC;EACnC,0BAA0B;EAC1B,wCAAwC;EACxC,cAAc;EACd,yCAAyC;AAC3C;;AAEA,sEAAsE;AACtE;EACE,6BAA6B;EAC7B,aAAa;EACb,uBAAuB;EACvB,sBAAsB;AACxB;;AAEA,wDAAwD;AACxD;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,sCAAsC;EACtC,wCAAwC;EACxC,gBAAgB;EAChB,eAAe;EACf,8CAA8C;AAChD;;AAEA;EACE,gCAAgC;EAChC,8BAA8B;AAChC;;AAEA;EACE,+DAA+D;EAC/D,6CAA6C;AAC/C;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,qCAAqC;EACrC,mBAAmB;EACnB,eAAe;AACjB","sourcesContent":["/* CSS for the accessible modal dialogs created by localUtils.js */\n\n/* backdrop / focus trap container */\n.focus-trap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.focus-trap.hidden {\n  display: none;\n}\n\n/* inner dialog box */\n.focus-trap .modal {\n  background: var(--color-background);\n  padding: var(--spacing-lg);\n  border-radius: var(--border-radius-base);\n  max-width: 90%;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n/* button container: center buttons horizontally (uses id in markup) */\n#contacts-modal #modal-buttons {\n  margin-top: var(--spacing-md);\n  display: flex;\n  justify-content: center;\n  gap: var(--spacing-sm);\n}\n\n/* buttons themselves use the shared btn-primary rules */\n#contacts-modal .modal button {\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  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n#contacts-modal .modal button.btn-primary {\n  background: var(--color-primary);\n  color: var(--color-background);\n}\n\n#contacts-modal .modal button.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#contacts-modal .modal button.btn-primary:active {\n  box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n#contacts-modal .modal button:disabled {\n  opacity: var(--opacity-disabled, 0.6);\n  cursor: not-allowed;\n  transform: none;\n}\n"],"sourceRoot":""}]);
-// Exports
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
-
-
-/***/ },
-
-/***/ 715
-(module, __nested_webpack_exports__, __nested_webpack_require_48340__) {
-
-/* harmony export */ __nested_webpack_require_48340__.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_48340__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_48340__.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_48340__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_48340__.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, `/* mugshotGallery.js styles — extracted from inline styles */
-/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
-
-/* ── Mugshot image ───────────────────────────────────────────── */
-
-.contactPane .mugshotImage {
-  max-height: 10em;
-  border-radius: var(--border-radius-full);
-  margin: var(--spacing-sm);
-}
-`, "",{"version":3,"sources":["webpack://./src/styles/mugshotGallery.css"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,gBAAgB;EAChB,wCAAwC;EACxC,yBAAyB;AAC3B","sourcesContent":["/* mugshotGallery.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Mugshot image ───────────────────────────────────────────── */\n\n.contactPane .mugshotImage {\n  max-height: 10em;\n  border-radius: var(--border-radius-full);\n  margin: var(--spacing-sm);\n}\n"],"sourceRoot":""}]);
-// Exports
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
-
-
-/***/ },
-
-/***/ 434
-(module, __nested_webpack_exports__, __nested_webpack_require_50588__) {
-
-/* harmony export */ __nested_webpack_require_50588__.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_50588__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_50588__.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_50588__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_50588__.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_37866__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_37866__.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_37866__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_37866__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -1849,13 +1640,34 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   vertical-align: middle;
 }
 
+.individualPane .hoverControl,
+.contactPane .hoverControl  {
+  position: relative;
+}
+
+/* In contactPane, hover controls in table cells may contain a link + delete icon.
+   Make the cell grow and keep the delete icon right-aligned (no overlap). */
+.contactPane td.hoverControl:has(> a) {
+  width: auto !important;
+  min-width: 4em !important;
+  justify-content: space-between !important;
+}
+
+.contactPane td.hoverControl:has(> a) > a {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
 .individualPane .hoverControl:has(> img:first-child),
 .contactPane .hoverControl:has(> img:first-child) {
   background-color: transparent !important;
   border: none !important;
   margin: 0 !important;
   border-radius: 0 !important;
-  padding: 0.7em !important;
+  padding: var(--spacing-btn) !important;
   min-height: var(--min-touch-target);
   min-width: var(--min-touch-target);
   cursor: pointer;
@@ -1864,22 +1676,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   justify-content: center;
 }
 
-.individualPane .hoverControlHide,
-.contactPane .hoverControlHide {
-  width: 1.5em !important;
-  height: 1.5em !important;
-  display: block;
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-bottom: 0.3em !important;
-}
-
 .individualPane .hoverControl:has(> img:first-child) > span,
 .contactPane .hoverControl:has(> img:first-child) > span {
   display: inline-flex;
   align-items: center;
-  margin-left: 0.3em;
+  margin-left: var(--spacing-xxs);
 }
 
 .individualPane div[style*="padding: 0.5em"]:has(> img),
@@ -1890,20 +1691,65 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 
 .individualPane div[style*="padding: 0.5em"]:has(> img) > span,
 .contactPane div[style*="padding: 0.5em"]:has(> img) > span {
-  margin-left: 0.3em;
+  margin-left: var(--spacing-xxs);
 }
 
 .individualPane .hoverControl:has(> img:first-child):hover,
 .contactPane .hoverControl:has(> img:first-child):hover {
-  background-color: transparent !important;
+  background-color: var(--color-section-bg) !important;
 }
 
 .individualPane button:has(> img[src\$=".svg"]),
 .contactPane button:has(> img[src\$=".svg"]) {
-  background-color: transparent !important;
+  background-color: var(--color-section-bg) !important;
   border: none !important;
   margin: 0 !important;
   border-radius: 0 !important;
+  box-shadow: none !important;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Ensure certain icon images render at a consistent size and align nicely when adjacent. */
+img[src\$="red.svg"],
+img[src\$="go-to-this.png"] {
+  width: 1.2em !important;
+  height: 1.2em !important;
+  max-width: none !important;
+  max-height: none !important;
+  object-fit: contain;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* If the SVG button is inside a statsLog wrapper, add pink background to the button only. */
+.individualPane .statsLog button:has(> img[src\$=".svg"]),
+.contactPane .statsLog button:has(> img[src\$=".svg"]) {
+  background-color: var(--color-info-bg) !important;
+  border: initial !important;
+  margin: initial !important;
+  border-radius: initial !important;
+}
+
+/* Hide the “Continue” icon button that Solid-UI sometimes renders below textareas. */
+.individualPane button:has(> img[title="Continue"]),
+.contactPane button:has(> img[title="Continue"]) {
+  display: none !important;
+}
+
+/* Allow “Continue” buttons inside contactFormContainer to be visible. */
+.individualPane .contactFormContainer button:has(> img[src\$="noun_1180158.svg"]),
+.contactPane .contactFormContainer button:has(> img[src\$="noun_1180158.svg"]),
+.individualPane .contactFormContainer button:has(> img[title="Continue"]),
+.contactPane .contactFormContainer button:has(> img[title="Continue"]) {
+  display: inline-flex !important;
+}
+
+/* Exception: allow “Continue” buttons inside statsLog to remain visible. */
+.individualPane .statsLog button:has(> img[title="Continue"]),
+.contactPane .statsLog button:has(> img[title="Continue"]),
+.individualPane .webidControl button:has(> img[title="Continue"]),
+.contactPane .webidControl button:has(> img[title="Continue"]){
+  display: inline-flex !important;
 }
 
 .individualPane button,
@@ -1913,25 +1759,49 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 }
 
 .individualPane input:not([type="color"]),
-.contactPane input:not([type="color"]),
-.individualPane textarea,
-.contactPane textarea,
-.individualPane select,
-.contactPane select {
-  max-width: 100%;
+.contactPane input:not([type="color"]) {
+  width: 99%;
+  max-width: 99%;
   min-width: 0;
-  box-sizing: border-box ;
+  box-sizing: border-box;
   font: inherit;
   color: var(--color-text);
   background-color: var(--color-card-bg) !important;
   border: 1px solid var(--color-border-pale);
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
 
 .individualPane textarea,
-.contactPane textarea {
-  border-color: var(--color-border-pale) !important;
+.contactPane textarea,
+.individualPane .formFieldValue textarea,
+.contactPane .formFieldValue textarea {
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: var(--border-radius-sm) !important;
+  border: var(--border-width-xthin) solid var(--color-border-accent) !important;
+  width: 99%;
+  max-width: 99%;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--color-text);
+  background-color: var(--color-card-bg) !important;
   margin: 0 !important;
-  padding: 0 !important;
+  margin-top: var(--spacing-xs);
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding: var(--spacing-xs) !important;
+}
+
+.individualPane select,
+.contactPane select {
+  max-width: 99%;
+  min-width: 0;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--color-text);
+  background-color: var(--color-card-bg) !important;
+  border: 1px solid var(--color-border-pale);
 }
 
 .individualPane input[type="date"],
@@ -1964,7 +1834,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 
 .individualPane input[type="url"],
 .contactPane input[type="url"] {
-  width: 100%;
+  width: 99%;
 }
 
 .individualPane .formFieldValue,
@@ -1994,21 +1864,28 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .contactPane .formFieldValue input:not([type="color"]),
 .individualPane .formFieldValue textarea,
 .contactPane .formFieldValue textarea {
-  width: 100%;
-  max-width: 100%;
+  width: 99% !important;
+  max-width: 99%;
+}
+
+/* Email and phone value inputs: do not stretch full width */
+.individualPane .formFieldName:has(a[href="http://www.w3.org/2006/vcard/ns#value"]) + .formFieldValue input:not([type="color"]),
+.contactPane .formFieldName:has(a[href="http://www.w3.org/2006/vcard/ns#value"]) + .formFieldValue input:not([type="color"]) {
+  width: 98% !important;
+  max-width: 98%;
 }
 
 .individualPane .formFieldValue select,
 .contactPane .formFieldValue select {
-  width: 100%;
+  width: 99%;
   display: inline-block;
   max-width: none !important;
 }
 
 .individualPane select#formSelect,
 .contactPane select#formSelect {
-  width: 100%;
-  max-width: 97%;
+  width: 99%;
+  max-width: 98%;
   box-sizing: border-box;
   margin-left: 0 !important;
   margin-right: 0 !important;
@@ -2056,7 +1933,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .individualPane .choiceBox .classifierBox-label,
 .contactPane .choiceBox .classifierBox-label {
   margin-right: 0;
-  padding-left: 0.3em;
+  padding-left: var(--spacing-xxs);
 }
 
 .individualPane .choiceBox .choiceBox-selectBox select,
@@ -2069,9 +1946,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .individualPane .classifierBox .classifierBox-label,
 .contactPane .classifierBox .classifierBox-label {
   margin-right: 0;
-  padding-left: 0.3em;
+  padding-left: var(--spacing-xxs);
   width: 8em;
-  padding: 0.3em;
+  padding: var(--spacing-xxs);
   vertical-align: middle;
 }
 
@@ -2127,27 +2004,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   min-width: 0;
 }
 
-.individualPane textarea,
-.contactPane textarea,
-.individualPane .formFieldValue textarea,
-.contactPane .formFieldValue textarea {
-  appearance: none;
-  -webkit-appearance: none;
-  border-radius: 0.2em !important;
-  border: 0.05em solid #88c !important;
-  width: 100%;
-  box-sizing: border-box;
-  margin-top: var(--spacing-xs);
-  margin-left: 0 !important;
-  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) {
@@ -2188,13 +2044,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
   vertical-align: baseline;
 }
 
-.individualPane input:not([type="color"]),
-.contactPane input:not([type="color"]) {
-  width: 100%;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 .individualPane input:disabled,
 .contactPane input:disabled,
 .individualPane textarea:disabled,
@@ -2211,15 +2060,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 .contactPane textarea:read-only {
   background-color: var(--color-background) !important;
   cursor: not-allowed;
-  opacity: 0.75;
-  border: 0.05em solid var(--color-background) !important;
-}
-
-.individualPane textarea,
-.contactPane textarea,
-.individualPane .formFieldValue textarea,
-.contactPane .formFieldValue textarea {
-  padding: var(--spacing-xs) !important;
+  opacity: var(--opacity-input-disabled);
+  border: var(--border-width-xthin) solid var(--color-background) !important;
 }
 
 .contactPane .webidControl table td div.contactPane.namedPane {
@@ -2233,21 +2075,337 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 
 /* selectors that match the old inline-styled markup when no classes can be added */
 
-/* outer container: position relative containing an absolute grid popup */
-.contactPane div[style*="position: relative"] > div[style*="position: absolute"][style*="display: grid"] {
+/* Delete pop up */
+/* Remove the intermediate positioned ancestor so the popup anchors to .hoverControl instead */
+.individualPane div[style*="position: relative"]:has(> div[style*="display: grid"]) {
+  position: static !important;
+}
+
+.individualPane div[style*="position: relative"] > div[style*="display: grid"] {
   /* override inline values with theme variables */
-  position: absolute;
-  top: -1em;
-  padding: 0.7em !important;
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  z-index: 9999 !important;
+  display: grid !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  padding: var(--spacing-btn) !important;
   background: var(--color-background) !important;
-  border: 0.1em solid var(--color-primary) !important;
+  border: var(--border-width-sm) solid var(--color-primary) !important;
   border-radius: var(--border-radius-base) !important;
-  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
-  display: grid;
-  grid-template-columns: auto auto;
-  gap: 0.3em;
-  z-index: 10;
-}`, "",{"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  width: 100%;\n  max-width: 100%;\n}\n\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n  width: 100%;\n  display: inline-block;\n  max-width: none !important;\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-radius: 0.2em !important;\n  border: 0.05em solid #88c !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}\n\n/* ------------------------------------------------------------------ */\n/* inline popup used for small confirmation flows (like the new confirmDialog) */\n/* apply the class `rdf-inline-modal` on the outer wrapper and give the\n   inner box the class `popup` instead of using the old inline styles. */\n\n/* selectors that match the old inline-styled markup when no classes can be added */\n\n/* outer container: position relative containing an absolute grid popup */\n.contactPane div[style*=\"position: relative\"] > div[style*=\"position: absolute\"][style*=\"display: grid\"] {\n  /* override inline values with theme variables */\n  position: absolute;\n  top: -1em;\n  padding: 0.7em !important;\n  background: var(--color-background) !important;\n  border: 0.1em solid var(--color-primary) !important;\n  border-radius: var(--border-radius-base) !important;\n  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;\n  display: grid;\n  grid-template-columns: auto auto;\n  gap: 0.3em;\n  z-index: 10;\n}"],"sourceRoot":""}]);
+  box-shadow: var(--box-shadow-popup) !important;
+  grid-template-columns: auto auto !important;
+  gap: var(--spacing-xxs) !important;
+}
+
+.individualPane .hoverControl img.hoverControlHide,
+.individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
+  position: absolute !important;
+  right: var(--spacing-xxxs) !important;
+  width: 1.5em !important;
+  height: 1.5em !important;
+  display: none !important;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  float: none !important;
+  z-index: 2 !important;
+}
+
+/* Show delete icon only on hover */
+.individualPane .hoverControl:hover img.hoverControlHide,
+.individualPane .hoverControl:hover [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
+}
+
+/* If the hoverControl has exactly one div + the delete icon, keep the icon vertically centered but right-aligned */
+.individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > img.hoverControlHide,
+.individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > [data-testid="deleteButtonWithCheck"] {
+  top: 50% !important;
+  right: var(--spacing-xxxs) !important;
+  left: auto !important;
+  transform: translateY(-50%) !important;
+}`, "",{"version":3,"sources":["webpack://./src/styles/contactsRDFFormsEnforced.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,\n.contactPane .hoverControl  {\n  position: relative;\n}\n\n/* In contactPane, hover controls in table cells may contain a link + delete icon.\n   Make the cell grow and keep the delete icon right-aligned (no overlap). */\n.contactPane td.hoverControl:has(> a) {\n  width: auto !important;\n  min-width: 4em !important;\n  justify-content: space-between !important;\n}\n\n.contactPane td.hoverControl:has(> a) > a {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  white-space: normal;\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: var(--spacing-btn) !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 .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: var(--spacing-xxs);\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: var(--spacing-xxs);\n}\n\n.individualPane .hoverControl:has(> img:first-child):hover,\n.contactPane .hoverControl:has(> img:first-child):hover {\n  background-color: var(--color-section-bg) !important;\n}\n\n.individualPane button:has(> img[src$=\".svg\"]),\n.contactPane button:has(> img[src$=\".svg\"]) {\n  background-color: var(--color-section-bg) !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n/* Ensure certain icon images render at a consistent size and align nicely when adjacent. */\nimg[src$=\"red.svg\"],\nimg[src$=\"go-to-this.png\"] {\n  width: 1.2em !important;\n  height: 1.2em !important;\n  max-width: none !important;\n  max-height: none !important;\n  object-fit: contain;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n/* If the SVG button is inside a statsLog wrapper, add pink background to the button only. */\n.individualPane .statsLog button:has(> img[src$=\".svg\"]),\n.contactPane .statsLog button:has(> img[src$=\".svg\"]) {\n  background-color: var(--color-info-bg) !important;\n  border: initial !important;\n  margin: initial !important;\n  border-radius: initial !important;\n}\n\n/* Hide the “Continue” icon button that Solid-UI sometimes renders below textareas. */\n.individualPane button:has(> img[title=\"Continue\"]),\n.contactPane button:has(> img[title=\"Continue\"]) {\n  display: none !important;\n}\n\n/* Allow “Continue” buttons inside contactFormContainer to be visible. */\n.individualPane .contactFormContainer button:has(> img[src$=\"noun_1180158.svg\"]),\n.contactPane .contactFormContainer button:has(> img[src$=\"noun_1180158.svg\"]),\n.individualPane .contactFormContainer button:has(> img[title=\"Continue\"]),\n.contactPane .contactFormContainer button:has(> img[title=\"Continue\"]) {\n  display: inline-flex !important;\n}\n\n/* Exception: allow “Continue” buttons inside statsLog to remain visible. */\n.individualPane .statsLog button:has(> img[title=\"Continue\"]),\n.contactPane .statsLog button:has(> img[title=\"Continue\"]),\n.individualPane .webidControl button:has(> img[title=\"Continue\"]),\n.contactPane .webidControl button:has(> img[title=\"Continue\"]){\n  display: inline-flex !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  width: 99%;\n  max-width: 99%;\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  margin-left: 0 !important;\n  margin-right: 0 !important;\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-radius: var(--border-radius-sm) !important;\n  border: var(--border-width-xthin) solid var(--color-border-accent) !important;\n  width: 99%;\n  max-width: 99%;\n  box-sizing: border-box;\n  font: inherit;\n  color: var(--color-text);\n  background-color: var(--color-card-bg) !important;\n  margin: 0 !important;\n  margin-top: var(--spacing-xs);\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding: var(--spacing-xs) !important;\n}\n\n.individualPane select,\n.contactPane select {\n  max-width: 99%;\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 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: 99%;\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  width: 99% !important;\n  max-width: 99%;\n}\n\n/* Email and phone value inputs: do not stretch full width */\n.individualPane .formFieldName:has(a[href=\"http://www.w3.org/2006/vcard/ns#value\"]) + .formFieldValue input:not([type=\"color\"]),\n.contactPane .formFieldName:has(a[href=\"http://www.w3.org/2006/vcard/ns#value\"]) + .formFieldValue input:not([type=\"color\"]) {\n  width: 98% !important;\n  max-width: 98%;\n}\n\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n  width: 99%;\n  display: inline-block;\n  max-width: none !important;\n}\n\n.individualPane select#formSelect,\n.contactPane select#formSelect {\n  width: 99%;\n  max-width: 98%;\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: var(--spacing-xxs);\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: var(--spacing-xxs);\n  width: 8em;\n  padding: var(--spacing-xxs);\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/* 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: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: var(--opacity-input-disabled);\n  border: var(--border-width-xthin) solid var(--color-background) !important;\n}\n\n.contactPane .webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}\n\n/* ------------------------------------------------------------------ */\n/* inline popup used for small confirmation flows (like the new confirmDialog) */\n/* apply the class `rdf-inline-modal` on the outer wrapper and give the\n   inner box the class `popup` instead of using the old inline styles. */\n\n/* selectors that match the old inline-styled markup when no classes can be added */\n\n/* Delete pop up */\n/* Remove the intermediate positioned ancestor so the popup anchors to .hoverControl instead */\n.individualPane div[style*=\"position: relative\"]:has(> div[style*=\"display: grid\"]) {\n  position: static !important;\n}\n\n.individualPane div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n  /* override inline values with theme variables */\n  position: absolute !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto !important;\n  z-index: 9999 !important;\n  display: grid !important;\n  pointer-events: auto !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  padding: var(--spacing-btn) !important;\n  background: var(--color-background) !important;\n  border: var(--border-width-sm) solid var(--color-primary) !important;\n  border-radius: var(--border-radius-base) !important;\n  box-shadow: var(--box-shadow-popup) !important;\n  grid-template-columns: auto auto !important;\n  gap: var(--spacing-xxs) !important;\n}\n\n.individualPane .hoverControl img.hoverControlHide,\n.individualPane .hoverControl [data-testid=\"deleteButtonWithCheck\"] {\n  position: absolute !important;\n  right: var(--spacing-xxxs) !important;\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: none !important;\n  align-items: center;\n  justify-content: center;\n  margin: 0 !important;\n  float: none !important;\n  z-index: 2 !important;\n}\n\n/* Show delete icon only on hover */\n.individualPane .hoverControl:hover img.hoverControlHide,\n.individualPane .hoverControl:hover [data-testid=\"deleteButtonWithCheck\"] {\n  display: inline-flex !important;\n}\n\n/* If the hoverControl has exactly one div + the delete icon, keep the icon vertically centered but right-aligned */\n.individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > img.hoverControlHide,\n.individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > [data-testid=\"deleteButtonWithCheck\"] {\n  top: 50% !important;\n  right: var(--spacing-xxxs) !important;\n  left: auto !important;\n  transform: translateY(-50%) !important;\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ },
+
+/***/ 93
+(module, __nested_webpack_exports__, __nested_webpack_require_79190__) {
+
+/* harmony export */ __nested_webpack_require_79190__.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_79190__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_79190__.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_79190__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_79190__.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, `/* ── Group Membership Section ──────────────────────────────── */
+
+.contactPane .group-membership-container {
+  padding: var(--spacing-sm) 0;
+}
+
+/* Grid wrapper — matches detailsSectionContent groupButtonsList */
+.contactPane .group-pills-wrapper {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
+  gap: var(--spacing-sm) !important;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100% !important;
+}
+
+.contactPane .group-pills-wrapper span {
+  width: max-content !important;
+}
+
+/* Each group item: button on top, toolbar below */
+.contactPane .group-membership-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 256px;
+}
+
+.contactPane .group-membership-item > button {
+  width: 100%;
+  text-align: center;
+  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 */
+.contactPane .group-membership-item .group-membership-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) 0 0 0;
+}
+
+.contactPane .group-membership-item .group-membership-toolbar a img {
+  width: 1.3em;
+  height: 1em;
+  margin: 0;
+}
+
+/* Cancel float:right and any absolute positioning injected by solid-ui */
+.contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide,
+.contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"] {
+  float: none !important;
+  position: static !important;
+  display: inline-flex !important;
+  visibility: hidden !important;
+  margin: 0 !important;
+}
+
+.contactPane .group-membership-item .group-membership-toolbar:hover > img.hoverControlHide,
+.contactPane .group-membership-item .group-membership-toolbar:hover > [data-testid="deleteButtonWithCheck"] {
+  visibility: visible !important;
+}
+
+.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] {
+  position: absolute !important;
+  top: 0 !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  width: min(90vw, 440px) !important;
+  min-width: 280px !important;
+  max-width: 90vw !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div {
+  position: relative !important;
+  top: auto !important;
+  min-width: 280px !important;
+  background: var(--color-background);
+  border-radius: var(--border-radius-full);
+  padding: var(--spacing-lg);
+  box-shadow: var(--box-shadow-overlay);
+  z-index: 1001;
+}
+
+@media (max-width: 599px) {
+  .contactPane .group-membership-item .group-pills-wrapper {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: var(--spacing-xs) !important;
+    max-width: 100% !important;
+  }
+
+  .contactPane .group-membership-item .group-membership-item > button {
+    font-size: var(--font-size-sm) !important;
+    border-radius: var(--border-radius-base) !important;
+  }
+}
+
+@media (min-width: 900px) {
+  .contactPane .group-membership-item .group-pills-wrapper {
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: var(--spacing-sm) !important;
+  }
+}
+`, "",{"version":3,"sources":["webpack://./src/styles/groupMembership.css"],"names":[],"mappings":"AAAA,iEAAiE;;AAEjE;EACE,4BAA4B;AAC9B;;AAEA,kEAAkE;AAClE;EACE,wBAAwB;EACxB,sEAAsE;EACtE,iCAAiC;EACjC,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,sBAAsB;AACxB;;AAEA;EACE,6BAA6B;AAC/B;;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,yEAAyE;AACzE;;EAEE,sBAAsB;EACtB,2BAA2B;EAC3B,+BAA+B;EAC/B,6BAA6B;EAC7B,oBAAoB;AACtB;;AAEA;;EAEE,8BAA8B;AAChC;;AAEA;EACE,6BAA6B;EAC7B,iBAAiB;EACjB,oBAAoB;EACpB,sCAAsC;EACtC,kCAAkC;EAClC,2BAA2B;EAC3B,0BAA0B;EAC1B,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,aAAa;AACf;;AAEA;EACE,6BAA6B;EAC7B,oBAAoB;EACpB,2BAA2B;EAC3B,mCAAmC;EACnC,wCAAwC;EACxC,0BAA0B;EAC1B,qCAAqC;EACrC,aAAa;AACf;;AAEA;EACE;IACE,gDAAgD;IAChD,iCAAiC;IACjC,0BAA0B;EAC5B;;EAEA;IACE,yCAAyC;IACzC,mDAAmD;EACrD;AACF;;AAEA;EACE;IACE,gDAAgD;IAChD,iCAAiC;EACnC;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 !important;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;\n  gap: var(--spacing-sm) !important;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  width: 100% !important;\n}\n\n.contactPane .group-pills-wrapper span {\n  width: max-content !important;\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-item .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-item .group-membership-toolbar a img {\n  width: 1.3em;\n  height: 1em;\n  margin: 0;\n}\n\n/* Cancel float:right and any absolute positioning injected by solid-ui */\n.contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide,\n.contactPane .group-membership-item .group-membership-toolbar > [data-testid=\"deleteButtonWithCheck\"] {\n  float: none !important;\n  position: static !important;\n  display: inline-flex !important;\n  visibility: hidden !important;\n  margin: 0 !important;\n}\n\n.contactPane .group-membership-item .group-membership-toolbar:hover > img.hoverControlHide,\n.contactPane .group-membership-item .group-membership-toolbar:hover > [data-testid=\"deleteButtonWithCheck\"] {\n  visibility: visible !important;\n}\n\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*=\"position: relative\"] {\n  position: absolute !important;\n  top: 0 !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  width: min(90vw, 440px) !important;\n  min-width: 280px !important;\n  max-width: 90vw !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*=\"position: relative\"] > div {\n  position: relative !important;\n  top: auto !important;\n  min-width: 280px !important;\n  background: var(--color-background);\n  border-radius: var(--border-radius-full);\n  padding: var(--spacing-lg);\n  box-shadow: var(--box-shadow-overlay);\n  z-index: 1001;\n}\n\n@media (max-width: 599px) {\n  .contactPane .group-membership-item .group-pills-wrapper {\n    grid-template-columns: repeat(2, 1fr) !important;\n    gap: var(--spacing-xs) !important;\n    max-width: 100% !important;\n  }\n\n  .contactPane .group-membership-item .group-membership-item > button {\n    font-size: var(--font-size-sm) !important;\n    border-radius: var(--border-radius-base) !important;\n  }\n}\n\n@media (min-width: 900px) {\n  .contactPane .group-membership-item .group-pills-wrapper {\n    grid-template-columns: repeat(3, 1fr) !important;\n    gap: var(--spacing-sm) !important;\n  }\n}\n"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ },
+
+/***/ 479
+(module, __nested_webpack_exports__, __nested_webpack_require_88538__) {
+
+/* harmony export */ __nested_webpack_require_88538__.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_88538__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_88538__.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_88538__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_88538__.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, `/* individual.js styles — extracted from inline styles */
+
+/* ── Individual pane container ───────────────────────────────── */
+
+.individualPane {
+  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
+  background: var(--color-section-bg);
+  border-radius: var(--border-radius-full);
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  max-width: 100%;
+}`, "",{"version":3,"sources":["webpack://./src/styles/individual.css"],"names":[],"mappings":"AAAA,wDAAwD;;AAExD,mEAAmE;;AAEnE;EACE,gFAAgF;EAChF,mCAAmC;EACnC,wCAAwC;EACxC,6BAA6B;EAC7B,sBAAsB;EACtB,eAAe;AACjB","sourcesContent":["/* individual.js styles — extracted from inline styles */\n\n/* ── Individual pane container ───────────────────────────────── */\n\n.individualPane {\n  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  box-sizing: border-box;\n  max-width: 100%;\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ },
+
+/***/ 546
+(module, __nested_webpack_exports__, __nested_webpack_require_90905__) {
+
+/* harmony export */ __nested_webpack_require_90905__.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_90905__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_90905__.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_90905__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_90905__.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, `/* CSS for the accessible modal dialogs created by localUtils.js */
+
+/* backdrop / focus trap container */
+.focus-trap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background: var(--overlay-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* inner dialog box */
+.focus-trap .modal {
+  background: var(--color-background);
+  padding: var(--spacing-lg);
+  border-radius: var(--border-radius-base);
+  max-width: 90%;
+  box-shadow: var(--box-shadow-modal);
+}
+
+/* button container: center buttons horizontally (uses id in markup) */
+#contacts-modal #modal-buttons {
+  margin-top: var(--spacing-md);
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-sm);
+}
+
+/* buttons themselves use the shared btn-primary rules */
+#contacts-modal .modal button {
+  min-height: var(--min-touch-target);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--border-radius-base);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--animation-duration) ease;
+}
+
+#contacts-modal .modal button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  transform: none;
+}
+`, "",{"version":3,"sources":["webpack://./src/styles/localUtils.css"],"names":[],"mappings":"AAAA,kEAAkE;;AAElE,oCAAoC;AACpC;EACE,eAAe;EACf,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,aAAa;EACb,6BAA6B;EAC7B,aAAa;EACb,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA,qBAAqB;AACrB;EACE,mCAAmC;EACnC,0BAA0B;EAC1B,wCAAwC;EACxC,cAAc;EACd,mCAAmC;AACrC;;AAEA,sEAAsE;AACtE;EACE,6BAA6B;EAC7B,aAAa;EACb,uBAAuB;EACvB,sBAAsB;AACxB;;AAEA,wDAAwD;AACxD;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,sCAAsC;EACtC,wCAAwC;EACxC,gBAAgB;EAChB,eAAe;EACf,8CAA8C;AAChD;;AAEA;EACE,gCAAgC;EAChC,mBAAmB;EACnB,eAAe;AACjB","sourcesContent":["/* CSS for the accessible modal dialogs created by localUtils.js */\n\n/* backdrop / focus trap container */\n.focus-trap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  background: var(--overlay-bg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* inner dialog box */\n.focus-trap .modal {\n  background: var(--color-background);\n  padding: var(--spacing-lg);\n  border-radius: var(--border-radius-base);\n  max-width: 90%;\n  box-shadow: var(--box-shadow-modal);\n}\n\n/* button container: center buttons horizontally (uses id in markup) */\n#contacts-modal #modal-buttons {\n  margin-top: var(--spacing-md);\n  display: flex;\n  justify-content: center;\n  gap: var(--spacing-sm);\n}\n\n/* buttons themselves use the shared btn-primary rules */\n#contacts-modal .modal button {\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  font-weight: 600;\n  cursor: pointer;\n  transition: all var(--animation-duration) ease;\n}\n\n#contacts-modal .modal button:disabled {\n  opacity: var(--opacity-disabled);\n  cursor: not-allowed;\n  transform: none;\n}\n"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ },
+
+/***/ 715
+(module, __nested_webpack_exports__, __nested_webpack_require_95307__) {
+
+/* harmony export */ __nested_webpack_require_95307__.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_95307__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_95307__.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_95307__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_95307__.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, `/* mugshotGallery.js styles — extracted from inline styles */
+/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
+
+/* ── Mugshot image ───────────────────────────────────────────── */
+
+.contactPane .mugshotImage {
+  max-height: 10em;
+  border-radius: var(--border-radius-full);
+  margin: var(--spacing-sm);
+}
+
+.contactPane button:has(> img[src\$=".svg"]) {
+  background-color: var(--color-section-bg) !important;
+  border: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+}
+`, "",{"version":3,"sources":["webpack://./src/styles/mugshotGallery.css"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,gBAAgB;EAChB,wCAAwC;EACxC,yBAAyB;AAC3B;;AAEA;EACE,oDAAoD;EACpD,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;AAC7B","sourcesContent":["/* mugshotGallery.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Mugshot image ───────────────────────────────────────────── */\n\n.contactPane .mugshotImage {\n  max-height: 10em;\n  border-radius: var(--border-radius-full);\n  margin: var(--spacing-sm);\n}\n\n.contactPane button:has(> img[src$=\".svg\"]) {\n  background-color: var(--color-section-bg) !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2255,15 +2413,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 /***/ },
 
 /***/ 295
-(module, __nested_webpack_exports__, __nested_webpack_require_83257__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_98002__) {
 
-/* harmony export */ __nested_webpack_require_83257__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_98002__.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_83257__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_83257__.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_83257__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_83257__.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_98002__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_98002__.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_98002__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_98002__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -2305,9 +2463,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
 
 /* ── Load index button states ──────────────────────────────── */
 
-.contactPane .toolsButton--loading {
-}
-
 .contactPane .toolsButton--error {
   background-color: var(--color-error);
 }
@@ -2315,7 +2470,128 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
 .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,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":""}]);
+`, "",{"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;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--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___);
+
+
+/***/ },
+
+/***/ 92
+(module, __nested_webpack_exports__, __nested_webpack_require_101903__) {
+
+/* harmony export */ __nested_webpack_require_101903__.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_101903__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_101903__.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_101903__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_101903__.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, `/* Shared utility variables for component styles.
+   These are kept here (instead of in dev-global.css) so they can be
+   bundled with component styles and reused consistently across the app.
+*/
+
+:root {
+  /* Global utility tokens */
+  --opacity-disabled: 0.6;
+  --opacity-input-disabled: 0.75;
+  --font-weight-bold: 700;
+
+  --border-width-xthin: 0.05em;
+  --border-width-sm: 0.1em;
+  --border-width-thin: 1px;
+
+  --border-radius-xs: 0.1em;
+  --border-radius-sm: 0.2em;
+
+  --spacing-xxs: 0.3em;
+  --spacing-xxxs: 0.2em;
+  --spacing-btn: 0.7em;
+
+  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
+  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
+  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
+  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
+  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);
+
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --overlay-bg-muted: rgba(0, 0, 0, 0.3);
+
+  --color-border-accent: #88c;
+}
+
+/* Utility helper classes */
+.hidden {
+  display: none !important;
+}
+
+.btn-primary {
+  min-height: var(--min-touch-target);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--border-radius-base);
+  background: var(--color-primary);
+  color: var(--color-background);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--animation-duration) ease;
+}
+
+.btn-primary:hover {
+  background: color-mix(in srgb, var(--color-primary) 90%, black);
+  box-shadow: var(--box-shadow-hover);
+}
+
+.btn-primary:active {
+  box-shadow: var(--box-shadow-active);
+}
+
+.btn-primary:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-secondary {
+  min-height: var(--min-touch-target);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: var(--border-width-thin) solid var(--color-secondary);
+  border-radius: var(--border-radius-base);
+  background: var(--color-secondary);
+  color: var(--color-background);
+  font-weight: var(--font-weight-bold);
+  cursor: pointer;
+  transition: all var(--animation-duration) ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-secondary:hover {
+  background: color-mix(in srgb, var(--color-secondary) 85%, black);
+}
+
+.btn-secondary:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+.action-button-focus:focus,
+.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), var(--box-shadow-focus) !important;
+  z-index: 1;
+}
+`, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"AAAA;;;CAGC;;AAED;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,8BAA8B;EAC9B,uBAAuB;;EAEvB,4BAA4B;EAC5B,wBAAwB;EACxB,wBAAwB;;EAExB,yBAAyB;EACzB,yBAAyB;;EAEzB,oBAAoB;EACpB,qBAAqB;EACrB,oBAAoB;;EAEpB,qDAAqD;EACrD,sDAAsD;EACtD,sDAAsD;EACtD,mDAAmD;EACnD,iDAAiD;EACjD,oDAAoD;;EAEpD,gCAAgC;EAChC,sCAAsC;;EAEtC,2BAA2B;AAC7B;;AAEA,2BAA2B;AAC3B;EACE,wBAAwB;AAC1B;;AAEA;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,sCAAsC;EACtC,wCAAwC;EACxC,gCAAgC;EAChC,8BAA8B;EAC9B,gBAAgB;EAChB,eAAe;EACf,8CAA8C;AAChD;;AAEA;EACE,+DAA+D;EAC/D,mCAAmC;AACrC;;AAEA;EACE,oCAAoC;AACtC;;AAEA;EACE,gCAAgC;EAChC,mBAAmB;EACnB,eAAe;AACjB;;AAEA;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,6DAA6D;EAC7D,wCAAwC;EACxC,kCAAkC;EAClC,8BAA8B;EAC9B,oCAAoC;EACpC,eAAe;EACf,8CAA8C;EAC9C,qBAAqB;EACrB,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,gCAAgC;EAChC,mBAAmB;AACrB;;AAEA;;EAEE,kDAAkD;EAClD,8BAA8B;EAC9B,iFAAiF;EACjF,UAAU;AACZ","sourcesContent":["/* Shared utility variables for component styles.\n   These are kept here (instead of in dev-global.css) so they can be\n   bundled with component styles and reused consistently across the app.\n*/\n\n:root {\n  /* Global utility tokens */\n  --opacity-disabled: 0.6;\n  --opacity-input-disabled: 0.75;\n  --font-weight-bold: 700;\n\n  --border-width-xthin: 0.05em;\n  --border-width-sm: 0.1em;\n  --border-width-thin: 1px;\n\n  --border-radius-xs: 0.1em;\n  --border-radius-sm: 0.2em;\n\n  --spacing-xxs: 0.3em;\n  --spacing-xxxs: 0.2em;\n  --spacing-btn: 0.7em;\n\n  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);\n  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);\n  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);\n  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);\n  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);\n  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);\n\n  --overlay-bg: rgba(0, 0, 0, 0.5);\n  --overlay-bg-muted: rgba(0, 0, 0, 0.3);\n\n  --color-border-accent: #88c;\n}\n\n/* Utility helper classes */\n.hidden {\n  display: none !important;\n}\n\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: var(--box-shadow-hover);\n}\n\n.btn-primary:active {\n  box-shadow: var(--box-shadow-active);\n}\n\n.btn-primary:disabled {\n  opacity: var(--opacity-disabled);\n  cursor: not-allowed;\n  transform: none;\n}\n\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: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), var(--box-shadow-focus) !important;\n  z-index: 1;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2323,15 +2599,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
 /***/ },
 
 /***/ 886
-(module, __nested_webpack_exports__, __nested_webpack_require_87253__) {
+(module, __nested_webpack_exports__, __nested_webpack_require_109627__) {
 
-/* harmony export */ __nested_webpack_require_87253__.d(__nested_webpack_exports__, {
+/* harmony export */ __nested_webpack_require_109627__.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_87253__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_87253__.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_87253__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_87253__.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_109627__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_109627__.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_109627__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_109627__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 // Imports
 
 
@@ -2339,7 +2615,7 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pane) ──────────────────────────── */
 .contactPane .namedPane {
-  border: 0.1em solid var(--color-text-muted);
+  border: var(--border-width-sm) solid var(--color-text-muted);
   border-radius: var(--border-radius-base);
 }
 
@@ -2349,8 +2625,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
   padding: var(--spacing-xs);
 }
 
-.contactPane .personaRow--webid {
-  background-color: var(--color-info-bg);
+.contactPane .personaRow--webid,
+.contactPane .personaRow--webid td,
+.contactPane .personaRow--webid button,
+.contactPane .personaRow--webid button:hover,
+.contactPane .personaRow--webid .hoverControl:has(> img:first-child),
+.contactPane .personaRow--webid .hoverControl:has(> img:first-child):hover,
+.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child),
+.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child):hover {
+  background-color: var(--color-info-bg) !important;
 }
 
 /* ── Full-width elements ─────────────────────────────────────── */
@@ -2367,13 +2650,42 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
   border: none;
 }
 
+/* hoverControl layout overrides are now enforced in contactsRDFFormsEnforced.css */
+
+/* ── Delete confirmation popup in webidControl ───────────────── */
+
+/* Remove intermediate positioned ancestor so popup anchors to .hoverControl */
+.contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {
+  position: static !important;
+}
+
+/* Position the popup absolutely so it never participates in the flex row */
+.contactPane .webidControl div[style*="position: relative"] > div[style*="display: grid"] {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  z-index: 9999 !important;
+  display: grid !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  padding: var(--spacing-btn) !important;
+  min-width: 12em !important;
+  background: var(--color-background) !important;
+  border: var(--border-width-sm) solid var(--color-primary) !important;
+  border-radius: var(--border-radius-base) !important;
+  box-shadow: var(--box-shadow-popup) !important;
+  grid-template-columns: auto auto !important;
+  gap: var(--spacing-xxs) !important;
+}
+
 /* ── Section heading ─────────────────────────────────────────── */
 
-.contactPane .webidHeading {
+.contactPane .contactPanedHeading {
   font-size: var(--font-size-lg);
   font-weight: bold;
   color: var(--color-primary);
-  padding: var(--spacing-xs);
   margin: var(--spacing-sm) 0;
 }
 
@@ -2388,14 +2700,10 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
 
 /* ── Visibility / display helpers ────────────────────────────── */
 
-.contactPane .hidden {
-  display: none;
-}
-
 .contactPane .collapsed {
   visibility: collapse;
 }
-`, "",{"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":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/webidControl.css"],"names":[],"mappings":"AAAA,mEAAmE;AACnE;EACE,4DAA4D;EAC5D,wCAAwC;AAC1C;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;AAC5B;;AAEA;;;;;;;;EAQE,iDAAiD;AACnD;;AAEA,mEAAmE;;AAEnE;EACE,WAAW;AACb;;AAEA,mEAAmE;;AAEnE;EACE,YAAY;EACZ,6BAA6B;EAC7B,YAAY;AACd;;AAEA,mFAAmF;;AAEnF,mEAAmE;;AAEnE,8EAA8E;AAC9E;EACE,2BAA2B;AAC7B;;AAEA,2EAA2E;AAC3E;EACE,6BAA6B;EAC7B,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB;EACxB,wBAAwB;EACxB,+BAA+B;EAC/B,qBAAqB;EACrB,8BAA8B;EAC9B,sCAAsC;EACtC,0BAA0B;EAC1B,8CAA8C;EAC9C,oEAAoE;EACpE,mDAAmD;EACnD,8CAA8C;EAC9C,2CAA2C;EAC3C,kCAAkC;AACpC;;AAEA,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,iBAAiB;EACjB,2BAA2B;EAC3B,2BAA2B;AAC7B;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;EAC1B,YAAY;EACZ,gCAAgC;EAChC,qBAAqB;AACvB;;AAEA,mEAAmE;;AAEnE;EACE,oBAAoB;AACtB","sourcesContent":["/* ── Named pane (rendered sub-pane) ──────────────────────────── */\n.contactPane .namedPane {\n  border: var(--border-width-sm) 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.contactPane .personaRow--webid td,\n.contactPane .personaRow--webid button,\n.contactPane .personaRow--webid button:hover,\n.contactPane .personaRow--webid .hoverControl:has(> img:first-child),\n.contactPane .personaRow--webid .hoverControl:has(> img:first-child):hover,\n.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child),\n.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child):hover {\n  background-color: var(--color-info-bg) !important;\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/* hoverControl layout overrides are now enforced in contactsRDFFormsEnforced.css */\n\n/* ── Delete confirmation popup in webidControl ───────────────── */\n\n/* Remove intermediate positioned ancestor so popup anchors to .hoverControl */\n.contactPane .webidControl div[style*=\"position: relative\"]:has(> div[style*=\"display: grid\"]) {\n  position: static !important;\n}\n\n/* Position the popup absolutely so it never participates in the flex row */\n.contactPane .webidControl div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n  position: absolute !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto !important;\n  z-index: 9999 !important;\n  display: grid !important;\n  pointer-events: auto !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  padding: var(--spacing-btn) !important;\n  min-width: 12em !important;\n  background: var(--color-background) !important;\n  border: var(--border-width-sm) solid var(--color-primary) !important;\n  border-radius: var(--border-radius-base) !important;\n  box-shadow: var(--box-shadow-popup) !important;\n  grid-template-columns: auto auto !important;\n  gap: var(--spacing-xxs) !important;\n}\n\n/* ── Section heading ─────────────────────────────────────────── */\n\n.contactPane .contactPanedHeading {\n  font-size: var(--font-size-lg);\n  font-weight: bold;\n  color: var(--color-primary);\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 .collapsed {\n  visibility: collapse;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2694,13 +3002,13 @@ module.exports = insertStyleElement;
 /***/ },
 
 /***/ 56
-(module, __unused_webpack_exports, __nested_webpack_require_99110__) {
+(module, __unused_webpack_exports, __nested_webpack_require_124929__) {
 
 
 
 /* istanbul ignore next  */
 function setAttributesWithoutAttributes(styleElement) {
-  var nonce =   true ? __nested_webpack_require_99110__.nc : 0;
+  var nonce =   true ? __nested_webpack_require_124929__.nc : 0;
   if (nonce) {
     styleElement.setAttribute("nonce", nonce);
   }
@@ -2830,7 +3138,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	var __webpack_module_cache__ = {};
 /******/ 	
 /******/ 	// The require function
-/******/ 	function __nested_webpack_require_102275__(moduleId) {
+/******/ 	function __nested_webpack_require_128094__(moduleId) {
 /******/ 		// Check if module is in cache
 /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 /******/ 		if (cachedModule !== undefined) {
@@ -2844,24 +3152,24 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_102275__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_128094__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
 /******/ 	
 /******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__nested_webpack_require_102275__.m = __webpack_modules__;
+/******/ 	__nested_webpack_require_128094__.m = __webpack_modules__;
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/compat get default export */
 /******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__nested_webpack_require_102275__.n = (module) => {
+/******/ 		__nested_webpack_require_128094__.n = (module) => {
 /******/ 			var getter = module && module.__esModule ?
 /******/ 				() => (module['default']) :
 /******/ 				() => (module);
-/******/ 			__nested_webpack_require_102275__.d(getter, { a: getter });
+/******/ 			__nested_webpack_require_128094__.d(getter, { a: getter });
 /******/ 			return getter;
 /******/ 		};
 /******/ 	})();
@@ -2869,9 +3177,9 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__nested_webpack_require_102275__.d = (exports, definition) => {
+/******/ 		__nested_webpack_require_128094__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
-/******/ 				if(__nested_webpack_require_102275__.o(definition, key) && !__nested_webpack_require_102275__.o(exports, key)) {
+/******/ 				if(__nested_webpack_require_128094__.o(definition, key) && !__nested_webpack_require_128094__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
@@ -2880,12 +3188,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_102275__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 		__nested_webpack_require_128094__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/jsonp chunk loading */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_102275__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
+/******/ 		__nested_webpack_require_128094__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
 /******/ 		
 /******/ 		// object to store loaded and loading chunks
 /******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
@@ -2911,45 +3219,45 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
 /******/ 	
 /******/ 	/* webpack/runtime/nonce */
 /******/ 	(() => {
-/******/ 		__nested_webpack_require_102275__.nc = undefined;
+/******/ 		__nested_webpack_require_128094__.nc = undefined;
 /******/ 	})();
 /******/ 	
 /************************************************************************/
 var __nested_webpack_exports__ = {};
 
 // EXPORTS
-__nested_webpack_require_102275__.d(__nested_webpack_exports__, {
+__nested_webpack_require_128094__.d(__nested_webpack_exports__, {
   "default": () => (/* binding */ src_contactsPane)
 });
 
 // UNUSED EXPORTS: addPersonToGroup, addWebIDToContacts, getPersonas, groupMembers, removeWebIDFromContacts, saveNewContact, saveNewGroup
 
 // 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_102275__(941);
+var external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_ = __nested_webpack_require_128094__(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_102275__(104);
+var external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_ = __nested_webpack_require_128094__(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_102275__(53);
+var external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_ = __nested_webpack_require_128094__(53);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
-var injectStylesIntoStyleTag = __nested_webpack_require_102275__(72);
-var injectStylesIntoStyleTag_default = /*#__PURE__*/__nested_webpack_require_102275__.n(injectStylesIntoStyleTag);
+var injectStylesIntoStyleTag = __nested_webpack_require_128094__(72);
+var injectStylesIntoStyleTag_default = /*#__PURE__*/__nested_webpack_require_128094__.n(injectStylesIntoStyleTag);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleDomAPI.js
-var styleDomAPI = __nested_webpack_require_102275__(825);
-var styleDomAPI_default = /*#__PURE__*/__nested_webpack_require_102275__.n(styleDomAPI);
+var styleDomAPI = __nested_webpack_require_128094__(825);
+var styleDomAPI_default = /*#__PURE__*/__nested_webpack_require_128094__.n(styleDomAPI);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertBySelector.js
-var insertBySelector = __nested_webpack_require_102275__(659);
-var insertBySelector_default = /*#__PURE__*/__nested_webpack_require_102275__.n(insertBySelector);
+var insertBySelector = __nested_webpack_require_128094__(659);
+var insertBySelector_default = /*#__PURE__*/__nested_webpack_require_128094__.n(insertBySelector);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js
-var setAttributesWithoutAttributes = __nested_webpack_require_102275__(56);
-var setAttributesWithoutAttributes_default = /*#__PURE__*/__nested_webpack_require_102275__.n(setAttributesWithoutAttributes);
+var setAttributesWithoutAttributes = __nested_webpack_require_128094__(56);
+var setAttributesWithoutAttributes_default = /*#__PURE__*/__nested_webpack_require_128094__.n(setAttributesWithoutAttributes);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertStyleElement.js
-var insertStyleElement = __nested_webpack_require_102275__(540);
-var insertStyleElement_default = /*#__PURE__*/__nested_webpack_require_102275__.n(insertStyleElement);
+var insertStyleElement = __nested_webpack_require_128094__(540);
+var insertStyleElement_default = /*#__PURE__*/__nested_webpack_require_128094__.n(insertStyleElement);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js
-var styleTagTransform = __nested_webpack_require_102275__(113);
-var styleTagTransform_default = /*#__PURE__*/__nested_webpack_require_102275__.n(styleTagTransform);
+var styleTagTransform = __nested_webpack_require_128094__(113);
+var styleTagTransform_default = /*#__PURE__*/__nested_webpack_require_128094__.n(styleTagTransform);
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/webidControl.css
-var webidControl = __nested_webpack_require_102275__(886);
+var webidControl = __nested_webpack_require_128094__(886);
 ;// ./src/styles/webidControl.css
 
       
@@ -2978,6 +3286,8 @@ var update = injectStylesIntoStyleTag_default()(webidControl/* default */.A, opt
        /* harmony default export */ const styles_webidControl = (webidControl/* default */.A && webidControl/* default */.A.locals ? webidControl/* default */.A.locals : undefined);
 
 ;// ./src/debug.js
+/* eslint-disable no-console */
+
 function log (...args) {
   console.log(...args)
 }
@@ -3268,7 +3578,6 @@ async function renderIdControl (person, dataBrowserContext, options) {
 
   async function refreshWebIDTable () {
     const personas = getPersonas(kb, person)
-    prompt.classList.toggle('hidden', personas.length > 0)
     utils.syncTableToArrayReOrdered(profileArea, personas, persona => renderPersona(dom, persona, kb))
   }
   async function addOneIdAndRefresh (person, webid) {
@@ -3276,7 +3585,7 @@ async function renderIdControl (person, dataBrowserContext, options) {
       await addWebIDToContacts(person, webid, options.urlType, kb)
     } catch (err) {
       error('Error adding webId ' + webid + ' to ' + person + '. Stack: ' + err)
-      div.appendChild(widgets.errorMessageBlock(dom, 'Error adding WebID to profile. If it persists, contact admin.'))
+      div.appendChild(widgets.errorMessageBlock(dom, 'This is not a valid WebID.'))
     }
     await refreshWebIDTable()
   }
@@ -3293,12 +3602,9 @@ async function renderIdControl (person, dataBrowserContext, options) {
   }
 
   const h3 = div.appendChild(dom.createElement('h3'))
-  h3.textContent = options.idNoun
-  h3.classList.add('webidHeading')
+  h3.textContent = 'Link to a ' + options.idNoun
+  h3.classList.add('contactPanedHeading')
 
-  const prompt = div.appendChild(dom.createElement('p'))
-  prompt.classList.add('webidPrompt')
-  prompt.textContent = options.longPrompt
   const table = div.appendChild(dom.createElement('table'))
   table.classList.add('fullWidth')
 
@@ -3327,7 +3633,7 @@ async function renderIdControl (person, dataBrowserContext, options) {
 }
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/localUtils.css
-var localUtils = __nested_webpack_require_102275__(546);
+var localUtils = __nested_webpack_require_128094__(546);
 ;// ./src/styles/localUtils.css
 
       
@@ -3609,6 +3915,107 @@ function nameFor (x) {
   return name ? name.value : '???'
 }
 
+/**
+ * Prevent keyboard tabbing into labels/label-like links created by rdflib/solid-ui forms.
+ * @param {HTMLElement} root
+ */
+function skipLabelsFromTabbing (root) {
+  // Many Solid-UI forms render field labels as focusable links (hrefs).
+  // Make sure keyboard tabbing skips these label links entirely.
+  const selectors = [
+    'label',
+    '.formFieldName a',
+    '.classifierBox-label a',
+    '.choiceBox-label a',
+    '.label a',
+    // Skip focusable label-like links created by Solid-UI forms, including the vcard note link
+    'a[href="http://www.w3.org/2006/vcard/ns#note"]',
+    'a[href$="#note"]',
+  ].join(', ')
+
+  // Some environments have NodeLists without forEach (e.g., older Safari).
+  const nodes = root?.querySelectorAll?.(selectors)
+  if (!nodes) return
+
+  Array.from(nodes).forEach(el => {
+    // Some browsers may return null for tabIndex, and some elements may not
+    // expose tabIndex at all (e.g., SVG elements), so guard before setting.
+    if (typeof el.tabIndex === 'number' && el.tabIndex !== -1) {
+      el.tabIndex = -1
+    }
+    // Ensure those label links are not announced as focusable elements
+    if (el.getAttribute('aria-hidden') !== 'true') {
+      el.setAttribute('aria-hidden', 'true')
+    }
+  })
+}
+
+function isAWebID (subject) {
+  const t = localUtils_kb.findTypeURIs(subject.doc())
+  return !!t[localUtils_ns.foaf('PersonalProfileDocument').uri]
+}
+
+
+// Make the layout stack vertically when the containing pane gets narrow
+function setupResponsiveStacking (paneDiv, breakpoint = 900) {
+  function updateFromPane () {
+    const width = paneDiv.getBoundingClientRect().width
+    const isNarrow = width <= breakpoint
+    // Always track viewport fallback even if pane is not in DOM yet
+    const viewportNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
+      ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
+      : false
+
+    if (width > 0) {
+      paneDiv.classList.toggle('contactPane--narrow', isNarrow)
+      paneDiv.dataset.paneWidth = Math.round(width).toString()
+      paneDiv.dataset.paneNarrow = isNarrow ? 'true' : 'false'
+    } else {
+      // If not inserted yet, apply viewport mode until placed.
+      paneDiv.classList.toggle('contactPane--narrow', viewportNarrow)
+      paneDiv.dataset.paneWidth = '0'
+      paneDiv.dataset.paneNarrow = viewportNarrow ? 'true' : 'false'
+    }
+
+    paneDiv.dataset.viewportNarrow = viewportNarrow ? 'true' : 'false'
+
+    return isNarrow
+  }
+
+  function updateFromViewport () {
+    const isNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
+      ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
+      : false
+    paneDiv.classList.toggle('contactPane--narrow', isNarrow)
+    paneDiv.dataset.viewportNarrow = isNarrow ? 'true' : 'false'
+    return isNarrow
+  }
+
+  const resizeObserverAvailable = typeof ResizeObserver !== 'undefined'
+  if (resizeObserverAvailable) {
+    const ro = new ResizeObserver(() => updateFromPane())
+    ro.observe(paneDiv)
+  }
+
+  if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+    window.addEventListener('resize', () => {
+      updateFromPane()
+      updateFromViewport()
+    })
+  }
+
+  // Initial state
+  function ensureInitialUpdate () {
+    const paneNarrow = updateFromPane()
+    const viewportNarrow = updateFromViewport()
+    // If we are not in the document yet, re-run until connected
+    if (!paneDiv.isConnected) {
+      requestAnimationFrame(ensureInitialUpdate)
+    }
+  }
+
+  ensureInitialUpdate()
+}
 ;// ./src/contactLogic.js
 
 
@@ -4029,7 +4436,7 @@ function mintNewAddressBook (dataBrowserContext, context) {
 }
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/mugshotGallery.css
-var mugshotGallery = __nested_webpack_require_102275__(715);
+var mugshotGallery = __nested_webpack_require_128094__(715);
 ;// ./src/styles/mugshotGallery.css
 
       
@@ -4395,7 +4802,7 @@ function renderMugshotGallery (dom, subject) {
 }
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/groupMembership.css
-var groupMembership = __nested_webpack_require_102275__(93);
+var groupMembership = __nested_webpack_require_128094__(93);
 ;// ./src/styles/groupMembership.css
 
       
@@ -4981,11 +5388,11 @@ const groupMembershipControl_ns = external_commonjs_solid_ui_commonjs2_solid_ui_
 const groupMembershipControl_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
 
 // Groups the person is a member of
-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))
+function groupMembershipControl_groupMembership (person, store = groupMembershipControl_kb) {
+  let groups = store.statementsMatching(null, groupMembershipControl_ns.owl('sameAs'), person).map(st => st.why)
+    .concat(store.each(null, groupMembershipControl_ns.vcard('hasMember'), person))
   const strings = new Set(groups.map(group => normalizeGroupUri(group.uri))) // remove dups with normalized URIs
-  groups = [...strings].map(uri => groupMembershipControl_kb.sym(uri))
+  groups = [...strings].map(uri => store.sym(uri))
   return groups
 }
 
@@ -5103,9 +5510,21 @@ async function renderGroupMemberships (person, context, ulPeople) {
     return li
   }
 
-  function syncGroupPills () {
-    const groups = groupMembershipControl_groupMembership(person)
-    const pillsWrapper = container.querySelector('.group-pills-wrapper')
+  function syncGroupPills (groups = null) {
+    // Clear previous render so we don't keep appending duplicate headers / lists
+    container.innerHTML = ''
+
+    const header = dom.createElement('h3')
+    header.classList.add('group-membership-header')
+    header.textContent = 'Part of groups'
+    container.appendChild(header)
+
+    const pillsWrapper = dom.createElement('ul')
+    pillsWrapper.classList.add('group-pills-wrapper')
+    container.appendChild(pillsWrapper)
+
+    groups = groups || groupMembershipControl_groupMembership(person, kb)
+
     if (groups.length === 0) {
       pillsWrapper.innerHTML = '<span>Not part of any Address Book group.</span>'
     } else {
@@ -5121,12 +5540,13 @@ async function renderGroupMemberships (person, context, ulPeople) {
     if (!book) {
       book = kb.any(undefined, groupMembershipControl_ns.vcard('includesGroup'))
       if (!book) {
-        return // no book => no groups
+        return [] // no book => no groups
       }
     }
     const groupIndex = kb.any(book, groupMembershipControl_ns.vcard('groupIndex'))
     const gs = book ? kb.each(book, groupMembershipControl_ns.vcard('includesGroup'), null, groupIndex) : []
     await kb.fetcher.load(gs)
+    return gs
   }
 
   const { dom } = context
@@ -5135,30 +5555,21 @@ async function renderGroupMemberships (person, context, ulPeople) {
   const container = dom.createElement('div')
   container.classList.add('group-membership-container')
 
-  // Header
-  const header = dom.createElement('h3')
-  header.classList.add('group-membership-header')
-  header.textContent = 'Part of groups'
-  container.appendChild(header)
-
-  const pillsWrapper = dom.createElement('ul')
-  pillsWrapper.classList.add('group-pills-wrapper')
-  container.appendChild(pillsWrapper)
-
-  // find book any group and load all groups
+  // find book any group and load all groups (so membership checks have the data they need)
   await loadGroupsFromBook()
 
+  // renders the Part of Group
   container.refresh = syncGroupPills
   syncGroupPills()
   return container
 }
 
 ;// ./src/ontology/individualAndOrganizationForm.ttl
-const individualAndOrganizationForm_namespaceObject = "# This turtle file defines the forms used in the contacts management\n#\n# Individuals and orgs are in one file as they both\n# share some forms (address etc) and also interactions (roles)\n\n# Forms documentation: https://solidos.github.io/solid-ui/docs/forms-intro.html\n\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix dct: <http://purl.org/dc/terms/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix prov: <http://www.w3.org/ns/prov#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix : <#>.\n\n\n############# For individual:\n:individualForm a ui:Form ;\n    dct:title \"Contact details for a person\" ;\n    ui:parts (\n        :fullNameField\n        :nicknameGroup\n        :pronounsGroup\n        :roleField\n        :orgNameField\n        # :addressesComment\n        :addresses\n        # :emailComment\n        :eMails\n        # :telephoneComment\n        :telephones\n        :birthdayField\n        # :noteComment\n        :noteField \n        ) .\n\n    :fullNameField\n        a ui:SingleLineTextField ;\n        ui:label \"Name\";\n        ui:maxLength \"128\" ;\n        ui:property vcard:fn .\n\n    # Nickname\n\n    :nicknameGroup a ui:Group; ui:weight 0; \n        ui:parts (:nicknameField) .\n\n    :nicknameField a ui:SingleLineTextField; \n        ui:property foaf:nick;\n        ui:label \"Nickname\"@en, \"Nom court\"@fr.\n\n    # Pronouns\n\n    :pronounsGroup a ui:Group; ui:weight 0; \n        ui:parts ( :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n    :subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n        ui:label \"He/she/they\" .\n    :objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n        ui:label \"Him/her/them\" .\n    :relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n        ui:label \"His/hers/theirs\" .\n        \n    :roleField\n        a ui:SingleLineTextField ;\n        ui:suppressEmptyUneditable true;\n        ui:maxLength \"128\" ;\n        ui:property vcard:role .\n\n    :orgNameField\n        a ui:SingleLineTextField ;\n        ui:suppressEmptyUneditable true;\n        ui:maxLength \"128\" ;\n        ui:property vcard:organization-name .\n\n    :addresses a ui:Multiple ;\n        dct:title \"Address details\" ;\n        ui:part :oneAddress ;\n        ui:property vcard:hasAddress .\n\n        :oneAddress a ui:Group ;\n            ui:parts ( \n                :id1409437207443 :id1409437292400 \n                :id1409437421996 :id1409437467649 \n                :id1409437569420 ). \n\n            :id1409437207443\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:street-address .\n\n            :id1409437292400\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:locality .\n\n            :id1409437421996\n                a ui:SingleLineTextField ;\n                ui:maxLength \"25\" ;\n                ui:property vcard:postal-code .\n\n            :id1409437467649\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:region .\n\n            :id1409437569420\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:country-name .\n\n\n    :eMails a ui:Multiple ;\n        ui:part :oneEMail ;\n        ui:property vcard:hasEmail .\n\n        :oneEMail a ui:Group ; # hint: side by side is good\n            ui:part :emailValue, :emailType ;\n            ui:parts ( :emailType  :emailValue ).\n\n            :emailValue\n                a ui:EmailField ; ui:label \"email\";\n                ui:property vcard:value .\n\n            :emailType\n                a ui:Classifier ;\n                ui:canMintNew \"0\" ;\n                ui:category vcard:Type ;\n                ui:from vcard:Type ;\n                ui:property rdf:type .\n\n    :telephones a ui:Multiple ;\n        ui:part :onetelephone ;\n        ui:property vcard:hasTelephone .\n\n        :onetelephone\n            a ui:Group ;\n            ui:part :telephoneValue, :telephoneType ;\n            ui:parts (  :telephoneType :telephoneValue ).\n\n            :telephoneValue\n                a ui:PhoneField ;\n                ui:property vcard:value .\n\n            :telephoneType\n                a ui:Classifier ;\n                ui:canMintNew \"0\" ;\n                ui:category vcard:TelephoneType ;\n                ui:from vcard:Type ;\n                ui:property rdf:type .\n\n    :birthdayField a ui:DateField;\n        ui:label \"Born\"@en;\n        ui:suppressEmptyUneditable true;\n        ui:property vcard:bday .\n\n    :noteField\n        a ui:MultiLineTextField ;\n        ui:suppressEmptyUneditable true;\n        ui:property vcard:note .\n\n# Ontology additions or interpretations needed for the form to work well\n\n# The ontology file doesn't make them disjoint. This makes the selector be a choice.\nvcard:TelephoneType   owl:disjointUnionOf ( vcard:Cell vcard:Home vcard:Work) .\nvcard:Type   owl:disjointUnionOf (vcard:Home vcard:Work) . # for email\n\n# Better field labels\nvcard:Cell ui:label \"mobile\"@en . # app will make initial caps if necessary\nvcard:hasAddress ui:label \"address\"@en .\nvcard:bday ui:label \"born\"@en.\nvcard:hasEmail ui:label \"email\"@en .\nvcard:hasTelephone ui:label \"phone\"@en .\nvcard:note ui:label \"notes\"@en .\n\n\n############ For organizations\n\n:organizationForm a ui:Form ; \n    dct:title \"Contact details for an organization\";\n    ui:parts (\n        :OrgClassifier\n        :fullNameField\n        :homePageURIField\n        :addresses\n        :eMails\n        :telephones\n        :noteField ) .\n\n    :OrgClassifier a ui:Classifier; \n        ui:label \"What sort of organization?\"@en;\n        ui:category solid:InterestingOrganization .\n\n    :homePageURIField a ui:NamedNodeURIField;\n        ui:label \"Homepage\"@en;\n        ui:property schema:url .\n\n# Ontology data to drive the :OrgClassifier classifier\n    solid:InterestingOrganization owl:disjointUnionOf  (\n        # Airline - a Corporation\n        # Consortium - a Corporation or a NGO\n        schema:Corporation\n        schema:EducationalOrganization\n        schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n        # FundingScheme - eh?\n        schema:GovernmentOrganization\n        # LibrarySystem\n        # LocalBusiness - Corporation\n        # MedicalOrganization - a Corporation or a NGO\n        schema:NGO\n        # NewsMediaOrganization - a Corporation or a NGO\n        schema:PerformingGroup # a band\n        schema:Project # like Solid\n        schema:SportsOrganization) .\n";
+const individualAndOrganizationForm_namespaceObject = "# This turtle file defines the forms used in the contacts management\n#\n# Individuals and orgs are in one file as they both\n# share some forms (address etc) and also interactions (roles)\n\n# Forms documentation: https://solidos.github.io/solid-ui/docs/forms-intro.html\n\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix dct: <http://purl.org/dc/terms/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix prov: <http://www.w3.org/ns/prov#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix : <#>.\n\n\n############# For individual:\n:individualForm a ui:Form ;\n    dct:title \"Contact details for a person\" ;\n    ui:parts (\n        :fullNameField\n        :nicknameGroup\n        :pronounsGroup\n        :roleField\n        :orgNameField\n        # :addressesComment\n        :addresses\n        # :emailComment\n        :eMails\n        # :telephoneComment\n        :telephones\n        :birthdayField\n        # :noteComment\n        :noteField \n        ) .\n\n    :fullNameField\n        a ui:SingleLineTextField ;\n        ui:label \"Name\";\n        ui:maxLength \"128\" ;\n        ui:property vcard:fn .\n\n    # Nickname\n\n    :nicknameGroup a ui:Group; ui:weight 0; \n        ui:parts (:nicknameField) .\n\n    :nicknameField a ui:SingleLineTextField; \n        ui:property foaf:nick;\n        ui:label \"Nickname\"@en, \"Nom court\"@fr.\n\n    # Pronouns\n\n    :pronounsGroup a ui:Group; ui:weight 0; \n        ui:parts ( :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n    :subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n        ui:label \"he/she/they\" .\n    :objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n        ui:label \"him/her/them\" .\n    :relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n        ui:label \"his/hers/theirs\" .\n        \n    :roleField\n        a ui:SingleLineTextField ;\n        ui:suppressEmptyUneditable true;\n        ui:maxLength \"128\" ;\n        ui:property vcard:role .\n\n    :orgNameField\n        a ui:SingleLineTextField ;\n        ui:suppressEmptyUneditable true;\n        ui:maxLength \"128\" ;\n        ui:property vcard:organization-name .\n\n    :addresses a ui:Multiple ;\n        dct:title \"Address details\" ;\n        ui:part :oneAddress ;\n        ui:property vcard:hasAddress .\n\n        :oneAddress a ui:Group ;\n            ui:parts ( \n                :id1409437207443 :id1409437292400 \n                :id1409437421996 :id1409437467649 \n                :id1409437569420 ). \n\n            :id1409437207443\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:street-address .\n\n            :id1409437292400\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:locality .\n\n            :id1409437421996\n                a ui:SingleLineTextField ;\n                ui:maxLength \"25\" ;\n                ui:property vcard:postal-code .\n\n            :id1409437467649\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:region .\n\n            :id1409437569420\n                a ui:SingleLineTextField ;\n                ui:maxLength \"128\" ;\n                ui:property vcard:country-name .\n\n\n    :eMails a ui:Multiple ;\n        ui:part :oneEMail ;\n        ui:property vcard:hasEmail .\n\n        :oneEMail a ui:Group ; # hint: side by side is good\n            ui:part :emailValue, :emailType ;\n            ui:parts ( :emailType  :emailValue ).\n\n            :emailValue\n                a ui:EmailField ; ui:label \"email\";\n                ui:property vcard:value .\n\n            :emailType\n                a ui:Classifier ;\n                ui:canMintNew \"0\" ;\n                ui:category vcard:Type ;\n                ui:from vcard:Type ;\n                ui:property rdf:type .\n\n    :telephones a ui:Multiple ;\n        ui:part :onetelephone ;\n        ui:property vcard:hasTelephone .\n\n        :onetelephone\n            a ui:Group ;\n            ui:part :telephoneValue, :telephoneType ;\n            ui:parts (  :telephoneType :telephoneValue ).\n\n            :telephoneValue\n                a ui:PhoneField ;\n                ui:property vcard:value .\n\n            :telephoneType\n                a ui:Classifier ;\n                ui:canMintNew \"0\" ;\n                ui:category vcard:TelephoneType ;\n                ui:from vcard:Type ;\n                ui:property rdf:type .\n\n    :birthdayField a ui:DateField;\n        ui:label \"Born\"@en;\n        ui:suppressEmptyUneditable true;\n        ui:property vcard:bday .\n\n    :noteField\n        a ui:MultiLineTextField ;\n        ui:suppressEmptyUneditable true;\n        ui:property vcard:note .\n\n# Ontology additions or interpretations needed for the form to work well\n\n# The ontology file doesn't make them disjoint. This makes the selector be a choice.\nvcard:TelephoneType   owl:disjointUnionOf ( vcard:Cell vcard:Home vcard:Work) .\nvcard:Type   owl:disjointUnionOf (vcard:Home vcard:Work) . # for email\n\n# Better field labels\nvcard:Cell ui:label \"mobile\"@en . # app will make initial caps if necessary\nvcard:hasAddress ui:label \"address\"@en .\nvcard:bday ui:label \"born\"@en.\nvcard:hasEmail ui:label \"email\"@en .\nvcard:hasTelephone ui:label \"phone\"@en .\nvcard:note ui:label \"notes\"@en .\n\n\n############ For organizations\n\n:organizationForm a ui:Form ; \n    dct:title \"Contact details for an organization\";\n    ui:parts (\n        :OrgClassifier\n        :fullNameField\n        :homePageURIField\n        :addresses\n        :eMails\n        :telephones\n        :noteField ) .\n\n    :OrgClassifier a ui:Classifier; \n        ui:label \"What sort of organization?\"@en;\n        ui:category solid:InterestingOrganization .\n\n    :homePageURIField a ui:NamedNodeURIField;\n        ui:label \"Homepage\"@en;\n        ui:property schema:url .\n\n# Ontology data to drive the :OrgClassifier classifier\n    solid:InterestingOrganization owl:disjointUnionOf  (\n        # Airline - a Corporation\n        # Consortium - a Corporation or a NGO\n        schema:Corporation\n        schema:EducationalOrganization\n        schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n        # FundingScheme - eh?\n        schema:GovernmentOrganization\n        # LibrarySystem\n        # LocalBusiness - Corporation\n        # MedicalOrganization - a Corporation or a NGO\n        schema:NGO\n        # NewsMediaOrganization - a Corporation or a NGO\n        schema:PerformingGroup # a band\n        schema:Project # like Solid\n        schema:SportsOrganization) .\n";
 ;// ./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_102275__(479);
+var individual = __nested_webpack_require_128094__(479);
 ;// ./src/styles/individual.css
 
       
@@ -5186,9 +5597,9 @@ 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_102275__(434);
-;// ./src/styles/rdfFormsEnforced.css
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/contactsRDFFormsEnforced.css
+var contactsRDFFormsEnforced = __nested_webpack_require_128094__(686);
+;// ./src/styles/contactsRDFFormsEnforced.css
 
       
       
@@ -5200,20 +5611,20 @@ var rdfFormsEnforced = __nested_webpack_require_102275__(434);
       
       
 
-var rdfFormsEnforced_options = {};
+var contactsRDFFormsEnforced_options = {};
 
-rdfFormsEnforced_options.styleTagTransform = (styleTagTransform_default());
-rdfFormsEnforced_options.setAttributes = (setAttributesWithoutAttributes_default());
-rdfFormsEnforced_options.insert = insertBySelector_default().bind(null, "head");
-rdfFormsEnforced_options.domAPI = (styleDomAPI_default());
-rdfFormsEnforced_options.insertStyleElement = (insertStyleElement_default());
+contactsRDFFormsEnforced_options.styleTagTransform = (styleTagTransform_default());
+contactsRDFFormsEnforced_options.setAttributes = (setAttributesWithoutAttributes_default());
+contactsRDFFormsEnforced_options.insert = insertBySelector_default().bind(null, "head");
+contactsRDFFormsEnforced_options.domAPI = (styleDomAPI_default());
+contactsRDFFormsEnforced_options.insertStyleElement = (insertStyleElement_default());
 
-var rdfFormsEnforced_update = injectStylesIntoStyleTag_default()(rdfFormsEnforced/* default */.A, rdfFormsEnforced_options);
+var contactsRDFFormsEnforced_update = injectStylesIntoStyleTag_default()(contactsRDFFormsEnforced/* default */.A, contactsRDFFormsEnforced_options);
 
 
 
 
-       /* harmony default export */ const styles_rdfFormsEnforced = (rdfFormsEnforced/* default */.A && rdfFormsEnforced/* default */.A.locals ? rdfFormsEnforced/* default */.A.locals : undefined);
+       /* harmony default export */ const styles_contactsRDFFormsEnforced = (contactsRDFFormsEnforced/* default */.A && contactsRDFFormsEnforced/* default */.A.locals ? contactsRDFFormsEnforced/* default */.A.locals : undefined);
 
 ;// ./src/rdfFormsHelper.js
 
@@ -5280,6 +5691,7 @@ function loadDocument (
 
 
 
+
 const individual_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
 const individual_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
 
@@ -5314,38 +5726,44 @@ async function renderIndividual (dom, div, subject, dataBrowserContext) {
   const whichForm = isOrganization ? 'organizationForm' : 'individualForm'
 
   renderForm(div, subject, individualAndOrganizationForm_namespaceObject, formsName, external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store, dom, subject.doc(), whichForm)
+  // Improve keyboard navigation: prevent tabbing into label links created by rdflib/solid-ui forms
+  skipLabelsFromTabbing(div)
 
   // forward list element from context if available; some callers (such as
   // the contacts pane) attach `ulPeople` so that group membership control can
   // refresh the master list when a membership is removed.
-  div.appendChild(await renderGroupMemberships(
-    subject,
-    dataBrowserContext,
-    dataBrowserContext.ulPeople
-  ))
+  if (!isAWebID(subject)) {
+    div.appendChild(await renderGroupMemberships(
+      subject,
+      dataBrowserContext,
+      dataBrowserContext.ulPeople
+    ))
+  }
 
   if (external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.currentUser()) {
     // Allow to attach documents etc to the profile card
+    // creates a
     const h3 = div.appendChild(dom.createElement('h3'))
-    h3.textContent = 'Attach a document'
-    h3.classList.add('webidHeading')
+    h3.textContent = 'Attach a link to any file'
+    h3.classList.add('contactPanedHeading')
 
     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.
+      // predicate: default <http://www.w3.org/2005/01/wf/flow#attachment>
     })
   }
 
   if (isOrganization) {
     div.appendChild(await renderPublicIdControl(subject, dataBrowserContext))
-  } else {
+  } else if (!isAWebID(subject)) {
+    // Only render WebID control for a contact and not. WebID.
     div.appendChild(await renderWebIdControl(subject, dataBrowserContext))
   }
 } // renderIndividual
 
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/toolsPane.css
-var toolsPane = __nested_webpack_require_102275__(295);
+var toolsPane = __nested_webpack_require_128094__(295);
 ;// ./src/styles/toolsPane.css
 
       
@@ -6189,8 +6607,37 @@ async function fixToOldDataModel (book) {
 }
   */
 
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/utilities.css
+var utilities = __nested_webpack_require_128094__(92);
+;// ./src/styles/utilities.css
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var utilities_options = {};
+
+utilities_options.styleTagTransform = (styleTagTransform_default());
+utilities_options.setAttributes = (setAttributesWithoutAttributes_default());
+utilities_options.insert = insertBySelector_default().bind(null, "head");
+utilities_options.domAPI = (styleDomAPI_default());
+utilities_options.insertStyleElement = (insertStyleElement_default());
+
+var utilities_update = injectStylesIntoStyleTag_default()(utilities/* default */.A, utilities_options);
+
+
+
+
+       /* harmony default export */ const styles_utilities = (utilities/* default */.A && utilities/* default */.A.locals ? utilities/* default */.A.locals : undefined);
+
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/contactsPane.css
-var contactsPane = __nested_webpack_require_102275__(903);
+var contactsPane = __nested_webpack_require_128094__(903);
 ;// ./src/styles/contactsPane.css
 
       
@@ -6243,6 +6690,7 @@ to change its state according to an ontology, comment on it, etc.
 
 
 
+
 const contactsPane_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
 const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.utils
 
@@ -6292,11 +6740,16 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
     external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.preventBrowserDropEvents(dom) // protect drag and drop
 
     div.setAttribute('class', 'contactPane')
+    // Make the pane stack vertically (sidebar -> details) when narrow
+    // Set breakpoint to 1000 so it triggers at 980 width too.
+    setupResponsiveStacking(div, 1000)
 
     asyncRender().then(
       () => log('Contacts pane rendered for ' + subject),
       err => complain(div, dom, err.message || '' + err)
-    )
+    ).catch(err => {
+      complain(div, dom, err.message || '' + err)
+    })
     return div
 
     // Async part of render. Maybe API will later allow render to be async
@@ -6313,11 +6766,12 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
         t[contactsPane_ns.vcard('Organization').uri] ||
         t[contactsPane_ns.schema('Organization').uri]
       ) {
-        renderIndividual(dom, div, subject, dataBrowserContext)
-          .then(() => log('(individual rendered)'))
-          .catch(() => {
-            throw new Error('Failed to render contact.')
-          })
+        try {
+          await renderIndividual(dom, div, subject, dataBrowserContext)
+        } catch (err) {
+          error('Error rendering contact. Stack: ' + err)
+          throw new Error('Failed to render contact: ' + (err.message || err))
+        }
       /*
         //          Render a Group instance
       }
@@ -7310,6 +7764,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
   min-width: 0;
 }
 
+/* Ensure prompt inputs stretch to fit their container */
+.add-friend-button-container input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .qrCodeSection {
   color: var(--color-text-secondary);
   font-size: 1em;
@@ -7331,7 +7791,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
   padding: 16px;
   background: white;
 }
-`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.profileCard {\n  /* Component container */\n}\n\n.image {\n  width: 160px;\n  height: 160px;\n  border-radius: 50%;\n  object-fit: cover;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n}\n\n.image-alt {\n  width: 160px;\n  height: 160px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n  color: var(--color-text-secondary);\n}\n\n.name {\n  font-size: var(--font-size-xl);\n  font-weight: 700;\n  line-height: var(--line-height-tight);\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n  margin: 0;\n  letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n  color: var(--color-text-secondary);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  margin-bottom: var(--spacing-xs);\n  max-width: 40ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.buttonSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n  width: 100%;\n  min-width: 0;\n  display: grid;\n}\n\n.buttonSubSection button {\n  width: 100%;\n  min-width: 0;\n}\n\n.qrCodeSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.details {\n  color: var(--color-text-muted);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  max-width: 45ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n  border: 1px solid #ccc;\n  padding: 16px;\n  background: white;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA,wDAAwD;AACxD;EACE,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.profileCard {\n  /* Component container */\n}\n\n.image {\n  width: 160px;\n  height: 160px;\n  border-radius: 50%;\n  object-fit: cover;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n}\n\n.image-alt {\n  width: 160px;\n  height: 160px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin-bottom: var(--spacing-sm);\n  box-shadow: var(--box-shadow-sm);\n  border: 3px solid var(--color-primary);\n  background: var(--color-card-bg);\n  box-sizing: border-box;\n  color: var(--color-text-secondary);\n}\n\n.name {\n  font-size: var(--font-size-xl);\n  font-weight: 700;\n  line-height: var(--line-height-tight);\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n  margin: 0;\n  letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n  color: var(--color-text-secondary);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  margin-bottom: var(--spacing-xs);\n  max-width: 40ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.buttonSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n  width: 100%;\n  min-width: 0;\n  display: grid;\n}\n\n.buttonSubSection button {\n  width: 100%;\n  min-width: 0;\n}\n\n/* Ensure prompt inputs stretch to fit their container */\n.add-friend-button-container input[type=\"text\"] {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.qrCodeSection {\n  color: var(--color-text-secondary);\n  font-size: 1em;\n  margin-bottom: var(--spacing-xs);\n}\n\n.details {\n  color: var(--color-text-muted);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-base);\n  max-width: 45ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n  border: 1px solid #ccc;\n  padding: 16px;\n  background: white;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -7361,10 +7821,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileView.css */
 .profile-grid .profileSection {
   width: 100%;
   max-width: 100%;
+  min-width: 0;
   box-sizing: border-box;
   margin-bottom: var(--spacing-md);
   box-sizing: border-box;
   margin-bottom: var(--spacing-md);
+  overflow-wrap: anywhere;
 }
 
 @media (min-width: 900px) {
@@ -7372,7 +7834,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileView.css */
     margin-bottom: 0;
   }
 }
-`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileView.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,8CAA8C;;AAE9C,gCAAgC;AAChC;EACE,WAAW;EACX,eAAe;EACf,sBAAsB;EACtB,gCAAgC;EAChC,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":["/* ProfileView.css */\n/* Uses utilities: .section-bg, .text-center */\n\n/* Horizontal layout for cards */\n.profile-grid .profileSection {\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n}\n\n@media (min-width: 900px) {\n  .profile-grid .profileSection {\n    margin-bottom: 0;\n  }\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileView.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,8CAA8C;;AAE9C,gCAAgC;AAChC;EACE,WAAW;EACX,eAAe;EACf,YAAY;EACZ,sBAAsB;EACtB,gCAAgC;EAChC,sBAAsB;EACtB,gCAAgC;EAChC,uBAAuB;AACzB;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":["/* ProfileView.css */\n/* Uses utilities: .section-bg, .text-center */\n\n/* Horizontal layout for cards */\n.profile-grid .profileSection {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n  box-sizing: border-box;\n  margin-bottom: var(--spacing-md);\n  overflow-wrap: anywhere;\n}\n\n@media (min-width: 900px) {\n  .profile-grid .profileSection {\n    margin-bottom: 0;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -7555,7 +8017,83 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* StuffCard.css */
 
 /***/ },
 
-/***/ 2024
+/***/ 9340
+(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1354);
+/* harmony import */ var _css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
+/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.profile-grid .add-friend-button-container,
+.profile-grid .add-community-button-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+/* Ensure the button container can shrink properly in narrow layouts */
+.profile-grid .add-community-button-container {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Allow any direct children to shrink so no element forces overflow */
+.profile-grid .add-community-button-container > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.profile-grid table {
+  margin: 0 !important;
+}
+
+.profile-grid td {
+  padding: 0;
+}
+
+.profile-grid .add-friend-button-container .span,
+.profile-grid .add-community-button-container .span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.profile-grid .add-friend-button-container > div,
+.profile-grid .add-community-button-container > div {
+  flex-basis: 100%;
+}
+
+/* Prevent the add-community input from overflowing its flex container */
+.profile-grid .add-community-button-container input {
+  min-width: 0;
+  max-width: 96%;
+  flex: 1 1 0;
+  word-break: break-word;
+}
+
+.profile-grid .profile-image {
+  width: var( --profile-image-size);
+  height: var( --profile-image-size);
+  margin: var(--spacing-xxxs);
+  border-radius: var(--spacing-lg);
+}`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/editProfile.css"],"names":[],"mappings":"AAAA;;EAEE,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,2BAA2B;AAC7B;;AAEA,sEAAsE;AACtE;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA,sEAAsE;AACtE;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,UAAU;AACZ;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA,wEAAwE;AACxE;EACE,YAAY;EACZ,cAAc;EACd,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,iCAAiC;EACjC,kCAAkC;EAClC,2BAA2B;EAC3B,gCAAgC;AAClC","sourcesContent":[".profile-grid .add-friend-button-container,\n.profile-grid .add-community-button-container {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-xxs);\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n\n/* Ensure the button container can shrink properly in narrow layouts */\n.profile-grid .add-community-button-container {\n  min-width: 0;\n  max-width: 100%;\n}\n\n/* Allow any direct children to shrink so no element forces overflow */\n.profile-grid .add-community-button-container > * {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.profile-grid table {\n  margin: 0 !important;\n}\n\n.profile-grid td {\n  padding: 0;\n}\n\n.profile-grid .add-friend-button-container .span,\n.profile-grid .add-community-button-container .span {\n  display: inline-flex;\n  align-items: center;\n}\n\n.profile-grid .add-friend-button-container > div,\n.profile-grid .add-community-button-container > div {\n  flex-basis: 100%;\n}\n\n/* Prevent the add-community input from overflowing its flex container */\n.profile-grid .add-community-button-container input {\n  min-width: 0;\n  max-width: 96%;\n  flex: 1 1 0;\n  word-break: break-word;\n}\n\n.profile-grid .profile-image {\n  width: var( --profile-image-size);\n  height: var( --profile-image-size);\n  margin: var(--spacing-xxxs);\n  border-radius: var(--spacing-lg);\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ },
+
+/***/ 7347
 (module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -7571,23 +8109,66 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* StuffCard.css */
 
 var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from contacts-pane*/
+___CSS_LOADER_EXPORT___.push([module.id, `/* Delete pop up*/
+/* Make the Solid-UI delete confirmation popup appear near the last click position.
+   Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.
+*/
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] {
+/* only override positioning; keep styling (border/background/etc) from solid-ui */
+  position: absolute !important;
+  z-index: 9999 !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: auto !important;
+  display: grid !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  padding: 0.7em !important;
+  min-width: 280px !important;
+  max-width: 90vw !important;
+  background: var(--color-background) !important;
+  border: 0.1em solid var(--color-primary) !important;
+  border-radius: var(--border-radius-base) !important;
+  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
+  grid-template-columns: auto auto !important;
+  gap: 0.3em !important;
+}
+
+/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] img[src\$=".svg"],
+.profile-grid div[style*="position: relative"] > div[style*="display: grid"] button {
+  background: transparent !important;
+}
+
 .profile-form .individualPane {
   box-shadow: none !important;
 }
 
-/* Vertically center autocomplete input in .formFieldValue */
-.profile-form .formFieldValue > div[style*="flex-direction: row"] {
-  align-items: center;
-  display: flex;
+.profile-form p {
+  padding: 0 !important;
 }
 
-.profile-form .formFieldValue input[data-testid="autocomplete-input"] {
-  vertical-align: middle;
+.profile-form .mb-md {
+  margin-bottom: 0 !important;
+}
+
+.profile-form h2 {
+  margin-bottom: 1em !important;
 }
+
+.profile-form h3 {
+  color: var(--color-primary) !important;
+  padding: 0 !important;
+  font-size: 1em !important;
+  font-weight: 600 !important;
+}
+
+/* Shared form layout rules are imported from rdfFormsCommon.css */
 /* Solid-UI form sizing fixes scoped to Edit CV section */
 .profile-form .hoverControl:not(:has(> img:first-child)) {
   border: 0.1em solid rgb(136, 136, 136) !important;
+  flex-direction: column !important;
 }
 
 .profile-form .hoverControl:has(> img:first-child) {
@@ -7604,40 +8185,107 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
   justify-content: center;
 }
 
-.profile-form .hoverControlHide {
+/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */
+.profile-form .hoverControl,
+.profile-grid .hoverControl {
+  position: relative !important;
+}
+
+.hoverControl > img.hoverControlHide,
+.hoverControl > [data-testid="deleteButtonWithCheck"] {
+  position: absolute !important;
+  top: 0.2em !important;
+  right: 0.2em !important;
   width: 1.5em !important;
   height: 1.5em !important;
-  display: block;
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-bottom: 0.3em !important;
+  display: none !important;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  float: none !important;
+  transform: none !important;
 }
 
-.profile-form .hoverControl:has(> img:first-child) > span {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 0.3em;
+/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */
+.hoverControl > img.hoverControlHide:nth-child(1),
+.hoverControl > img.hoverControlHide:nth-child(2),
+.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(1),
+.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(2) {
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+}
+
+/* Show the delete icon only when the container is hovered */
+.profile-grid .hoverControl:hover > img.hoverControlHide,
+.profile-grid .hoverControl:hover > [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
+}
+
+/* Also show the delete icon when the entire row is hovered */
+.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,
+.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid="deleteButtonWithCheck"] {
+  display: inline-flex !important;
+}
+
+/* Make the hover-control cell easier to hit */
+.profile-grid .hoverControl {
+  padding: 0.75em !important;
+  min-width: 2.5em !important;
+  min-height: 2.5em !important;
 }
 
-.profile-form div[style*="padding: 0.5em"]:has(> img) {
+/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */
+.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {
+  min-width: 0 !important;
+  min-height: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: visible !important;
+}
+
+/* Hide delete icon only in autocomplete fields */
+.profile-grid .formFieldValue:has(input[data-testid="autocomplete-input"]) [data-testid="delete-button"] {
+  display: none !important;
+}
+
+/* Keep autocomplete cancel button hidden when the user is not interacting.
+   This avoids the cancel button remaining visible when focus moves away. */
+.profile-grid .formFieldValue:not(:focus-within) [data-testid="cancel-button"] {
+  display: none !important;
+}
+
+.profile-grid .hoverControl:has(> img:first-child) > span {
   display: inline-flex;
   align-items: center;
+  margin-left: 0.3em;
 }
 
-.profile-form div[style*="padding: 0.5em"]:has(> img) > span {
+.profile-grid div[style*="padding: 0.5em"]:has(> img) > span {
   margin-left: 0.3em;
+  vertical-align: super !important;
 }
 
-.profile-form .hoverControl:has(> img:first-child):hover {
+.profile-grid .hoverControl:has(> img:first-child):hover {
   background-color: transparent !important;
 }
 
-.profile-form button:has(> img[src\$=".svg"]) {
-  background-color: transparent !important;
+.profile-grid button:has(> img[src\$=".svg"]),
+.profile-grid .formFieldValue input[type ="color"] {
+  background-color: var(--color-section-bg) !important;
   border: none !important;
   margin: 0 !important;
   border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0.5em !important;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  padding: 0 !important;
+}
+
+/* Specific icon button should have no extra padding */
+.profile-grid button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg"]) {
+  padding: 0 !important;
 }
 
 .profile-form button {
@@ -7645,10 +8293,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
   min-width: var(--min-touch-target);
 }
 
+.profile-form input:not([type="color"]) {
+  width: 99%;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
 .profile-form input:not([type="color"]),
 .profile-form textarea,
 .profile-form select {
-  max-width: 100%;
+  max-width: 96%;
   min-width: 0;
   box-sizing: border-box ;
   font: inherit;
@@ -7683,32 +8337,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
   width: 100%;
 }
 
-.profile-form .formFieldValue {
-  min-width: 0;
-  margin-bottom: var(--spacing-sm);
-}
-
-.profile-form .formFieldValue table {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.profile-form .formFieldValue td {
-  padding: 0 !important;
-  vertical-align: middle;
-}
-
-.profile-form .formFieldValue table[data-testid="autocomplete-table"] {
-  height: 100%;
-}
-
-.profile-form .formFieldValue input:not([type="color"]),
-.profile-form .formFieldValue textarea,
-.profile-form .formFieldValue select {
-  width: 100%;
-  max-width: 100%;
-}
-
 .profile-form select#formSelect {
   width: 100%;
   max-width: 97%;
@@ -7717,11 +8345,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
   margin-right: 0 !important;
 }
 
-.profile-form .formFieldValue span select {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 /* Remove border/padding from the first wrapper div (and its first child wrapper). */
 .profile-form > div:first-of-type,
 .profile-form > div:first-of-type > div:first-of-type {
@@ -7744,7 +8367,6 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
 /* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
 .profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {
   display: flex;
-  margin-bottom: var(--spacing-sm);
 }
 
 /* for the Resume inside corporation choice */
@@ -7776,10 +8398,6 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
   margin-left: 0 !important;
 }
 
-.profile-form .formFieldValue > span > select {
-  margin-left: 0 !important;
-}
-
 /* for the social media */
 /* Add space between classifierBox label and select box */
 section[data-testid="edit-social-section"] .classifierBox-label {
@@ -7826,7 +8444,7 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
   border-width: .05em !important;
   border-color: #88c !important;
   border-radius: 0.2em !important;
-  width: 100%;
+  width: 99%;
   box-sizing: border-box;
   margin-top: var(--spacing-xs);
   margin-left: 0 !important;
@@ -7848,33 +8466,11 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
   padding-top: var(--spacing-sm);
 }
 
-/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */
-.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) {
-  align-items: flex-start;
-}
 
 .profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
   padding-top: 0.55em !important;
 }
 
-.profile-form .formFieldValue:has(input[data-testid="autocomplete-input"]) {
-  align-self: flex-start;
-}
-
-.profile-form .formFieldValue table[data-testid="autocomplete-table"],
-.profile-form .formFieldValue input[data-testid="autocomplete-input"] {
-  margin: 0 !important;
-}
-
-.profile-form .formFieldValue table[data-testid="autocomplete-table"] {
-  vertical-align: baseline;
-}
-
-.profile-form input:not([type="color"]) {
-  width: 100%;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
 
 .profile-form input:disabled,
 .profile-form textarea:disabled,
@@ -7892,7 +8488,55 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
 .webidControl table td div.contactPane.namedPane {
   border: none !important;
 }
-`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/rdfFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* this overrides a style coming from contacts-pane*/\n.profile-form .individualPane {\n  box-shadow: none !important;\n}\n\n/* Vertically center autocomplete input in .formFieldValue */\n.profile-form .formFieldValue > div[style*=\"flex-direction: row\"] {\n  align-items: center;\n  display: flex;\n}\n\n.profile-form .formFieldValue input[data-testid=\"autocomplete-input\"] {\n  vertical-align: middle;\n}\n/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n  border: 0.1em solid rgb(136, 136, 136) !important;\n}\n\n.profile-form .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.profile-form .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.profile-form .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) {\n  display: inline-flex;\n  align-items: center;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n}\n\n.profile-form .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.profile-form 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.profile-form button {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form 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.profile-form textarea {\n  border-color: var(--color-border-pale) !important;\n}\n\n.profile-form input[type=\"date\"],\n.profile-form input[type=\"month\"],\n.profile-form input[type=\"week\"],\n.profile-form input[type=\"time\"],\n.profile-form input[type=\"datetime-local\"] {\n  min-height: var(--min-touch-target);\n}\n\n.profile-form .hoverControl:has(> img:first-child):focus-visible,\n.profile-form button:focus-visible,\n.profile-form input:not([type=\"color\"]):focus-visible,\n.profile-form textarea:focus-visible,\n.profile-form 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.profile-form input[type=\"url\"] {\n  width: 100%;\n}\n\n.profile-form .formFieldValue {\n  min-width: 0;\n  margin-bottom: var(--spacing-sm);\n}\n\n.profile-form .formFieldValue table {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.profile-form .formFieldValue td {\n  padding: 0 !important;\n  vertical-align: middle;\n}\n\n.profile-form .formFieldValue table[data-testid=\"autocomplete-table\"] {\n  height: 100%;\n}\n\n.profile-form .formFieldValue input:not([type=\"color\"]),\n.profile-form .formFieldValue textarea,\n.profile-form .formFieldValue select {\n  width: 100%;\n  max-width: 100%;\n}\n\n.profile-form 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.profile-form .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.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > 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.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.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n  display: flex;\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.profile-form .choiceBox .classifierBox-label {\n  /* Optional: ensure label doesn't have extra margin */\n  margin-right: 0;\n  padding-left: 0.3em;\n}\n.profile-form .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.profile-form .classifierBox .classifierBox-label {\n  /* Match .formFieldName for alignment */\n  margin-right: 0;\n  padding-left: 0.3em;\n  width: 8em;\n  padding: 0.3em;\n  vertical-align: middle;\n}\n.profile-form .classifierBox .classifierBox-selectBox {\n  margin-left: 0 !important;\n}\n\n.profile-form .classifierBox .classifierBox-selectBox select {\n  margin-left: 0 !important;\n}\n\n.profile-form .formFieldValue > span > select {\n  margin-left: 0 !important;\n}\n\n/* for the social media */\n/* Add space between classifierBox label and select box */\nsection[data-testid=\"edit-social-section\"] .classifierBox-label {\n  /* Optional: ensure label doesn't have extra margin */\n  margin-right: 0;\n  padding-left: 0.3em;\n}\nsection[data-testid=\"edit-social-section\"] .classifierBox-selectBox select {\n  margin-left: 0.7em !important;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n  margin-bottom: 0;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :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.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :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.profile-form textarea,\n.profile-form .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/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.profile-form 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.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) {\n  align-items: flex-start;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n  padding-top: 0.55em !important;\n}\n\n.profile-form .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) {\n  align-self: flex-start;\n}\n\n.profile-form .formFieldValue table[data-testid=\"autocomplete-table\"],\n.profile-form .formFieldValue input[data-testid=\"autocomplete-input\"] {\n  margin: 0 !important;\n}\n\n.profile-form .formFieldValue table[data-testid=\"autocomplete-table\"] {\n  vertical-align: baseline;\n}\n\n.profile-form input:not([type=\"color\"]) {\n  width: 100%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.profile-form input:disabled,\n.profile-form textarea:disabled,\n.profile-form select:disabled,\n.profile-form input[readonly],\n.profile-form textarea[readonly],\n.profile-form input:read-only,\n.profile-form textarea:read-only {\n  background-color: var(--color-background) !important;\n  cursor: not-allowed;\n  opacity: 0.75;\n  border: 0.05em solid white !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}\n"],"sourceRoot":""}]);
+
+/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */
+img[src*="noun_253504.svg"],
+img[src*="noun_1180158.svg"] {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */
+button:has(> img[src*="noun_253504.svg"]),
+button:has(> img[src*="noun_1180158.svg"]) {
+  display: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+  background: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */
+.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
+.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
+.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]) {
+  display: inline-flex !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+
+/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */
+.profile-grid .profileSection .add-friend-button-container button:has(> img[title="Continue"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[title="Continue"]),
+.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
+.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
+.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"],
+.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"] {
+  display: inline-flex !important;
+  width: 2em !important;
+  height: 2em !important;
+  overflow: visible !important;
+}
+`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/profileRDFFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* Delete pop up*/\n/* Make the Solid-UI delete confirmation popup appear near the last click position.\n   Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.\n*/\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n/* only override positioning; keep styling (border/background/etc) from solid-ui */\n  position: absolute !important;\n  z-index: 9999 !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto !important;\n  display: grid !important;\n  pointer-events: auto !important;\n  opacity: 1 !important;\n  visibility: visible !important;\n  padding: 0.7em !important;\n  min-width: 280px !important;\n  max-width: 90vw !important;\n  background: var(--color-background) !important;\n  border: 0.1em solid var(--color-primary) !important;\n  border-radius: var(--border-radius-base) !important;\n  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;\n  grid-template-columns: auto auto !important;\n  gap: 0.3em !important;\n}\n\n/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] img[src$=\".svg\"],\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] button {\n  background: transparent !important;\n}\n\n.profile-form .individualPane {\n  box-shadow: none !important;\n}\n\n.profile-form p {\n  padding: 0 !important;\n}\n\n.profile-form .mb-md {\n  margin-bottom: 0 !important;\n}\n\n.profile-form h2 {\n  margin-bottom: 1em !important;\n}\n\n.profile-form h3 {\n  color: var(--color-primary) !important;\n  padding: 0 !important;\n  font-size: 1em !important;\n  font-weight: 600 !important;\n}\n\n/* Shared form layout rules are imported from rdfFormsCommon.css */\n/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n  border: 0.1em solid rgb(136, 136, 136) !important;\n  flex-direction: column !important;\n}\n\n.profile-form .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/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */\n.profile-form .hoverControl,\n.profile-grid .hoverControl {\n  position: relative !important;\n}\n\n.hoverControl > img.hoverControlHide,\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"] {\n  position: absolute !important;\n  top: 0.2em !important;\n  right: 0.2em !important;\n  width: 1.5em !important;\n  height: 1.5em !important;\n  display: none !important;\n  align-items: center;\n  justify-content: center;\n  margin: 0 !important;\n  float: none !important;\n  transform: none !important;\n}\n\n/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */\n.hoverControl > img.hoverControlHide:nth-child(1),\n.hoverControl > img.hoverControlHide:nth-child(2),\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"]:nth-child(1),\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"]:nth-child(2) {\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n}\n\n/* Show the delete icon only when the container is hovered */\n.profile-grid .hoverControl:hover > img.hoverControlHide,\n.profile-grid .hoverControl:hover > [data-testid=\"deleteButtonWithCheck\"] {\n  display: inline-flex !important;\n}\n\n/* Also show the delete icon when the entire row is hovered */\n.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,\n.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid=\"deleteButtonWithCheck\"] {\n  display: inline-flex !important;\n}\n\n/* Make the hover-control cell easier to hit */\n.profile-grid .hoverControl {\n  padding: 0.75em !important;\n  min-width: 2.5em !important;\n  min-height: 2.5em !important;\n}\n\n/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */\n.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {\n  min-width: 0 !important;\n  min-height: 0 !important;\n  width: 0 !important;\n  height: 0 !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  overflow: visible !important;\n}\n\n/* Hide delete icon only in autocomplete fields */\n.profile-grid .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) [data-testid=\"delete-button\"] {\n  display: none !important;\n}\n\n/* Keep autocomplete cancel button hidden when the user is not interacting.\n   This avoids the cancel button remaining visible when focus moves away. */\n.profile-grid .formFieldValue:not(:focus-within) [data-testid=\"cancel-button\"] {\n  display: none !important;\n}\n\n.profile-grid .hoverControl:has(> img:first-child) > span {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 0.3em;\n}\n\n.profile-grid div[style*=\"padding: 0.5em\"]:has(> img) > span {\n  margin-left: 0.3em;\n  vertical-align: super !important;\n}\n\n.profile-grid .hoverControl:has(> img:first-child):hover {\n  background-color: transparent !important;\n}\n\n.profile-grid button:has(> img[src$=\".svg\"]),\n.profile-grid .formFieldValue input[type =\"color\"] {\n  background-color: var(--color-section-bg) !important;\n  border: none !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  padding: 0.5em !important;\n  transition: background-color 0.2s ease, box-shadow 0.2s ease;\n  padding: 0 !important;\n}\n\n/* Specific icon button should have no extra padding */\n.profile-grid button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg\"]) {\n  padding: 0 !important;\n}\n\n.profile-form button {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n.profile-form input:not([type=\"color\"]) {\n  width: 99%;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n  max-width: 96%;\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.profile-form textarea {\n  border-color: var(--color-border-pale) !important;\n}\n\n.profile-form input[type=\"date\"],\n.profile-form input[type=\"month\"],\n.profile-form input[type=\"week\"],\n.profile-form input[type=\"time\"],\n.profile-form input[type=\"datetime-local\"] {\n  min-height: var(--min-touch-target);\n}\n\n.profile-form .hoverControl:has(> img:first-child):focus-visible,\n.profile-form button:focus-visible,\n.profile-form input:not([type=\"color\"]):focus-visible,\n.profile-form textarea:focus-visible,\n.profile-form 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.profile-form input[type=\"url\"] {\n  width: 100%;\n}\n\n.profile-form 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/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n  border: none !important;\n  padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > 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.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.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n  display: flex;\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.profile-form .choiceBox .classifierBox-label {\n  /* Optional: ensure label doesn't have extra margin */\n  margin-right: 0;\n  padding-left: 0.3em;\n}\n.profile-form .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.profile-form .classifierBox .classifierBox-label {\n  /* Match .formFieldName for alignment */\n  margin-right: 0;\n  padding-left: 0.3em;\n  width: 8em;\n  padding: 0.3em;\n  vertical-align: middle;\n}\n.profile-form .classifierBox .classifierBox-selectBox {\n  margin-left: 0 !important;\n}\n\n.profile-form .classifierBox .classifierBox-selectBox select {\n  margin-left: 0 !important;\n}\n\n/* for the social media */\n/* Add space between classifierBox label and select box */\nsection[data-testid=\"edit-social-section\"] .classifierBox-label {\n  /* Optional: ensure label doesn't have extra margin */\n  margin-right: 0;\n  padding-left: 0.3em;\n}\nsection[data-testid=\"edit-social-section\"] .classifierBox-selectBox select {\n  margin-left: 0.7em !important;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n  margin-bottom: 0;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :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.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :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.profile-form textarea,\n.profile-form .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: 99%;\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.profile-form div:has(> a) + div:has(textarea) {\n  margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n  align-items: flex-start;\n}\n\n.profile-form 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\n.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n  padding-top: 0.55em !important;\n}\n\n\n.profile-form input:disabled,\n.profile-form textarea:disabled,\n.profile-form select:disabled,\n.profile-form input[readonly],\n.profile-form textarea[readonly],\n.profile-form input:read-only,\n.profile-form textarea:read-only {\n  background-color: var(--color-background) !important;\n  cursor: not-allowed;\n  opacity: 0.75;\n  border: 0.05em solid white !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n  border: none !important;\n}\n\n/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */\nimg[src*=\"noun_253504.svg\"],\nimg[src*=\"noun_1180158.svg\"] {\n  display: none !important;\n  width: 0 !important;\n  height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */\nbutton:has(> img[src*=\"noun_253504.svg\"]),\nbutton:has(> img[src*=\"noun_1180158.svg\"]) {\n  display: none !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  border: none !important;\n  background: none !important;\n  width: 0 !important;\n  height: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */\n.profile-grid .profileSection .add-friend-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"],\n.profile-grid .profileSection .add-community-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"],\n.profile-grid .profileSection .add-friend-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"]) {\n  display: inline-flex !important;\n  width: auto !important;\n  height: auto !important;\n  overflow: visible !important;\n}\n\n\n/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */\n.profile-grid .profileSection .add-friend-button-container button:has(> img[title=\"Continue\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[title=\"Continue\"]),\n.profile-grid .profileSection .add-friend-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"]),\n.profile-grid .profileSection .add-friend-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"],\n.profile-grid .profileSection .add-community-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"] {\n  display: inline-flex !important;\n  width: 2em !important;\n  height: 2em !important;\n  overflow: visible !important;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -7917,6 +8561,30 @@ var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layout, spacing, and responsiveness */
 
+:root {
+  /* Added for profile-pane (editProfile) layout sizing */
+  --spacing-xxs: 0.4em;
+  --spacing-xxxs: 0.1em;
+  --profile-image-size: 3em;
+}
+
+@media (max-width: 1000px) {
+  .profile-grid,
+  .profile-grid * {
+    font-size: 2rem !important;
+  }
+
+  .profile-grid .actionButton,
+  .profile-grid .searchInput,
+  .profile-grid .flatButton,
+  .profile-grid .buttonSection button,
+  .profile-grid .groupButtonsList button {
+    min-height: calc(var(--min-touch-target) + 0.5em) !important;
+    font-size: 2rem !important;
+    padding: 1em 1em !important;
+  }
+}
+
 .actionButton {
   width: 100%;
   min-width: 180px;
@@ -7931,7 +8599,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
 
 .profile-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
+  /* Allow the grid to shrink below 30em on small viewports to avoid overflow */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));
   gap: var(--spacing-lg);
   background: var(--color-background);
 }
@@ -8124,6 +8793,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
   box-shadow: none;
 }
 
+/* Prevent labels from appearing focusable to keyboard users. */
+label:focus,
+label:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 /* Better focus for text elements */
 .focusable-text:focus {
   background-color: rgba(124, 77, 255, 0.1);
@@ -8244,7 +8920,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
 .btn-transparent:hover {
   background-color: transparent;
 }
-`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n  width: 100%;\n  min-width: 180px;\n  max-width: 320px;\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n/* ===========================================\n   PROFILE GRID LAYOUT\n   =========================================== */\n\n.profile-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n  gap: var(--spacing-lg);\n  background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n  grid-column: 1 / -1;\n}\n\n.center {\n  justify-content: center;\n  align-items: center;\n}\n\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n  background: var(--color-primary);\n  color: #fff;\n}\n.bg-card {\n  background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.min-touch-target {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: 0;\n  z-index: 1000;\n}\n\n.skip-links a {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  padding: var(--spacing-sm);\n  background: var(--color-primary);\n  color: white;\n  text-decoration: none;\n  border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n  top: 6px;\n}\n\n.reduced-motion {\n  animation: none !important;\n  transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.no-focus-ring {\n  outline: none;\n}\n\n.no-focus-ring:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n  line-height: 1.5;\n  max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n  line-height: var(--line-height-base);\n  max-width: 65ch;\n}\n\n.text-lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-base);\n}\n\n.text-small {\n  font-size: max(var(--font-size-sm), var(--min-font-size));\n  line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n  color: var(--color-text);\n  font-weight: 600;\n}\n\n:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n  background-color: rgba(124, 77, 255, 0.1);\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n  color: var(--color-text);\n  background: var(--color-background);\n  border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n   CONSOLIDATED COMPONENT PATTERNS\n   =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\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: white;\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/* 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/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n  font-size: 1.25em;\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.text-wrap-anywhere {\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n  color: var(--color-primary);\n  text-align: center;\n  margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n  background-color: transparent;\n}\n\n.btn-transparent:hover {\n  background-color: transparent;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n:root {\n  /* Added for profile-pane (editProfile) layout sizing */\n  --spacing-xxs: 0.4em;\n  --spacing-xxxs: 0.1em;\n  --profile-image-size: 3em;\n}\n\n@media (max-width: 1000px) {\n  .profile-grid,\n  .profile-grid * {\n    font-size: 2rem !important;\n  }\n\n  .profile-grid .actionButton,\n  .profile-grid .searchInput,\n  .profile-grid .flatButton,\n  .profile-grid .buttonSection button,\n  .profile-grid .groupButtonsList button {\n    min-height: calc(var(--min-touch-target) + 0.5em) !important;\n    font-size: 2rem !important;\n    padding: 1em 1em !important;\n  }\n}\n\n.actionButton {\n  width: 100%;\n  min-width: 180px;\n  max-width: 320px;\n  box-sizing: border-box;\n  display: inline-block;\n}\n\n/* ===========================================\n   PROFILE GRID LAYOUT\n   =========================================== */\n\n.profile-grid {\n  display: grid;\n  /* Allow the grid to shrink below 30em on small viewports to avoid overflow */\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));\n  gap: var(--spacing-lg);\n  background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n  grid-column: 1 / -1;\n}\n\n.center {\n  justify-content: center;\n  align-items: center;\n}\n\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n  background: var(--color-primary);\n  color: #fff;\n}\n.bg-card {\n  background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.min-touch-target {\n  min-height: var(--min-touch-target);\n  min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n  position: absolute;\n  top: -100px;\n  left: 0;\n  z-index: 1000;\n}\n\n.skip-links a {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  padding: var(--spacing-sm);\n  background: var(--color-primary);\n  color: white;\n  text-decoration: none;\n  border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n  top: 6px;\n}\n\n.reduced-motion {\n  animation: none !important;\n  transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.no-focus-ring {\n  outline: none;\n}\n\n.no-focus-ring:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n  position: absolute;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n  line-height: 1.5;\n  max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n  line-height: var(--line-height-base);\n  max-width: 65ch;\n}\n\n.text-lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-base);\n}\n\n.text-small {\n  font-size: max(var(--font-size-sm), var(--min-font-size));\n  line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n  color: var(--color-text);\n  font-weight: 600;\n}\n\n:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-primary);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Prevent labels from appearing focusable to keyboard users. */\nlabel:focus,\nlabel:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n  background-color: rgba(124, 77, 255, 0.1);\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n  color: var(--color-text);\n  background: var(--color-background);\n  border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n   CONSOLIDATED COMPONENT PATTERNS\n   =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\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: white;\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/* 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/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n  background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n  font-size: 1.25em;\n  font-weight: 600;\n  color: var(--color-primary);\n  margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.text-wrap-anywhere {\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n  color: var(--color-primary);\n  text-align: center;\n  margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n  background: var(--color-section-bg);\n  border-radius: var(--border-radius-full);\n  box-shadow: var(--box-shadow);\n  padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n  background-color: transparent;\n}\n\n.btn-transparent:hover {\n  background-color: transparent;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -9522,20 +10198,19 @@ exports.ChatWithMe = ChatWithMe;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.extractFriends = exports.FriendList = void 0;
-var _solidUi = __webpack_require__(9426);
+exports.FriendList = void 0;
 var _litHtml = __webpack_require__(6752);
 __webpack_require__(9480);
+var _addMeToYourFriends = __webpack_require__(4695);
 const FriendList = (subject, context) => {
-  const friends = extractFriends(subject, context);
+  const friends = (0, _addMeToYourFriends.extractFriends)(false, subject, context);
   if (!friends || !friends.textContent?.trim()) return null;
   return (0, _litHtml.html)`
     <section
       class="friendListSection"
-      role="region"
-      aria-labelledby="friends-section-title"
       data-testid="friend-list"
     >
+      <h2 id="friends-section-title" class="sr-only">Friends</h2>
       <nav aria-label="Friend profiles">
         <ul class="list-reset zebra-stripe" role="list">
           ${friends}
@@ -9545,33 +10220,6 @@ const FriendList = (subject, context) => {
   `;
 };
 exports.FriendList = FriendList;
-const extractFriends = (subject, {
-  dom
-}) => {
-  const target = dom.createElement('div');
-  _solidUi.widgets.attachmentList(dom, subject, target, {
-    doc: subject.doc(),
-    modify: false,
-    predicate: _solidUi.ns.foaf('knows'),
-    noun: 'friend'
-  });
-  if (target.textContent === '') return null;
-  // Add 'friendItem' class and unique aria-label to each <li> for accessibility
-  target.querySelectorAll('li').forEach((li, idx) => {
-    li.classList.add('friendItem');
-    // Try to find a link or text to use as a label
-    const link = li.querySelector('a');
-    if (link && link.textContent) {
-      li.setAttribute('aria-label', `Friend: ${link.textContent.trim()}`);
-    } else if (li.textContent) {
-      li.setAttribute('aria-label', `Friend: ${li.textContent.trim()}`);
-    } else {
-      li.setAttribute('aria-label', `Friend ${idx + 1}`);
-    }
-  });
-  return target;
-};
-exports.extractFriends = extractFriends;
 
 /***/ },
 
@@ -10231,9 +10879,10 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.addMeToYourFriendsDiv = void 0;
-exports.checkIfFriendExists = checkIfFriendExists;
+exports.checkIfThingExists = checkIfThingExists;
 exports.createAddMeToYourFriendsButton = void 0;
-exports.saveNewFriend = saveNewFriend;
+exports.extractFriends = extractFriends;
+exports.saveNewThing = saveNewThing;
 var _litHtml = __webpack_require__(6752);
 var _solidLogic = __webpack_require__(5663);
 var _rdflib = __webpack_require__(5491);
@@ -10270,7 +10919,7 @@ const createAddMeToYourFriendsButton = (subject, context) => {
   });
   function setButtonHandler(event) {
     event.preventDefault();
-    saveNewFriend(subject, context).then(() => {
+    saveNewThing(subject, context, _solidUi.ns.foaf('knows')).then(() => {
       (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
       (0, _buttonsHelper.mention)(buttonContainer, _texts.friendWasAddedSuccesMessage);
       refreshButton();
@@ -10285,7 +10934,7 @@ const createAddMeToYourFriendsButton = (subject, context) => {
     const me = _solidLogic.authn.currentUser();
     const store = context.session.store;
     if (checkIfAnyUserLoggedIn(me)) {
-      checkIfFriendExists(store, me, subject).then(friendExists => {
+      checkIfThingExists(store, me, subject, _solidUi.ns.foaf('knows')).then(friendExists => {
         if (friendExists) {
           //logged in and friend exists or friend was just added
           button.innerHTML = _texts.friendExistsAlreadyButtonText.toUpperCase();
@@ -10302,15 +10951,15 @@ const createAddMeToYourFriendsButton = (subject, context) => {
   return button;
 };
 exports.createAddMeToYourFriendsButton = createAddMeToYourFriendsButton;
-async function saveNewFriend(subject, context) {
+async function saveNewThing(subject, context, predicate) {
   const me = _solidLogic.authn.currentUser();
   const store = context.session.store;
   if (checkIfAnyUserLoggedIn(me)) {
-    if (!(await checkIfFriendExists(store, me, subject))) {
+    if (!(await checkIfThingExists(store, me, subject, predicate))) {
       //if friend does not exist, we add her/him
       await store.fetcher.load(me);
       const updater = store.updater;
-      const toBeInserted = [(0, _rdflib.st)(me, _solidUi.ns.foaf('knows'), subject, me.doc())];
+      const toBeInserted = [(0, _rdflib.st)(me, predicate, subject, me.doc())];
       try {
         await updater.update([], toBeInserted);
       } catch (error) {
@@ -10324,9 +10973,24 @@ async function saveNewFriend(subject, context) {
 function checkIfAnyUserLoggedIn(me) {
   if (me) return true;else return false;
 }
-async function checkIfFriendExists(store, me, subject) {
+async function checkIfThingExists(store, me, subject, predicate) {
   await store.fetcher.load(me);
-  if (store.whether(me, _solidUi.ns.foaf('knows'), subject, me.doc()) === 0) return false;else return true;
+  if (store.whether(me, predicate, subject, me.doc()) === 0) return false;else return true;
+}
+function extractFriends(editable, subject, {
+  dom
+}) {
+  const target = dom.createElement('div');
+  console.log('Extracting friends for subject:', subject.doc()); // Debug log to check the subject
+  _solidUi.widgets.attachmentList(dom, subject, target, {
+    doc: subject.doc(),
+    modify: editable,
+    predicate: _solidUi.ns.foaf('knows'),
+    noun: 'friend'
+  });
+  if (target.textContent === '') return null;
+  console.log('Extracted friends:', target.innerHTML); // Debug log to check the generated HTML
+  return target;
 }
 
 /***/ },
@@ -10396,7 +11060,7 @@ var _rdfFormsHelper = _interopRequireDefault(__webpack_require__(7824));
 var _texts = __webpack_require__(1363);
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* babel-plugin-inline-import '../ontology/resumeForm.ttl' */
-const resumeForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\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 foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n    a ui:Form ;\n    ui:parts (\n      :CVGroup\n      :SkillsHeading :SkillsForm\n      :LanguagesHeading :LanguagesForm\n      ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :CVPrompt \n        :involvementWithOrganizationsForm \n    ).\n\n:CVPrompt a ui:Comment; ui:contents  \"What organizations have you been involved with?\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n    ui:label \"Involvement with organization\";\n    ui:property org:member; \n    ui:reverse true; # link back from role to member\n    ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n    ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Involvement with organization\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n    ui:weight 3; \n    ui:parts ( \n        :MembershipFormHeading\n        :RoleClassifier  \n        :roleNameField\n        :escoOccupationField \n        :orgField \n        :RoleDatesForm \n        :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n    ui:contents \"Details of the role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n    ui:label \"Job title\";\n    ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n    ui:label \"Occupation in ESCO\";\n    ui:property org:role;\n    ui:dataSource :ESCO_Occupation_DataSource;\n    ui:targetClass schema:Occupation .\n\n    :ESCO_Occupation_DataSource a ui:DataSource;\n        schema:name \"ESCO\";\n        ui:targetClass schema:Occupation ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n    ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n    ui:canMintNew true; \n    ui:use :OrganizationCreationForm ;\n    ui:property org:organization;\n    ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n    ui:label \"Job type\"@en;\n    ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n        [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n        [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n        [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n    :TwoDateForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( :StartDateForm :EndDateForm ) .\n    :StartDateForm a ui:DateField; \n        ui:label \"Start\"@en,\"D\xE9but\"@fr;\n        ui:property schema:startDate .\n    :EndDateForm a ui:DateField; \n        ui:label \"End\"@en,\"Fin\"@fr;\n        ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n    owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n    owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien r\xF4le\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"R\xF4le actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"R\xF4le \xE0 venir\"@fr, \"Zuk\xFCnftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n    ui:property schema:description;\n    ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n    schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( \n        :OrgClassifier \n        :OrganizationNameField\n        :OrgSwitch\n        :homePageURIField  ) .\n\n:OrgClassifier a ui:Classifier; \n    ui:label \"Type\"@en;\n    ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n    ui:dependingOn rdf:type;\n    ui:case\n        [ ui:for schema:Corporation; ui:use :CorporationForm ],\n        [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n        [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n        [ ui:for schema:Project; ui:use :ProjectForm ],\n        [ ui:for schema:NGO; ui:use :NGOForm ],\n        [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n        [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n        [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n    ui:label \"Homepage\"@en;\n    ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf  (\n    # Airline - a Corporation\n    # Consortium - a Corporation or a NGO\n    schema:Corporation\n    schema:EducationalOrganization\n    schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n    # FundingScheme - eh?\n    schema:GovernmentOrganization\n    # LibrarySystem\n    # LocalBusiness - Corporation\n    # MedicalOrganization - a Corporation or a NGO\n    schema:NGO\n    # NewsMediaOrganization - a Corporation or a NGO\n    schema:PerformingGroup # a band\n    schema:Project # like Solid\n    schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n    rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organizaci\xF3n de investigaci\xF3n\"@es, \n    \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n#####  Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :CorporationAutocomplete ) .\n\n    :CorporationAutocomplete a ui:AutocompleteField; \n        ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n        ui:property solid:publicId; \n        ui:dataSource :WikidataInstancesByName.\n\n        :WikidataInstancesByName a ui:DataSource ;\n            schema:name \"Wikidata instances by name\";\n            ui:endpoint \"https://query.wikidata.org/sparql\" ;\n            ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n            WHERE {\n                ?klass wdt:P279* $(targetClass) .\n                ?subject wdt:P31 ?klass .\n                ?subject rdfs:label ?name.\n                FILTER regex(?name, \"$(name)\", \"i\")\n            } LIMIT $(limit) \"\"\" ;\n\n            # Note this form of the query is very experimental\n            ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                ui:where { ?klass wdt:P279 ?targetClass .\n                            ?subject wdt:P31 ?klass; rdfs:label ?name .\n                            };\n            ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :GovernmentOrganizationAutocomplete ) .\n\n    :GovernmentOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n            ui:property solid:publicId; \n            ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :EducationalOrganizationAutocomplete ) .\n\n    :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n                ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n                ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ResearchOrganizationAutocomplete ) .\n\n    :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n    ui:parts ( \n        :NGOAutocomplete ) .\n\n    :NGOAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :PerformingGroupAutocomplete ) .\n\n    :PerformingGroupAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n    :ProjectAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n    :SportsOrganizationForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( \n            :SportsOrganizationAutocomplete ) .\n\n    :SportsOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n    ui:contents  \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n    ui:label \"Skills\";\n    ui:property schema:skills;\n    ui:ordered false; # Allow reader to order skills\n    ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n    :escoSkillField a ui:AutocompleteField;\n            ui:label \"Find in ESCO\";\n            ui:property solid:publicId;\n            ui:dataSource :ESCO_Skill_DataSource;\n            ui:targetClass schema:Skill .\n\n    :ESCO_Skill_DataSource a ui:DataSource;\n        schema:name \"ESCO skill\";\n        ui:targetClass esco:Skill ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents  \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"Languages\";\n    ui:property schema:knowsLanguage; \n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\";\n          ui:property solid:publicId; \n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Find in wikidata\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n        ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n            WHERE\n            { ?item wdt:P305 ?subject .\n            OPTIONAL {?item rdfs:label ?name}\n            OPTIONAL {?item wdt:P1705 ?name}\n            FILTER regex(?name, \"$(name)\", \"i\")\n            FILTER regex(?subject, \"^..$\", \"i\")\n            }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
+const resumeForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\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 foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n    a ui:Form ;\n    ui:parts (\n      :CVGroup\n      :SkillsHeading :SkillsForm\n      :LanguagesHeading :LanguagesForm\n      ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :ResumeHeading \n        :involvementWithOrganizationsForm \n    ).\n\n:ResumeHeading a ui:Heading; \n    ui:contents  \"Add your work experience\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n    ui:label \"work experience\";\n    ui:property org:member; \n    ui:reverse true; # link back from role to member\n    ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n    ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Work experience\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n    ui:weight 3; \n    ui:parts ( \n        :MembershipFormHeading\n        :RoleClassifier  \n        :roleNameField\n        :escoOccupationField \n        :orgField \n        :RoleDatesForm \n        :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n    ui:contents \"Details of the role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n    ui:label \"Job title\";\n    ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n    ui:label \"Find in occupation catalog\";\n    ui:property org:role;\n    ui:dataSource :ESCO_Occupation_DataSource;\n    ui:targetClass schema:Occupation .\n\n    :ESCO_Occupation_DataSource a ui:DataSource;\n        schema:name \"ESCO\";\n        ui:targetClass schema:Occupation ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n    ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n    ui:canMintNew true; \n    ui:use :OrganizationCreationForm ;\n    ui:property org:organization;\n    ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n    ui:label \"Job type\"@en;\n    ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n        [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n        [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n        [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n    :TwoDateForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( :StartDateForm :EndDateForm ) .\n    :StartDateForm a ui:DateField; \n        ui:label \"Start\"@en,\"D\xE9but\"@fr;\n        ui:property schema:startDate .\n    :EndDateForm a ui:DateField; \n        ui:label \"End\"@en,\"Fin\"@fr;\n        ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n    owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n    owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien r\xF4le\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"R\xF4le actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"R\xF4le \xE0 venir\"@fr, \"Zuk\xFCnftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n    ui:property schema:description;\n    ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n    schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( \n        :OrgClassifier \n        :OrganizationNameField\n        :OrgSwitch\n        :homePageURIField  ) .\n\n:OrgClassifier a ui:Classifier; \n    ui:label \"Type\"@en;\n    ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n    ui:dependingOn rdf:type;\n    ui:case\n        [ ui:for schema:Corporation; ui:use :CorporationForm ],\n        [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n        [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n        [ ui:for schema:Project; ui:use :ProjectForm ],\n        [ ui:for schema:NGO; ui:use :NGOForm ],\n        [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n        [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n        [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n    ui:label \"Homepage\"@en;\n    ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf  (\n    # Airline - a Corporation\n    # Consortium - a Corporation or a NGO\n    schema:Corporation\n    schema:EducationalOrganization\n    schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n    # FundingScheme - eh?\n    schema:GovernmentOrganization\n    # LibrarySystem\n    # LocalBusiness - Corporation\n    # MedicalOrganization - a Corporation or a NGO\n    schema:NGO\n    # NewsMediaOrganization - a Corporation or a NGO\n    schema:PerformingGroup # a band\n    schema:Project # like Solid\n    schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n    rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organizaci\xF3n de investigaci\xF3n\"@es, \n    \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n#####  Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :CorporationAutocomplete ) .\n\n    :CorporationAutocomplete a ui:AutocompleteField; \n        ui:label \"Find in wikidata\";\n        ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n        ui:property solid:publicId; \n        ui:dataSource :WikidataInstancesByName.\n\n        :WikidataInstancesByName a ui:DataSource ;\n            schema:name \"Wikidata instances by name\";\n            ui:endpoint \"https://query.wikidata.org/sparql\" ;\n            ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n            WHERE {\n                ?klass wdt:P279* $(targetClass) .\n                ?subject wdt:P31 ?klass .\n                ?subject rdfs:label ?name.\n                FILTER regex(?name, \"$(name)\", \"i\")\n            } LIMIT $(limit) \"\"\" ;\n\n            # Note this form of the query is very experimental\n            ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                ui:where { ?klass wdt:P279 ?targetClass .\n                            ?subject wdt:P31 ?klass; rdfs:label ?name .\n                            };\n            ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :GovernmentOrganizationAutocomplete ) .\n\n    :GovernmentOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n            ui:property solid:publicId; \n            ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :EducationalOrganizationAutocomplete ) .\n\n    :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n                ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n                ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ResearchOrganizationAutocomplete ) .\n\n    :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n    ui:parts ( \n        :NGOAutocomplete ) .\n\n    :NGOAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :PerformingGroupAutocomplete ) .\n\n    :PerformingGroupAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n    :ProjectAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n    :SportsOrganizationForm a ui:Group; \n        ui:weight 0; \n        ui:parts ( \n            :SportsOrganizationAutocomplete ) .\n\n    :SportsOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Find in wikidata\";\n            ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n            ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n    ui:contents  \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n    ui:label \"skill\";\n    ui:property schema:skills;\n    ui:ordered false; # Allow reader to order skills\n    ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n    :escoSkillField a ui:AutocompleteField;\n            ui:label \"Find in skills catalog\";\n            ui:property solid:publicId;\n            ui:dataSource :ESCO_Skill_DataSource;\n            ui:targetClass schema:Skill .\n\n    :ESCO_Skill_DataSource a ui:DataSource;\n        schema:name \"ESCO skill\";\n        ui:targetClass esco:Skill ;\n        schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n        ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents  \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"language\";\n    ui:property schema:knowsLanguage; \n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\";\n          ui:property solid:publicId; \n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Find in wikidata\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n        ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n            WHERE\n            { ?item wdt:P305 ?subject .\n            OPTIONAL {?item rdfs:label ?name}\n            OPTIONAL {?item wdt:P1705 ?name}\n            FILTER regex(?name, \"$(name)\", \"i\")\n            FILTER regex(?subject, \"^..$\", \"i\")\n            }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
 const resumeFormName = 'resumeForm.ttl'; // The name of the form file
 
 function EditCVSection(context, me, editableProfile, store) {
@@ -10412,12 +11076,7 @@ function EditCVSection(context, me, editableProfile, store) {
   heading.textContent = _texts.resumeHeadingText;
   header.appendChild(heading);
   section.appendChild(header);
-  if (editableProfile) {
-    const comment2 = context.dom.createElement('p');
-    comment2.classList.add('p-md');
-    comment2.textContent = 'Edit your resume. These will be publicly visible on your profile.';
-    section.appendChild(comment2);
-  } else {
+  if (!editableProfile) {
     const comment1 = context.dom.createElement('p');
     comment1.classList.add('p-md');
     comment1.textContent = 'Login to add resume information to your profile.';
@@ -10441,7 +11100,14 @@ Object.defineProperty(exports, "__esModule", ({
 exports.EditProfileCommunitiesSection = EditProfileCommunitiesSection;
 var _solidUi = __webpack_require__(9426);
 var _texts = __webpack_require__(1363);
-function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
+var _solidLogic = __webpack_require__(5663);
+__webpack_require__(6433);
+__webpack_require__(8434);
+var _buttonsHelper = __webpack_require__(4198);
+var _addMeToYourFriends = __webpack_require__(4695);
+var _editProfilePresenter = __webpack_require__(6444);
+const GREEN_PLUS = _solidUi.icons.iconBase + 'noun_34653_green.svg';
+function EditProfileCommunitiesSection(context, me, editableProfile) {
   const section = context.dom.createElement('section');
   section.setAttribute('aria-labelledby', 'edit-profile-communities-heading');
   section.classList.add('profileSection', 'section-bg');
@@ -10453,31 +11119,43 @@ function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
   heading.textContent = _texts.communitiesHeadingText;
   header.appendChild(heading);
   section.appendChild(header);
-  const comment1 = context.dom.createElement('p');
-  comment1.id = 'edit-profile-communities-description';
-  comment1.classList.add('p-md');
-  comment1.textContent = 'These are organizations and projects whose stuff you share';
-  section.appendChild(comment1);
-  let comment2 = null;
   if (editableProfile) {
-    comment2 = context.dom.createElement('p');
-    comment2.id = 'edit-profile-communities-help';
-    comment2.classList.add('p-md');
-    comment2.textContent = 'Drag organizations onto the target below to add organizations.';
-    section.appendChild(comment2);
-  }
-  const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
-    doc: profile,
-    modify: !!editableProfile,
-    predicate: _solidUi.ns.solid('community'),
-    noun: 'community'
-  });
-  const descriptions = [comment1.id];
-  if (comment2?.id) {
-    descriptions.push(comment2.id);
+    let plusButtonDiv = context.dom.createElement('div');
+    plusButtonDiv.classList.add('add-community-button-container');
+    createAddButton(plusButtonDiv, context);
+    section.appendChild(plusButtonDiv);
+  }
+  const attachmentOuter = section.appendChild(context.dom.createElement('table'));
+  attachmentOuter.classList.add('edit-community-attachment-outer');
+  const attachmentOne = attachmentOuter.appendChild(context.dom.createElement('tr'));
+  const attachmentRight = attachmentOne.appendChild(context.dom.createElement('td'));
+  const attachmentTable = attachmentRight.appendChild(context.dom.createElement('table'));
+  attachmentTable.classList.add('attachmentTable', 'table', 'table-striped', 'table-hover');
+  attachmentOuter.refresh = (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.solid('community')); // Participate in downstream changes
+
+  (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.solid('community'));
+  function createAddButton(buttonContainer, context) {
+    const plus = buttonContainer.appendChild(_solidUi.widgets.button(context.dom, GREEN_PLUS, 'Add a project or community', greenButtonHandler));
+    const predicate = _solidUi.ns.solid('community');
+    plus.setAttribute('class', 'add-button');
+    plus.setAttribute('aria-label', 'Add a new community');
+    const span = context.dom.createElement('span');
+    span.textContent = 'Add a community or project'; // for screen readers
+    span.setAttribute('class', 'span');
+    buttonContainer.appendChild(span);
+    async function greenButtonHandler(_event) {
+      const webid = await _solidUi.widgets.askName(context.dom, _solidLogic.store, buttonContainer, predicate, undefined, 'WebID of');
+      if (!webid || !(0, _editProfilePresenter.isAWebID)(webid)) {
+        return; // cancelled by user
+      }
+      return (0, _addMeToYourFriends.saveNewThing)(webid, context, predicate).then(() => {
+        (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, predicate); // Update the button state after adding a community
+      }).catch(error => {
+        (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
+        (0, _buttonsHelper.complain)(buttonContainer, context, error);
+      });
+    }
   }
-  attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
-  section.appendChild(attachmentList);
   return section;
 }
 
@@ -10551,7 +11229,14 @@ Object.defineProperty(exports, "__esModule", ({
 exports.EditFriendsSection = EditFriendsSection;
 var _solidUi = __webpack_require__(9426);
 var _texts = __webpack_require__(1363);
-function EditFriendsSection(context, me, editableProfile, profile) {
+var _addMeToYourFriends = __webpack_require__(4695);
+__webpack_require__(8434);
+__webpack_require__(6433);
+var _solidLogic = __webpack_require__(5663);
+var _buttonsHelper = __webpack_require__(4198);
+var _editProfilePresenter = __webpack_require__(6444);
+const GREEN_PLUS = _solidUi.icons.iconBase + 'noun_34653_green.svg';
+function EditFriendsSection(context, me, editableProfile) {
   const section = context.dom.createElement('section');
   section.setAttribute('aria-labelledby', 'edit-profile-friends-heading');
   section.classList.add('profileSection', 'section-bg');
@@ -10563,31 +11248,59 @@ function EditFriendsSection(context, me, editableProfile, profile) {
   heading.textContent = _texts.friendsHeadingText;
   header.appendChild(heading);
   section.appendChild(header);
-  const comment1 = context.dom.createElement('p');
-  comment1.id = 'edit-profile-friends-description';
-  comment1.classList.add('p-md');
-  comment1.textContent = 'This is your public social network. Only put people here to whom you are happy to be publicly connected. (You can always keep private track of friends and family in your contacts.)';
-  section.appendChild(comment1);
-  let comment2 = null;
   if (editableProfile) {
-    comment2 = context.dom.createElement('p');
-    comment2.id = 'edit-profile-friends-help';
-    comment2.classList.add('p-md');
-    comment2.textContent = 'Drag people onto the target below to add people.';
-    section.appendChild(comment2);
-  }
-  const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
-    doc: profile,
-    modify: !!editableProfile,
-    predicate: _solidUi.ns.foaf('knows'),
-    noun: 'friend'
-  });
-  const descriptions = [comment1.id];
-  if (comment2?.id) {
-    descriptions.push(comment2.id);
+    let plusButtonDiv = context.dom.createElement('div');
+    plusButtonDiv.classList.add('add-friend-button-container');
+    createAddButton(plusButtonDiv, context);
+    section.appendChild(plusButtonDiv);
+  }
+  const attachmentOuter = section.appendChild(context.dom.createElement('table'));
+  attachmentOuter.classList.add('edit-friends-attachment-outer');
+  const attachmentOne = attachmentOuter.appendChild(context.dom.createElement('tr'));
+  const attachmentRight = attachmentOne.appendChild(context.dom.createElement('td'));
+  const attachmentTable = attachmentRight.appendChild(context.dom.createElement('table'));
+  attachmentTable.classList.add('attachmentTable', 'table', 'table-striped', 'table-hover');
+  attachmentOuter.refresh = (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.foaf('knows')); // Participate in downstream changes
+
+  (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.foaf('knows'));
+  function createAddButton(buttonContainer, context) {
+    const plus = buttonContainer.appendChild(_solidUi.widgets.button(context.dom, GREEN_PLUS, 'Add a friend', greenButtonHandler));
+    const predicate = _solidUi.ns.foaf('knows');
+    plus.setAttribute('class', 'add-button');
+    plus.setAttribute('aria-label', 'Add a friend');
+    const span = context.dom.createElement('span');
+    span.textContent = 'Add a friend'; // for screen readers
+    span.setAttribute('class', 'span');
+    buttonContainer.appendChild(span);
+    async function greenButtonHandler(_event) {
+      const webid = await _solidUi.widgets.askName(context.dom, _solidLogic.store, buttonContainer, predicate, undefined, 'WebID of the friend you');
+      if (!webid) {
+        return;
+      }
+      try {
+        new URL(webid);
+      } catch {
+        (0, _buttonsHelper.complain)(buttonContainer, context, 'Not a URL');
+        return;
+      }
+      try {
+        await _solidLogic.store.fetcher.load(_solidLogic.store.sym(webid));
+      } catch {
+        (0, _buttonsHelper.complain)(buttonContainer, context, 'Not a valid WebID');
+        return;
+      }
+      if (!(0, _editProfilePresenter.isAWebID)(_solidLogic.store.sym(webid))) {
+        (0, _buttonsHelper.complain)(buttonContainer, context, 'WebID does not seem to exist');
+        return;
+      }
+      return (0, _addMeToYourFriends.saveNewThing)(webid, context, predicate).then(() => {
+        (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, predicate); // Update the button state after adding a friend
+      }).catch(error => {
+        (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
+        (0, _buttonsHelper.complain)(buttonContainer, context, error);
+      });
+    }
   }
-  attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
-  section.appendChild(attachmentList);
   return section;
 }
 
@@ -10607,7 +11320,7 @@ var _rdfFormsHelper = _interopRequireDefault(__webpack_require__(7824));
 var _texts = __webpack_require__(1363);
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* babel-plugin-inline-import '../ontology/otherPreferencesForm.ttl' */
-const otherPreferencesForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\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\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Other preferences form\" ;\n    a ui:Form ;\n    ui:parts (\n      :styleGroup\n      ).\n\n:styleGroup a ui:Group; ui:weight 0; \n    ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n\n:styleHeading a ui:Heading; ui:contents \"The style of your public profile.\".\n\n:backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n    ui:label \"Background color\"; ui:default \"#ffffff\".\n:highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n    ui:label \"Highlight color\"; ui:default \"#000000\".";
+const otherPreferencesForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\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\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Other preferences form\" ;\n    a ui:Form ;\n    ui:parts (\n      :styleGroup\n      ).\n\n:styleGroup a ui:Group; ui:weight 0; \n    ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n\n:styleHeading a ui:Heading; ui:contents \"The style of your public profile\".\n\n:backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n    ui:label \"Background color\"; ui:default \"#ffffff\".\n:highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n    ui:label \"Highlight color\"; ui:default \"#000000\".";
 const otherPreferencesFormName = 'otherPreferencesForm.ttl'; // The name of the form file
 
 function EditOtherPreferencesSection(context, me, editableProfile, store) {
@@ -10645,9 +11358,10 @@ var _EditFriendsCard = __webpack_require__(8308);
 var _EditSocialCard = __webpack_require__(9410);
 var _EditCommunitiesCard = __webpack_require__(8188);
 __webpack_require__(1930);
-__webpack_require__(855);
+__webpack_require__(8434);
 var _EditCVCard = __webpack_require__(6016);
 var _EditOtherPreferences = __webpack_require__(7643);
+var _rdfFormsHelper = __webpack_require__(7824);
 /**
  * Profile Editing App Pane
  *
@@ -10736,10 +11450,13 @@ const editProfileView = {
       main.appendChild((0, _EditOtherPreferences.EditOtherPreferencesSection)(context, me, editableProfile, store));
 
       // People you know Section
-      main.appendChild((0, _EditFriendsCard.EditFriendsSection)(context, me, editableProfile, profile));
+      main.appendChild((0, _EditFriendsCard.EditFriendsSection)(context, me, editableProfile));
 
       // Communities you participate in Section
-      main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile, profile));
+      main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile));
+
+      // Ensure keyboard navigation skips labels (including those rendered as links).
+      (0, _rdfFormsHelper.skipLabelsFromTabbing)(main);
       main.setAttribute('aria-busy', 'false');
       main.focus();
     }).catch(error => {
@@ -10784,12 +11501,7 @@ function EditSocialSection(context, me, editableProfile, store) {
   heading.textContent = _texts.socialAccountsHeadingText;
   header.appendChild(heading);
   section.appendChild(header);
-  if (editableProfile) {
-    const comment2 = context.dom.createElement('p');
-    comment2.classList.add('p-md');
-    comment2.textContent = 'Add links to your social media accounts here. These will be publicly visible on your profile.';
-    section.appendChild(comment2);
-  } else {
+  if (!editableProfile) {
     const comment1 = context.dom.createElement('p');
     comment1.classList.add('p-md');
     comment1.textContent = 'Login to add social media accounts to your profile.';
@@ -10801,6 +11513,111 @@ function EditSocialSection(context, me, editableProfile, store) {
 
 /***/ },
 
+/***/ 6444
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.isAWebID = isAWebID;
+exports.refresh = refresh;
+var _rdflib = __webpack_require__(5491);
+var _solidLogic = __webpack_require__(5663);
+var _solidUi = __webpack_require__(9426);
+function refresh(dom, attachmentTable, me, editableProfile, predicate) {
+  // Keep the RDF terms so downstream Solid-UI helpers (e.g. findImage) can call term.sameTerm().
+  // We still sort by string value so the list order is stable.
+  const friendsList = _solidLogic.store.each(me, predicate);
+  // Ensure profiles are loaded before we render rows, otherwise widgets.findImage / utils.label may return empty.
+  void (async () => {
+    if (_solidLogic.store.fetcher) {
+      await Promise.all(friendsList.map(friend => {
+        if (!_solidLogic.store.holds(friend, null, null, null)) {
+          return _solidLogic.store.fetcher?.load(friend.value).catch(() => undefined);
+        }
+        return Promise.resolve();
+      }));
+    }
+    friendsList.sort((a, b) => a.value > b.value ? 1 : a.value < b.value ? -1 : 0);
+    _solidUi.utils.syncTableToArray(attachmentTable, friendsList, target => createNewRow(dom, attachmentTable, target, me, editableProfile, predicate));
+  })();
+}
+function createNewRow(dom, attachmentTable, target, me, editableProfile, predicate) {
+  const theTarget = target;
+  const profileImg = dom.createElement('img');
+  profileImg.classList.add('profile-image');
+  profileImg.src = _solidUi.widgets.findImage((0, _rdflib.sym)(target));
+  profileImg.alt = `Image of ${_solidUi.utils.label((0, _rdflib.sym)(target))}`;
+  const opt = {
+    image: profileImg,
+    title: _solidUi.utils.label((0, _rdflib.sym)(target)),
+    link: true
+  };
+  if (!!editableProfile) {
+    opt.deleteFunction = function () {
+      deleteAttachment(dom, attachmentTable, me, editableProfile, theTarget, predicate);
+    };
+  }
+  return _solidUi.widgets.renderAsRow(dom, predicate, target, opt);
+}
+async function deleteAttachment(dom, attachmentTable, me, editableProfile, target, predicate) {
+  if (!_solidLogic.store.updater) {
+    throw new Error('Store has no updater.');
+  }
+
+  // Delete the exact statements in the store so we don't rely on doc() matching
+  const statementsToDelete = _solidLogic.store.statementsMatching(me, predicate, target, null);
+  if (!statementsToDelete.length) {
+    console.warn('No matching statement found to delete for', target.value);
+    refresh(dom, attachmentTable, me, editableProfile, predicate);
+    return;
+  }
+  try {
+    await _solidLogic.store.updater.update(statementsToDelete, []);
+
+    // UpdateManager may mutate store asynchronously, so only remove locally if it still exists
+    if (typeof _solidLogic.store.removeStatements === 'function') {
+      const stillThere = _solidLogic.store.holds(me, predicate, target, null);
+      if (stillThere) {
+        try {
+          _solidLogic.store.removeStatements(statementsToDelete);
+        } catch (e) {
+          // Ignore if already gone
+        }
+      }
+    }
+
+    // Ensure store is up-to-date before re-rendering
+    if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
+    refresh(dom, attachmentTable, me, editableProfile, predicate);
+  } catch (error) {
+    console.error('Error deleting:', error);
+
+    // If update failed, try to keep UI in sync anyway
+    if (typeof _solidLogic.store.removeStatements === 'function') {
+      try {
+        _solidLogic.store.removeStatements(statementsToDelete);
+      } catch (e) {
+        /* ignore */
+      }
+    }
+    if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
+    refresh(dom, attachmentTable, me, editableProfile, predicate);
+  }
+}
+function isAWebID(subject) {
+  if (subject && subject.doc) {
+    const t = _solidLogic.store.findTypeURIs(subject.doc());
+    return !!t[_solidUi.ns.foaf('PersonalProfileDocument').uri];
+  }
+  return false;
+}
+
+/***/ },
+
 /***/ 2643
 (__unused_webpack_module, exports, __webpack_require__) {
 
@@ -10973,6 +11790,7 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports["default"] = renderForm;
 exports.loadDocument = loadDocument;
+exports.skipLabelsFromTabbing = skipLabelsFromTabbing;
 var _rdflib = __webpack_require__(5491);
 var _solidUi = __webpack_require__(9426);
 const baseUri = 'https://solidos.github.io/profile-pane/src/ontology/';
@@ -10993,8 +11811,112 @@ store, dom, editableProfile, whichForm) {
   _solidUi.widgets.appendForm(dom, div, {}, subject, formThis, editableProfile, (ok, mes) => {
     if (!ok) _solidUi.widgets.errorMessageBlock(dom, mes);
   });
+
+  // Ensure that when a user clicks “Add skill” or “Add language”, the newly
+  // created input receives focus. Solid-UI provides only a generic "Add" button.
+  // We detect the "add" control by the plus icon it uses and focus the last
+  // text input in the surrounding multiple-field container.
+  enableFocusOnAdd(div);
+
+  // Track the last click/tap position so popups (like solid-ui delete confirmations)
+  // can be positioned closer to where the user clicked.
+  let lastClick = {
+    x: 0,
+    y: 0
+  };
+  div.addEventListener('pointerdown', event => {
+    lastClick = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }, {
+    capture: true
+  });
+
+  // Solid-UI injects a popup DIV (position:absolute, top:-1em) under a relative container.
+  // Detect it and reposition it using last click coordinates.
+  const repositionPopup = popup => {
+    const win = dom.defaultView || window;
+    const padding = 10;
+    const maxWidth = win.innerWidth - padding;
+    const maxHeight = win.innerHeight - padding;
+
+    // Force fixed positioning, then clamp to viewport so it doesn't get cut off.
+    popup.style.position = 'fixed';
+    popup.style.zIndex = '9999';
+    popup.style.pointerEvents = 'auto';
+    popup.style.opacity = '1';
+    popup.style.visibility = 'visible';
+
+    // Use getBoundingClientRect after it is in DOM; if it is 0x0, fall back to default offset.
+    const rect = popup.getBoundingClientRect();
+    const popupWidth = rect.width || 200;
+    const popupHeight = rect.height || 100;
+    const left = Math.min(Math.max(lastClick.x + padding, padding), maxWidth - popupWidth);
+    const top = Math.min(Math.max(lastClick.y + padding, padding), maxHeight - popupHeight);
+    popup.style.left = `${left}px`;
+    popup.style.top = `${top}px`;
+  };
+  const observer = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      for (const node of Array.from(mutation.addedNodes)) {
+        if (!(node instanceof HTMLElement)) continue;
+        // Solid-UI popups are divs with inline position:absolute and grid display
+        if (node.style.position === 'absolute' && node.style.display === 'grid' && node.style.top === '-1em') {
+          repositionPopup(node);
+          continue;
+        }
+        // Also handle nested cases where the popup is not the direct added node
+        const popup = node.querySelector('div[style*="position:absolute"][style*="display:grid"][style*="top:-1em"]');
+        if (popup) repositionPopup(popup);
+      }
+    }
+  });
+  observer.observe(div, {
+    childList: true,
+    subtree: true
+  });
 } // renderForm
 
+function enableFocusOnAdd(root) {
+  const PLUS_ICON = 'noun_19460_green.svg';
+  const isAddButton = el => {
+    const img = el.querySelector('img');
+    const label = el.querySelector('span');
+    return img?.src.includes(PLUS_ICON) && label?.textContent?.trim().toLowerCase().startsWith('add ');
+  };
+  const buttons = Array.from(root.querySelectorAll('div')).filter(isAddButton);
+  buttons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const scope = function findScope(el) {
+        let cur = el;
+        while (cur && cur !== root) {
+          if (cur.querySelector('input[data-testid="autocomplete-input"]')) return cur;
+          cur = cur.parentElement;
+        }
+        return root;
+      }(btn);
+      const before = new Set(Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]')));
+      const start = Date.now();
+      const interval = setInterval(() => {
+        const current = Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]'));
+        const newInput = current.find(el => !before.has(el));
+        if (newInput) {
+          // New inputs are usually wrapped in a label/link; make sure focus jumps
+          // straight to the input rather than the label link.
+          skipLabelsFromTabbing(scope);
+          newInput.focus();
+          clearInterval(interval);
+          return;
+        }
+        if (Date.now() - start > 1000) {
+          clearInterval(interval);
+        }
+      }, 50);
+    });
+  });
+}
+
 // we need to load into the store some additional information about Social Media accounts
 function loadDocument(store, documentSource, documentName, documentURI) {
   const finalDocumentUri = documentURI || baseUri + documentName; // Full URI to the file
@@ -11006,6 +11928,26 @@ function loadDocument(store, documentSource, documentName, documentURI) {
     (0, _rdflib.parse)(documentSource, store, finalDocumentUri, 'text/turtle', () => null); // Load doc directly
   }
 }
+function skipLabelsFromTabbing(root) {
+  // Many Solid-UI forms render field labels as focusable links (hrefs).
+  // Make sure keyboard tabbing skips these label links entirely.
+  const selectors = ['label', '.formFieldName a', '.classifierBox-label a', '.choiceBox-label a', '.label a',
+  // Skip focusable label-like links created by Solid-UI forms, including the vcard note link
+  'a[href="http://www.w3.org/2006/vcard/ns#note"]', 'a[href$="#note"]'].join(', ');
+
+  // querySelectorAll<HTMLElement> ensures the elements are typed correctly so we can access tabIndex.
+  const nodes = root?.querySelectorAll(selectors);
+  if (!nodes) return;
+  Array.from(nodes).forEach(el => {
+    if (typeof el.tabIndex === 'number' && el.tabIndex !== -1) {
+      el.tabIndex = -1;
+    }
+    // Ensure those label links are not announced as focusable elements
+    if (el.getAttribute('aria-hidden') !== 'true') {
+      el.setAttribute('aria-hidden', 'true');
+    }
+  });
+}
 
 /***/ },
 
@@ -31971,7 +32913,57 @@ var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMP
 
 /***/ },
 
-/***/ 855
+/***/ 6433
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5072);
+/* harmony import */ var _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7825);
+/* harmony import */ var _style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7659);
+/* harmony import */ var _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5056);
+/* harmony import */ var _style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(540);
+/* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1113);
+/* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(9340);
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+options.styleTagTransform = (_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
+options.setAttributes = (_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+options.insert = _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+options.domAPI = (_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A && _css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals ? _css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals : undefined);
+
+
+/***/ },
+
+/***/ 8434
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -31991,7 +32983,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1113);
 /* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2024);
+/* harmony import */ var _css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7347);
 
       
       
@@ -32011,12 +33003,12 @@ options.insert = _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTE
 options.domAPI = (_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
 options.insertStyleElement = (_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
 
-var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, options);
+var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, options);
 
 
 
 
-       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A && _css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals ? _css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals : undefined);
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A && _css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals ? _css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals : undefined);
 
 
 /***/ },
@@ -46614,9 +47606,53 @@ const schedulePane = {
     const showForms = function () {
       clearElement(naviCenter) // Remove refresh button if nec
       const div = naviMain
+
+      // form2 depends on sched:allDay; seed a local default for new polls
+      if (!kb.any(subject, ns.sched('allDay'))) {
+        kb.add(
+          subject,
+          ns.sched('allDay'),
+          external_rdflib_.literal(
+            'true',
+            undefined,
+            external_rdflib_.sym('http://www.w3.org/2001/XMLSchema#boolean')
+          ),
+          detailsDoc
+        )
+      }
+
       const wizard = true
       let currentSlide = 0
       let gotDoneButton = false
+
+      const hasFormControls = function (container) {
+        return !!container.querySelector('input, select, textarea, button')
+      }
+
+      const asBoolean = function (term, fallback) {
+        if (!term) return fallback
+        const value = (term.value || '').toLowerCase()
+        if (value === 'true' || value === '1') return true
+        if (value === 'false' || value === '0') return false
+        return fallback
+      }
+
+      const renderTimeProposalFallback = function (slide) {
+        const allDayValue = asBoolean(kb.any(subject, ns.sched('allDay')), true)
+        const fallbackForm = kb.sym(
+          formsURI + (allDayValue ? '#AllDayForm2' : '#NotAllDayForm2')
+        )
+        external_UI_.widgets.appendForm(
+          document,
+          slide,
+          {},
+          subject,
+          fallbackForm,
+          detailsDoc,
+          complainIfBad
+        )
+      }
+
       if (wizard) {
         const forms = [form1, form2, form3]
         const slides = []
@@ -46632,6 +47668,12 @@ const schedulePane = {
             detailsDoc,
             complainIfBad
           )
+
+          // Some stores end up with form2's ui:Options unresolved; force a usable input form.
+          if (f === 1 && !hasFormControls(slide)) {
+            renderTimeProposalFallback(slide)
+          }
+
           slides.push(slide)
         }
 
@@ -46939,7 +47981,7 @@ const schedulePane = {
 
     // Read or create empty results file
     function getResults () {
-      fetcher.nowOrWhenFetched(resultsDoc.uri, (ok, body, response) => {
+      fetcher.nowOrWhenFetched(resultsDoc.uri, undefined, (ok, body, response) => {
         if (!ok) {
           if (response.status === 404) {
             // /  Check explicitly for 404 error
@@ -47025,11 +48067,15 @@ const schedulePane = {
       options.set_x = kb.each(subject, ns.sched('option')) // @@@@@ option -> dtstart in future
       options.set_x = options.set_x.map(function (opt) {
         return kb.any(opt, ns.cal('dtstart'))
+      }).filter(function (time) {
+        return !!time
       })
 
       options.set_y = kb.each(subject, ns.sched('response'))
       options.set_y = options.set_y.map(function (resp) {
         return kb.any(resp, ns.dc('author'))
+      }).filter(function (author) {
+        return !!author
       })
 
       const possibleTimes = kb
@@ -47037,6 +48083,9 @@ const schedulePane = {
         .map(function (opt) {
           return kb.any(opt, ns.cal('dtstart'))
         })
+        .filter(function (time) {
+          return !!time
+        })
 
       const displayTheMatrix = function () {
         const matrix = div.appendChild(
@@ -47112,6 +48161,7 @@ const schedulePane = {
             } //  @@ may need that
             const selectOptions = {}
             const predicate = ns.sched('availabilty')
+            if (!x) return
             const cellSubject = dataPointForNT[x.toNT()]
             const selector = external_UI_.widgets.makeSelectForOptions(
               dom,
@@ -47150,19 +48200,22 @@ const schedulePane = {
           const dps = kb.each(myResponse, ns.sched('cell'))
           dps.forEach(function (dataPoint) {
             const time = kb.any(dataPoint, ns.cal('dtstart'))
+            if (!time) return
             dataPointForNT[time.toNT()] = dataPoint
           })
         }
         for (let j = 0; j < possibleTimes.length; j++) {
-          if (dataPointForNT[possibleTimes[j].toNT()]) continue
+          const possibleTime = possibleTimes[j]
+          if (!possibleTime) continue
+          if (dataPointForNT[possibleTime.toNT()]) continue
           const dataPoint = external_rdflib_.sym(id + '_' + j)
           insertables.push(
             external_rdflib_.st(myResponse, ns.sched('cell'), dataPoint, doc)
           )
           insertables.push(
-            external_rdflib_.st(dataPoint, ns.cal('dtstart'), possibleTimes[j], doc)
+            external_rdflib_.st(dataPoint, ns.cal('dtstart'), possibleTime, doc)
           ) // @@
-          dataPointForNT[possibleTimes[j].toNT()] = dataPoint
+          dataPointForNT[possibleTime.toNT()] = dataPoint
         }
         if (insertables.length) {
           kb.updater.update([], insertables, function (
@@ -48971,7 +50024,7 @@ Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error
 //# sourceMappingURL=marked.esm.js.map
 
 ;// ./node_modules/dompurify/dist/purify.es.mjs
-/*! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE */
+/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
 
 const {
   entries,
@@ -49278,7 +50331,7 @@ const _createHooksMap = function _createHooksMap() {
 function createDOMPurify() {
   let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
   const DOMPurify = root => createDOMPurify(root);
-  DOMPurify.version = '3.3.1';
+  DOMPurify.version = '3.3.3';
   DOMPurify.removed = [];
   if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
     // Not running in a browser, provide a factory function
@@ -49573,7 +50626,7 @@ function createDOMPurify() {
     /* Parse profile info */
     if (USE_PROFILES) {
       ALLOWED_TAGS = addToSet({}, purify_es_text);
-      ALLOWED_ATTR = [];
+      ALLOWED_ATTR = purify_es_create(null);
       if (USE_PROFILES.html === true) {
         addToSet(ALLOWED_TAGS, html$1);
         addToSet(ALLOWED_ATTR, html);
@@ -49594,6 +50647,13 @@ function createDOMPurify() {
         addToSet(ALLOWED_ATTR, xml);
       }
     }
+    /* Prevent function-based ADD_ATTR / ADD_TAGS from leaking across calls */
+    if (!objectHasOwnProperty(cfg, 'ADD_TAGS')) {
+      EXTRA_ELEMENT_HANDLING.tagCheck = null;
+    }
+    if (!objectHasOwnProperty(cfg, 'ADD_ATTR')) {
+      EXTRA_ELEMENT_HANDLING.attributeCheck = null;
+    }
     /* Merge configuration parameters */
     if (cfg.ADD_TAGS) {
       if (typeof cfg.ADD_TAGS === 'function') {
@@ -49991,6 +51051,10 @@ function createDOMPurify() {
    */
   // eslint-disable-next-line complexity
   const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
+    /* FORBID_ATTR must always win, even if ADD_ATTR predicate would allow it */
+    if (FORBID_ATTR[lcName]) {
+      return false;
+    }
     /* Make sure attribute cannot clobber */
     if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
       return false;
@@ -50083,7 +51147,7 @@ function createDOMPurify() {
         value = SANITIZE_NAMED_PROPS_PREFIX + value;
       }
       /* Work around a security issue with comments inside attributes */
-      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, value)) {
+      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|script|title|xmp|textarea|noscript|iframe|noembed|noframes)/i, value)) {
         _removeAttribute(name, currentNode);
         continue;
       }