contacts-pane 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/contactsPane.js +293 -164
  2. package/dist/contactsPane.js.map +1 -1
  3. package/dist/contactsPane.min.js +1 -1
  4. package/dist/contactsPane.min.js.map +1 -1
  5. package/dist/styles/contactsPane.css +60 -42
  6. package/dist/styles/contactsRDFFormsEnforced.css +11 -11
  7. package/dist/styles/groupMembership.css +8 -8
  8. package/dist/styles/localUtils.css +1 -1
  9. package/dist/styles/mugshotGallery.css +1 -1
  10. package/dist/styles/utilities.css +2 -61
  11. package/dist/styles/webidControl.css +162 -0
  12. package/package.json +4 -1
package/dist/contactsPane.js CHANGED
@@ -53,22 +53,22 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
53
53
  flex-direction: column;
54
54
  align-items: stretch;
55
55
  flex: 1 1 0; /* allow it to grow but not force wrap */
56
- min-width: 300px;
56
+ min-width: 0; /* allow sections to collapse when stacked */
57
57
  box-sizing: border-box;
58
58
  background: var(--color-section-bg);
59
59
  }
60
60
 
61
61
  .contactPane .detailsSectionContent {
62
62
  flex: 1 1 auto;
63
- min-height: 200px;
63
+ min-height: 12.5rem; /* 200px */
64
64
  padding: var(--spacing-lg);
65
- max-width: 900px;
65
+ max-width: 56.25rem; /* 900px */
66
66
  width: 100%;
67
67
  box-sizing: border-box;
68
68
  }
69
69
 
70
70
  .contactPane .detailsSectionContent--wide {
71
- max-width: 900px;
71
+ max-width: 56.25rem; /* 900px */
72
72
  }
73
73
 
74
74
  .contactPane .cardFooter {
@@ -90,7 +90,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
90
90
  display: flex;
91
91
  flex-direction: column;
92
92
  gap: var(--spacing-sm);
93
- max-width: 360px;
93
+ max-width: 22.5rem; /* 360px */
94
94
  }
95
95
 
96
96
  .contactPane .contactTypeChooser h3 {
@@ -100,7 +100,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
100
100
 
101
101
  .contactPane .contactTypeSelect {
102
102
  height: var(--min-touch-target);
103
- border: 1px solid var(--color-border-pale);
103
+ border: var(--border-width-sm, 1px) solid var(--color-border-pale);
104
104
  border-radius: var(--border-radius-base);
105
105
  padding: 0 var(--spacing-sm);
106
106
  font-size: var(--font-size-sm);
@@ -120,14 +120,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
120
120
 
121
121
  .contactPane .searchInput {
122
122
  height: var(--min-touch-target);
123
- border: 1px solid var(--color-border-pale);
123
+ border: var(--border-width-sm, 1px) solid var(--color-border-pale);
124
124
  background-color: var(--color-section-bg);
125
125
  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});
126
126
  background-repeat: no-repeat;
127
- background-position: 8px center;
128
- background-size: 20px 20px;
127
+ background-position: 0.5rem center; /* 8px */
128
+ background-size: 1.25rem 1.25rem; /* 20px 20px */
129
129
  border-radius: var(--border-radius-base);
130
- padding: 0 var(--spacing-sm) 0 34px;
130
+ padding: 0 var(--spacing-sm) 0 2.125rem; /* 34px */
131
131
  font-size: var(--font-size-base);
132
132
  width: 100%;
133
133
  box-sizing: border-box;
@@ -166,20 +166,20 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
166
166
  }
167
167
 
168
168
  .contactPane .contact-toolbar a {
169
- margin: 0.3em;
169
+ margin: 0.3rem;
170
170
  }
171
171
 
172
172
  .contactPane .contact-toolbar a img {
173
- width: 1.3em;
174
- height: 1em;
173
+ width: 1.3rem;
174
+ height: 1rem;
175
175
  margin: 0;
176
176
  }
177
177
 
178
178
  .contact-toolbar .deleteButton {
179
179
  margin-left: auto; /* keeps delete icon on the right */
180
- margin-right: 0.2em;
181
- width: 1em;
182
- height: 1em;
180
+ margin-right: var(--spacing-xxxs, 0.2rem);
181
+ width: var(--icon-xxs, 1rem);
182
+ height: var(--icon-xxs, 1rem);
183
183
  float: none; /* important: prevents overlap behavior */
184
184
  }
185
185
 
@@ -203,11 +203,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
203
203
  background-color: var(--color-primary);
204
204
  }
205
205
 
206
- /* ── Selection & visibility states ───────────────────────────── */
207
-
208
- .contactPane .group-loading {
209
- }
210
-
211
206
  /* ── Mint new address book ───────────────────────────────────── */
212
207
 
213
208
  .contactPane .claimSuccess {
@@ -217,18 +212,18 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
217
212
  .contactPane {
218
213
  display: flex;
219
214
  flex-direction: column;
220
- min-height: 100vh;
215
+ min-height: 0;
221
216
  }
222
217
 
223
218
  .contactPane .addressBook-grid {
224
219
  display: flex;
225
220
  flex-wrap: nowrap; /* keep sections side-by-side */
226
221
  flex: 1;
227
- min-width: 50%;
222
+ min-width: 0; /* allow it to shrink */
228
223
  align-items: stretch;
229
224
  width: 100%;
230
225
  box-sizing: border-box;
231
- overflow-x: auto; /* allow horizontal scroll if needed */
226
+ overflow-x: hidden;
232
227
  }
233
228
 
234
229
  @media ((min-width: 500px) and (max-width: 900px)) {
@@ -240,13 +235,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
240
235
  }
241
236
  }
242
237
 
243
- .contactPane .contactPane--narrow .addressBook-grid {
238
+ .contactPane.contactPane--narrow .addressBook-grid {
244
239
  flex-direction: column !important;
245
- flex-wrap: wrap !important;
240
+ flex-wrap: nowrap !important;
241
+ min-width: 0 !important;
242
+ overflow-x: hidden !important;
246
243
  }
247
244
 
248
- .contactPane .contactPane--narrow .addressBookSection,
249
- .contactPane .contactPane--narrow .detailSection {
245
+ .contactPane.contactPane--narrow .addressBookSection,
246
+ .contactPane.contactPane--narrow .detailSection {
250
247
  flex: 1 1 100% !important;
251
248
  max-width: 100% !important;
252
249
  min-width: 0 !important;
@@ -275,11 +272,20 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
275
272
  min-width: 0 !important;
276
273
  }
277
274
 
275
+
278
276
  .contactPane .addressBookSection {
279
- max-height: 60vh !important;
277
+ max-height: none !important;
280
278
  min-height: auto !important;
281
- overflow-y: auto !important;
279
+ overflow-y: visible !important;
282
280
  padding-bottom: var(--spacing-lg) !important;
281
+ display: flex !important;
282
+ flex-direction: column !important;
283
+ height: auto !important;
284
+ }
285
+
286
+ .contactPane .peopleSection ul {
287
+ max-height: 50vh;
288
+ overflow-y: auto;
283
289
  }
284
290
 
285
291
  .contactPane .detailSection {
@@ -304,10 +310,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
304
310
  }
305
311
 
306
312
  /* Keep a normal mobile text scale while preserving comfortable touch targets */
307
- .contactPane,
308
- .contactPane * {
313
+ /* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.
314
+ .contactPane,
315
+ .contactPane * {
309
316
  font-size: 1.5rem !important;
310
- }
317
+ } */
311
318
 
312
319
  .contactPane .actionButton,
313
320
  .contactPane .searchInput,
@@ -330,7 +337,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
330
337
 
331
338
 
332
339
  /* Card Section Background */
333
- .contactPane .section-bg {
340
+ .contactPane .addressBookSection.section-bg {
334
341
  background: var(--color-section-bg);
335
342
  padding: var(--spacing-md);
336
343
  box-sizing: border-box;
@@ -355,6 +362,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
355
362
 
356
363
  /* ── Button section: horizontal scrollable row ──────────────── */
357
364
 
365
+
358
366
  .contactPane .buttonSection {
359
367
  display: flex;
360
368
  flex-wrap: nowrap;
@@ -368,6 +376,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
368
376
  margin-bottom: 0;
369
377
  }
370
378
 
379
+ @media (max-width: 1000px) {
380
+ .contactPane .buttonSection {
381
+ position: sticky;
382
+ top: 0;
383
+ z-index: 2;
384
+ background: var(--color-section-bg);
385
+ box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);
386
+ }
387
+ }
388
+
371
389
  .contactPane .buttonSection::-webkit-scrollbar {
372
390
  height: 6px;
373
391
  }
@@ -544,7 +562,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
544
562
 
545
563
  .contactPane .dottedHr {
546
564
  border: none;
547
- border-top: 1px dotted var(--color-text-muted);
565
+ border-top: var(--border-width-sm, 0.1rem) dotted var(--color-text-muted);
548
566
  margin: 0;
549
567
  }
550
568
 
@@ -575,7 +593,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
575
593
  }
576
594
 
577
595
  .contactPane .peopleSection li {
578
- border-top: 1px solid var(--color-border-pale);
596
+ border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-pale);
579
597
  padding: var(--spacing-xs);
580
598
  }
581
599
 
@@ -588,8 +606,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
588
606
  }
589
607
 
590
608
  .contactPane .personLi-avatar {
591
- width: 45px;
592
- height: 45px;
609
+ width: 2.813rem /* 45px */;
610
+ height: 2.813rem /* 45px */;
593
611
  flex-shrink: 0;
594
612
  display: flex;
595
613
  align-items: center;
@@ -597,16 +615,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
597
615
  }
598
616
 
599
617
  .contactPane .personLi-avatar .avatar-placeholder {
600
- width: 36px;
601
- height: 36px;
618
+ width: 2.25rem /* 36px */;
619
+ height: 2.25rem /* 36px */;
602
620
  display: flex;
603
621
  align-items: center;
604
622
  justify-content: center;
605
623
  }
606
624
 
607
625
  .contactPane .personLi-avatar img {
608
- width: 40px;
609
- height: 40px;
626
+ width: 2.5rem /* 40px */;
627
+ height: 2.5rem /* 40px */;
610
628
  border-radius: 50%;
611
629
  object-fit: cover;
612
630
  }
@@ -633,7 +651,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
633
651
 
634
652
  .contactPane .personLi--error {
635
653
  opacity: 0.5;
636
- }`, "",{"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 /* Keep a normal mobile text scale while preserving comfortable touch targets */\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 .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":""}]);
654
+ }`, "",{"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":""}]);
637
655
  // Exports
638
656
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
639
657
 
@@ -678,7 +696,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
678
696
  Make the cell grow and keep the delete icon right-aligned (no overlap). */
679
697
  .contactPane td.hoverControl:has(> a) {
680
698
  width: auto !important;
681
- min-width: 4em !important;
699
+ min-width: 4rem !important;
682
700
  justify-content: space-between !important;
683
701
  }
684
702
 
@@ -743,8 +761,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
743
761
  .contactPane img[src\$="go-to-this.png"],
744
762
  .individualPane img[src\$="red.svg"],
745
763
  .individualPane img[src\$="go-to-this.png"] {
746
- width: 1.2em !important;
747
- height: 1.2em !important;
764
+ width: 1.2rem !important;
765
+ height: 1.2rem !important;
748
766
  max-width: none !important;
749
767
  max-height: none !important;
750
768
  object-fit: contain;
@@ -773,8 +791,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
773
791
  }
774
792
 
775
793
  .contactPane .detailSection .detailsSectionContent img[title="Continue"] {
776
- width: 2em !important;
777
- height: 2em !important;
794
+ width: var(--icon-base, 2rem) !important;
795
+ height: var(--icon-base, 2rem) !important;
778
796
  }
779
797
 
780
798
  /* Allow “Continue” buttons inside contactFormContainer to be visible. */
@@ -808,7 +826,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
808
826
  font: inherit;
809
827
  color: var(--color-text);
810
828
  background-color: var(--color-card-bg) !important;
811
- border: 1px solid var(--color-border-pale);
829
+ border: var(--border-width-sm) solid var(--color-border-pale);
812
830
  margin-left: 0 !important;
813
831
  margin-right: 0 !important;
814
832
  }
@@ -842,7 +860,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
842
860
  font: inherit;
843
861
  color: var(--color-text);
844
862
  background-color: var(--color-card-bg) !important;
845
- border: 1px solid var(--color-border-pale);
863
+ border: var(--border-width-sm) solid var(--color-border-pale);
846
864
  }
847
865
 
848
866
  .individualPane input[type="date"],
@@ -979,7 +997,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
979
997
 
980
998
  .individualPane .choiceBox .choiceBox-selectBox select,
981
999
  .contactPane .choiceBox .choiceBox-selectBox select {
982
- margin-left: 2.1em !important;
1000
+ margin-left: 2.1rem !important;
983
1001
  }
984
1002
 
985
1003
  /* for the Resume orga details */
@@ -988,7 +1006,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
988
1006
  .contactPane .classifierBox .classifierBox-label {
989
1007
  margin-right: 0;
990
1008
  padding-left: var(--spacing-xxs);
991
- width: 8em;
1009
+ width: 8rem;
992
1010
  padding: var(--spacing-xxs);
993
1011
  vertical-align: middle;
994
1012
  }
@@ -1146,8 +1164,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1146
1164
  .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
1147
1165
  position: absolute !important;
1148
1166
  right: var(--spacing-xxxs) !important;
1149
- width: 1.5em !important;
1150
- height: 1.5em !important;
1167
+ width: var(--icon-xs, 1.5rem) !important;
1168
+ height: var(--icon-xs, 1.5rem) !important;
1151
1169
  display: none !important;
1152
1170
  align-items: center;
1153
1171
  justify-content: center;
@@ -1169,7 +1187,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1169
1187
  right: var(--spacing-xxxs) !important;
1170
1188
  left: auto !important;
1171
1189
  transform: translateY(-50%) !important;
1172
- }`, "",{"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. */\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.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":""}]);
1190
+ }`, "",{"version":3,"sources":["webpack://./src/styles/contactsRDFFormsEnforced.css"],"names":[],"mappings":"AAAA,kBAAkB;;AAElB,4DAA4D;AAC5D;;EAEE,mBAAmB;EACnB,aAAa;AACf;;AAEA;;EAEE,sBAAsB;AACxB;;AAEA;;EAEE,kBAAkB;AACpB;;AAEA;4EAC4E;AAC5E;EACE,sBAAsB;EACtB,0BAA0B;EAC1B,yCAAyC;AAC3C;;AAEA;EACE,cAAc;EACd,YAAY;EACZ,uBAAuB;EACvB,sBAAsB;EACtB,mBAAmB;AACrB;;AAEA;;EAEE,wCAAwC;EACxC,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;EAC3B,sCAAsC;EACtC,mCAAmC;EACnC,kCAAkC;EAClC,eAAe;EACf,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;EACnB,+BAA+B;AACjC;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;;EAEE,+BAA+B;AACjC;;AAEA;;EAEE,oDAAoD;AACtD;;AAEA;;EAEE,oDAAoD;EACpD,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;EAC3B,2BAA2B;EAC3B,4DAA4D;AAC9D;;AAEA,2FAA2F;AAC3F;;;;EAIE,wBAAwB;EACxB,yBAAyB;EACzB,0BAA0B;EAC1B,2BAA2B;EAC3B,mBAAmB;EACnB,qBAAqB;EACrB,sBAAsB;AACxB;;AAEA,4FAA4F;AAC5F;;EAEE,iDAAiD;EACjD,0BAA0B;EAC1B,0BAA0B;EAC1B,iCAAiC;AACnC;;AAEA,qFAAqF;AACrF;;EAEE,wBAAwB;AAC1B;;AAEA;;EAEE,+BAA+B;AACjC;;AAEA;EACE,wCAAwC;EACxC,yCAAyC;AAC3C;;AAEA,wEAAwE;AACxE;;;;EAIE,+BAA+B;AACjC;;AAEA,2EAA2E;AAC3E;;;;EAIE,+BAA+B;AACjC;;AAEA;;EAEE,mCAAmC;EACnC,kCAAkC;AACpC;;AAEA;;EAEE,UAAU;EACV,cAAc;EACd,YAAY;EACZ,sBAAsB;EACtB,aAAa;EACb,wBAAwB;EACxB,iDAAiD;EACjD,6DAA6D;EAC7D,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;;;;EAIE,gBAAgB;EAChB,wBAAwB;EACxB,iDAAiD;EACjD,6EAA6E;EAC7E,UAAU;EACV,cAAc;EACd,sBAAsB;EACtB,aAAa;EACb,wBAAwB;EACxB,iDAAiD;EACjD,oBAAoB;EACpB,6BAA6B;EAC7B,yBAAyB;EACzB,0BAA0B;EAC1B,qCAAqC;AACvC;;AAEA;;EAEE,cAAc;EACd,YAAY;EACZ,sBAAsB;EACtB,aAAa;EACb,wBAAwB;EACxB,iDAAiD;EACjD,6DAA6D;AAC/D;;AAEA;;;;;;;;;;EAUE,mCAAmC;AACrC;;AAEA;;;;;;;;;;EAUE,sEAAsE;EACtE,mBAAmB;EACnB,6CAA6C;AAC/C;;AAEA;;EAEE,UAAU;AACZ;;AAEA;;EAEE,YAAY;EACZ,gCAAgC;AAClC;;AAEA;;EAEE,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;;EAEE,qBAAqB;EACrB,sBAAsB;AACxB;;AAEA;;EAEE,YAAY;AACd;;AAEA;;;;EAIE,qBAAqB;EACrB,cAAc;AAChB;;AAEA,4DAA4D;AAC5D;;EAEE,qBAAqB;EACrB,cAAc;AAChB;;AAEA;;EAEE,UAAU;EACV,qBAAqB;EACrB,0BAA0B;AAC5B;;AAEA;;EAEE,UAAU;EACV,cAAc;EACd,sBAAsB;EACtB,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA;;EAEE,yBAAyB;EACzB,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;;EAEE,yBAAyB;EACzB,0BAA0B;AAC5B;;AAEA,oFAAoF;AACpF;;;;EAIE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,sEAAsE;AACtE;;EAEE,uBAAuB;EACvB,qBAAqB;AACvB;;AAEA,8FAA8F;AAC9F;;EAEE,aAAa;EACb,qBAAqB;EACrB,gCAAgC;AAClC;;AAEA,6CAA6C;AAC7C,yDAAyD;AACzD;;EAEE,eAAe;EACf,gCAAgC;AAClC;;AAEA;;EAEE,8BAA8B;AAChC;;AAEA,gCAAgC;AAChC,yDAAyD;AACzD;;EAEE,eAAe;EACf,gCAAgC;EAChC,WAAW;EACX,2BAA2B;EAC3B,sBAAsB;AACxB;;AAEA;;EAEE,yBAAyB;AAC3B;;AAEA;;EAEE,yBAAyB;AAC3B;;AAEA;;EAEE,yBAAyB;AAC3B;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;;;;;;;;;;EAUE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;AACxB;;AAEA;;;;;;;;;;EAUE,oBAAoB;EACpB,mBAAmB;EACnB,sBAAsB;EACtB,OAAO;EACP,YAAY;AACd;;AAEA,mDAAmD;AACnD;;EAEE,uBAAuB;AACzB;;AAEA;;EAEE,+BAA+B;EAC/B,8BAA8B;AAChC;;AAEA,2FAA2F;AAC3F;;EAEE,uBAAuB;AACzB;;AAEA;;EAEE,yCAAyC;AAC3C;;AAEA;;EAEE,sBAAsB;AACxB;;AAEA;;;;EAIE,oBAAoB;AACtB;;AAEA;;EAEE,wBAAwB;AAC1B;;AAEA;;;;;;;;;;;;;;EAcE,oDAAoD;EACpD,mBAAmB;EACnB,sCAAsC;EACtC,0EAA0E;AAC5E;;AAEA;EACE,uBAAuB;AACzB;;AAEA,uEAAuE;AACvE,gFAAgF;AAChF;wEACwE;;AAExE,mFAAmF;;AAEnF,kBAAkB;AAClB,8FAA8F;AAC9F;EACE,2BAA2B;AAC7B;;AAEA;EACE,gDAAgD;EAChD,6BAA6B;EAC7B,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB;EACxB,wBAAwB;EACxB,+BAA+B;EAC/B,qBAAqB;EACrB,8BAA8B;EAC9B,sCAAsC;EACtC,8CAA8C;EAC9C,oEAAoE;EACpE,mDAAmD;EACnD,8CAA8C;EAC9C,2CAA2C;EAC3C,kCAAkC;AACpC;;AAEA;;EAEE,6BAA6B;EAC7B,qCAAqC;EACrC,wCAAwC;EACxC,yCAAyC;EACzC,wBAAwB;EACxB,mBAAmB;EACnB,uBAAuB;EACvB,oBAAoB;EACpB,sBAAsB;EACtB,qBAAqB;AACvB;;AAEA,mCAAmC;AACnC;;EAEE,+BAA+B;AACjC;;AAEA,mHAAmH;AACnH;;EAEE,mBAAmB;EACnB,qCAAqC;EACrC,qBAAqB;EACrB,sCAAsC;AACxC","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":""}]);
1173
1191
  // Exports
1174
1192
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1175
1193
 
@@ -1217,7 +1235,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
1217
1235
  display: flex;
1218
1236
  flex-direction: column;
1219
1237
  align-items: stretch;
1220
- max-width: 256px;
1238
+ max-width: 16rem; /* 256px */
1221
1239
  }
1222
1240
 
1223
1241
  .contactPane .group-membership-item > button {
@@ -1238,13 +1256,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
1238
1256
  }
1239
1257
 
1240
1258
  .contactPane .group-membership-item .group-membership-toolbar a {
1241
- margin: 0.3em;
1242
- margin-left: 1em;
1259
+ margin: 0.3rem;
1260
+ margin-left: 1rem;
1243
1261
  }
1244
1262
 
1245
1263
  .contactPane .group-membership-item .group-membership-toolbar a img {
1246
- width: 1.3em;
1247
- height: 1em;
1264
+ width: 1.3rem;
1265
+ height: 1rem;
1248
1266
  margin: 0;
1249
1267
  }
1250
1268
 
@@ -1267,8 +1285,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
1267
1285
  top: 0 !important;
1268
1286
  left: 50% !important;
1269
1287
  transform: translateX(-50%) !important;
1270
- width: min(90vw, 440px) !important;
1271
- min-width: 280px !important;
1288
+ width: min(90vw, 27.5rem) !important; /* 440px */
1289
+ min-width: 17.5rem !important; /* 280px */
1272
1290
  max-width: 90vw !important;
1273
1291
  display: flex;
1274
1292
  align-items: center;
@@ -1279,7 +1297,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
1279
1297
  .contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div {
1280
1298
  position: relative !important;
1281
1299
  top: auto !important;
1282
- min-width: 280px !important;
1300
+ min-width: 17.5rem !important; /* 280px */
1283
1301
  background: var(--color-background);
1284
1302
  border-radius: var(--border-radius-full);
1285
1303
  padding: var(--spacing-lg);
@@ -1306,7 +1324,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ─
1306
1324
  gap: var(--spacing-sm) !important;
1307
1325
  }
1308
1326
  }
1309
- `, "",{"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":""}]);
1327
+ `, "",{"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":""}]);
1310
1328
  // Exports
1311
1329
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1312
1330
 
@@ -1400,7 +1418,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* CSS for the accessible modal dialog
1400
1418
  padding: var(--spacing-sm) var(--spacing-md);
1401
1419
  border: 1px solid var(--color-primary);
1402
1420
  border-radius: var(--border-radius-base);
1403
- font-weight: 600;
1421
+ font-weight: var(--font-weight-bold, 600);
1404
1422
  cursor: pointer;
1405
1423
  transition: all var(--animation-duration) ease;
1406
1424
  }
@@ -1410,7 +1428,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* CSS for the accessible modal dialog
1410
1428
  cursor: not-allowed;
1411
1429
  transform: none;
1412
1430
  }
1413
- `, "",{"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":""}]);
1431
+ `, "",{"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":""}]);
1414
1432
  // Exports
1415
1433
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1416
1434
 
@@ -1438,7 +1456,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extrac
1438
1456
  /* ── Mugshot image ───────────────────────────────────────────── */
1439
1457
 
1440
1458
  .contactPane .mugshotImage {
1441
- max-height: 10em;
1459
+ max-height: 10rem;
1442
1460
  border-radius: var(--border-radius-full);
1443
1461
  margin: var(--spacing-sm);
1444
1462
  }
@@ -1449,7 +1467,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extrac
1449
1467
  margin: 0 !important;
1450
1468
  border-radius: 0 !important;
1451
1469
  }
1452
- `, "",{"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":""}]);
1470
+ `, "",{"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":""}]);
1453
1471
  // Exports
1454
1472
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1455
1473
 
@@ -1542,70 +1560,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Shared utility variables for compon
1542
1560
  */
1543
1561
 
1544
1562
  /* Utility helper classes */
1545
- .hidden {
1546
- display: none !important;
1547
- }
1548
-
1549
- .btn-primary {
1550
- min-height: var(--min-touch-target);
1551
- padding: var(--spacing-sm) var(--spacing-md);
1552
- border: 1px solid var(--color-primary);
1553
- border-radius: var(--border-radius-base);
1554
- background: var(--color-primary);
1555
- color: var(--color-background);
1556
- font-weight: 600;
1557
- cursor: pointer;
1558
- transition: all var(--animation-duration) ease;
1559
- }
1560
1563
 
1561
- .btn-primary:hover {
1562
- background: color-mix(in srgb, var(--color-primary) 90%, black);
1563
- box-shadow: var(--box-shadow-hover);
1564
- }
1565
-
1566
- .btn-primary:active {
1564
+ /* different from mashlib .btn-primary:active {
1567
1565
  box-shadow: var(--box-shadow-active);
1568
- }
1569
-
1570
- .btn-primary:disabled {
1571
- opacity: var(--opacity-disabled);
1572
- cursor: not-allowed;
1573
- transform: none;
1574
- }
1575
-
1576
- .btn-secondary {
1577
- min-height: var(--min-touch-target);
1578
- padding: var(--spacing-sm) var(--spacing-md);
1579
- border: var(--border-width-thin) solid var(--color-secondary);
1580
- border-radius: var(--border-radius-base);
1581
- background: var(--color-secondary);
1582
- color: var(--color-background);
1583
- font-weight: var(--font-weight-bold);
1584
- cursor: pointer;
1585
- transition: all var(--animation-duration) ease;
1586
- text-decoration: none;
1587
- display: inline-flex;
1588
- align-items: center;
1589
- justify-content: center;
1590
- }
1591
-
1592
- .btn-secondary:hover {
1593
- background: color-mix(in srgb, var(--color-secondary) 85%, black);
1594
- }
1595
-
1596
- .btn-secondary:disabled {
1597
- opacity: var(--opacity-disabled);
1598
- cursor: not-allowed;
1599
- }
1600
-
1601
- .action-button-focus:focus,
1602
- .action-button-focus:focus-visible {
1603
- outline: 3px solid var(--color-primary) !important;
1604
- outline-offset: 2px !important;
1605
- box-shadow: 0 0 0 2px var(--color-background), var(--box-shadow-focus) !important;
1606
- z-index: 1;
1607
- }
1608
- `, "",{"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":""}]);
1566
+ } */
1567
+ `, "",{"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":""}]);
1609
1568
  // Exports
1610
1569
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1611
1570
 
@@ -1712,12 +1671,174 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
1712
1671
  white-space: pre-wrap;
1713
1672
  }
1714
1673
 
1674
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane,
1675
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) table td div.contactPane.namedPane {
1676
+ display: block;
1677
+ width: 100% !important;
1678
+ max-width: none !important;
1679
+ min-width: 0 !important;
1680
+ box-sizing: border-box;
1681
+ container-type: inline-size;
1682
+ container-name: nested-profile-pane;
1683
+ margin-top: var(--spacing-sm);
1684
+ }
1685
+
1686
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile-grid,
1687
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane #main-content.profile-grid {
1688
+ display: flex !important;
1689
+ flex-direction: column !important;
1690
+ gap: var(--spacing-sm) !important;
1691
+ }
1692
+
1693
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main,
1694
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
1695
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section {
1696
+ width: 100% !important;
1697
+ min-width: 0 !important;
1698
+ max-width: 100% !important;
1699
+ box-sizing: border-box;
1700
+ overflow-wrap: anywhere;
1701
+ }
1702
+
1703
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
1704
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section,
1705
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main {
1706
+ padding: var(--spacing-sm) !important;
1707
+ }
1708
+
1709
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="false"] .profileSectionCollapsible__content {
1710
+ display: none !important;
1711
+ }
1712
+
1713
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__toggle {
1714
+ display: inline-flex !important;
1715
+ align-items: center;
1716
+ justify-content: center;
1717
+ min-height: auto !important;
1718
+ min-width: auto !important;
1719
+ padding: var(--spacing-xxs) !important;
1720
+ border: none !important;
1721
+ background: none !important;
1722
+ color: var(--color-text) !important;
1723
+ }
1724
+
1725
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="true"] .profileSectionCollapsible__chevron {
1726
+ transform: rotate(180deg);
1727
+ }
1728
+
1729
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editLabel {
1730
+ display: none !important;
1731
+ }
1732
+
1733
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editIcon {
1734
+ display: inline !important;
1735
+ }
1736
+
1737
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem {
1738
+ display: flex !important;
1739
+ align-items: center !important;
1740
+ flex: 0 0 auto !important;
1741
+ }
1742
+
1743
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem a {
1744
+ display: inline-flex !important;
1745
+ align-items: center !important;
1746
+ justify-content: center !important;
1747
+ flex: 0 0 auto !important;
1748
+ width: auto !important;
1749
+ min-width: var(--min-touch-target) !important;
1750
+ min-height: var(--min-touch-target) !important;
1751
+ line-height: 0 !important;
1752
+ }
1753
+
1754
+ .contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialIcon {
1755
+ display: block !important;
1756
+ width: 40px !important;
1757
+ height: 40px !important;
1758
+ min-width: 40px !important;
1759
+ min-height: 40px !important;
1760
+ max-width: 40px !important;
1761
+ max-height: 40px !important;
1762
+ object-fit: contain !important;
1763
+ flex-shrink: 0 !important;
1764
+ }
1765
+
1766
+ @media (max-width: 1000px) {
1767
+ .contactPane .webidControl,
1768
+ .contactPane .webidControl table,
1769
+ .contactPane .webidControl tbody,
1770
+ .contactPane .webidControl tr,
1771
+ .contactPane .webidControl td {
1772
+ width: 100%;
1773
+ max-width: 100%;
1774
+ min-width: 0;
1775
+ box-sizing: border-box;
1776
+ }
1777
+
1778
+ .contactPane .webidControl table {
1779
+ table-layout: fixed;
1780
+ }
1781
+
1782
+ .contactPane .webidControl .personaRow--webid td {
1783
+ vertical-align: top;
1784
+ }
1785
+
1786
+ .contactPane .webidControl .contactPane,
1787
+ .contactPane .webidControl .contactPane .addressBook-grid,
1788
+ .contactPane .webidControl .contactPane .detailSection,
1789
+ .contactPane .webidControl .contactPane .detailsSectionContent {
1790
+ width: 100% !important;
1791
+ max-width: 100% !important;
1792
+ min-width: 0 !important;
1793
+ box-sizing: border-box;
1794
+ }
1795
+
1796
+ .contactPane .webidControl .contactPane .addressBook-grid {
1797
+ flex-direction: column !important;
1798
+ flex-wrap: nowrap !important;
1799
+ }
1800
+
1801
+ .contactPane .webidControl .contactPane .detailSection,
1802
+ .contactPane .webidControl .contactPane .addressBookSection {
1803
+ flex: none !important;
1804
+ }
1805
+
1806
+ .contactPane .webidControl .contactPane .detailsSectionContent,
1807
+ .contactPane .webidControl .contactPane .detailsSectionContent--wide {
1808
+ padding: var(--spacing-sm) !important;
1809
+ overflow-y: visible !important;
1810
+ }
1811
+
1812
+ }
1813
+
1814
+ @container nested-profile-pane (max-width: 900px) {
1815
+ .contactPane .webidControl .profile-grid {
1816
+ display: flex !important;
1817
+ flex-direction: column !important;
1818
+ gap: var(--spacing-sm) !important;
1819
+ }
1820
+
1821
+ .contactPane .webidControl .profile-grid > * {
1822
+ min-width: 0 !important;
1823
+ max-width: 100% !important;
1824
+ }
1825
+
1826
+ .contactPane .webidControl .profile__main,
1827
+ .contactPane .webidControl .profile__sidebar,
1828
+ .contactPane .webidControl .profile__section {
1829
+ width: 100% !important;
1830
+ min-width: 0 !important;
1831
+ max-width: 100% !important;
1832
+ overflow-wrap: anywhere;
1833
+ }
1834
+ }
1835
+
1715
1836
  /* ── Visibility / display helpers ────────────────────────────── */
1716
1837
 
1717
1838
  .contactPane .collapsed {
1718
1839
  visibility: collapse;
1719
1840
  }
1720
- `, "",{"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":""}]);
1841
+ `, "",{"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":""}]);
1721
1842
  // Exports
1722
1843
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1723
1844
 
@@ -2608,7 +2729,7 @@ async function renderIdControl (person, dataBrowserContext, options) {
2608
2729
  options = options || {}
2609
2730
  options.editable = kb.updater.editable(person.doc().uri, kb)
2610
2731
  const div = dom.createElement('div')
2611
- div.classList.add('webidControl')
2732
+ div.classList.add('webidControl', 'webidControl--mobile')
2612
2733
 
2613
2734
  if (getPersonas(kb, person).length === 0 && !options.editable) {
2614
2735
  div.classList.add('hidden')
@@ -2971,58 +3092,59 @@ function isAWebID (subject) {
2971
3092
 
2972
3093
  // Make the layout stack vertically when the containing pane gets narrow
2973
3094
  function setupResponsiveStacking (paneDiv, breakpoint = 900) {
2974
- function updateFromPane () {
3095
+ function updateResponsiveState () {
2975
3096
  const width = paneDiv.getBoundingClientRect().width
2976
- const isNarrow = width <= breakpoint
2977
- // Always track viewport fallback even if pane is not in DOM yet
3097
+ const paneNarrow = width > 0 ? width <= breakpoint : false
2978
3098
  const viewportNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
2979
3099
  ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
2980
3100
  : false
3101
+ const isNarrow = width > 0 ? paneNarrow : viewportNarrow
2981
3102
 
2982
3103
  if (width > 0) {
2983
- paneDiv.classList.toggle('contactPane--narrow', isNarrow)
2984
3104
  paneDiv.dataset.paneWidth = Math.round(width).toString()
2985
- paneDiv.dataset.paneNarrow = isNarrow ? 'true' : 'false'
3105
+ paneDiv.dataset.paneNarrow = paneNarrow ? 'true' : 'false'
2986
3106
  } else {
2987
3107
  // If not inserted yet, apply viewport mode until placed.
2988
- paneDiv.classList.toggle('contactPane--narrow', viewportNarrow)
2989
3108
  paneDiv.dataset.paneWidth = '0'
2990
3109
  paneDiv.dataset.paneNarrow = viewportNarrow ? 'true' : 'false'
2991
3110
  }
2992
3111
 
3112
+ paneDiv.classList.toggle('contactPane--narrow', isNarrow)
2993
3113
  paneDiv.dataset.viewportNarrow = viewportNarrow ? 'true' : 'false'
2994
3114
 
2995
3115
  return isNarrow
2996
3116
  }
2997
3117
 
2998
- function updateFromViewport () {
2999
- const isNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
3000
- ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
3001
- : false
3002
- paneDiv.classList.toggle('contactPane--narrow', isNarrow)
3003
- paneDiv.dataset.viewportNarrow = isNarrow ? 'true' : 'false'
3004
- return isNarrow
3118
+ // Debounce utility
3119
+ function debounce (fn, delay) {
3120
+ let timer = null
3121
+ return function (...args) {
3122
+ clearTimeout(timer)
3123
+ timer = setTimeout(() => fn.apply(this, args), delay)
3124
+ }
3005
3125
  }
3006
3126
 
3127
+ const debouncedUpdate = debounce(() => {
3128
+ updateResponsiveState()
3129
+ }, 100)
3130
+
3007
3131
  const resizeObserverAvailable = typeof ResizeObserver !== 'undefined'
3008
3132
  if (resizeObserverAvailable) {
3009
- const ro = new ResizeObserver(() => updateFromPane())
3133
+ const ro = new ResizeObserver(() => {
3134
+ debouncedUpdate()
3135
+ })
3010
3136
  ro.observe(paneDiv)
3011
3137
  }
3012
3138
 
3013
3139
  if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
3014
- window.addEventListener('resize', () => {
3015
- updateFromPane()
3016
- updateFromViewport()
3017
- })
3140
+ window.addEventListener('resize', debouncedUpdate)
3018
3141
  }
3019
3142
 
3020
3143
  // Initial state
3021
3144
  function ensureInitialUpdate () {
3022
3145
  // Call both updaters for their side effects (setting dataset attributes).
3023
3146
  // Return values are intentionally discarded — ESLint-safe.
3024
- updateFromPane()
3025
- updateFromViewport()
3147
+ updateResponsiveState()
3026
3148
  // If we are not in the document yet, re-run until connected
3027
3149
  if (!paneDiv.isConnected) {
3028
3150
  requestAnimationFrame(ensureInitialUpdate)
@@ -5202,26 +5324,27 @@ function toolsPane_toolsPane (
5202
5324
  }
5203
5325
  toolsPane_log(logSpace, ' Compact group members ' + stats.groupMembers2.length)
5204
5326
 
5205
- if (
5206
- external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_.keepThisCodeForLaterButDisableFerossConstantConditionPolice
5207
- ) {
5327
+ // LINT NOTE: Block below disabled to fix 'no-constant-condition' ESLint error. Restore or refactor if needed.
5328
+ /*
5329
+ if (false) {
5208
5330
  // Don't inspect as seems groups membership is complete
5209
5331
  for (let i = 0; i < stats.groupMembers.length; i++) {
5210
5332
  const card = stats.groupMembers[i]
5211
5333
  if (stats.uniquesSet[card.uri]) {
5212
5334
  // inUniques += 1
5213
5335
  } else {
5214
- toolsPane_log(logSpace, ' Not in uniques: ' + card)
5336
+ log(logSpace, ' Not in uniques: ' + card)
5215
5337
  stats.groupProblems.push(card)
5216
5338
  if (stats.duplicateSet[card.uri]) {
5217
- toolsPane_log(logSpace, ' ** IN duplicates alas:' + card)
5339
+ log(logSpace, ' ** IN duplicates alas:' + card)
5218
5340
  } else {
5219
- toolsPane_log(logSpace, ' **** WTF?')
5341
+ log(logSpace, ' **** WTF?')
5220
5342
  }
5221
5343
  }
5222
5344
  }
5223
- toolsPane_log(logSpace, 'Problem contacts: ' + stats.groupProblems.length)
5224
- } // if
5345
+ log(logSpace, 'Problem contacts: ' + stats.groupProblems.length)
5346
+ }
5347
+ */
5225
5348
  resolve(true)
5226
5349
  })
5227
5350
  } // checkGroupMembers
@@ -5715,14 +5838,20 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
5715
5838
 
5716
5839
  name: 'contact',
5717
5840
 
5841
+ global: false,
5842
+
5718
5843
  // Does the subject deserve a contact pane?
5719
5844
  label: function (subject, context) {
5720
5845
  const t = context.session.store.findTypeURIs(subject)
5721
- if (t[contactsPane_ns.vcard('Individual').uri]) return 'Contact'
5846
+ // with the new design we only display Address Books
5847
+ // individuals are rendered through the profile-pane but not Organizations
5722
5848
  if (t[contactsPane_ns.vcard('Organization').uri]) return 'Contact'
5723
- if (t[contactsPane_ns.foaf('Person').uri]) return 'Person'
5724
- if (t[contactsPane_ns.schema('Person').uri]) return 'Person'
5725
- if (t[contactsPane_ns.vcard('Group').uri]) return 'Group'
5849
+ /*
5850
+ if (t[ns.vcard('Individual').uri]) return 'Contact'
5851
+ if (t[ns.foaf('Person').uri]) return 'Person'
5852
+ if (t[ns.schema('Person').uri]) return 'Person'
5853
+ if (t[ns.vcard('Group').uri]) return 'Group'
5854
+ */
5726
5855
  if (t[contactsPane_ns.vcard('AddressBook').uri]) return 'Address book'
5727
5856
  return null // No, under other circumstances
5728
5857
  },