profile-pane 2.0.0-newStyle-e00e593f → 2.0.0-newStyle-ea4954c4

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 (15) hide show
  1. package/lib/FriendList.d.ts.map +1 -1
  2. package/lib/FriendList.js +0 -3
  3. package/lib/SocialCard.d.ts.map +1 -1
  4. package/lib/SocialCard.js +0 -4
  5. package/lib/profile-pane.js +49 -56
  6. package/lib/profile-pane.js.map +1 -1
  7. package/lib/profile-pane.min.js +3 -10
  8. package/lib/profile-pane.min.js.map +1 -1
  9. package/lib/styles/CVCard.css +1 -1
  10. package/lib/styles/FriendList.css +1 -1
  11. package/lib/styles/ProfileCard.css +2 -2
  12. package/lib/styles/SocialCard.css +3 -3
  13. package/lib/styles/global.css +28 -28
  14. package/lib/styles/utilities.css +8 -8
  15. package/package.json +1 -1
package/lib/FriendList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FriendList.d.ts","sourceRoot":"","sources":["../src/FriendList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cAAc,GAAG,IAqBnB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,SAAS,EAAE,SAAS,kBAAkB,mBAwB7E,CAAA"}
1
+ {"version":3,"file":"FriendList.d.ts","sourceRoot":"","sources":["../src/FriendList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cAAc,GAAG,IAkBnB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,SAAS,EAAE,SAAS,kBAAkB,mBAwB7E,CAAA"}
package/lib/FriendList.js CHANGED
@@ -17,9 +17,6 @@ const FriendList = (subject, context) => {
17
17
  aria-labelledby="friends-section-title"
18
18
  data-testid="friend-list"
19
19
  >
20
- <header class="flex gap-xs mb-md">
21
- <h3 id="friends-section-title" class="section-title">Friend Connections</h3>
22
- </header>
23
20
  <nav aria-label="Friend profiles">
24
21
  <ul class="list-reset zebra-stripe" role="list">
25
22
  ${friends}
package/lib/SocialCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SocialCard.d.ts","sourceRoot":"","sources":["../src/SocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,YAAY,kBAAkB,KAC7B,cAmDF,CAAA"}
1
+ {"version":3,"file":"SocialCard.d.ts","sourceRoot":"","sources":["../src/SocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,YAAY,kBAAkB,KAC7B,cA+CF,CAAA"}
package/lib/SocialCard.js CHANGED
@@ -15,12 +15,8 @@ const SocialCard = SocialData => {
15
15
  <section
16
16
  class="socialCard"
17
17
  aria-labelledby="social-card-title"
18
- role="region"
19
18
  data-testid="social-media"
20
19
  >
21
- <header class="socialHeader">
22
- <h3 id="social-card-title">Follow me on</h3>
23
- </header>
24
20
  <nav aria-label="Social media profiles">
25
21
  <ul class="socialList list-reset" role="list">
26
22
  ${accounts.map(account => renderAccount(account))}
package/lib/profile-pane.js CHANGED
@@ -859,10 +859,10 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* CVCard.css */
859
859
  font-weight: 600;
860
860
  line-height: var(--line-height-tight);
861
861
  margin-bottom: var(--spacing-xs);
862
- border-bottom: 1px solid var(--border-light);
862
+ border-bottom: 1px solid var(--color-border-pale);
863
863
  padding-bottom: var(--spacing-xs);
864
864
  }
865
- `, "",{"version":3,"sources":["webpack://./src/styles/CVCard.css"],"names":[],"mappings":"AAAA,eAAe;AACf,2DAA2D;;AAE3D;EACE,qBAAqB;AACvB;;AAEA;EACE,2BAA2B;EAC3B,gCAAgC;EAChC,oCAAoC;EACpC,aAAa;EACb,sBAAsB;EACtB,UAAU;AACZ;;AAEA;EACE,gBAAgB;EAChB,2BAA2B;AAC7B;;AAEA;EACE,gBAAgB;EAChB,2BAA2B;EAC3B,gCAAgC;EAChC,oCAAoC;AACtC;;AAEA;EACE,wBAAwB;EACxB,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,gCAAgC;EAChC,4CAA4C;EAC5C,iCAAiC;AACnC","sourcesContent":["/* CVCard.css */\n/* Note: Uses utilities: .section-title for cvOrg styling */\n\n.cvSection {\n margin-bottom: 1.25em;\n}\n\n.cvRole {\n margin: var(--spacing-xs) 0;\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n}\n\n.cvOrg {\n font-weight: 600;\n color: var(--color-primary);\n}\n\n.cvSkill, .cvLanguage {\n text-align: left;\n margin: var(--spacing-xs) 0;\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n}\n\n.cvSection h3 {\n color: var(--text-color);\n font-size: var(--font-size-lg);\n font-weight: 600;\n line-height: var(--line-height-tight);\n margin-bottom: var(--spacing-xs);\n border-bottom: 1px solid var(--border-light);\n padding-bottom: var(--spacing-xs);\n}\n"],"sourceRoot":""}]);
865
+ `, "",{"version":3,"sources":["webpack://./src/styles/CVCard.css"],"names":[],"mappings":"AAAA,eAAe;AACf,2DAA2D;;AAE3D;EACE,qBAAqB;AACvB;;AAEA;EACE,2BAA2B;EAC3B,gCAAgC;EAChC,oCAAoC;EACpC,aAAa;EACb,sBAAsB;EACtB,UAAU;AACZ;;AAEA;EACE,gBAAgB;EAChB,2BAA2B;AAC7B;;AAEA;EACE,gBAAgB;EAChB,2BAA2B;EAC3B,gCAAgC;EAChC,oCAAoC;AACtC;;AAEA;EACE,wBAAwB;EACxB,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,gCAAgC;EAChC,iDAAiD;EACjD,iCAAiC;AACnC","sourcesContent":["/* CVCard.css */\n/* Note: Uses utilities: .section-title for cvOrg styling */\n\n.cvSection {\n margin-bottom: 1.25em;\n}\n\n.cvRole {\n margin: var(--spacing-xs) 0;\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n}\n\n.cvOrg {\n font-weight: 600;\n color: var(--color-primary);\n}\n\n.cvSkill, .cvLanguage {\n text-align: left;\n margin: var(--spacing-xs) 0;\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n}\n\n.cvSection h3 {\n color: var(--text-color);\n font-size: var(--font-size-lg);\n font-weight: 600;\n line-height: var(--line-height-tight);\n margin-bottom: var(--spacing-xs);\n border-bottom: 1px solid var(--color-border-pale);\n padding-bottom: var(--spacing-xs);\n}\n"],"sourceRoot":""}]);
866
866
  // Exports
867
867
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
868
868
 
@@ -1414,7 +1414,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* SocialCard.css */
1414
1414
  display: flex;
1415
1415
  align-items: center;
1416
1416
  gap: var(--spacing-sm);
1417
- font-size: 1.1rem;
1417
+ font-size: 1.1em;
1418
1418
  }
1419
1419
 
1420
1420
  .socialItem span {
@@ -1430,7 +1430,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* SocialCard.css */
1430
1430
  gap: var(--spacing-sm);
1431
1431
  min-height: var(--min-touch-target);
1432
1432
  padding: var(--spacing-xs);
1433
- border-radius: var(--border-radius-sm);
1433
+ border-radius: var(--border-radius-base);
1434
1434
  transition: background-color var(--animation-duration) ease;
1435
1435
  position: relative;
1436
1436
  flex: 1;
@@ -1456,11 +1456,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* SocialCard.css */
1456
1456
  .socialIcon {
1457
1457
  width: 2.5em;
1458
1458
  height: 2.5em;
1459
- border-radius: var(--border-radius-sm);
1459
+ border-radius: var(--border-radius-base);
1460
1460
  background: var(--color-card-bg);
1461
1461
  flex-shrink: 0;
1462
1462
  }
1463
- `, "",{"version":3,"sources":["webpack://./src/styles/SocialCard.css"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,2FAA2F;;AAE3F;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;EACf,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,mCAAmC;EACnC,0BAA0B;EAC1B,sCAAsC;EACtC,2DAA2D;EAC3D,kBAAkB;EAClB,OAAO;EACP,YAAY;AACd;;AAEA;;EAEE,0BAA0B;EAC1B,yCAAyC;AAC3C;;AAEA,gDAAgD;AAChD;EACE,2BAA2B;EAC3B,kBAAkB;EAClB,cAAc;EACd,UAAU;EACV,WAAW;EACX,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,sCAAsC;EACtC,gCAAgC;EAChC,cAAc;AAChB","sourcesContent":["/* SocialCard.css */\n/* Uses utilities: .list-reset, .text-wrap-anywhere, .flex, .gap-sm, .gap-lg, .rounded-sm */\n\n.socialList {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--spacing-lg);\n justify-content: center;\n}\n\n.socialItem {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n font-size: 1.1rem;\n}\n\n.socialItem span {\n min-width: 0;\n display: block;\n}\n\n.socialItem a {\n color: var(--color-primary);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n min-height: var(--min-touch-target);\n padding: var(--spacing-xs);\n border-radius: var(--border-radius-sm);\n transition: background-color var(--animation-duration) ease;\n position: relative;\n flex: 1;\n min-width: 0;\n}\n\n.socialItem a:hover,\n.socialItem a:focus {\n text-decoration: underline;\n background-color: rgba(124, 77, 255, 0.1);\n}\n\n/* Screen reader only external link indication */\n.socialItem a[href^=\"http\"]:after {\n content: \" (external link)\";\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.socialIcon {\n width: 2.5em;\n height: 2.5em;\n border-radius: var(--border-radius-sm);\n background: var(--color-card-bg);\n flex-shrink: 0;\n}\n"],"sourceRoot":""}]);
1463
+ `, "",{"version":3,"sources":["webpack://./src/styles/SocialCard.css"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,2FAA2F;;AAE3F;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;EACf,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,mCAAmC;EACnC,0BAA0B;EAC1B,wCAAwC;EACxC,2DAA2D;EAC3D,kBAAkB;EAClB,OAAO;EACP,YAAY;AACd;;AAEA;;EAEE,0BAA0B;EAC1B,yCAAyC;AAC3C;;AAEA,gDAAgD;AAChD;EACE,2BAA2B;EAC3B,kBAAkB;EAClB,cAAc;EACd,UAAU;EACV,WAAW;EACX,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,wCAAwC;EACxC,gCAAgC;EAChC,cAAc;AAChB","sourcesContent":["/* SocialCard.css */\n/* Uses utilities: .list-reset, .text-wrap-anywhere, .flex, .gap-sm, .gap-lg, .rounded-sm */\n\n.socialList {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--spacing-lg);\n justify-content: center;\n}\n\n.socialItem {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n font-size: 1.1em;\n}\n\n.socialItem span {\n min-width: 0;\n display: block;\n}\n\n.socialItem a {\n color: var(--color-primary);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n min-height: var(--min-touch-target);\n padding: var(--spacing-xs);\n border-radius: var(--border-radius-base);\n transition: background-color var(--animation-duration) ease;\n position: relative;\n flex: 1;\n min-width: 0;\n}\n\n.socialItem a:hover,\n.socialItem a:focus {\n text-decoration: underline;\n background-color: rgba(124, 77, 255, 0.1);\n}\n\n/* Screen reader only external link indication */\n.socialItem a[href^=\"http\"]:after {\n content: \" (external link)\";\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.socialIcon {\n width: 2.5em;\n height: 2.5em;\n border-radius: var(--border-radius-base);\n background: var(--color-card-bg);\n flex-shrink: 0;\n}\n"],"sourceRoot":""}]);
1464
1464
  // Exports
1465
1465
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1466
1466
 
@@ -1488,14 +1488,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* FriendList.css */
1488
1488
 
1489
1489
  .friendItem {
1490
1490
  padding: var(--spacing-xs) 0;
1491
- font-size: 1rem;
1491
+ font-size: 1em;
1492
1492
  color: var(--color-text-muted);
1493
1493
  }
1494
1494
 
1495
1495
  .friendItem:last-child {
1496
1496
  border-bottom: none;
1497
1497
  }
1498
- `, "",{"version":3,"sources":["webpack://./src/styles/FriendList.css"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,uFAAuF;;AAEvF;EACE,4BAA4B;EAC5B,eAAe;EACf,8BAA8B;AAChC;;AAEA;EACE,mBAAmB;AACrB","sourcesContent":["/* FriendList.css */\n/* Uses utilities: .list-reset, .section-title, .zebra-stripe, .flex, .gap-xs, .mb-md */\n\n.friendItem {\n padding: var(--spacing-xs) 0;\n font-size: 1rem;\n color: var(--color-text-muted);\n}\n\n.friendItem:last-child {\n border-bottom: none;\n}\n"],"sourceRoot":""}]);
1498
+ `, "",{"version":3,"sources":["webpack://./src/styles/FriendList.css"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,uFAAuF;;AAEvF;EACE,4BAA4B;EAC5B,cAAc;EACd,8BAA8B;AAChC;;AAEA;EACE,mBAAmB;AACrB","sourcesContent":["/* FriendList.css */\n/* Uses utilities: .list-reset, .section-title, .zebra-stripe, .flex, .gap-xs, .mb-md */\n\n.friendItem {\n padding: var(--spacing-xs) 0;\n font-size: 1em;\n color: var(--color-text-muted);\n}\n\n.friendItem:last-child {\n border-bottom: none;\n}\n"],"sourceRoot":""}]);
1499
1499
  // Exports
1500
1500
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1501
1501
 
@@ -1598,7 +1598,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
1598
1598
 
1599
1599
  .buttonSection {
1600
1600
  color: var(--color-text-secondary);
1601
- font-size: 1rem;
1601
+ font-size: 1em;
1602
1602
  margin-bottom: var(--spacing-xs);
1603
1603
  }
1604
1604
 
@@ -1614,7 +1614,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
1614
1614
 
1615
1615
  .qrCodeSection {
1616
1616
  color: var(--color-text-secondary);
1617
- font-size: 1rem;
1617
+ font-size: 1em;
1618
1618
  margin-bottom: var(--spacing-xs);
1619
1619
  }
1620
1620
 
@@ -1633,7 +1633,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
1633
1633
  padding: 16px;
1634
1634
  background: white;
1635
1635
  }
1636
- `, "",{"version":3,"sources":["webpack://./src/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,WAAW;EACX,gBAAgB;EAChB,gBAAgB;EAChB,sBAAsB;EACtB,qBAAqB;AACvB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,eAAe;EACf,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kCAAkC;EAClC,eAAe;EACf,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n.profileCard {\n /* Component container */\n}\n\n.image {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n object-fit: cover;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n}\n\n.image-alt {\n width: 160px;\n height: 160px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n color: var(--color-text-secondary);\n}\n\n.name {\n font-size: var(--font-size-xl);\n font-weight: 700;\n line-height: var(--line-height-tight);\n text-decoration: underline;\n text-underline-offset: 0.2em;\n margin: 0;\n letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n color: var(--color-text-secondary);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n margin-bottom: var(--spacing-xs);\n max-width: 40ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n.buttonSection {\n color: var(--color-text-secondary);\n font-size: 1rem;\n margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n width: 100%;\n min-width: 0;\n}\n\n.buttonSubSection button {\n width: 100%;\n min-width: 0;\n}\n\n.qrCodeSection {\n color: var(--color-text-secondary);\n font-size: 1rem;\n margin-bottom: var(--spacing-xs);\n}\n\n.details {\n color: var(--color-text-muted);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n max-width: 45ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n border: 1px solid #ccc;\n padding: 16px;\n background: white;\n}\n"],"sourceRoot":""}]);
1636
+ `, "",{"version":3,"sources":["webpack://./src/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,WAAW;EACX,gBAAgB;EAChB,gBAAgB;EAChB,sBAAsB;EACtB,qBAAqB;AACvB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n.profileCard {\n /* Component container */\n}\n\n.image {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n object-fit: cover;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n}\n\n.image-alt {\n width: 160px;\n height: 160px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n color: var(--color-text-secondary);\n}\n\n.name {\n font-size: var(--font-size-xl);\n font-weight: 700;\n line-height: var(--line-height-tight);\n text-decoration: underline;\n text-underline-offset: 0.2em;\n margin: 0;\n letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n color: var(--color-text-secondary);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n margin-bottom: var(--spacing-xs);\n max-width: 40ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n.buttonSection {\n color: var(--color-text-secondary);\n font-size: 1em;\n margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n width: 100%;\n min-width: 0;\n}\n\n.buttonSubSection button {\n width: 100%;\n min-width: 0;\n}\n\n.qrCodeSection {\n color: var(--color-text-secondary);\n font-size: 1em;\n margin-bottom: var(--spacing-xs);\n}\n\n.details {\n color: var(--color-text-muted);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n max-width: 45ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n border: 1px solid #ccc;\n padding: 16px;\n background: white;\n}\n"],"sourceRoot":""}]);
1637
1637
  // Exports
1638
1638
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1639
1639
 
@@ -2291,8 +2291,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2291
2291
  .p-md { padding: var(--spacing-md); }
2292
2292
  .p-lg { padding: var(--spacing-lg); }
2293
2293
 
2294
- .rounded { border-radius: var(--border-radius); }
2295
- .rounded-sm { border-radius: var(--border-radius-sm); }
2294
+ .rounded { border-radius: var(--border-radius-full); }
2295
+ .rounded-sm { border-radius: var(--border-radius-base); }
2296
2296
 
2297
2297
  .shadow { box-shadow: var(--box-shadow); }
2298
2298
  .shadow-sm { box-shadow: var(--box-shadow-sm); }
@@ -2364,7 +2364,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2364
2364
  background: var(--color-primary);
2365
2365
  color: white;
2366
2366
  text-decoration: none;
2367
- border-radius: var(--border-radius-sm);
2367
+ border-radius: var(--border-radius-base);
2368
2368
  }
2369
2369
 
2370
2370
  .skip-links a:focus {
@@ -2409,7 +2409,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2409
2409
  max-width: 65ch;
2410
2410
  }
2411
2411
 
2412
- .text-large {
2412
+ .text-lg {
2413
2413
  font-size: var(--font-size-lg);
2414
2414
  line-height: var(--line-height-base);
2415
2415
  }
@@ -2436,7 +2436,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2436
2436
  .high-contrast {
2437
2437
  color: var(--text-color);
2438
2438
  background: var(--color-background);
2439
- border: 1px solid var(--border-light);
2439
+ border: 1px solid var(--color-border-pale);
2440
2440
  }
2441
2441
 
2442
2442
  /* ===========================================
@@ -2448,7 +2448,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2448
2448
  min-height: var(--min-touch-target);
2449
2449
  padding: var(--spacing-sm) var(--spacing-md);
2450
2450
  border: 1px solid var(--color-primary);
2451
- border-radius: var(--border-radius-sm);
2451
+ border-radius: var(--border-radius-base);
2452
2452
  background: var(--color-primary);
2453
2453
  color: white;
2454
2454
  font-weight: 600;
@@ -2495,7 +2495,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2495
2495
 
2496
2496
  /* Section Title - primary colored heading */
2497
2497
  .section-title {
2498
- font-size: 1.25rem;
2498
+ font-size: 1.25em;
2499
2499
  font-weight: 600;
2500
2500
  color: var(--color-primary);
2501
2501
  margin: 0;
@@ -2530,7 +2530,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2530
2530
  /* Card Section Background */
2531
2531
  .section-bg {
2532
2532
  background: var(--color-section-bg);
2533
- border-radius: var(--border-radius);
2533
+ border-radius: var(--border-radius-full);
2534
2534
  box-shadow: var(--box-shadow);
2535
2535
  padding: var(--spacing-md);
2536
2536
  }
@@ -2543,7 +2543,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
2543
2543
  .btn-transparent:hover {
2544
2544
  background-color: transparent;
2545
2545
  }
2546
- `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius); }\n.rounded-sm { border-radius: var(--border-radius-sm); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-sm);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-large {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--text-color);\n font-weight: 600;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--text-color);\n background: var(--color-background);\n border: 1px solid var(--border-light);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-sm);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n"],"sourceRoot":""}]);
2546
+ `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--text-color);\n font-weight: 600;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--text-color);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n"],"sourceRoot":""}]);
2547
2547
  // Exports
2548
2548
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2549
2549
 
@@ -2582,24 +2582,24 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Global CSS: base styles, variables,
2582
2582
  --color-card-bg: #FFFFFF; /* White for inner cards */
2583
2583
  --color-section-bg: #F5F5F5; /* Light grey for outer sections */
2584
2584
 
2585
- --text-color: #1A1A1A; /* Near-black */
2585
+ --color-text: #1A1A1A; /* Near-black */
2586
2586
  --color-text-secondary: #666; /* Added for repeated usage */
2587
2587
  --color-text-muted: #444; /* Added for repeated usage */
2588
- --border-light: #eee; /* Added for repeated borders */
2589
- --border-radius: 1rem; /* Matches module usage */
2590
- --border-radius-sm: 0.5rem;
2588
+ --color-border-pale: #eee; /* Added for repeated borders */
2589
+ --border-radius-full: 1em; /* Matches module usage */
2590
+ --border-radius-base: 0.5em;
2591
2591
  --box-shadow: 0 2px 8px rgba(124,77,255,0.08); /* Matches module usage */
2592
2592
  --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
2593
- --spacing-xs: 0.5rem;
2594
- --spacing-sm: 0.75rem;
2595
- --spacing-md: 1rem;
2596
- --spacing-lg: 1.5rem;
2597
- --spacing-xl: 2rem;
2598
- --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
2599
- --font-size-base: 1rem; /* 16px default */
2600
- --font-size-sm: 0.875rem; /* 14px */
2601
- --font-size-lg: 1.125rem; /* 18px */
2602
- --font-size-xl: 1.25rem; /* 20px */
2593
+ --spacing-xs: 0.5em;
2594
+ --spacing-sm: 0.75em;
2595
+ --spacing-md: 1em;
2596
+ --spacing-lg: 1.5em;
2597
+ --spacing-xl: 2em;
2598
+ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
2599
+ --font-size-base: 1em; /* 16px default */
2600
+ --font-size-sm: 0.875em; /* 14px */
2601
+ --font-size-lg: 1.125em; /* 18px */
2602
+ --font-size-xl: 1.25em; /* 20px */
2603
2603
  --line-height-base: 1.5; /* WCAG recommended */
2604
2604
  --line-height-tight: 1.4;
2605
2605
  --line-height-loose: 1.6;
@@ -2625,7 +2625,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Global CSS: base styles, variables,
2625
2625
  html, body {
2626
2626
  margin: 0;
2627
2627
  padding: 0;
2628
- font-family: var(--font-family);
2628
+ font-family: var(--font-family-base);
2629
2629
  font-size: var(--font-size-base);
2630
2630
  line-height: var(--line-height-base);
2631
2631
  background: var(--color-background);
@@ -2644,11 +2644,11 @@ h1, h2, h3, h4, h5, h6 {
2644
2644
  margin-bottom: var(--spacing-sm);
2645
2645
  }
2646
2646
 
2647
- h1 { font-size: 2rem; } /* 32px */
2648
- h2 { font-size: 1.5rem; } /* 24px */
2649
- h3 { font-size: 1.25rem; } /* 20px */
2650
- h4 { font-size: 1.125rem; }/* 18px */
2651
- h5, h6 { font-size: 1rem; }/* 16px */
2647
+ h1 { font-size: 2em; } /* 32px */
2648
+ h2 { font-size: 1.5em; } /* 24px */
2649
+ h3 { font-size: 1.25em; } /* 20px */
2650
+ h4 { font-size: 1.125em; }/* 18px */
2651
+ h5, h6 { font-size: 1em; }/* 16px */
2652
2652
 
2653
2653
  /* Better paragraph spacing */
2654
2654
  p {
@@ -2703,7 +2703,7 @@ a:hover, a:focus {
2703
2703
  /* Accessibility: High contrast mode support */
2704
2704
  @media (prefers-contrast: high) {
2705
2705
  :root {
2706
- --border-light: #000;
2706
+ --color-border-pale: #000;
2707
2707
  --box-shadow: 0 2px 4px rgba(0,0,0,0.5);
2708
2708
  --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
2709
2709
  }
@@ -2729,7 +2729,7 @@ a:hover, a:focus {
2729
2729
  color: white;
2730
2730
  padding: var(--spacing-sm) var(--spacing-md);
2731
2731
  text-decoration: none;
2732
- border-radius: var(--border-radius-sm);
2732
+ border-radius: var(--border-radius-base);
2733
2733
  z-index: 1000;
2734
2734
  font-weight: 600;
2735
2735
  font-size: var(--font-size-base);
@@ -2784,7 +2784,7 @@ a:focus {
2784
2784
  [role="alert"] {
2785
2785
  padding: var(--spacing-md);
2786
2786
  border: 2px solid var(--color-error);
2787
- border-radius: var(--border-radius-sm);
2787
+ border-radius: var(--border-radius-base);
2788
2788
  background-color: rgba(176, 0, 32, 0.1);
2789
2789
  margin: var(--spacing-md) 0;
2790
2790
  }
@@ -2793,7 +2793,7 @@ a:focus {
2793
2793
  [role="status"] {
2794
2794
  padding: var(--spacing-md);
2795
2795
  border: 2px solid var(--color-success);
2796
- border-radius: var(--border-radius-sm);
2796
+ border-radius: var(--border-radius-base);
2797
2797
  background-color: rgba(0, 200, 83, 0.1);
2798
2798
  margin: var(--spacing-md) 0;
2799
2799
  }
@@ -2833,7 +2833,7 @@ td {
2833
2833
  button, [role="button"] {
2834
2834
  cursor: pointer;
2835
2835
  border: none;
2836
- border-radius: var(--border-radius-sm);
2836
+ border-radius: var(--border-radius-base);
2837
2837
  padding: var(--spacing-sm) var(--spacing-md);
2838
2838
  min-height: var(--min-touch-target);
2839
2839
  min-width: var(--min-touch-target);
@@ -2853,7 +2853,7 @@ button:disabled, [role="button"][aria-disabled="true"] {
2853
2853
  .loading-spinner {
2854
2854
  width: 40px;
2855
2855
  height: 40px;
2856
- border: 3px solid var(--border-light);
2856
+ border: 3px solid var(--color-border-pale);
2857
2857
  border-top: 3px solid var(--color-primary);
2858
2858
  border-radius: 50%;
2859
2859
  animation: spin 1s linear infinite;
@@ -2950,9 +2950,9 @@ button:disabled, [role="button"][aria-disabled="true"] {
2950
2950
  .errorMessageBlock .close,
2951
2951
  .errorMessageBlock button[type="button"],
2952
2952
  .errorMessageBlock .button {
2953
- background: var(--border-light) !important;
2953
+ background: var(--color-border-pale) !important;
2954
2954
  color: var(--text-color) !important;
2955
- border: 1px solid var(--border-light) !important;
2955
+ border: 1px solid var(--color-border-pale) !important;
2956
2956
  }
2957
2957
 
2958
2958
  .errorMessageBlock .close:hover,
@@ -2960,7 +2960,7 @@ button:disabled, [role="button"][aria-disabled="true"] {
2960
2960
  .errorMessageBlock .button:hover {
2961
2961
  background: var(--color-text-secondary) !important;
2962
2962
  color: var(--color-background) !important;
2963
- }`, "",{"version":3,"sources":["webpack://./src/styles/global.css"],"names":[],"mappings":"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","sourcesContent":["/* Global CSS: base styles, variables, and resets */\n/* Accessible color palette */\n\n:root {\n /* Primary/Accent colors (profile-pane specific) */\n --color-primary: #7C4DFF; /* Vivid Purple */\n --color-secondary: #0077B6; /* Accessible Blue */\n --color-accent: #FFD600; /* Bright Yellow */\n --color-error: #B00020; /* Accessible Red */\n --color-success: #00C853; /* Accessible Green */\n\n /* Card/Section backgrounds */\n --color-background: #FFFFFF; /* White */\n --color-card-bg: #FFFFFF; /* White for inner cards */\n --color-section-bg: #F5F5F5; /* Light grey for outer sections */\n\n --text-color: #1A1A1A; /* Near-black */\n --color-text-secondary: #666; /* Added for repeated usage */\n --color-text-muted: #444; /* Added for repeated usage */\n --border-light: #eee; /* Added for repeated borders */\n --border-radius: 1rem; /* Matches module usage */\n --border-radius-sm: 0.5rem;\n --box-shadow: 0 2px 8px rgba(124,77,255,0.08); /* Matches module usage */\n --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);\n --spacing-xs: 0.5rem;\n --spacing-sm: 0.75rem;\n --spacing-md: 1rem;\n --spacing-lg: 1.5rem;\n --spacing-xl: 2rem;\n --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n --font-size-base: 1rem; /* 16px default */\n --font-size-sm: 0.875rem; /* 14px */\n --font-size-lg: 1.125rem; /* 18px */\n --font-size-xl: 1.25rem; /* 20px */\n --line-height-base: 1.5; /* WCAG recommended */\n --line-height-tight: 1.4;\n --line-height-loose: 1.6;\n --letter-spacing-wide: 0.025em;\n\n /* Minimum font sizes for accessibility */\n --min-font-size: 14px;\n --min-line-height: 1.4;\n\n /* Accessibility improvements */\n --min-touch-target: 44px; /* WCAG minimum touch target */\n --focus-ring-width: 2px;\n --animation-duration: 0.2s; /* Reduced motion friendly */\n\n /* Additional accessibility variables */\n --focus-indicator-width: 3px;\n --animation-duration-slow: 0.3s;\n --high-contrast-ratio: 7:1; /* WCAG AAA standard */\n}\n\n\n/* Improve text rendering */\nhtml, body {\n margin: 0;\n padding: 0;\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n background: var(--color-background);\n color: var(--text-color);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n/* Improved heading hierarchy */\nh1, h2, h3, h4, h5, h6 {\n color: var(--color-primary);\n font-weight: 600;\n line-height: var(--line-height-tight);\n margin-top: 0;\n margin-bottom: var(--spacing-sm);\n}\n\nh1 { font-size: 2rem; } /* 32px */\nh2 { font-size: 1.5rem; } /* 24px */\nh3 { font-size: 1.25rem; } /* 20px */\nh4 { font-size: 1.125rem; }/* 18px */\nh5, h6 { font-size: 1rem; }/* 16px */\n\n/* Better paragraph spacing */\np {\n margin-bottom: var(--spacing-md);\n line-height: var(--line-height-base);\n max-width: 65ch; /* Optimal reading width */\n}\n\n/* Improved link accessibility */\na {\n color: var(--color-primary);\n text-decoration: underline;\n text-underline-offset: 0.125em;\n text-decoration-thickness: 0.0625em;\n}\n\na:hover, a:focus {\n text-decoration-thickness: 0.125em;\n}\n\n/* Ensure minimum font sizes are respected */\n@media screen and (max-width: 768px) {\n html {\n font-size: max(16px, 1rem); /* Never smaller than 16px on mobile */\n }\n}\n\n/* Support for larger text preferences */\n@media (prefers-reduced-motion: no-preference) {\n html {\n scroll-behavior: smooth;\n }\n}\n\n/* Accessibility: focus styles */\n:focus {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n/* Accessibility: Respect user motion preferences */\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* Accessibility: High contrast mode support */\n@media (prefers-contrast: high) {\n :root {\n --border-light: #000;\n --box-shadow: 0 2px 4px rgba(0,0,0,0.5);\n --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);\n }\n}\n\n/* Accessibility: Improved focus management */\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* Skip link for screen readers */\n.skip-link {\n position: absolute;\n top: -40px;\n left: 6px;\n background: var(--color-primary);\n color: white;\n padding: var(--spacing-sm) var(--spacing-md);\n text-decoration: none;\n border-radius: var(--border-radius-sm);\n z-index: 1000;\n font-weight: 600;\n font-size: var(--font-size-base);\n line-height: 1;\n}\n\n.skip-link:focus {\n top: 6px;\n outline: 2px solid white;\n outline-offset: 2px;\n}\n\n/* Semantic HTML5 improvements */\narticle, aside, section {\n display: block;\n}\n\nheader {\n margin-bottom: var(--spacing-md);\n}\n\nnav {\n display: block;\n}\n\nnav ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Enhanced keyboard navigation */\n*:focus-visible {\n outline: var(--focus-indicator-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background), 0 0 0 4px rgba(124, 77, 255, 0.2);\n border-radius: 2px;\n transition: none; /* Remove transitions on focus for immediate feedback */\n}\n\n/* Improve focus management for interactive elements */\n[role=\"button\"]:focus,\n[role=\"link\"]:focus,\nbutton:focus,\na:focus {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n/* Enhanced error message accessibility */\n[role=\"alert\"] {\n padding: var(--spacing-md);\n border: 2px solid var(--color-error);\n border-radius: var(--border-radius-sm);\n background-color: rgba(176, 0, 32, 0.1);\n margin: var(--spacing-md) 0;\n}\n\n/* Success message styling */\n[role=\"status\"] {\n padding: var(--spacing-md);\n border: 2px solid var(--color-success);\n border-radius: var(--border-radius-sm);\n background-color: rgba(0, 200, 83, 0.1);\n margin: var(--spacing-md) 0;\n}\n\n/* Enhanced table accessibility */\ntable {\n border-collapse: collapse;\n width: 100%;\n}\n\nth {\n background-color: var(--color-section-bg);\n font-weight: 600;\n text-align: left;\n padding: var(--spacing-sm);\n}\n\ntd {\n padding: var(--spacing-sm);\n}\n\n/* Focus trap for modals */\n.focus-trap {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Enhanced button accessibility */\nbutton, [role=\"button\"] {\n cursor: pointer;\n border: none;\n border-radius: var(--border-radius-sm);\n padding: var(--spacing-sm) var(--spacing-md);\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n font-size: var(--font-size-base);\n font-weight: 600;\n transition: all var(--animation-duration) ease;\n position: relative;\n}\n\nbutton:disabled, [role=\"button\"][aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Loading indicator accessibility */\n.loading-spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--border-light);\n border-top: 3px solid var(--color-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .loading-spinner {\n animation: none;\n border-top-color: var(--color-primary);\n }\n}\n\n/* Utility classes */\n.u-flex {\n display: flex;\n}\n.u-grid {\n display: grid;\n}\n.u-center {\n justify-content: center;\n align-items: center;\n}\n.u-gap {\n gap: 1em;\n}\n\n/* Common card component - used across all modules */\n.module-card {\n background: var(--color-card-bg);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-lg);\n margin-bottom: var(--spacing-lg);\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n/* Common header styles */\n.module-header {\n text-align: center;\n margin-bottom: var(--spacing-md);\n}\n\n/* Common flex patterns */\n.flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.flex-column {\n display: flex;\n flex-direction: column;\n}\n\n.flex-column-center {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Text utilities */\n.text-center {\n text-align: center;\n}\n\n.text-secondary {\n color: var(--color-text-secondary);\n}\n\n.text-muted {\n color: var(--color-text-muted);\n}\n\n/* Responsive grid for profile */\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n gap: 1.5em;\n background: var(--profile-grid-bg, var(--color-background));\n}\n.profile-header, .profile-footer {\n grid-column: 1 / -1;\n}\n\n/* Override solid-ui error message close button styling */\n.errorMessageBlock .close,\n.errorMessageBlock button[type=\"button\"],\n.errorMessageBlock .button {\n background: var(--border-light) !important;\n color: var(--text-color) !important;\n border: 1px solid var(--border-light) !important;\n}\n\n.errorMessageBlock .close:hover,\n.errorMessageBlock button[type=\"button\"]:hover,\n.errorMessageBlock .button:hover {\n background: var(--color-text-secondary) !important;\n color: var(--color-background) !important;\n}"],"sourceRoot":""}]);
2963
+ }`, "",{"version":3,"sources":["webpack://./src/styles/global.css"],"names":[],"mappings":"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","sourcesContent":["/* Global CSS: base styles, variables, and resets */\n/* Accessible color palette */\n\n:root {\n /* Primary/Accent colors (profile-pane specific) */\n --color-primary: #7C4DFF; /* Vivid Purple */\n --color-secondary: #0077B6; /* Accessible Blue */\n --color-accent: #FFD600; /* Bright Yellow */\n --color-error: #B00020; /* Accessible Red */\n --color-success: #00C853; /* Accessible Green */\n\n /* Card/Section backgrounds */\n --color-background: #FFFFFF; /* White */\n --color-card-bg: #FFFFFF; /* White for inner cards */\n --color-section-bg: #F5F5F5; /* Light grey for outer sections */\n\n --color-text: #1A1A1A; /* Near-black */\n --color-text-secondary: #666; /* Added for repeated usage */\n --color-text-muted: #444; /* Added for repeated usage */\n --color-border-pale: #eee; /* Added for repeated borders */\n --border-radius-full: 1em; /* Matches module usage */\n --border-radius-base: 0.5em;\n --box-shadow: 0 2px 8px rgba(124,77,255,0.08); /* Matches module usage */\n --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);\n --spacing-xs: 0.5em;\n --spacing-sm: 0.75em;\n --spacing-md: 1em;\n --spacing-lg: 1.5em;\n --spacing-xl: 2em;\n --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n --font-size-base: 1em; /* 16px default */\n --font-size-sm: 0.875em; /* 14px */\n --font-size-lg: 1.125em; /* 18px */\n --font-size-xl: 1.25em; /* 20px */\n --line-height-base: 1.5; /* WCAG recommended */\n --line-height-tight: 1.4;\n --line-height-loose: 1.6;\n --letter-spacing-wide: 0.025em;\n\n /* Minimum font sizes for accessibility */\n --min-font-size: 14px;\n --min-line-height: 1.4;\n\n /* Accessibility improvements */\n --min-touch-target: 44px; /* WCAG minimum touch target */\n --focus-ring-width: 2px;\n --animation-duration: 0.2s; /* Reduced motion friendly */\n\n /* Additional accessibility variables */\n --focus-indicator-width: 3px;\n --animation-duration-slow: 0.3s;\n --high-contrast-ratio: 7:1; /* WCAG AAA standard */\n}\n\n\n/* Improve text rendering */\nhtml, body {\n margin: 0;\n padding: 0;\n font-family: var(--font-family-base);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n background: var(--color-background);\n color: var(--text-color);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\n/* Improved heading hierarchy */\nh1, h2, h3, h4, h5, h6 {\n color: var(--color-primary);\n font-weight: 600;\n line-height: var(--line-height-tight);\n margin-top: 0;\n margin-bottom: var(--spacing-sm);\n}\n\nh1 { font-size: 2em; } /* 32px */\nh2 { font-size: 1.5em; } /* 24px */\nh3 { font-size: 1.25em; } /* 20px */\nh4 { font-size: 1.125em; }/* 18px */\nh5, h6 { font-size: 1em; }/* 16px */\n\n/* Better paragraph spacing */\np {\n margin-bottom: var(--spacing-md);\n line-height: var(--line-height-base);\n max-width: 65ch; /* Optimal reading width */\n}\n\n/* Improved link accessibility */\na {\n color: var(--color-primary);\n text-decoration: underline;\n text-underline-offset: 0.125em;\n text-decoration-thickness: 0.0625em;\n}\n\na:hover, a:focus {\n text-decoration-thickness: 0.125em;\n}\n\n/* Ensure minimum font sizes are respected */\n@media screen and (max-width: 768px) {\n html {\n font-size: max(16px, 1rem); /* Never smaller than 16px on mobile */\n }\n}\n\n/* Support for larger text preferences */\n@media (prefers-reduced-motion: no-preference) {\n html {\n scroll-behavior: smooth;\n }\n}\n\n/* Accessibility: focus styles */\n:focus {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n/* Accessibility: Respect user motion preferences */\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* Accessibility: High contrast mode support */\n@media (prefers-contrast: high) {\n :root {\n --color-border-pale: #000;\n --box-shadow: 0 2px 4px rgba(0,0,0,0.5);\n --box-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);\n }\n}\n\n/* Accessibility: Improved focus management */\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* Skip link for screen readers */\n.skip-link {\n position: absolute;\n top: -40px;\n left: 6px;\n background: var(--color-primary);\n color: white;\n padding: var(--spacing-sm) var(--spacing-md);\n text-decoration: none;\n border-radius: var(--border-radius-base);\n z-index: 1000;\n font-weight: 600;\n font-size: var(--font-size-base);\n line-height: 1;\n}\n\n.skip-link:focus {\n top: 6px;\n outline: 2px solid white;\n outline-offset: 2px;\n}\n\n/* Semantic HTML5 improvements */\narticle, aside, section {\n display: block;\n}\n\nheader {\n margin-bottom: var(--spacing-md);\n}\n\nnav {\n display: block;\n}\n\nnav ul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Enhanced keyboard navigation */\n*:focus-visible {\n outline: var(--focus-indicator-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background), 0 0 0 4px rgba(124, 77, 255, 0.2);\n border-radius: 2px;\n transition: none; /* Remove transitions on focus for immediate feedback */\n}\n\n/* Improve focus management for interactive elements */\n[role=\"button\"]:focus,\n[role=\"link\"]:focus,\nbutton:focus,\na:focus {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n/* Enhanced error message accessibility */\n[role=\"alert\"] {\n padding: var(--spacing-md);\n border: 2px solid var(--color-error);\n border-radius: var(--border-radius-base);\n background-color: rgba(176, 0, 32, 0.1);\n margin: var(--spacing-md) 0;\n}\n\n/* Success message styling */\n[role=\"status\"] {\n padding: var(--spacing-md);\n border: 2px solid var(--color-success);\n border-radius: var(--border-radius-base);\n background-color: rgba(0, 200, 83, 0.1);\n margin: var(--spacing-md) 0;\n}\n\n/* Enhanced table accessibility */\ntable {\n border-collapse: collapse;\n width: 100%;\n}\n\nth {\n background-color: var(--color-section-bg);\n font-weight: 600;\n text-align: left;\n padding: var(--spacing-sm);\n}\n\ntd {\n padding: var(--spacing-sm);\n}\n\n/* Focus trap for modals */\n.focus-trap {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Enhanced button accessibility */\nbutton, [role=\"button\"] {\n cursor: pointer;\n border: none;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-sm) var(--spacing-md);\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n font-size: var(--font-size-base);\n font-weight: 600;\n transition: all var(--animation-duration) ease;\n position: relative;\n}\n\nbutton:disabled, [role=\"button\"][aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Loading indicator accessibility */\n.loading-spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--color-border-pale);\n border-top: 3px solid var(--color-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .loading-spinner {\n animation: none;\n border-top-color: var(--color-primary);\n }\n}\n\n/* Utility classes */\n.u-flex {\n display: flex;\n}\n.u-grid {\n display: grid;\n}\n.u-center {\n justify-content: center;\n align-items: center;\n}\n.u-gap {\n gap: 1em;\n}\n\n/* Common card component - used across all modules */\n.module-card {\n background: var(--color-card-bg);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-lg);\n margin-bottom: var(--spacing-lg);\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n/* Common header styles */\n.module-header {\n text-align: center;\n margin-bottom: var(--spacing-md);\n}\n\n/* Common flex patterns */\n.flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.flex-column {\n display: flex;\n flex-direction: column;\n}\n\n.flex-column-center {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Text utilities */\n.text-center {\n text-align: center;\n}\n\n.text-secondary {\n color: var(--color-text-secondary);\n}\n\n.text-muted {\n color: var(--color-text-muted);\n}\n\n/* Responsive grid for profile */\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n gap: 1.5em;\n background: var(--profile-grid-bg, var(--color-background));\n}\n.profile-header, .profile-footer {\n grid-column: 1 / -1;\n}\n\n/* Override solid-ui error message close button styling */\n.errorMessageBlock .close,\n.errorMessageBlock button[type=\"button\"],\n.errorMessageBlock .button {\n background: var(--color-border-pale) !important;\n color: var(--text-color) !important;\n border: 1px solid var(--color-border-pale) !important;\n}\n\n.errorMessageBlock .close:hover,\n.errorMessageBlock button[type=\"button\"]:hover,\n.errorMessageBlock .button:hover {\n background: var(--color-text-secondary) !important;\n color: var(--color-background) !important;\n}"],"sourceRoot":""}]);
2964
2964
  // Exports
2965
2965
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2966
2966
 
@@ -5175,9 +5175,6 @@ const FriendList_FriendList = (subject, context) => {
5175
5175
  aria-labelledby="friends-section-title"
5176
5176
  data-testid="friend-list"
5177
5177
  >
5178
- <header class="flex gap-xs mb-md">
5179
- <h3 id="friends-section-title" class="section-title">Friend Connections</h3>
5180
- </header>
5181
5178
  <nav aria-label="Friend profiles">
5182
5179
  <ul class="list-reset zebra-stripe" role="list">
5183
5180
  ${friends}
@@ -5877,12 +5874,8 @@ const SocialCard_SocialCard = (SocialData) => {
5877
5874
  <section
5878
5875
  class="socialCard"
5879
5876
  aria-labelledby="social-card-title"
5880
- role="region"
5881
5877
  data-testid="social-media"
5882
5878
  >
5883
- <header class="socialHeader">
5884
- <h3 id="social-card-title">Follow me on</h3>
5885
- </header>
5886
5879
  <nav aria-label="Social media profiles">
5887
5880
  <ul class="socialList list-reset" role="list">
5888
5881
  ${accounts.map(account => renderAccount(account))}