contacts-pane 3.1.0-test.9 → 3.2.0

package/dist/contactsPane.js

@@ -53,22 +53,22 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   flex-direction: column;
   align-items: stretch;
   flex: 1 1 0; /* allow it to grow but not force wrap */
-  min-width: 300px;
+  min-width: 0; /* allow sections to collapse when stacked */
   box-sizing: border-box;
   background: var(--color-section-bg);
 }
 
 .contactPane .detailsSectionContent {
   flex: 1 1 auto;
-  min-height: 200px;
+  min-height: 12.5rem; /* 200px */
   padding: var(--spacing-lg);
-  max-width: 900px;
+  max-width: 56.25rem; /* 900px */
   width: 100%;
   box-sizing: border-box;
 }
 
 .contactPane .detailsSectionContent--wide {
-  max-width: 900px;
+  max-width: 56.25rem; /* 900px */
 }
 
 .contactPane .cardFooter {
@@ -90,7 +90,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  max-width: 360px;
+  max-width: 22.5rem; /* 360px */
 }
 
 .contactPane .contactTypeChooser h3 {
@@ -100,7 +100,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 
 .contactPane .contactTypeSelect {
   height: var(--min-touch-target);
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm, 1px) solid var(--color-border-pale);
   border-radius: var(--border-radius-base);
   padding: 0 var(--spacing-sm);
   font-size: var(--font-size-sm);
@@ -120,14 +120,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 
 .contactPane .searchInput {
   height: var(--min-touch-target);
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm, 1px) solid var(--color-border-pale);
   background-color: var(--color-section-bg);
   background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});
   background-repeat: no-repeat;
-  background-position: 8px center;
-  background-size: 20px 20px;
+  background-position: 0.5rem center; /* 8px */
+  background-size: 1.25rem 1.25rem; /* 20px 20px */
   border-radius: var(--border-radius-base);
-  padding: 0 var(--spacing-sm) 0 34px;
+  padding: 0 var(--spacing-sm) 0 2.125rem; /* 34px */
   font-size: var(--font-size-base);
   width: 100%;
   box-sizing: border-box;
@@ -166,20 +166,20 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 }
 
 .contactPane .contact-toolbar a {
-  margin: 0.3em;
+  margin: 0.3rem;
 }
 
 .contactPane .contact-toolbar a img {
-  width: 1.3em;
-  height: 1em;
+  width: 1.3rem;
+  height: 1rem;
   margin: 0;
 }
 
 .contact-toolbar .deleteButton {
   margin-left: auto; /* keeps delete icon on the right */
-  margin-right: 0.2em;
-  width: 1em;
-  height: 1em;
+  margin-right: var(--spacing-xxxs, 0.2rem);
+  width: var(--icon-xxs, 1rem);
+  height: var(--icon-xxs, 1rem);
   float: none; /* important: prevents overlap behavior */
 }
 
@@ -203,11 +203,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   background-color: var(--color-primary);
 }
 
-/* ── Selection & visibility states ───────────────────────────── */
-
-.contactPane .group-loading {
-}
-
 /* ── Mint new address book ───────────────────────────────────── */
 
 .contactPane .claimSuccess {
@@ -217,18 +212,18 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 .contactPane {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 0;
 }
 
 .contactPane .addressBook-grid {
   display: flex;
   flex-wrap: nowrap; /* keep sections side-by-side */
   flex: 1;
-  min-width: 50%;
+  min-width: 0; /* allow it to shrink */
   align-items: stretch;
   width: 100%;
   box-sizing: border-box;
-  overflow-x: auto; /* allow horizontal scroll if needed */
+  overflow-x: hidden;
 }
 
 @media ((min-width: 500px) and (max-width: 900px)) {
@@ -240,13 +235,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   }
 }
 
-.contactPane .contactPane--narrow .addressBook-grid {
+.contactPane.contactPane--narrow .addressBook-grid {
   flex-direction: column !important;
-  flex-wrap: wrap !important;
+  flex-wrap: nowrap !important;
+  min-width: 0 !important;
+  overflow-x: hidden !important;
 }
 
-.contactPane .contactPane--narrow .addressBookSection,
-.contactPane .contactPane--narrow .detailSection {
+.contactPane.contactPane--narrow .addressBookSection,
+.contactPane.contactPane--narrow .detailSection {
   flex: 1 1 100% !important;
   max-width: 100% !important;
   min-width: 0 !important;
@@ -275,11 +272,20 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
     min-width: 0 !important;
   }
 
+
   .contactPane .addressBookSection {
-    max-height: 60vh !important;
+    max-height: none !important;
     min-height: auto !important;
-    overflow-y: auto !important;
+    overflow-y: visible !important;
     padding-bottom: var(--spacing-lg) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    height: auto !important;
+  }
+
+  .contactPane .peopleSection ul {
+    max-height: 50vh;
+    overflow-y: auto;
   }
 
   .contactPane .detailSection {
@@ -303,11 +309,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
     box-sizing: border-box !important;
   }
 
-  /* Small-screen larger text and spacing */
-  .contactPane,
-  .contactPane * {
-    font-size: 2rem !important;
-  }
+  /* Keep a normal mobile text scale while preserving comfortable touch targets */
+  /* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.
+   .contactPane,
+   .contactPane * {
+    font-size: 1.5rem !important;
+  } */
 
   .contactPane .actionButton,
   .contactPane .searchInput,
@@ -315,8 +322,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   .contactPane .buttonSection button,
   .contactPane .groupButtonsList button {
     min-height: calc(var(--min-touch-target) + 0.5em) !important;
-    font-size: 2rem !important;
-    padding: 1em 1em !important;
+    font-size: 1.5rem !important;
+    padding: 0.875em 1em !important;
   }
 
   .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"],
@@ -330,7 +337,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 
 
 /* Card Section Background */
-.contactPane .section-bg {
+.contactPane .addressBookSection.section-bg {
   background: var(--color-section-bg);
   padding: var(--spacing-md);
   box-sizing: border-box;
@@ -355,6 +362,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 
 /* ── Button section: horizontal scrollable row ──────────────── */
 
+
 .contactPane .buttonSection {
   display: flex;
   flex-wrap: nowrap;
@@ -368,6 +376,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
   margin-bottom: 0;
 }
 
+@media (max-width: 1000px) {
+  .contactPane .buttonSection {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--color-section-bg);
+    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);
+  }
+}
+
 .contactPane .buttonSection::-webkit-scrollbar {
   height: 6px;
 }
@@ -544,7 +562,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 
 .contactPane .dottedHr {
   border: none;
-  border-top: 1px dotted var(--color-text-muted);
+  border-top: var(--border-width-sm, 0.1rem) dotted var(--color-text-muted);
   margin: 0;
 }
 
@@ -575,7 +593,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 }
 
 .contactPane .peopleSection li {
-  border-top: 1px solid var(--color-border-pale);
+  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-pale);
   padding: var(--spacing-xs);
 }
 
@@ -588,8 +606,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 }
 
 .contactPane .personLi-avatar {
-  width: 45px;
-  height: 45px;
+  width: 2.813rem /* 45px */;
+  height: 2.813rem /* 45px */;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -597,16 +615,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
 }
 
 .contactPane .personLi-avatar .avatar-placeholder {
-  width: 36px;
-  height: 36px;
+  width: 2.25rem /* 36px */;
+  height: 2.25rem /* 36px */;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .contactPane .personLi-avatar img {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem /* 40px */;
+  height: 2.5rem /* 40px */;
   border-radius: 50%;
   object-fit: cover;
 }
@@ -633,7 +651,7 @@ ___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.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  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a {\n  margin: 0.3em;\n}\n\n.contactPane .contact-toolbar a img {\n  width: 1.3em;\n  height: 1em;\n  margin: 0;\n}\n\n.contact-toolbar .deleteButton {\n  margin-left: auto; /* keeps delete icon on the right */\n  margin-right: 0.2em;\n  width: 1em;\n  height: 1em;\n  float: none; /* important: prevents overlap behavior */\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@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: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--spacing-xs);\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n  width: 100%;\n  height: auto;\n  text-align: center;\n  border-radius: var(--border-radius-base);\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li > img.hoverControlHide,\n.contactPane .detailsSectionContent .groupButtonsList li > img[data-testid=\"deleteButtonWithCheck\"] {\n  display: block;\n  align-self: flex-end;\n  float: none !important;\n  margin: 0 !important;\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  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":""}]);
+}`, "",{"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: 0; /* allow sections to collapse when stacked */\n  box-sizing: border-box;\n  background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n  flex: 1 1 auto;\n  min-height: 12.5rem; /* 200px */\n  padding: var(--spacing-lg);\n  max-width: 56.25rem; /* 900px */\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent--wide {\n  max-width: 56.25rem; /* 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: 22.5rem; /* 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: var(--border-width-sm, 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: var(--border-width-sm, 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: 0.5rem center; /* 8px */\n  background-size: 1.25rem 1.25rem; /* 20px 20px */\n  border-radius: var(--border-radius-base);\n  padding: 0 var(--spacing-sm) 0 2.125rem; /* 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  align-items: center;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a {\n  margin: 0.3rem;\n}\n\n.contactPane .contact-toolbar a img {\n  width: 1.3rem;\n  height: 1rem;\n  margin: 0;\n}\n\n.contact-toolbar .deleteButton {\n  margin-left: auto; /* keeps delete icon on the right */\n  margin-right: var(--spacing-xxxs, 0.2rem);\n  width: var(--icon-xxs, 1rem);\n  height: var(--icon-xxs, 1rem);\n  float: none; /* important: prevents overlap behavior */\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/* ── 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: 0;\n}\n\n.contactPane .addressBook-grid {\n  display: flex;\n  flex-wrap: nowrap; /* keep sections side-by-side */\n  flex: 1;\n  min-width: 0; /* allow it to shrink */\n  align-items: stretch;\n  width: 100%;\n  box-sizing: border-box;\n  overflow-x: hidden;\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: nowrap !important;\n  min-width: 0 !important;\n  overflow-x: hidden !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\n  .contactPane .addressBookSection {\n    max-height: none !important;\n    min-height: auto !important;\n    overflow-y: visible !important;\n    padding-bottom: var(--spacing-lg) !important;\n    display: flex !important;\n    flex-direction: column !important;\n    height: auto !important;\n  }\n\n  .contactPane .peopleSection ul {\n    max-height: 50vh;\n    overflow-y: auto;\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  /* Keep a normal mobile text scale while preserving comfortable touch targets */\n  /* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.\n   .contactPane,\n   .contactPane * {\n    font-size: 1.5rem !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: 1.5rem !important;\n    padding: 0.875em 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 .addressBookSection.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\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@media (max-width: 1000px) {\n  .contactPane .buttonSection {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background: var(--color-section-bg);\n    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);\n  }\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: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--spacing-xs);\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n  width: 100%;\n  height: auto;\n  text-align: center;\n  border-radius: var(--border-radius-base);\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li > img.hoverControlHide,\n.contactPane .detailsSectionContent .groupButtonsList li > img[data-testid=\"deleteButtonWithCheck\"] {\n  display: block;\n  align-self: flex-end;\n  float: none !important;\n  margin: 0 !important;\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  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: var(--border-width-sm, 0.1rem) 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: var(--border-width-sm, 0.1rem) 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: 2.813rem /* 45px */;\n  height: 2.813rem /* 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: 2.25rem /* 36px */;\n  height: 2.25rem /* 36px */;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n  width: 2.5rem /* 40px */;\n  height: 2.5rem /* 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___);
 
@@ -678,7 +696,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
    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;
+  min-width: 4rem !important;
   justify-content: space-between !important;
 }
 
@@ -739,10 +757,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
 }
 
 /* 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;
+.contactPane img[src\$="red.svg"],
+.contactPane img[src\$="go-to-this.png"],
+.individualPane img[src\$="red.svg"],
+.individualPane img[src\$="go-to-this.png"] {
+  width: 1.2rem !important;
+  height: 1.2rem !important;
   max-width: none !important;
   max-height: none !important;
   object-fit: contain;
@@ -771,8 +791,8 @@ img[src\$="go-to-this.png"] {
 }
 
 .contactPane .detailSection .detailsSectionContent img[title="Continue"] {
-  width: 2em !important;
-  height: 2em !important;
+  width: var(--icon-base, 2rem) !important;
+  height: var(--icon-base, 2rem) !important;
 }
 
 /* Allow “Continue” buttons inside contactFormContainer to be visible. */
@@ -806,7 +826,7 @@ img[src\$="go-to-this.png"] {
   font: inherit;
   color: var(--color-text);
   background-color: var(--color-card-bg) !important;
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm) solid var(--color-border-pale);
   margin-left: 0 !important;
   margin-right: 0 !important;
 }
@@ -840,7 +860,7 @@ img[src\$="go-to-this.png"] {
   font: inherit;
   color: var(--color-text);
   background-color: var(--color-card-bg) !important;
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm) solid var(--color-border-pale);
 }
 
 .individualPane input[type="date"],
@@ -977,7 +997,7 @@ img[src\$="go-to-this.png"] {
 
 .individualPane .choiceBox .choiceBox-selectBox select,
 .contactPane .choiceBox .choiceBox-selectBox select {
-  margin-left: 2.1em !important;
+  margin-left: 2.1rem !important;
 }
 
 /* for the Resume orga details */
@@ -986,7 +1006,7 @@ img[src\$="go-to-this.png"] {
 .contactPane .classifierBox .classifierBox-label {
   margin-right: 0;
   padding-left: var(--spacing-xxs);
-  width: 8em;
+  width: 8rem;
   padding: var(--spacing-xxs);
   vertical-align: middle;
 }
@@ -1144,8 +1164,8 @@ img[src\$="go-to-this.png"] {
 .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
   position: absolute !important;
   right: var(--spacing-xxxs) !important;
-  width: 1.5em !important;
-  height: 1.5em !important;
+  width: var(--icon-xs, 1.5rem) !important;
+  height: var(--icon-xs, 1.5rem) !important;
   display: none !important;
   align-items: center;
   justify-content: center;
@@ -1167,7 +1187,7 @@ img[src\$="go-to-this.png"] {
   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.contactPane .detailSection .detailsSectionContent button:has(> img[title=\"Continue\"]),\n.contactPane .detailSection .detailsSectionContent img[title=\"Continue\"] {\n  display: inline-flex !important;\n}\n\n.contactPane .detailSection .detailsSectionContent img[title=\"Continue\"] {\n  width: 2em !important;\n  height: 2em !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":""}]);
+}`, "",{"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: 4rem !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. */\n.contactPane img[src$=\"red.svg\"],\n.contactPane img[src$=\"go-to-this.png\"],\n.individualPane img[src$=\"red.svg\"],\n.individualPane img[src$=\"go-to-this.png\"] {\n  width: 1.2rem !important;\n  height: 1.2rem !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.contactPane .detailSection .detailsSectionContent button:has(> img[title=\"Continue\"]),\n.contactPane .detailSection .detailsSectionContent img[title=\"Continue\"] {\n  display: inline-flex !important;\n}\n\n.contactPane .detailSection .detailsSectionContent img[title=\"Continue\"] {\n  width: var(--icon-base, 2rem) !important;\n  height: var(--icon-base, 2rem) !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: var(--border-width-sm) 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: var(--border-width-sm) 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.1rem !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: 8rem;\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: var(--icon-xs, 1.5rem) !important;\n  height: var(--icon-xs, 1.5rem) !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___);
 
@@ -1215,7 +1235,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  max-width: 256px;
+  max-width: 16rem; /* 256px */
 }
 
 .contactPane .group-membership-item > button {
@@ -1236,13 +1256,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
 }
 
 .contactPane .group-membership-item .group-membership-toolbar a {
-  margin: 0.3em;
-  margin-left: 1em;
+  margin: 0.3rem;
+  margin-left: 1rem;
 }
 
 .contactPane .group-membership-item .group-membership-toolbar a img {
-  width: 1.3em;
-  height: 1em;
+  width: 1.3rem;
+  height: 1rem;
   margin: 0;
 }
 
@@ -1265,8 +1285,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
   top: 0 !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
-  width: min(90vw, 440px) !important;
-  min-width: 280px !important;
+  width: min(90vw, 27.5rem) !important; /* 440px */
+  min-width: 17.5rem !important; /* 280px */
   max-width: 90vw !important;
   display: flex;
   align-items: center;
@@ -1277,7 +1297,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
 .contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div {
   position: relative !important;
   top: auto !important;
-  min-width: 280px !important;
+  min-width: 17.5rem !important; /* 280px */ 
   background: var(--color-background);
   border-radius: var(--border-radius-full);
   padding: var(--spacing-lg);
@@ -1304,7 +1324,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
     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,mBAAmB;EACnB,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE,aAAa;EACb,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,WAAW;EACX,SAAS;AACX;;AAEA,yEAAyE;AACzE;;EAEE,sBAAsB;EACtB,+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  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 {\n  margin: 0.3em;\n  margin-left: 1em;\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  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":""}]);
+`, "",{"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,EAAE,UAAU;AAC9B;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,wCAAwC;EACxC,qBAAqB;EACrB,yBAAyB;EACzB,mCAAmC;AACrC;;AAEA,qEAAqE;AACrE;EACE,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE,cAAc;EACd,iBAAiB;AACnB;;AAEA;EACE,aAAa;EACb,YAAY;EACZ,SAAS;AACX;;AAEA,yEAAyE;AACzE;;EAEE,sBAAsB;EACtB,+BAA+B;EAC/B,6BAA6B;EAC7B,oBAAoB;AACtB;;AAEA;;EAEE,8BAA8B;AAChC;;AAEA;EACE,6BAA6B;EAC7B,iBAAiB;EACjB,oBAAoB;EACpB,sCAAsC;EACtC,oCAAoC,EAAE,UAAU;EAChD,6BAA6B,EAAE,UAAU;EACzC,0BAA0B;EAC1B,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,aAAa;AACf;;AAEA;EACE,6BAA6B;EAC7B,oBAAoB;EACpB,6BAA6B,EAAE,UAAU;EACzC,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: 16rem; /* 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  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 {\n  margin: 0.3rem;\n  margin-left: 1rem;\n}\n\n.contactPane .group-membership-item .group-membership-toolbar a img {\n  width: 1.3rem;\n  height: 1rem;\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  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, 27.5rem) !important; /* 440px */\n  min-width: 17.5rem !important; /* 280px */\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: 17.5rem !important; /* 280px */ \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___);
 
@@ -1398,7 +1418,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* CSS for the accessible modal dialog
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--color-primary);
   border-radius: var(--border-radius-base);
-  font-weight: 600;
+  font-weight: var(--font-weight-bold, 600);
   cursor: pointer;
   transition: all var(--animation-duration) ease;
 }
@@ -1408,7 +1428,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* CSS for the accessible modal dialog
   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":""}]);
+`, "",{"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,yCAAyC;EACzC,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: var(--font-weight-bold, 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___);
 
@@ -1436,7 +1456,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extrac
 /* ── Mugshot image ───────────────────────────────────────────── */
 
 .contactPane .mugshotImage {
-  max-height: 10em;
+  max-height: 10rem;
   border-radius: var(--border-radius-full);
   margin: var(--spacing-sm);
 }
@@ -1447,7 +1467,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extrac
   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":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/mugshotGallery.css"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,iBAAiB;EACjB,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: 10rem;\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___);
 
@@ -1540,70 +1560,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Shared utility variables for compon
 */
 
 /* 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 {
+/* different from mashlib .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,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/* 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":""}]);
+} */
+`, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"AAAA;;;CAGC;;AAED,2BAA2B;;AAE3B;;GAEG","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/* Utility helper classes */\n\n/* different from mashlib .btn-primary:active {\n  box-shadow: var(--box-shadow-active);\n} */\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1710,12 +1671,174 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
   white-space: pre-wrap;
 }
 
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) table td div.contactPane.namedPane {
+  display: block;
+  width: 100% !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  box-sizing: border-box;
+  container-type: inline-size;
+  container-name: nested-profile-pane;
+  margin-top: var(--spacing-sm);
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile-grid,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane #main-content.profile-grid {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--spacing-sm) !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main {
+  padding: var(--spacing-sm) !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="false"] .profileSectionCollapsible__content {
+  display: none !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__toggle {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  min-height: auto !important;
+  min-width: auto !important;
+  padding: var(--spacing-xxs) !important;
+  border: none !important;
+  background: none !important;
+  color: var(--color-text) !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="true"] .profileSectionCollapsible__chevron {
+  transform: rotate(180deg);
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editLabel {
+  display: none !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editIcon {
+  display: inline !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem {
+  display: flex !important;
+  align-items: center !important;
+  flex: 0 0 auto !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem a {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex: 0 0 auto !important;
+  width: auto !important;
+  min-width: var(--min-touch-target) !important;
+  min-height: var(--min-touch-target) !important;
+  line-height: 0 !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialIcon {
+  display: block !important;
+  width: 40px !important;
+  height: 40px !important;
+  min-width: 40px !important;
+  min-height: 40px !important;
+  max-width: 40px !important;
+  max-height: 40px !important;
+  object-fit: contain !important;
+  flex-shrink: 0 !important;
+}
+
+@media (max-width: 1000px) {
+  .contactPane .webidControl,
+  .contactPane .webidControl table,
+  .contactPane .webidControl tbody,
+  .contactPane .webidControl tr,
+  .contactPane .webidControl td {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  .contactPane .webidControl table {
+    table-layout: fixed;
+  }
+
+  .contactPane .webidControl .personaRow--webid td {
+    vertical-align: top;
+  }
+
+  .contactPane .webidControl .contactPane,
+  .contactPane .webidControl .contactPane .addressBook-grid,
+  .contactPane .webidControl .contactPane .detailSection,
+  .contactPane .webidControl .contactPane .detailsSectionContent {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    box-sizing: border-box;
+  }
+
+  .contactPane .webidControl .contactPane .addressBook-grid {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .contactPane .webidControl .contactPane .detailSection,
+  .contactPane .webidControl .contactPane .addressBookSection {
+    flex: none !important;
+  }
+
+  .contactPane .webidControl .contactPane .detailsSectionContent,
+  .contactPane .webidControl .contactPane .detailsSectionContent--wide {
+    padding: var(--spacing-sm) !important;
+    overflow-y: visible !important;
+  }
+
+}
+
+@container nested-profile-pane (max-width: 900px) {
+  .contactPane .webidControl .profile-grid {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--spacing-sm) !important;
+  }
+
+  .contactPane .webidControl .profile-grid > * {
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  .contactPane .webidControl .profile__main,
+  .contactPane .webidControl .profile__sidebar,
+  .contactPane .webidControl .profile__section {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* ── Visibility / display helpers ────────────────────────────── */
 
 .contactPane .collapsed {
   visibility: collapse;
 }
-`, "",{"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":""}]);
+`, "",{"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;;EAEE,cAAc;EACd,sBAAsB;EACtB,0BAA0B;EAC1B,uBAAuB;EACvB,sBAAsB;EACtB,2BAA2B;EAC3B,mCAAmC;EACnC,6BAA6B;AAC/B;;AAEA;;EAEE,wBAAwB;EACxB,iCAAiC;EACjC,iCAAiC;AACnC;;AAEA;;;EAGE,sBAAsB;EACtB,uBAAuB;EACvB,0BAA0B;EAC1B,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;;;EAGE,qCAAqC;AACvC;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,+BAA+B;EAC/B,mBAAmB;EACnB,uBAAuB;EACvB,2BAA2B;EAC3B,0BAA0B;EAC1B,sCAAsC;EACtC,uBAAuB;EACvB,2BAA2B;EAC3B,mCAAmC;AACrC;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,0BAA0B;AAC5B;;AAEA;EACE,wBAAwB;EACxB,8BAA8B;EAC9B,yBAAyB;AAC3B;;AAEA;EACE,+BAA+B;EAC/B,8BAA8B;EAC9B,kCAAkC;EAClC,yBAAyB;EACzB,sBAAsB;EACtB,6CAA6C;EAC7C,8CAA8C;EAC9C,yBAAyB;AAC3B;;AAEA;EACE,yBAAyB;EACzB,sBAAsB;EACtB,uBAAuB;EACvB,0BAA0B;EAC1B,2BAA2B;EAC3B,0BAA0B;EAC1B,2BAA2B;EAC3B,8BAA8B;EAC9B,yBAAyB;AAC3B;;AAEA;EACE;;;;;IAKE,WAAW;IACX,eAAe;IACf,YAAY;IACZ,sBAAsB;EACxB;;EAEA;IACE,mBAAmB;EACrB;;EAEA;IACE,mBAAmB;EACrB;;EAEA;;;;IAIE,sBAAsB;IACtB,0BAA0B;IAC1B,uBAAuB;IACvB,sBAAsB;EACxB;;EAEA;IACE,iCAAiC;IACjC,4BAA4B;EAC9B;;EAEA;;IAEE,qBAAqB;EACvB;;EAEA;;IAEE,qCAAqC;IACrC,8BAA8B;EAChC;;AAEF;;AAEA;EACE;IACE,wBAAwB;IACxB,iCAAiC;IACjC,iCAAiC;EACnC;;EAEA;IACE,uBAAuB;IACvB,0BAA0B;EAC5B;;EAEA;;;IAGE,sBAAsB;IACtB,uBAAuB;IACvB,0BAA0B;IAC1B,uBAAuB;EACzB;AACF;;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.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane,\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) table td div.contactPane.namedPane {\n  display: block;\n  width: 100% !important;\n  max-width: none !important;\n  min-width: 0 !important;\n  box-sizing: border-box;\n  container-type: inline-size;\n  container-name: nested-profile-pane;\n  margin-top: var(--spacing-sm);\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile-grid,\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane #main-content.profile-grid {\n  display: flex !important;\n  flex-direction: column !important;\n  gap: var(--spacing-sm) !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main,\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section {\n  width: 100% !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section,\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main {\n  padding: var(--spacing-sm) !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded=\"false\"] .profileSectionCollapsible__content {\n  display: none !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__toggle {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  min-height: auto !important;\n  min-width: auto !important;\n  padding: var(--spacing-xxs) !important;\n  border: none !important;\n  background: none !important;\n  color: var(--color-text) !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded=\"true\"] .profileSectionCollapsible__chevron {\n  transform: rotate(180deg);\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editLabel {\n  display: none !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editIcon {\n  display: inline !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem {\n  display: flex !important;\n  align-items: center !important;\n  flex: 0 0 auto !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem a {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  flex: 0 0 auto !important;\n  width: auto !important;\n  min-width: var(--min-touch-target) !important;\n  min-height: var(--min-touch-target) !important;\n  line-height: 0 !important;\n}\n\n.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialIcon {\n  display: block !important;\n  width: 40px !important;\n  height: 40px !important;\n  min-width: 40px !important;\n  min-height: 40px !important;\n  max-width: 40px !important;\n  max-height: 40px !important;\n  object-fit: contain !important;\n  flex-shrink: 0 !important;\n}\n\n@media (max-width: 1000px) {\n  .contactPane .webidControl,\n  .contactPane .webidControl table,\n  .contactPane .webidControl tbody,\n  .contactPane .webidControl tr,\n  .contactPane .webidControl td {\n    width: 100%;\n    max-width: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n  }\n\n  .contactPane .webidControl table {\n    table-layout: fixed;\n  }\n\n  .contactPane .webidControl .personaRow--webid td {\n    vertical-align: top;\n  }\n\n  .contactPane .webidControl .contactPane,\n  .contactPane .webidControl .contactPane .addressBook-grid,\n  .contactPane .webidControl .contactPane .detailSection,\n  .contactPane .webidControl .contactPane .detailsSectionContent {\n    width: 100% !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n    box-sizing: border-box;\n  }\n\n  .contactPane .webidControl .contactPane .addressBook-grid {\n    flex-direction: column !important;\n    flex-wrap: nowrap !important;\n  }\n\n  .contactPane .webidControl .contactPane .detailSection,\n  .contactPane .webidControl .contactPane .addressBookSection {\n    flex: none !important;\n  }\n\n  .contactPane .webidControl .contactPane .detailsSectionContent,\n  .contactPane .webidControl .contactPane .detailsSectionContent--wide {\n    padding: var(--spacing-sm) !important;\n    overflow-y: visible !important;\n  }\n\n}\n\n@container nested-profile-pane (max-width: 900px) {\n  .contactPane .webidControl .profile-grid {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: var(--spacing-sm) !important;\n  }\n\n  .contactPane .webidControl .profile-grid > * {\n    min-width: 0 !important;\n    max-width: 100% !important;\n  }\n\n  .contactPane .webidControl .profile__main,\n  .contactPane .webidControl .profile__sidebar,\n  .contactPane .webidControl .profile__section {\n    width: 100% !important;\n    min-width: 0 !important;\n    max-width: 100% !important;\n    overflow-wrap: anywhere;\n  }\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___);
 
@@ -2606,7 +2729,7 @@ async function renderIdControl (person, dataBrowserContext, options) {
   options = options || {}
   options.editable = kb.updater.editable(person.doc().uri, kb)
   const div = dom.createElement('div')
-  div.classList.add('webidControl')
+  div.classList.add('webidControl', 'webidControl--mobile')
 
   if (getPersonas(kb, person).length === 0 && !options.editable) {
     div.classList.add('hidden')
@@ -2969,58 +3092,59 @@ function isAWebID (subject) {
 
 // Make the layout stack vertically when the containing pane gets narrow
 function setupResponsiveStacking (paneDiv, breakpoint = 900) {
-  function updateFromPane () {
+  function updateResponsiveState () {
     const width = paneDiv.getBoundingClientRect().width
-    const isNarrow = width <= breakpoint
-    // Always track viewport fallback even if pane is not in DOM yet
+    const paneNarrow = width > 0 ? width <= breakpoint : false
     const viewportNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
       ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
       : false
+    const isNarrow = width > 0 ? paneNarrow : viewportNarrow
 
     if (width > 0) {
-      paneDiv.classList.toggle('contactPane--narrow', isNarrow)
       paneDiv.dataset.paneWidth = Math.round(width).toString()
-      paneDiv.dataset.paneNarrow = isNarrow ? 'true' : 'false'
+      paneDiv.dataset.paneNarrow = paneNarrow ? '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.classList.toggle('contactPane--narrow', isNarrow)
     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
+  // Debounce utility
+  function debounce (fn, delay) {
+    let timer = null
+    return function (...args) {
+      clearTimeout(timer)
+      timer = setTimeout(() => fn.apply(this, args), delay)
+    }
   }
 
+  const debouncedUpdate = debounce(() => {
+    updateResponsiveState()
+  }, 100)
+
   const resizeObserverAvailable = typeof ResizeObserver !== 'undefined'
   if (resizeObserverAvailable) {
-    const ro = new ResizeObserver(() => updateFromPane())
+    const ro = new ResizeObserver(() => {
+      debouncedUpdate()
+    })
     ro.observe(paneDiv)
   }
 
   if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
-    window.addEventListener('resize', () => {
-      updateFromPane()
-      updateFromViewport()
-    })
+    window.addEventListener('resize', debouncedUpdate)
   }
 
   // Initial state
   function ensureInitialUpdate () {
     // Call both updaters for their side effects (setting dataset attributes).
     // Return values are intentionally discarded — ESLint-safe.
-    updateFromPane()
-    updateFromViewport()
+    updateResponsiveState()
     // If we are not in the document yet, re-run until connected
     if (!paneDiv.isConnected) {
       requestAnimationFrame(ensureInitialUpdate)
@@ -5200,26 +5324,27 @@ function toolsPane_toolsPane (
             }
             toolsPane_log(logSpace, '  Compact group members ' + stats.groupMembers2.length)
 
-            if (
-              external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_.keepThisCodeForLaterButDisableFerossConstantConditionPolice
-            ) {
+            // LINT NOTE: Block below disabled to fix 'no-constant-condition' ESLint error. Restore or refactor if needed.
+            /*
+            if (false) {
               // Don't inspect as seems groups membership is complete
               for (let i = 0; i < stats.groupMembers.length; i++) {
                 const card = stats.groupMembers[i]
                 if (stats.uniquesSet[card.uri]) {
                   // inUniques += 1
                 } else {
-                  toolsPane_log(logSpace, '  Not in uniques: ' + card)
+                  log(logSpace, '  Not in uniques: ' + card)
                   stats.groupProblems.push(card)
                   if (stats.duplicateSet[card.uri]) {
-                    toolsPane_log(logSpace, '    ** IN duplicates alas:' + card)
+                    log(logSpace, '    ** IN duplicates alas:' + card)
                   } else {
-                    toolsPane_log(logSpace, '   **** WTF?')
+                    log(logSpace, '   **** WTF?')
                   }
                 }
               }
-              toolsPane_log(logSpace, 'Problem contacts: ' + stats.groupProblems.length)
-            } // if
+              log(logSpace, 'Problem contacts: ' + stats.groupProblems.length)
+            }
+            */
             resolve(true)
           })
         } //  checkGroupMembers
@@ -5713,14 +5838,20 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
 
   name: 'contact',
 
+  global: false,
+
   // Does the subject deserve a contact pane?
   label: function (subject, context) {
     const t = context.session.store.findTypeURIs(subject)
-    if (t[contactsPane_ns.vcard('Individual').uri]) return 'Contact'
+    // with the new design we only display Address Books
+    // individuals are rendered through the profile-pane but not Organizations
     if (t[contactsPane_ns.vcard('Organization').uri]) return 'Contact'
-    if (t[contactsPane_ns.foaf('Person').uri]) return 'Person'
-    if (t[contactsPane_ns.schema('Person').uri]) return 'Person'
-    if (t[contactsPane_ns.vcard('Group').uri]) return 'Group'
+    /*
+    if (t[ns.vcard('Individual').uri]) return 'Contact'
+    if (t[ns.foaf('Person').uri]) return 'Person'
+    if (t[ns.schema('Person').uri]) return 'Person'
+    if (t[ns.vcard('Group').uri]) return 'Group'
+    */
     if (t[contactsPane_ns.vcard('AddressBook').uri]) return 'Address book'
     return null // No, under other circumstances
   },