lighthouse 8.6.0 → 9.0.0

package/report/assets/styles.css

@@ -38,6 +38,7 @@
   --color-blue-200: #90CAF9;
   --color-blue-900: #0D47A1;
   --color-blue-A700: #2962FF;
+  --color-blue-primary: #06f;
   --color-cyan-500: #00BCD4;
   --color-gray-100: #F5F5F5;
   --color-gray-300: #CFCFCF;
@@ -50,14 +51,14 @@
   --color-gray-800: #424242;
   --color-gray-900: #212121;
   --color-gray: #000000;
-  --color-green-700: #018642;
-  --color-green: #0CCE6B;
+  --color-green-700: #080;
+  --color-green: #0c6;
   --color-lime-400: #D3E156;
   --color-orange-50: #FFF3E0;
-  --color-orange-700: #D04900;
-  --color-orange: #FFA400;
-  --color-red-700: #EB0F00;
-  --color-red: #FF4E42;
+  --color-orange-700: #C33300;
+  --color-orange: #fa3;
+  --color-red-700: #c00;
+  --color-red: #f33;
   --color-teal-600: #00897B;
   --color-white: #FFFFFF;
 
@@ -75,82 +76,81 @@
   /* Component variables */
   --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
   --audit-explanation-line-height: 16px;
-  --audit-group-margin-bottom: 40px;
+  --audit-group-margin-bottom: calc(var(--default-padding) * 6);
   --audit-group-padding-vertical: 8px;
   --audit-margin-horizontal: 5px;
   --audit-padding-vertical: 8px;
-  --category-header-font-size: 20px;
-  --category-padding: 40px;
+  --category-padding: calc(var(--default-padding) * 6) calc(var(--default-padding) * 4) calc(var(--default-padding) * 4);
   --chevron-line-stroke: var(--color-gray-600);
   --chevron-size: 12px;
-  --default-padding: 12px;
+  --default-padding: 8px;
   --env-item-background-color: var(--color-gray-100);
   --env-item-font-size: 28px;
   --env-item-line-height: 36px;
   --env-item-padding: 10px 0px;
   --env-name-min-width: 220px;
   --footer-padding-vertical: 16px;
-  --gauge-circle-size-big: 112px;
-  --gauge-circle-size: 80px;
-  --gauge-circle-size-sm: 36px;
-  --gauge-label-font-size-big: 28px;
-  --gauge-label-font-size: 20px;
-  --gauge-label-line-height-big: 36px;
-  --gauge-label-line-height: 26px;
+  --gauge-circle-size-big: 96px;
+  --gauge-circle-size: 48px;
+  --gauge-circle-size-sm: 32px;
+  --gauge-label-font-size-big: 18px;
+  --gauge-label-font-size: var(--report-font-size-secondary);
+  --gauge-label-line-height-big: 24px;
+  --gauge-label-line-height: var(--report-line-height-secondary);
   --gauge-percentage-font-size-big: 38px;
-  --gauge-percentage-font-size: 28px;
-  --gauge-wrapper-width: 148px;
+  --gauge-percentage-font-size: var(--report-font-size-secondary);
+  --gauge-wrapper-width: 120px;
   --header-line-height: 24px;
   --highlighter-background-color: var(--report-text-color);
   --icon-square-size: calc(var(--score-icon-size) * 0.88);
   --image-preview-size: 48px;
+  --link-color: var(--color-blue-primary);
   --locale-selector-background-color: var(--color-white);
   --metric-toggle-lines-fill: #7F7F7F;
-  --metric-value-font-size: 28px;
+  --metric-value-font-size: calc(var(--report-font-size) * 1.8);
   --metrics-toggle-background-color: var(--color-gray-200);
   --plugin-badge-background-color: var(--color-white);
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
   --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
   --plugin-icon-size: 65%;
-  --pwa-icon-margin: 0 6px 0 -2px;
+  --pwa-icon-margin: 0 var(--default-padding);
   --pwa-icon-size: var(--topbar-logo-size);
   --report-background-color: #fff;
   --report-border-color-secondary: #ebebeb;
   --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --report-font-family: Roboto, Helvetica, Arial, sans-serif;
-  --report-font-size: 16px;
+  --report-font-size: 14px;
+  --report-font-size-secondary: 12px;
   --report-icon-size: var(--score-icon-background-size);
   --report-line-height: 24px;
-  --report-min-width: 400px;
+  --report-line-height-secondary: 20px;
+  --report-min-width: 360px;
   --report-monospace-font-size: calc(var(--report-font-size) * 0.85);
   --report-text-color-secondary: var(--color-gray-800);
   --report-text-color: var(--color-gray-900);
-  --report-width: calc(60 * var(--report-font-size));
+  --report-content-width: calc(60 * var(--report-font-size)); /* defaults to 840px */
   --score-container-padding: 8px;
   --score-icon-background-size: 24px;
-  --score-icon-margin-left: 4px;
-  --score-icon-margin-right: 12px;
+  --score-icon-margin-left: 6px;
+  --score-icon-margin-right: 14px;
   --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
   --score-icon-size: 12px;
   --score-icon-size-big: 16px;
-  --scores-container-padding: 20px 0 20px 0;
-  --scorescale-height: 6px;
-  --scorescale-width: 18px;
   --screenshot-overlay-background: rgba(0, 0, 0, 0.3);
-  --section-padding-vertical: 12px;
+  --section-padding-vertical: calc(var(--default-padding) * 6);
   --snippet-background-color: var(--color-gray-50);
   --snippet-color: #0938C2;
   --sparkline-height: 5px;
   --stackpack-padding-horizontal: 10px;
   --sticky-header-background-color: var(--report-background-color);
-  --table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
+  --table-higlight-background-color: hsla(210, 17%, 77%, 0.1);
   --tools-icon-color: var(--color-gray-600);
-  --topbar-background-color: var(--color-gray-100);
+  --topbar-background-color: var(--color-white);
   --topbar-height: 32px;
   --topbar-logo-size: 24px;
   --topbar-padding: 0 8px;
-  --toplevel-warning-background-color: var(--color-orange-50);
-  --toplevel-warning-message-text-color: #BD4200;
+  --toplevel-warning-background-color: hsla(30, 100%, 75%, 10%);
+  --toplevel-warning-message-text-color: var(--color-average-secondary);
   --toplevel-warning-padding: 18px;
   --toplevel-warning-text-color: var(--report-text-color);
 
@@ -175,7 +175,7 @@
 }
 
 @media not print {
-  .lh-vars.lh-dark {
+  .lh-dark {
     /* Pallete */
     --color-gray-200: var(--color-gray-800);
     --color-gray-300: #616161;
@@ -193,7 +193,8 @@
     --color-informative: var(--color-blue-200);
 
     /* Component variables */
-    --env-item-background-color: var(--color-gray);
+    --env-item-background-color: #393535;
+    --link-color: var(--color-blue-200);
     --locale-selector-background-color: var(--color-gray-200);
     --plugin-badge-background-color: var(--color-gray-800);
     --report-background-color: var(--color-gray-900);
@@ -202,9 +203,9 @@
     --report-text-color: var(--color-gray-100);
     --snippet-color: var(--color-cyan-500);
     --topbar-background-color: var(--color-gray);
-  	--toplevel-warning-background-color: #544B40;
-  	--toplevel-warning-message-text-color: var(--color-orange-700);
-	--toplevel-warning-text-color: var(--color-gray-100);
+    --toplevel-warning-background-color: hsl(33deg 14% 18%);
+    --toplevel-warning-message-text-color: var(--color-orange-700);
+    --toplevel-warning-text-color: var(--color-gray-100);
 
     /* SVGs */
     --plugin-icon-url: var(--plugin-icon-url-dark);
@@ -216,7 +217,7 @@
 @media only screen and (max-width: 480px) {
   .lh-vars {
     --audit-group-margin-bottom: 20px;
-    --category-padding: 24px;
+    --category-padding: 12px;
     --env-name-min-width: 120px;
     --gauge-circle-size-big: 96px;
     --gauge-circle-size: 72px;
@@ -250,7 +251,6 @@
   --audit-group-margin-bottom: 20px;
   --audit-group-padding-vertical: 12px;
   --audit-padding-vertical: 4px;
-  --category-header-font-size: 16px;
   --category-padding: 12px;
   --default-padding: 12px;
   --env-name-min-width: 120px;
@@ -306,7 +306,6 @@
 
 .lh-root *, .lh-root *::before, .lh-root *::after {
   box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
 }
 
 .lh-root {
@@ -369,7 +368,7 @@
 .lh-warnings a,
 .lh-footer a,
 .lh-table-column--link a {
-  color: var(--color-informative);
+  color: var(--link-color);
 }
 
 .lh-audit__description, .lh-audit__stackpack {
@@ -381,7 +380,6 @@
 }
 
 .lh-details {
-  font-size: var(--report-font-size);
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
   margin-left: var(--audit-description-padding-left);
@@ -395,7 +393,7 @@
 }
 
 .lh-audit__stackpack__img {
-  max-width: 50px;
+  max-width: 30px;
   margin-right: var(--default-padding)
 }
 
@@ -414,11 +412,13 @@
 
 .lh-report-icon::before {
   content: "";
-  margin-right: 5px;
+  margin: 4px;
   background-repeat: no-repeat;
   width: var(--report-icon-size);
   height: var(--report-icon-size);
   opacity: 0.7;
+  display: inline-block;
+  vertical-align: middle;
 }
 .lh-report-icon:hover::before {
   opacity: 1;
@@ -442,24 +442,51 @@
   background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 100 125"><path d="M50 23.587c-16.27 0-22.799 12.574-22.799 21.417 0 12.917 10.117 22.451 12.436 32.471h20.726c2.32-10.02 12.436-19.554 12.436-32.471 0-8.843-6.528-21.417-22.799-21.417zM39.637 87.161c0 3.001 1.18 4.181 4.181 4.181h.426l.41 1.231C45.278 94.449 46.042 95 48.019 95h3.963c1.978 0 2.74-.551 3.365-2.427l.409-1.231h.427c3.002 0 4.18-1.18 4.18-4.181V80.91H39.637v6.251zM50 18.265c1.26 0 2.072-.814 2.072-2.073v-9.12C52.072 5.813 51.26 5 50 5c-1.259 0-2.072.813-2.072 2.073v9.12c0 1.259.813 2.072 2.072 2.072zM68.313 23.727c.994.774 2.135.634 2.91-.357l5.614-7.187c.776-.992.636-2.135-.356-2.909-.992-.776-2.135-.636-2.91.357l-5.613 7.186c-.778.993-.636 2.135.355 2.91zM91.157 36.373c-.306-1.222-1.291-1.815-2.513-1.51l-8.85 2.207c-1.222.305-1.814 1.29-1.51 2.512.305 1.223 1.291 1.814 2.513 1.51l8.849-2.206c1.223-.305 1.816-1.291 1.511-2.513zM86.757 60.48l-8.331-3.709c-1.15-.512-2.225-.099-2.736 1.052-.512 1.151-.1 2.224 1.051 2.737l8.33 3.707c1.15.514 2.225.101 2.736-1.05.513-1.149.1-2.223-1.05-2.737zM28.779 23.37c.775.992 1.917 1.131 2.909.357.992-.776 1.132-1.917.357-2.91l-5.615-7.186c-.775-.992-1.917-1.132-2.909-.357s-1.131 1.917-.356 2.909l5.614 7.187zM21.715 39.583c.305-1.223-.288-2.208-1.51-2.513l-8.849-2.207c-1.222-.303-2.208.289-2.513 1.511-.303 1.222.288 2.207 1.511 2.512l8.848 2.206c1.222.304 2.208-.287 2.513-1.509zM21.575 56.771l-8.331 3.711c-1.151.511-1.563 1.586-1.05 2.735.511 1.151 1.586 1.563 2.736 1.052l8.331-3.711c1.151-.511 1.563-1.586 1.05-2.735-.512-1.15-1.585-1.562-2.736-1.052z"/></svg>');
 }
 .lh-report-icon--treemap::before {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="black"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z"/></svg>');
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="black"><path d="M3 5v14h19V5H3zm2 2h15v4H5V7zm0 10v-4h4v4H5zm6 0v-4h9v4h-9z"/></svg>');
+}
+.lh-report-icon--date::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 11h2v2H7v-2zm14-5v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6c0-1.1.9-2 2-2h1V2h2v2h8V2h2v2h1a2 2 0 012 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z"/></svg>');
+}
+.lh-report-icon--devices::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6h18V4H4a2 2 0 00-2 2v11H0v3h14v-3H4V6zm19 2h-6a1 1 0 00-1 1v10c0 .6.5 1 1 1h6c.6 0 1-.5 1-1V9c0-.6-.5-1-1-1zm-1 9h-4v-7h4v7z"/></svg>');
+}
+.lh-report-icon--world::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3c-.3-1.3-.8-2.5-1.4-3.6A8 8 0 0 1 18.9 8zm-7-4a14 14 0 0 1 2 4h-4a14 14 0 0 1 2-4zM4.3 14a8.2 8.2 0 0 1 0-4h3.3a16.5 16.5 0 0 0 0 4H4.3zm.8 2h3a14 14 0 0 0 1.3 3.6A8 8 0 0 1 5.1 16zm3-8H5a8 8 0 0 1 4.3-3.6L8 8zM12 20a14 14 0 0 1-2-4h4a14 14 0 0 1-2 4zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.6 14.6 0 0 1 0 4zm.3 5.6c.6-1.2 1-2.4 1.4-3.6h3a8 8 0 0 1-4.4 3.6zm1.8-5.6a16.5 16.5 0 0 0 0-4h3.3a8.2 8.2 0 0 1 0 4h-3.3z"/></svg>');
 }
+.lh-report-icon--stopwatch::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.1-6.6L20.5 6l-1.4-1.4L17.7 6A9 9 0 0 0 3 13a9 9 0 1 0 16-5.6zm-7 12.6a7 7 0 1 1 0-14 7 7 0 0 1 0 14z"/></svg>');
+}
+.lh-report-icon--networkspeed::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.9 5c-.2 0-.3 0-.4.2v.2L10.1 17a2 2 0 0 0-.2 1 2 2 0 0 0 4 .4l2.4-12.9c0-.3-.2-.5-.5-.5zM1 9l2 2c2.9-2.9 6.8-4 10.5-3.6l1.2-2.7C10 3.8 4.7 5.3 1 9zm20 2 2-2a15.4 15.4 0 0 0-5.6-3.6L17 8.2c1.5.7 2.9 1.6 4.1 2.8zm-4 4 2-2a9.9 9.9 0 0 0-2.7-1.9l-.5 3 1.2.9zM5 13l2 2a7.1 7.1 0 0 1 4-2l1.3-2.9C9.7 10.1 7 11 5 13z"/></svg>');
+}
+.lh-report-icon--samples-one::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="7" cy="14" r="3"/><path d="M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>');
+}
+.lh-report-icon--samples-many::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm4-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm5.6 17.6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/><circle cx="7" cy="14" r="3"/><circle cx="11" cy="6" r="3"/></svg>');
+}
+.lh-report-icon--chrome::before {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 562 562"><path d="M256 25.6v25.6a204 204 0 0 1 144.8 60 204 204 0 0 1 60 144.8 204 204 0 0 1-60 144.8 204 204 0 0 1-144.8 60 204 204 0 0 1-144.8-60 204 204 0 0 1-60-144.8 204 204 0 0 1 60-144.8 204 204 0 0 1 144.8-60V0a256 256 0 1 0 0 512 256 256 0 0 0 0-512v25.6z"/><path d="M256 179.2v25.6a51.3 51.3 0 0 1 0 102.4 51.3 51.3 0 0 1 0-102.4v-51.2a102.3 102.3 0 1 0-.1 204.7 102.3 102.3 0 0 0 .1-204.7v25.6z"/><path d="M256 204.8h217.6a25.6 25.6 0 0 0 0-51.2H256a25.6 25.6 0 0 0 0 51.2m44.3 76.8L191.5 470.1a25.6 25.6 0 1 0 44.4 25.6l108.8-188.5a25.6 25.6 0 1 0-44.4-25.6m-88.6 0L102.9 93.2a25.7 25.7 0 0 0-35-9.4 25.7 25.7 0 0 0-9.4 35l108.8 188.5a25.7 25.7 0 0 0 35 9.4 25.9 25.9 0 0 0 9.4-35.1"/></svg>');
+}
+
+
 
 .lh-buttons {
   display: flex;
   flex-wrap: wrap;
+  margin: var(--default-padding) 0;
 }
 .lh-button {
-  margin: 10px;
-  height: 30px;
-  border: 1px solid var(--color-gray-600);
-  border-radius: 4px;
-  font-weight: bold;
-  color: rgb(26, 115, 232);
+  height: 32px;
+  border: 1px solid var(--report-border-color-secondary);
+  border-radius: 3px;
+  color: var(--link-color);
   background-color: var(--report-background-color);
+  margin: 5px;
 }
-.lh-dark .lh-button {
-  color: var(--color-blue-200);
+
+.lh-button:first-of-type {
+  margin-left: 0;
 }
 
 /* Node */
@@ -514,7 +541,7 @@
 }
 .lh-audit--manual .lh-audit__score-icon,
 .lh-audit--notapplicable .lh-audit__score-icon {
-  border: 2px solid var(--color-gray-400);
+  border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);
   border-radius: 100%;
   background: none;
 }
@@ -524,7 +551,7 @@
 }
 
 .lh-audit--informative .lh-audit__score-icon {
-  border: 2px solid var(--color-gray-400);
+  border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-400);
   border-radius: 100%;
 }
 
@@ -543,8 +570,8 @@
 }
 
 .lh-category-header__description  {
-  font-size: var(--report-font-size);
   text-align: center;
+  color: var(--color-gray-700);
   margin: 0px auto;
   max-width: 400px;
 }
@@ -581,8 +608,7 @@
 .lh-audit__header {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  padding: var(--audit-padding-vertical) 0;
+  padding: var(--default-padding);
 }
 
 .lh-audit--load-opportunity .lh-audit__header {
@@ -591,8 +617,12 @@
 
 
 .lh-metricfilter {
-  text-align: right;
-  margin-top: var(--default-padding);
+  display: grid;
+  justify-content: end;
+  align-items: center;
+  grid-auto-flow: column;
+  gap: 4px;
+  color: var(--color-gray-700);
 }
 
 .lh-metricfilter__radio {
@@ -604,29 +634,20 @@
 }
 
 .lh-metricfilter__label {
-  border: solid 1px var(--color-gray-400);
+  display: inline-flex;
+  padding: 0 4px;
+  height: 16px;
+  text-decoration: underline;
   align-items: center;
-  justify-content: center;
-  padding: 2px 5px;
-  width: 50%;
-  height: 28px;
   cursor: pointer;
   font-size: 90%;
 }
 
-.lh-metricfilter__label:first-of-type {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  margin-left: 5px;
-}
-.lh-metricfilter__label:last-of-type {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
 .lh-metricfilter__label--active {
-  background: var(--color-blue-A700);
+  background: var(--color-blue-primary);
   color: var(--color-white);
+  border-radius: 3px;
+  text-decoration: none;
 }
 /* Give the 'All' choice a more muted display */
 .lh-metricfilter__label--active[for="metric-All"] {
@@ -634,6 +655,10 @@
   color: black !important;
 }
 
+.lh-metricfilter__text {
+  margin-right: 8px;
+}
+
 /* If audits are filtered, hide the itemcount for Passed Audits… */
 .lh-category--filtered .lh-audit-group .lh-audit-group__itemcount {
   display: none;
@@ -645,14 +670,12 @@
 }
 
 /* We want to hide the browser's default arrow marker on summary elements. Admittedly, it's complicated. */
-.lh-audit-group > summary,
-.lh-expandable-details > summary {
+.lh-root details > summary {
   /* Blink 89+ and Firefox will hide the arrow when display is changed from (new) default of `list-item` to block.  https://chromestatus.com/feature/6730096436051968*/
   display: block;
 }
 /* Safari and Blink <=88 require using the -webkit-details-marker selector */
-.lh-audit-group > summary::-webkit-details-marker,
-.lh-expandable-details > summary::-webkit-details-marker {
+.lh-root details > summary::-webkit-details-marker {
   display: none;
 }
 
@@ -660,30 +683,19 @@
 
 .lh-metrics-container {
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-auto-flow: column;
-  grid-column-gap: 24px;
+  grid-auto-rows: 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: var(--report-line-height);
 }
 
 .lh-metric {
   border-top: 1px solid var(--report-border-color-secondary);
 }
 
-@media screen and (min-width: 640px) {
-  .lh-metric:nth-child(3n+3) {
-    border-bottom: 1px solid var(--report-border-color-secondary);
-  }
+.lh-metric:nth-last-child(-n+2) {
+  border-bottom: 1px solid var(--report-border-color-secondary);
 }
 
-@media screen and (max-width: 640px) {
-  .lh-metrics-container {
-    display: block;
-  }
-
-  .lh-metric:nth-last-child(-n+1) {
-    border-bottom: 1px solid var(--report-border-color-secondary);
-  }
-}
 
 .lh-metric__innerwrap {
   display: grid;
@@ -693,7 +705,7 @@
    */
   grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;
   align-items: center;
-  padding: 10px 0;
+  padding: var(--default-padding);
 }
 
 .lh-metric__details {
@@ -702,12 +714,6 @@
 
 .lh-metric__title {
   flex: 1;
-  font-weight: 500;
-}
-
-.lh-metrics__disclaimer {
-  color: var(--color-gray-600);
-  margin: var(--section-padding-vertical) 0;
 }
 
 .lh-calclink {
@@ -725,12 +731,23 @@
   font-size: var(--metric-value-font-size);
   margin: calc(var(--default-padding) / 2) 0;
   white-space: nowrap; /* No wrapping between metric value and the icon */
-  font-weight: 500;
   grid-column-start: 2;
 }
 
-/* Change the grid to 3 columns for narrow viewport. */
+
 @media screen and (max-width: 535px) {
+  .lh-metrics-container {
+    display: block;
+  }
+
+  .lh-metric {
+    border-bottom: none !important;
+  }
+  .lh-metric:nth-last-child(1) {
+    border-bottom: 1px solid var(--report-border-color-secondary) !important;
+  }
+
+  /* Change the grid to 3 columns for narrow viewport. */
   .lh-metric__innerwrap {
   /**
    * Icon -- Metric Name -- Metric Value
@@ -749,62 +766,36 @@
   display: block;
 }
 
+/* TODO get rid of the SVGS and clean up these some more */
 .lh-metrics-toggle__input {
-  cursor: pointer;
   opacity: 0;
   position: absolute;
   right: 0;
-  width: 74px;
-  height: 28px;
-  top: -3px;
-}
-.lh-metrics-toggle__label {
-  display: flex;
-  background-color: #eee;
-  border-radius: 20px;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: -3px;
-  pointer-events: none;
-}
-.lh-metrics-toggle__input:focus + label {
-  outline: -webkit-focus-ring-color auto 3px;
+  top: 0px;
 }
-.lh-metrics-toggle__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 5px;
-  width: 50%;
-  height: 28px;
-}
-.lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less,
-.lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more {
-  background-color: var(--color-blue-A700);
-  --metric-toggle-lines-fill: var(--color-white);
+
+.lh-metrics-toggle__input + div > label > .lh-metrics-toggle__labeltext--hide,
+.lh-metrics-toggle__input:checked + div > label > .lh-metrics-toggle__labeltext--show {
+  display: none;
 }
-.lh-metrics-toggle__lines {
-  fill: var(--metric-toggle-lines-fill);
+.lh-metrics-toggle__input:checked + div > label > .lh-metrics-toggle__labeltext--hide {
+  display: inline;
 }
-
-.lh-metrics-toggle__label  {
-  background-color: var(--metrics-toggle-background-color);
+.lh-metrics-toggle__input:focus + div > label {
+  outline: -webkit-focus-ring-color auto 3px;
 }
 
-.lh-metrics-toggle__label .lh-metrics-toggle__icon--less {
-  padding-left: 8px;
-}
-.lh-metrics-toggle__label .lh-metrics-toggle__icon--more {
-  padding-right: 8px;
+.lh-metrics-toggle__label {
+  cursor: pointer;
+  font-size: var(--report-font-size-secondary);
+  line-height: var(--report-line-height-secondary);
+  color: var(--color-gray-700);
 }
 
 /* Pushes the metric description toggle button to the right. */
 .lh-audit-group--metrics .lh-audit-group__header {
   display: flex;
-}
-.lh-audit-group--metrics .lh-audit-group__header span.lh-audit-group__title {
-  flex: 1;
+  justify-content: space-between;
 }
 
 .lh-metric__icon,
@@ -918,10 +909,11 @@
 }
 
 .lh-filmstrip {
-  display: flex;
-  flex-direction: row;
+  display: grid;
   justify-content: space-between;
   padding-bottom: var(--default-padding);
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, 60px);
 }
 
 .lh-filmstrip__frame {
@@ -935,20 +927,6 @@
   max-width: 60px;
 }
 
-@media screen and (max-width: 750px) {
-  .lh-filmstrip {
-    flex-wrap: wrap;
-  }
-  .lh-filmstrip__frame {
-    width: 20%;
-    margin-bottom: 5px;
-  }
-  .lh-filmstrip__thumbnail {
-    display: block;
-    margin: auto;
-  }
-}
-
 /* Audit */
 
 .lh-audit {
@@ -974,6 +952,9 @@
   margin-bottom: var(--audit-group-margin-bottom);
   position: relative;
 }
+.lh-audit-group--metrics {
+  margin-bottom: calc(var(--audit-group-margin-bottom) / 2);
+}
 
 .lh-audit-group__header::before {
   /* By default, groups don't get an icon */
@@ -997,9 +978,9 @@
   text-align: right;
 }
 
-.lh-audit-group--budgets .lh-table {
+.lh-audit-group--budgets .lh-details--budget {
   width: 100%;
-  margin: 16px 0px 16px 0px;
+  margin: 0 0 var(--default-padding);
 }
 
 .lh-audit-group--pwa-installable .lh-audit-group__header::before {
@@ -1025,54 +1006,46 @@
 .lh-audit-group__summary {
   display: flex;
   justify-content: space-between;
-  margin-top: calc(var(--category-padding) * 1.5);
-  margin-bottom: var(--category-padding);
+  align-items: center;
 }
 
-.lh-audit-group__itemcount {
-  color: var(--color-gray-600);
-  font-weight: bold;
-}
 .lh-audit-group__header .lh-chevron {
   margin-top: calc((var(--report-line-height) - 5px) / 2);
 }
 
 .lh-audit-group__header {
-  font-size: var(--report-font-size);
-  margin: 0 0 var(--audit-group-padding-vertical);
-  /* When the header takes 100% width, the chevron becomes small. */
-  max-width: calc(100% - var(--chevron-size));
+  letter-spacing: 0.8px;
+  padding: var(--default-padding);
+  padding-left: 0;
 }
-/* max-width makes the metric toggle not flush. metrics doesn't have a chevron so unset. */
-.lh-audit-group--metrics .lh-audit-group__header {
-  max-width: unset;
+
+.lh-audit-group__header, .lh-audit-group__summary {
+  font-size: var(--report-font-size-secondary);
+  line-height: var(--report-line-height-secondary);
+  color: var(--color-gray-700);
 }
 
-.lh-audit-group__header span.lh-audit-group__title {
-  font-weight: bold;
+.lh-audit-group__title {
+  text-transform: uppercase;
+  font-weight: 500;
 }
 
-.lh-audit-group__header span.lh-audit-group__itemcount {
-  font-weight: bold;
+.lh-audit-group__itemcount {
   color: var(--color-gray-600);
 }
 
-.lh-audit-group__header span.lh-audit-group__description {
-  font-weight: 500;
+.lh-audit-group__footer {
   color: var(--color-gray-600);
-}
-.lh-audit-group__header span.lh-audit-group__description::before {
-  content: '—';
-  margin: 0px var(--audit-margin-horizontal);
+  display: block;
+  margin-top: var(--default-padding);
 }
 
-.lh-clump > .lh-audit-group__header,
-.lh-audit-group--diagnostics .lh-audit-group__header,
-.lh-audit-group--load-opportunities .lh-audit-group__header,
-.lh-audit-group--metrics .lh-audit-group__header,
-.lh-audit-group--pwa-installable .lh-audit-group__header,
-.lh-audit-group--pwa-optimized .lh-audit-group__header {
-  margin-top: var(--audit-group-padding-vertical);
+.lh-details,
+.lh-category-header__description,
+.lh-load-opportunity__header,
+.lh-audit-group__footer {
+  font-size: var(--report-font-size-secondary);
+  line-height: var(--report-line-height-secondary);
 }
 
 .lh-audit-explanation {
@@ -1113,9 +1086,13 @@
 
 .lh-warnings {
   --item-margin: calc(var(--report-line-height) / 6);
-  color: var(--color-average);
+  color: var(--color-average-secondary);
   margin: var(--audit-padding-vertical) 0;
-  padding: calc(var(--audit-padding-vertical) / 2) calc(var(--audit-description-padding-left));
+  padding: var(--default-padding)
+    var(--default-padding)
+    var(--default-padding)
+    calc(var(--audit-description-padding-left));
+  background-color: var(--toplevel-warning-background-color);
 }
 .lh-warnings span {
   font-weight: bold;
@@ -1126,8 +1103,8 @@
   color: var(--toplevel-warning-text-color);
   margin-left: auto;
   margin-right: auto;
-  max-width: calc(var(--report-width) - var(--category-padding) * 2);
-  background-color: var(--toplevel-warning-background-color);
+  --content-width-minus-category-padding-sides: calc(var(--report-content-width) - calc(var(--default-padding) * 4) * 2);
+  max-width: var(--content-width-minus-category-padding-sides);
   padding: var(--toplevel-warning-padding);
   border-radius: 8px;
 }
@@ -1160,19 +1137,19 @@
 /* Gauge */
 
 .lh-gauge__wrapper--pass {
-  color: var(--color-pass);
+  color: var(--color-pass-secondary);
   fill: var(--color-pass);
   stroke: var(--color-pass);
 }
 
 .lh-gauge__wrapper--average {
-  color: var(--color-average);
+  color: var(--color-average-secondary);
   fill: var(--color-average);
   stroke: var(--color-average);
 }
 
 .lh-gauge__wrapper--fail {
-  color: var(--color-fail);
+  color: var(--color-fail-secondary);
   fill: var(--color-fail);
   stroke: var(--color-fail);
 }
@@ -1191,7 +1168,7 @@
   display: inline-block;
 }
 .lh-fraction__wrapper--pass .lh-fraction__content {
-  color: var(--color-pass);
+  color: var(--color-pass-secondary);
 }
 .lh-fraction__wrapper--pass .lh-fraction__background {
   background-color: var(--color-pass);
@@ -1201,11 +1178,9 @@
   border-radius: 50%;
 }
 .lh-fraction__wrapper--average .lh-fraction__content {
-  color: var(--color-average);
-}
-.lh-fraction__wrapper--average .lh-fraction__background {
-  background-color: var(--color-average);
+  color: var(--color-average-secondary);
 }
+.lh-fraction__wrapper--average .lh-fraction__background,
 .lh-fraction__wrapper--average .lh-fraction__content::before {
   background-color: var(--color-average);
 }
@@ -1228,7 +1203,7 @@
 }
 .lh-fraction__wrapper--null .lh-fraction__content::before {
   border-radius: 50%;
-  border: 2px solid var(--color-gray-700);
+  border: calc(0.2 * var(--score-icon-size)) solid var(--color-gray-700);
 }
 
 .lh-fraction__background {
@@ -1251,10 +1226,13 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  font-size: var(--gauge-label-font-size);
+  font-size: calc(0.3 * var(--gauge-circle-size));
+  line-height: calc(0.4 * var(--gauge-circle-size));
   width: max-content;
-  padding: 1em;
-  min-width: 6em;
+  min-width: calc(1.5 * var(--gauge-circle-size));
+  padding: calc(0.1 * var(--gauge-circle-size)) calc(0.2 * var(--gauge-circle-size));
+  --score-icon-size: calc(0.21 * var(--gauge-circle-size));
+  --score-icon-margin: 0 calc(0.15 * var(--gauge-circle-size)) 0 0;
 }
 
 .lh-gauge {
@@ -1282,12 +1260,9 @@
   position: relative;
   height: var(--gauge-circle-size);
 }
-.lh-category .lh-gauge__svg-wrapper {
-  --gauge-circle-size: var(--gauge-circle-size-big);
-}
+.lh-category .lh-gauge__svg-wrapper,
 .lh-category .lh-fraction__wrapper {
   --gauge-circle-size: var(--gauge-circle-size-big);
-  --score-icon-size: var(--score-icon-size-big)
 }
 
 /* The plugin badge overlay */
@@ -1352,10 +1327,12 @@
 .lh-gauge__label,
 .lh-fraction__label {
   font-size: var(--gauge-label-font-size);
+  font-weight: 500;
   line-height: var(--gauge-label-line-height);
   margin-top: 10px;
   text-align: center;
   color: var(--report-text-color);
+  word-break: keep-all;
 }
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
@@ -1365,10 +1342,6 @@
   --gauge-label-line-height: var(--gauge-label-line-height-big);
   margin-top: 14px;
 }
-.lh-category .lh-fraction__content {
-  --gauge-label-font-size: var(--gauge-label-font-size-big);
-}
-
 
 .lh-scores-header .lh-gauge__wrapper,
 .lh-scores-header .lh-fraction__wrapper,
@@ -1381,20 +1354,36 @@
 
 .lh-scorescale {
   display: inline-flex;
-  margin: 12px auto 0 auto;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 20px;
-  padding: 8px 8px;
+
+  gap: calc(var(--default-padding) * 4);
+  margin: 16px auto 0 auto;
+  font-size: var(--report-font-size-secondary);
+  color: var(--color-gray-700);
+
 }
 
 .lh-scorescale-range {
   display: flex;
   align-items: center;
-  margin: 0 12px;
   font-family: var(--report-font-family-monospace);
   white-space: nowrap;
 }
 
+.lh-category-header__finalscreenshot .lh-scorescale {
+  border: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.lh-category-header__finalscreenshot .lh-scorescale-range {
+  font-family: unset;
+  font-size: 12px;
+}
+
+.lh-scorescale-wrap {
+  display: contents;
+}
+
 /* Hide category score gauages if it's a single category report */
 .lh-header--solo-category .lh-scores-wrapper {
   display: none;
@@ -1408,12 +1397,16 @@
 
 .lh-category {
   padding: var(--category-padding);
-  max-width: var(--report-width);
+  max-width: var(--report-content-width);
   margin: 0 auto;
 
   --sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2);
   --topbar-plus-sticky-header: calc(var(--topbar-height) + var(--sticky-header-height));
   scroll-margin-top: var(--topbar-plus-sticky-header);
+
+  /* Faster recalc style & layout of the report. https://web.dev/content-visibility/ */
+  content-visibility: auto;
+  contain-intrinsic-size: 1000px;
 }
 
 .lh-category-wrapper {
@@ -1425,8 +1418,6 @@
 }
 
 .lh-category-header {
-  font-size: var(--category-header-font-size);
-  min-height: var(--gauge-circle-size);
   margin-bottom: var(--section-padding-vertical);
 }
 
@@ -1436,11 +1427,42 @@
   margin: 0px auto;
 }
 
-.lh-category-header .lh-audit__title {
-  font-size: var(--category-header-font-size);
-  line-height: var(--header-line-height);
+.lh-category-header__finalscreenshot {
+  display: grid;
+  grid-template: none / 1fr 1px 1fr;
+  justify-items: center;
+  align-items: center;
+  gap: var(--report-line-height);
+  min-height: 288px;
+  margin-bottom: var(--default-padding);
 }
 
+.lh-final-ss-image {
+  /* constrain the size of the image to not be too large */
+  max-height: calc(var(--gauge-circle-size-big) * 2.8);
+  max-width: calc(var(--gauge-circle-size-big) * 3.5);
+  border: 1px solid var(--color-gray-200);
+  padding: 4px;
+  border-radius: 3px;
+  display: block;
+}
+
+.lh-category-headercol--separator {
+  background: var(--color-gray-200);
+  width: 1px;
+  height: var(--gauge-circle-size-big);
+}
+
+@media screen and (max-width: 780px) {
+  .lh-category-header__finalscreenshot {
+    grid-template: 1fr 1fr / none
+  }
+  .lh-category-headercol--separator {
+    display: none;
+  }
+}
+
+
 /* 964 fits the min-width of the filmstrip */
 @media screen and (max-width: 964px) {
   .lh-report {
@@ -1468,7 +1490,9 @@
 .lh-table {
   border-collapse: collapse;
   /* Can't assign padding to table, so shorten the width instead. */
-  width: calc(100% - var(--audit-description-padding-left));
+  width: calc(100% - var(--audit-description-padding-left) - var(--stackpack-padding-horizontal));
+  border: 1px solid var(--report-border-color-secondary);
+
 }
 
 .lh-table thead th {
@@ -1478,7 +1502,7 @@
   word-break: normal;
 }
 
-.lh-row--odd {
+.lh-row--even {
   background-color: var(--table-higlight-background-color);
 }
 .lh-row--hidden {
@@ -1487,13 +1511,7 @@
 
 .lh-table th,
 .lh-table td {
-  padding: 8px 6px;
-}
-.lh-table th:first-child {
-  padding-left: 0;
-}
-.lh-table th:last-child {
-  padding-right: 0;
+  padding: var(--default-padding);
 }
 
 .lh-table tr {
@@ -1527,7 +1545,6 @@
 
 .lh-table .lh-table-column--thumbnail {
   width: var(--image-preview-size);
-  padding: 0;
 }
 
 .lh-table-column--url {
@@ -1615,23 +1632,54 @@
  transition: transform 300ms, stroke 300ms;
 }
 
-.lh-audit-group > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right,
-.lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-left,
-.lh-audit > .lh-expandable-details .lh-chevron__line-right,
-.lh-audit > .lh-expandable-details[open] .lh-chevron__line-left {
+.lh-expandable-details .lh-chevron__line-right,
+.lh-expandable-details[open] .lh-chevron__line-left {
  transform: rotate(var(--chevron-angle-right));
 }
 
-.lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right,
-.lh-audit > .lh-expandable-details[open] .lh-chevron__line-right {
+.lh-expandable-details[open] .lh-chevron__line-right {
   transform: rotate(var(--chevron-angle));
 }
 
-.lh-audit-group[open] > summary > .lh-audit-group__summary > .lh-chevron .lh-chevron__lines,
-.lh-audit > .lh-expandable-details[open] .lh-chevron__lines {
+
+.lh-expandable-details[open]  .lh-chevron__lines {
  transform: translateY(calc(var(--chevron-size) * -1));
 }
 
+.lh-expandable-details[open] {
+  animation: 300ms openDetails forwards;
+  padding-bottom: var(--default-padding);
+}
+
+@keyframes openDetails {
+  from {
+    outline: 1px solid var(--report-background-color);
+  }
+  to {
+   outline: 1px solid;
+   box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  }
+}
+
+@media screen and (max-width: 780px) {
+  /* no black outline if we're not confident the entire table can be displayed within bounds */
+  .lh-expandable-details[open] {
+    animation: none;
+  }
+}
+
+.lh-expandable-details[open] summary, details.lh-clump > summary {
+  border-bottom: 1px solid var(--report-border-color-secondary);
+}
+details.lh-clump[open] > summary {
+  border-bottom-width: 0;
+}
+
+
+
+details .lh-clump-toggletext--hide,
+details[open] .lh-clump-toggletext--show { display: none; }
+details[open] .lh-clump-toggletext--hide { display: block;}
 
 
 /* Tooltip */
@@ -1644,11 +1692,13 @@
   display: none; /* Don't retain these layers when not needed */
   opacity: 0;
   background: #ffffff;
+  white-space: pre-line; /* Render newlines in the text */
   min-width: 246px;
   max-width: 275px;
   padding: 15px;
   border-radius: 5px;
   text-align: initial;
+  line-height: 1.4;
 }
 /* shrink tooltips to not be cutoff on left edge of narrow viewports
    45vw is chosen to be ~= width of the left column of metrics
@@ -1660,10 +1710,6 @@
   }
 }
 
-.lh-tooltip-boundary:hover {
-  background-color: var(--color-hover);
-}
-
 .lh-tooltip-boundary:hover .lh-tooltip {
   display: block;
   animation: fadeInTooltip 250ms;
@@ -1746,4 +1792,64 @@
   cursor: zoom-in;
 }
 
+
+.lh-meta__items {
+  --meta-icon-size: calc(var(--report-icon-size) * 0.667);
+  padding: var(--default-padding);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  background-color: var(--env-item-background-color);
+  border-radius: 3px;
+  margin: 0 0 var(--default-padding) 0;
+  font-size: 12px;
+  column-gap: var(--default-padding);
+  color: var(--color-gray-700);
+}
+
+.lh-meta__item {
+  display: block;
+  list-style-type: none;
+  position: relative;
+  padding: 0 0 0 calc(var(--meta-icon-size) + var(--default-padding) * 2);
+  cursor: unset; /* disable pointer cursor from report-icon */
+}
+
+.lh-meta__item.lh-tooltip-boundary {
+  text-decoration: dotted underline var(--color-gray-500);
+  cursor: help;
+}
+
+.lh-meta__item.lh-report-icon::before {
+  position: absolute;
+  left: var(--default-padding);
+  width: var(--meta-icon-size);
+  height: var(--meta-icon-size);
+}
+
+.lh-meta__item.lh-report-icon:hover::before {
+  opacity: 0.7;
+}
+
+.lh-meta__item .lh-tooltip {
+  color: var(--color-gray-800);
+}
+
+.lh-meta__item .lh-tooltip::before {
+  right: auto; /* Set the tooltip arrow to the leftside */
+  left: 6px;
+}
+
+/* Change the grid for narrow viewport. */
+@media screen and (max-width: 640px) {
+  .lh-meta__items {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media screen and (max-width: 535px) {
+  .lh-meta__items {
+    display: block;
+  }
+}
+
+
 /*# sourceURL=report-styles.css */