@stackoverflow/stacks 3.0.0-beta.14 → 3.0.0-beta.15

package/dist/css/stacks.css

@@ -837,20 +837,14 @@ a.s-badge:hover {
 .s-banner {
   --_no-ty-offset: 0;
   --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
-  --_no-bc: var(--black-225);
-  --_no-bg: var(--black-100);
-  --_no-fc: var(--black-500);
-  --_no-btn-bg-active: var(--black-250);
-  --_no-btn-bg-focus: var(--black-225);
-  --_no-btn-fc: var(--_no-fc);
+  --_no-bg: var(--black-150);
+  --_no-icon-bg: var(--black-200);
+  --_no-fc: var(--black-600);
   --_no-code-bc: var(--black-300);
   --_no-code-bg: var(--black-200);
   --_no-code-fc: var(--_no-fc);
   background: var(--_no-bg);
-  border-color: var(--_no-bc);
   color: var(--_no-fc);
-  border-style: solid;
-  font-size: var(--fs-body1);
   border-width: 0 0 var(--su-static1);
   inset: 0 0 auto 0;
   padding: var(--su12);
@@ -859,140 +853,104 @@ a.s-badge:hover {
   width: 100%;
   z-index: calc(var(--zi-navigation-fixed) - 1);
 }
-body.theme-highcontrast .s-banner {
-  --_no-bc: var(--black-400);
-}
-body.theme-highcontrast .s-banner,
-body.theme-highcontrast .s-banner.s-banner__danger,
-body.theme-highcontrast .s-banner.s-banner__info,
-body.theme-highcontrast .s-banner.s-banner__success,
-body.theme-highcontrast .s-banner.s-banner__warning {
-  --_no-code-bc: var(--black-400);
-  --_no-code-bg: var(--white);
-  --_no-code-fc: var(--black);
-}
-body.theme-highcontrast .s-banner.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__danger.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__info.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__success.s-banner__important,
-body.theme-highcontrast .s-banner.s-banner__warning.s-banner__important {
-  --_no-code-bc: var(--black-200);
-  --_no-code-bg: var(--black);
-  --_no-code-fc: var(--white);
-}
-.s-banner__important:not(.s-banner__danger):not(.s-banner__info):not(.s-banner__success):not(.s-banner__warning) {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--black-500);
+body.theme-highcontrast .s-banner:not(body.theme-highcontrast .s-banner__important) {
+  --_no-icon-bc: var(--_no-code-bc);
+}
+.s-banner__important {
+  --_no-bg: var(--black-400);
+  --_no-icon-bg: var(--black-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-focus: var(--black-600);
-  --_no-btn-bg-active: var(--black-600);
-  --_no-btn-fc: var(--_no-fc);
   --_no-code-bc: var(--black-300);
-  --_no-code-bg: var(--black-600);
+  --_no-code-bg: var(--black-500);
 }
 .s-banner__danger:not(.s-banner__important) {
-  --_no-bc: var(--red-300);
   --_no-bg: var(--red-100);
-  --_no-btn-bg-active: var(--red-200);
-  --_no-btn-bg-focus: var(--red-200);
-  --_no-btn-fc: var(--red-500);
+  --_no-icon-bg: var(--red-200);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-200);
 }
-body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
-  --_no-bc: var(--red-400);
-}
 .s-banner__danger.s-banner__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--red-400);
+  --_no-icon-bg: var(--red-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--red-500);
-  --_no-btn-bg-focus: var(--red-500);
-  --_no-btn-fc: var(--red-100);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-500);
 }
-body.theme-highcontrast .s-banner__danger.s-banner__important {
-  --_no-bg: var(--red-500);
-}
 .s-banner__info:not(.s-banner__important) {
-  --_no-bc: var(--theme-secondary-300);
-  --_no-bg: var(--theme-secondary-100);
-  --_no-btn-bg-active: var(--theme-secondary-200);
-  --_no-btn-bg-focus: var(--theme-secondary-200);
-  --_no-btn-fc: var(--theme-secondary-500);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-200);
-}
-body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
-  --_no-bc: var(--theme-secondary-400);
+  --_no-bg: var(--blue-100);
+  --_no-icon-bg: var(--blue-200);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-200);
 }
 .s-banner__info.s-banner__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--theme-secondary-400);
+  --_no-bg: var(--blue-400);
+  --_no-icon-bg: var(--blue-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--theme-secondary-500);
-  --_no-btn-bg-focus: var(--theme-secondary-500);
-  --_no-btn-fc: var(--theme-secondary-100);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-500);
-}
-body.theme-highcontrast .s-banner__info.s-banner__important {
-  --_no-bg: var(--theme-secondary-500);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-500);
 }
 .s-banner__success:not(.s-banner__important) {
-  --_no-bc: var(--green-300);
   --_no-bg: var(--green-100);
-  --_no-btn-bg-active: var(--green-200);
-  --_no-btn-bg-focus: var(--green-200);
-  --_no-btn-fc: var(--green-500);
+  --_no-icon-bg: var(--green-200);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-200);
 }
-body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
-  --_no-bc: var(--green-400);
-}
 .s-banner__success.s-banner__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--green-400);
+  --_no-icon-bg: var(--green-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--green-500);
-  --_no-btn-bg-focus: var(--green-500);
-  --_no-btn-fc: var(--green-100);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-500);
 }
-body.theme-highcontrast .s-banner__success.s-banner__important {
-  --_no-bg: var(--green-500);
+.s-banner__featured:not(.s-banner__important) {
+  --_no-bg: var(--purple-100);
+  --_no-icon-bg: var(--purple-200);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-200);
+}
+.s-banner__featured.s-banner__important {
+  --_no-bg: var(--purple-400);
+  --_no-icon-bg: var(--purple-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-500);
+}
+.s-banner__activity:not(.s-banner__important) {
+  --_no-bg: var(--pink-100);
+  --_no-icon-bg: var(--pink-200);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-200);
+}
+.s-banner__activity.s-banner__important {
+  --_no-bg: var(--pink-400);
+  --_no-icon-bg: var(--pink-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-500);
 }
 .s-banner__warning:not(.s-banner__important) {
-  --_no-bc: var(--yellow-300);
   --_no-bg: var(--yellow-100);
-  --_no-btn-bg-active: var(--yellow-200);
-  --_no-btn-bg-focus: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-500);
+  --_no-icon-bg: var(--yellow-200);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-600);
-}
-body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
-  --_no-bc: var(--yellow-400);
 }
 .s-banner__warning.s-banner__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--yellow-400);
+  --_no-bg: var(--yellow-300);
+  --_no-icon-bg: var(--yellow-400);
   --_no-fc: var(--black);
-  --_no-btn-fc: var(--_no-fc);
-  --_no-btn-bg-active: var(--yellow-300);
-  --_no-btn-bg-focus: var(--yellow-300);
-  --_no-code-bc: var(--yellow-500);
-  --_no-code-bg: var(--yellow-300);
+  --_no-code-bc: var(--yellow-400);
+  --_no-code-bg: var(--yellow-200);
+}
+.s-banner__warning.s-banner__important .s-notice--icon {
+  color: var(--white);
 }
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-banner__warning.s-banner__important {
     --_no-fc: var(--white);
     --_no-code-bc: var(--yellow-300);
     --_no-code-bg: var(--yellow-500);
+    --_no-bg: var(--yellow-400);
+    --_no-icon-bg: var(--yellow-500);
   }
 }
 body.theme-dark .s-banner__warning.s-banner__important,
@@ -1001,32 +959,38 @@ body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
   --_no-fc: var(--white);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
 }
 body.theme-highcontrast .s-banner__warning.s-banner__important {
-  --_no-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
+  --_no-code-bc: var(--yellow-300);
+  --_no-code-bg: var(--yellow-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: transparent;
-  --_no-btn-bg-focus: transparent;
 }
 .s-banner code {
   background-color: var(--_no-code-bg);
   color: var(--_no-code-fc);
   outline: var(--su-static1) solid var(--_no-code-bc);
-  border-radius: var(--br-md);
   padding-left: var(--su2);
   padding-right: var(--su2);
+  white-space: nowrap;
 }
-.s-banner .s-banner--btn {
-  color: var(--_no-btn-fc, inherit) !important;
-  padding: var(--su8);
+button.s-banner--dismiss:active {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
 }
-.s-banner .s-banner--btn:active {
-  background-color: var(--_no-btn-bg-active, inherit) !important;
+button.s-banner--dismiss:focus-visible,
+button.s-banner--dismiss:hover,
+button.s-banner--dismiss.focus-inset-bordered {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
 }
-.s-banner .s-banner--btn:focus-visible,
-.s-banner .s-banner--btn:hover,
-.s-banner .s-banner--btn.focus-inset-bordered {
-  background-color: var(--_no-btn-bg-focus, inherit) !important;
+:has( > button.s-banner--dismiss) {
+  padding-left: var(--su24);
+  gap: calc(var(--su24) - var(--su2));
+  word-wrap: initial !important;
 }
 .s-banner[aria-hidden="true"] {
   --_no-ty-offset: -1;
@@ -3367,158 +3331,117 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
  * @baseClass - The base class name for the notice component
  */
 .s-notice {
-  --_no-bc: var(--black-225);
-  --_no-bg: var(--black-100);
-  --_no-fc: var(--black-500);
-  --_no-btn-bg-active: var(--black-250);
-  --_no-btn-bg-focus: var(--black-225);
-  --_no-btn-fc: var(--_no-fc);
+  --_no-bg: var(--black-150);
+  --_no-icon-bg: var(--black-200);
+  --_no-fc: var(--black-600);
   --_no-code-bc: var(--black-300);
   --_no-code-bg: var(--black-200);
   --_no-code-fc: var(--_no-fc);
   background: var(--_no-bg);
-  border-color: var(--_no-bc);
   color: var(--_no-fc);
-  border-style: solid;
-  font-size: var(--fs-body1);
-  border-radius: var(--br-md);
-  border-width: var(--su-static1);
-  padding: var(--su16);
+  display: flex;
+  align-items: center;
+  --_no-pd: var(--su8);
+  padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
+}
+body.theme-highcontrast .s-notice:not(body.theme-highcontrast .s-notice__important) {
+  --_no-icon-bc: var(--_no-code-bc);
 }
-body.theme-highcontrast .s-notice {
-  --_no-bc: var(--black-400);
-}
-body.theme-highcontrast .s-notice,
-body.theme-highcontrast .s-notice.s-notice__danger,
-body.theme-highcontrast .s-notice.s-notice__info,
-body.theme-highcontrast .s-notice.s-notice__success,
-body.theme-highcontrast .s-notice.s-notice__warning {
-  --_no-code-bc: var(--black-400);
-  --_no-code-bg: var(--white);
-  --_no-code-fc: var(--black);
-}
-body.theme-highcontrast .s-notice.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__danger.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__info.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__success.s-notice__important,
-body.theme-highcontrast .s-notice.s-notice__warning.s-notice__important {
-  --_no-code-bc: var(--black-200);
-  --_no-code-bg: var(--black);
-  --_no-code-fc: var(--white);
-}
-.s-notice__important:not(.s-notice__danger):not(.s-notice__info):not(.s-notice__success):not(.s-notice__warning) {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--black-500);
+.s-notice__important {
+  --_no-bg: var(--black-400);
+  --_no-icon-bg: var(--black-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-focus: var(--black-600);
-  --_no-btn-bg-active: var(--black-600);
-  --_no-btn-fc: var(--_no-fc);
   --_no-code-bc: var(--black-300);
-  --_no-code-bg: var(--black-600);
+  --_no-code-bg: var(--black-500);
 }
 .s-notice__danger:not(.s-notice__important) {
-  --_no-bc: var(--red-300);
   --_no-bg: var(--red-100);
-  --_no-btn-bg-active: var(--red-200);
-  --_no-btn-bg-focus: var(--red-200);
-  --_no-btn-fc: var(--red-500);
+  --_no-icon-bg: var(--red-200);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-200);
 }
-body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
-  --_no-bc: var(--red-400);
-}
 .s-notice__danger.s-notice__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--red-400);
+  --_no-icon-bg: var(--red-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--red-500);
-  --_no-btn-bg-focus: var(--red-500);
-  --_no-btn-fc: var(--red-100);
   --_no-code-bc: var(--red-300);
   --_no-code-bg: var(--red-500);
 }
-body.theme-highcontrast .s-notice__danger.s-notice__important {
-  --_no-bg: var(--red-500);
-}
 .s-notice__info:not(.s-notice__important) {
-  --_no-bc: var(--theme-secondary-300);
-  --_no-bg: var(--theme-secondary-100);
-  --_no-btn-bg-active: var(--theme-secondary-200);
-  --_no-btn-bg-focus: var(--theme-secondary-200);
-  --_no-btn-fc: var(--theme-secondary-500);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-200);
-}
-body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
-  --_no-bc: var(--theme-secondary-400);
+  --_no-bg: var(--blue-100);
+  --_no-icon-bg: var(--blue-200);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-200);
 }
 .s-notice__info.s-notice__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--theme-secondary-400);
+  --_no-bg: var(--blue-400);
+  --_no-icon-bg: var(--blue-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--theme-secondary-500);
-  --_no-btn-bg-focus: var(--theme-secondary-500);
-  --_no-btn-fc: var(--theme-secondary-100);
-  --_no-code-bc: var(--theme-secondary-300);
-  --_no-code-bg: var(--theme-secondary-500);
-}
-body.theme-highcontrast .s-notice__info.s-notice__important {
-  --_no-bg: var(--theme-secondary-500);
+  --_no-code-bc: var(--blue-300);
+  --_no-code-bg: var(--blue-500);
 }
 .s-notice__success:not(.s-notice__important) {
-  --_no-bc: var(--green-300);
   --_no-bg: var(--green-100);
-  --_no-btn-bg-active: var(--green-200);
-  --_no-btn-bg-focus: var(--green-200);
-  --_no-btn-fc: var(--green-500);
+  --_no-icon-bg: var(--green-200);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-200);
 }
-body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
-  --_no-bc: var(--green-400);
-}
 .s-notice__success.s-notice__important {
-  --_no-bc: var(--_no-bg);
   --_no-bg: var(--green-400);
+  --_no-icon-bg: var(--green-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: var(--green-500);
-  --_no-btn-bg-focus: var(--green-500);
-  --_no-btn-fc: var(--green-100);
   --_no-code-bc: var(--green-300);
   --_no-code-bg: var(--green-500);
 }
-body.theme-highcontrast .s-notice__success.s-notice__important {
-  --_no-bg: var(--green-500);
+.s-notice__featured:not(.s-notice__important) {
+  --_no-bg: var(--purple-100);
+  --_no-icon-bg: var(--purple-200);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-200);
+}
+.s-notice__featured.s-notice__important {
+  --_no-bg: var(--purple-400);
+  --_no-icon-bg: var(--purple-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--purple-300);
+  --_no-code-bg: var(--purple-500);
+}
+.s-notice__activity:not(.s-notice__important) {
+  --_no-bg: var(--pink-100);
+  --_no-icon-bg: var(--pink-200);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-200);
+}
+.s-notice__activity.s-notice__important {
+  --_no-bg: var(--pink-400);
+  --_no-icon-bg: var(--pink-500);
+  --_no-fc: var(--white);
+  --_no-code-bc: var(--pink-300);
+  --_no-code-bg: var(--pink-500);
 }
 .s-notice__warning:not(.s-notice__important) {
-  --_no-bc: var(--yellow-300);
   --_no-bg: var(--yellow-100);
-  --_no-btn-bg-active: var(--yellow-200);
-  --_no-btn-bg-focus: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-500);
+  --_no-icon-bg: var(--yellow-200);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-200);
-  --_no-btn-fc: var(--yellow-600);
-}
-body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
-  --_no-bc: var(--yellow-400);
 }
 .s-notice__warning.s-notice__important {
-  --_no-bc: var(--_no-bg);
-  --_no-bg: var(--yellow-400);
+  --_no-bg: var(--yellow-300);
+  --_no-icon-bg: var(--yellow-400);
   --_no-fc: var(--black);
-  --_no-btn-fc: var(--_no-fc);
-  --_no-btn-bg-active: var(--yellow-300);
-  --_no-btn-bg-focus: var(--yellow-300);
-  --_no-code-bc: var(--yellow-500);
-  --_no-code-bg: var(--yellow-300);
+  --_no-code-bc: var(--yellow-400);
+  --_no-code-bg: var(--yellow-200);
+}
+.s-notice__warning.s-notice__important .s-notice--icon {
+  color: var(--white);
 }
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-notice__warning.s-notice__important {
     --_no-fc: var(--white);
     --_no-code-bc: var(--yellow-300);
     --_no-code-bg: var(--yellow-500);
+    --_no-bg: var(--yellow-400);
+    --_no-icon-bg: var(--yellow-500);
   }
 }
 body.theme-dark .s-notice__warning.s-notice__important,
@@ -3527,32 +3450,49 @@ body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
   --_no-fc: var(--white);
   --_no-code-bc: var(--yellow-300);
   --_no-code-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
 }
 body.theme-highcontrast .s-notice__warning.s-notice__important {
-  --_no-bg: var(--yellow-500);
+  --_no-bg: var(--yellow-400);
+  --_no-icon-bg: var(--yellow-500);
+  --_no-code-bc: var(--yellow-300);
+  --_no-code-bg: var(--yellow-500);
   --_no-fc: var(--white);
-  --_no-btn-bg-active: transparent;
-  --_no-btn-bg-focus: transparent;
 }
 .s-notice code {
   background-color: var(--_no-code-bg);
   color: var(--_no-code-fc);
   outline: var(--su-static1) solid var(--_no-code-bc);
-  border-radius: var(--br-md);
   padding-left: var(--su2);
   padding-right: var(--su2);
+  white-space: nowrap;
 }
-.s-notice .s-notice--btn {
-  color: var(--_no-btn-fc, inherit) !important;
-  padding: var(--su8);
-}
-.s-notice .s-notice--btn:active {
-  background-color: var(--_no-btn-bg-active, inherit) !important;
-}
-.s-notice .s-notice--btn:focus-visible,
-.s-notice .s-notice--btn:hover,
-.s-notice .s-notice--btn.focus-inset-bordered {
-  background-color: var(--_no-btn-bg-focus, inherit) !important;
+button.s-notice--dismiss:active {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
+}
+button.s-notice--dismiss:focus-visible,
+button.s-notice--dismiss:hover,
+button.s-notice--dismiss.focus-inset-bordered {
+  background-color: var(--_no-fc);
+  color: var(--_no-bg);
+}
+:has( > button.s-notice--dismiss) {
+  padding-left: var(--su24);
+  gap: calc(var(--su24) - var(--su2));
+  word-wrap: initial !important;
+}
+.s-notice--icon {
+  background: var(--_no-icon-bg);
+  border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
+  padding: var(--_no-pd);
+  margin-right: var(--su12);
+  align-self: stretch;
+  display: flex;
+  align-items: top;
+  margin-top: calc(var(--_no-pd) * -1);
+  margin-bottom: calc(var(--_no-pd) * -1);
 }
 .s-page-title {
   --_pt-ai: flex-end;
@@ -3674,7 +3614,7 @@ ul.s-pagination {
   --_po-bc: var(--bc-medium);
   --_po-bs: var(--bs-md);
   --_po-d: none;
-  --_po-wmn: 12rem;
+  --_po-wmn: 10.5rem;
   --_po-w: 100%;
   --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
   --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48));
@@ -3687,7 +3627,7 @@ ul.s-pagination {
   border-radius: var(--br-md);
   color: var(--fc-dark);
   font-size: var(--fs-body1);
-  max-width: 24rem;
+  max-width: 21rem;
   padding: var(--su12);
   position: absolute;
   white-space: normal;
@@ -4015,8 +3955,8 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
   font-size: var(--fs-body3);
   font-weight: normal;
   line-height: var(--lh-md);
-  margin-bottom: 0.3846rem;
-  margin-top: -0.15rem;
+  margin-bottom: 0.3365rem;
+  margin-top: -0.125rem;
   padding-right: var(--su24);
 }
 .s-post-summary .s-post-summary--content-title a {
@@ -4467,11 +4407,11 @@ body.theme-highcontrast .s-prose {
 .s-prose.s-prose__xs,
 .s-prose.s-prose__sm,
 .s-prose.s-prose__md {
-  --_pr-h1-fs: var(--fs-headline1-relative);
-  --_pr-h2-fs: var(--fs-title-relative);
-  --_pr-h3-fs: var(--fs-subheading-relative);
-  --_pr-h4-fs: var(--fs-body3-relative);
-  --_pr-h5-fs: var(--fs-body2-relative);
+  --_pr-h1-fs: 1.75em;
+  --_pr-h2-fs: 1.375em;
+  --_pr-h3-fs: 1.25em;
+  --_pr-h4-fs: 1.125em;
+  --_pr-h5-fs: 1em;
 }
 .s-prose.s-prose__xs {
   --_pr-fs: var(--fs-caption);
@@ -5813,11 +5753,10 @@ a.s-tag:active {
 }
 .s-toast .s-notice {
   box-shadow: var(--bs-sm);
-  max-width: 44rem;
+  max-width: 38.5rem;
   padding-bottom: var(--su8);
   padding-top: var(--su8);
   pointer-events: all;
-  width: 100%;
 }
 .s-toggle-switch {
   --_ts-bg: var(--black-350);
@@ -6546,109 +6485,102 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
 }
 .s-user-card {
   --_uc-ai: center;
-  --_uc-bg: unset;
-  --_uc-bar: unset;
-  --_uc-d: grid;
-  --_uc-fc: unset;
-  --_uc-g: var(--su4) var(--su8);
-  --_uc-p: var(--su8);
-  --_uc-info-ai: unset;
-  --_uc-info-fd: column;
-  --_uc-link-fs: var(--fs-caption);
-  --_uc-link-ws: unset;
-  --_uc-rep-fc: unset;
-  --_uc-time-fc: var(--black-400);
-  --_uc-time-ws: unset;
-  --_uc-type-fc: var(--theme-primary-400);
+  --_uc-fd: unset;
+  --_uc-column-gap: var(--su6);
+  --_uc-group-gap: var(--su4);
+  --_uc-row-gap: var(--su6);
+  --_uc-username-fs: unset;
   align-items: var(--_uc-ai);
-  background-color: var(--_uc-bg);
-  border-radius: var(--_uc-bar);
-  color: var(--_uc-fc);
-  display: var(--_uc-d);
-  gap: var(--_uc-g);
-  grid-template-columns: auto 1fr;
-  line-height: 1;
-  padding: var(--_uc-p);
-}
-.s-user-card.s-user-card__deleted {
-  --_uc-fc: var(--black-400);
-}
-.s-user-card.s-user-card__highlighted {
-  --_uc-bg: var(--theme-secondary-100);
-  --_uc-bar: var(--br-md);
-  --_uc-time-fc: var(--black-500);
-  --_uc-type-fc: var(--black-500);
-}
-.s-user-card.s-user-card__minimal,
-.s-user-card.s-user-card__small {
-  --_uc-d: flex;
-  --_uc-g: var(--su4);
-  --_uc-p: 0;
-  --_uc-info-ai: center;
-  --_uc-info-fd: row;
-}
-.s-user-card.s-user-card__full {
+  color: var(--black-500);
+  display: flex;
+  flex-direction: var(--_uc-fd);
+  flex-wrap: wrap;
+  font-size: var(--fs-caption);
+  gap: var(--su6);
+}
+.s-user-card.s-user-card__lg {
   --_uc-ai: flex-start;
-  --_uc-link-fs: var(--fs-body2);
+  --_uc-fd: column;
+  --_uc-username-fs: var(--fs-body3);
 }
-.s-user-card.s-user-card__minimal {
-  --_uc-link-ws: nowrap;
-  --_uc-rep-fc: var(--black-500);
-  --_uc-time-ws: nowrap;
+.s-user-card.s-user-card__lg .s-avatar {
+  margin-right: var(--su6);
 }
-.s-user-card .s-user-card--location,
-.s-user-card .s-user-card--role {
-  font-size: var(--fs-caption);
+.s-user-card.s-user-card__lg .s-user-card--username {
+  margin-right: var(--su2);
+}
+.s-user-card.s-user-card__lg .s-user-card--group:has(> .s-user-card--rep) {
+  margin-top: calc(var(--su2) * -1);
+}
+.s-user-card .s-user-card--bio {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   color: var(--black-400);
 }
-.s-user-card .s-user-card--awards {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  align-items: center;
-  display: flex;
-  gap: var(--su6);
+.s-user-card .s-user-card--recognition {
+  --_uc-row-gap: var(--su4);
 }
-.s-user-card .s-user-card--awards li {
-  font-size: var(--fs-caption);
+.s-user-card .s-user-card--recognition,
+.s-user-card .s-user-card--recognition a {
+  color: var(--theme-primary);
 }
-.s-user-card .s-user-card--info {
-  align-items: var(--_uc-info-ai);
-  flex-direction: var(--_uc-info-fd);
-  display: flex;
-  gap: var(--su4);
+.s-user-card .s-user-card--rep {
+  color: var(--black-600);
+  font-weight: 600;
 }
-.s-user-card .s-user-card--link {
-  font-size: var(--_uc-link-fs);
-  white-space: var(--_uc-link-ws);
-  align-items: center;
-  flex-wrap: wrap;
+.s-user-card .s-user-card--time {
+  color: var(--black-400);
+}
+.s-user-card .s-user-card--username {
+  font-size: var(--_uc-username-fs);
+  font-weight: 500;
   min-width: 0;
   overflow-wrap: break-word;
+  word-break: break-all;
 }
-.s-user-card .s-user-card--rep {
-  color: var(--_uc-rep-fc);
-  font-weight: 700;
+.s-user-card .s-user-card--column {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--_uc-column-gap);
 }
-.s-user-card .s-user-card--tags {
+.s-user-card .s-user-card--group {
   align-items: center;
-  min-width: 0;
-  flex-wrap: wrap;
+  display: flex;
+  gap: var(--_uc-group-gap);
 }
-.s-user-card .s-user-card--time {
-  color: var(--_uc-time-fc);
-  white-space: var(--_uc-time-ws);
-  font-size: var(--fs-caption);
-  grid-column: 1 / 3;
-  grid-row: 1 / 2;
+.s-user-card .s-user-card--group:has(> .s-avatar) {
+  --_uc-group-gap: var(--su6);
 }
-.s-user-card .s-user-card--type {
-  color: var(--_uc-type-fc);
-  font-size: var(--fs-caption);
-  grid-column: 1 / 3;
+.s-user-card .s-user-card--group:has(+ .s-user-card--time) {
+  margin-right: var(--su2);
 }
-.s-user-card .s-user-card--type a:not(.s-link) {
-  color: inherit !important;
+.s-user-card ul.s-user-card--group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.s-user-card ul.s-user-card--group.s-user-card--group__split li:not(:last-child):after {
+  background-color: var(--black-350);
+  content: "";
+  display: block;
+  margin-left: var(--su4);
+  width: var(--su4);
+  height: var(--su4);
+}
+.s-user-card ul.s-user-card--group li {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--su2);
+}
+.s-user-card .s-user-card--row {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--_uc-row-gap);
 }
 .s-vote {
   --_vo-fd: column;
@@ -6805,36 +6737,27 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
   font-style: italic;
   font-weight: 800;
 }
-html,
+html {
+  font-size: 100%;
+}
 body {
   --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
   --ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
   --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
   --theme-body-font-family: var(--ff-sans);
-  --fs-fine: 12px;
-  --fs-caption: 13px;
-  --fs-body1: 14px;
-  --fs-body2: 1.143rem;
-  --fs-body3: 1.286rem;
-  --fs-subheading: 1.429rem;
-  --fs-title: 1.571rem;
-  --fs-headline1: 2rem;
-  --fs-headline2: 2.571rem;
-  --fs-display1: 3.286rem;
-  --fs-display2: 4.143rem;
-  --fs-display3: 5.143rem;
-  --fs-display4: 7.143rem;
-  --fs-body2-relative: 1.143rem;
-  --fs-body3-relative: 1.286rem;
-  --fs-subheading-relative: 1.429rem;
-  --fs-title-relative: 1.571rem;
-  --fs-headline1-relative: 2rem;
-  --fs-headline2-relative: 2.571rem;
-  --fs-display1-relative: 3.286rem;
-  --fs-display2-relative: 4.143rem;
-  --fs-display3-relative: 5.143rem;
-  --fs-display4-relative: 7.143rem;
-  --fs-base: 14px;
+  --fs-fine: 0.75rem;
+  --fs-caption: 0.8125rem;
+  --fs-body1: 0.875rem;
+  --fs-body2: 1rem;
+  --fs-body3: 1.125rem;
+  --fs-subheading: 1.25rem;
+  --fs-title: 1.375rem;
+  --fs-headline1: 1.75rem;
+  --fs-headline2: 2.25rem;
+  --fs-display1: 2.875rem;
+  --fs-display2: 3.625rem;
+  --fs-display3: 4.5rem;
+  --fs-display4: 6.25rem;
   --stacks-internals-lh-unit: 14;
   --lh-xs: 1;
   --lh-sm: calc((var(--stacks-internals-lh-unit) + 2) / var(--stacks-internals-lh-unit));
@@ -6873,7 +6796,7 @@ body {
   --te-ease-out: cubic-bezier(0.39, 0.575, 0.565, 1);
   --default-transition-duration: 0.1s;
   --transition-time: var(--default-transition-duration);
-  --s-full: 97.2307692rem;
+  --s-full: 79rem;
   --s-step: calc(var(--s-full) / 12);
 }
 body {
@@ -23419,7 +23342,7 @@ html,
 body {
   color: var(--theme-body-font-color, var(--black-600));
   font-family: var(--theme-body-font-family);
-  font-size: var(--fs-base);
+  font-size: var(--fs-body1);
   line-height: var(--lh-base);
 }
 body {