diff -r 34716fd837a4 -r be944660c56a wp/wp-admin/css/site-health-rtl.css
--- a/wp/wp-admin/css/site-health-rtl.css	Tue Dec 15 15:52:01 2020 +0100
+++ b/wp/wp-admin/css/site-health-rtl.css	Wed Sep 21 18:19:35 2022 +0200
@@ -1,21 +1,9 @@
 /*! This file is auto-generated */
-.site-health #wpcontent,
-.site-health.auto-fold #wpcontent {
-	padding-right: 0;
-}
-
-/* Emulates .wrap h1 styling */
-.health-check-header h1 {
-	display: inline-block;
-	font-weight: 600;
-	margin: 0 0.8rem 1rem;
-	font-size: 23px;
-	padding: 9px 0 4px 0;
-	line-height: 1.3;
-}
+/* Note: Any Site Health selectors that use
+duplicate styling from the Privacy settings screen
+are styled in the Privacy section of edit.css */
 
 .health-check-body h2 {
-	padding: 1rem 0;
 	line-height: 1.4;
 }
 
@@ -24,18 +12,8 @@
 	font-weight: 400;
 }
 
-.health-check-header {
+.health-check-widget-title-section {
 	text-align: center;
-	margin: 0 0 1rem;
-	background: #fff;
-	border-bottom: 1px solid #e2e4e7;
-}
-
-.health-check-title-section {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	clear: both;
 }
 
 .site-health-progress-wrapper {
@@ -69,34 +47,34 @@
 
 .loading .site-health-progress svg #bar {
 	stroke-dashoffset: 0;
-	stroke: #adc5d2;
+	stroke: #c3c4c7;
 	animation: loadingPulse 3s infinite ease-in-out;
 }
 
 .site-health-progress svg circle {
 	stroke-dashoffset: 0;
 	transition: stroke-dashoffset 1s linear;
-	stroke: #ccc;
+	stroke: #c3c4c7;
 	stroke-width: 2em;
 }
 
 .site-health-progress svg #bar {
 	stroke-dashoffset: 565;
-	stroke: #dc3232;
+	stroke: #d63638;
 }
 
 .green .site-health-progress #bar {
-	stroke: #46b450;
+	stroke: #00a32a;
 }
 .green .site-health-progress .site-health-progress-label {
-	color: #46b450;
+	color: #00a32a;
 }
 
 .orange .site-health-progress #bar {
-	stroke: #ffb900;
+	stroke: #dba617;
 }
 .orange .site-health-progress .site-health-progress-label {
-	color: #ffb900;
+	color: #dba617;
 }
 
 .site-health-progress-label {
@@ -107,25 +85,35 @@
 
 @keyframes loadingPulse {
 	0% {
-		stroke: #adc5d2;
+		stroke: #c3c4c7;
 	}
 	50% {
-		stroke: #00a0d2;
+		stroke: #72aee6;
 	}
 	100% {
-		stroke: #adc5d2;
+		stroke: #c3c4c7;
 	}
 }
 
 .health-check-tabs-wrapper {
 	/* IE 11 */
 	display: -ms-inline-grid;
-	-ms-grid-columns: 1fr 1fr;
+	-ms-grid-columns: 1fr 1fr 1fr 1fr;
 	vertical-align: top;
 	/* modern browsers */
 	display: inline-grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.health-check-tabs-wrapper.tab-count-1 {
+	grid-template-columns: 1fr;
+}
+.health-check-tabs-wrapper.tab-count-2 {
 	grid-template-columns: 1fr 1fr;
 }
+.health-check-tabs-wrapper.tab-count-3 {
+	grid-template-columns: 1fr 1fr 1fr;
+}
 
 .health-check-tab {
 	display: block; /* IE 11 */
@@ -136,22 +124,45 @@
 	transition: box-shadow 0.5s ease-in-out;
 }
 
-.health-check-tab:nth-child(1) {
-	-ms-grid-column: 1; /* IE 11 */
+.health-check-offscreen-nav-wrapper {
+	position: relative;
+	background: transparent;
+	border: none;
 }
-
-.health-check-tab:nth-child(2) {
-	-ms-grid-column: 2; /* IE 11 */
+.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav {
+	right: initial;
 }
 
-.health-check-tab:focus {
-	color: #191e23;
-	outline: 1px solid #6c7781;
-	box-shadow: none;
+.health-check-offscreen-nav {
+	display: none;
+	position: absolute;
+	padding-top: 10px;
+	left: 0;
+	top: 100%;
+	width: 13rem;
+}
+.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav {
+	display: inline-block;
+}
+.health-check-offscreen-nav:before {
+	position: absolute;
+	content: "";
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 0 10px 5px 10px;
+	border-color: transparent transparent #ffffff transparent;
+	left: 20px;
+	top: 5px;
 }
 
-.health-check-tab.active {
-	box-shadow: inset 0 -3px #007cba;
+.health-check-offscreen-nav .health-check-tab {
+	background: #fff;
+	box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
+}
+
+.health-check-offscreen-nav .health-check-tab.active {
+	box-shadow: inset -3px 0 #3582c4;
 	font-weight: 600;
 }
 
@@ -180,23 +191,23 @@
 .health-check-body .pass::before,
 .health-check-body .good::before {
 	content: "\f147";
-	color: #46b450;
+	color: #00a32a;
 }
 
 .health-check-body .warning::before {
 	content: "\f460";
-	color: #ffb900;
+	color: #dba617;
 }
 
 .health-check-body .info::before {
 	content: "\f348";
-	color: #00a0d2;
+	color: #72aee6;
 }
 
 .health-check-body .fail::before,
 .health-check-body .error::before {
 	content: "\f335";
-	color: #dc3232;
+	color: #d63638;
 }
 
 .site-health-copy-buttons {
@@ -210,7 +221,7 @@
 }
 
 .site-health-copy-buttons .success {
-	color: #40860a;
+	color: #008a20;
 	margin-right: 0.5rem;
 }
 
@@ -267,132 +278,12 @@
 	margin: 0;
 }
 
-.health-check-accordion {
-	border: 1px solid #ccd0d4;
-}
-
-.health-check-accordion-heading {
-	margin: 0;
-	border-top: 1px solid #ccd0d4;
-	font-size: inherit;
-	line-height: inherit;
-	font-weight: 600;
-	color: inherit;
-}
-
-.health-check-accordion-heading:first-child {
-	border-top: none;
-}
-
-.health-check-accordion-trigger {
-	background: #fff;
-	border: 0;
-	color: #32373c;
-	cursor: pointer;
-	display: flex;
-	font-weight: 400;
-	margin: 0;
-	padding: 1em 1.5em 1em 3.5em;
-	min-height: 46px;
-	position: relative;
-	text-align: right;
-	width: 100%;
-	align-items: center;
-	justify-content: space-between;
-	-webkit-user-select: auto;
-	-moz-user-select: auto;
-	-ms-user-select: auto;
-	user-select: auto;
-}
-
 .wp-core-ui .button.site-health-view-passed {
 	position: relative;
 	padding-left: 40px;
 	padding-right: 20px;
 }
 
-.health-check-accordion-trigger:hover,
-.health-check-accordion-trigger:active {
-	background: #f8f9f9;
-}
-
-.health-check-accordion-trigger:focus {
-	color: #191e23;
-	border: none;
-	box-shadow: none;
-	outline-offset: -1px;
-	outline: 2px solid #0071a1;
-	background-color: #f8f9f9;
-}
-
-.health-check-accordion-trigger .title {
-	pointer-events: none;
-	font-weight: 600;
-	flex-grow: 1;
-}
-
-.health-check-accordion-trigger .icon,
-.site-health-view-passed .icon {
-	border: solid #555d66;
-	border-width: 0 0 2px 2px;
-	height: 0.5rem;
-	pointer-events: none;
-	position: absolute;
-	left: 1.5em;
-	top: 50%;
-	transform: translateY(-70%) rotate(-45deg);
-	width: 0.5rem;
-}
-
-.health-check-accordion-trigger .badge {
-	padding: 0.1rem 0.5rem 0.15rem;
-	color: #32373c;
-	font-weight: 600;
-	margin-right: 0.5rem;
-}
-
-.health-check-accordion-trigger .badge.blue {
-	border: 1px solid #bfe7f3;
-}
-
-.health-check-accordion-trigger .badge.orange {
-	border: 1px solid #ffb900;
-}
-
-.health-check-accordion-trigger .badge.red {
-	border: 1px solid #dc3232;
-}
-
-.health-check-accordion-trigger .badge.green {
-	border: 1px solid #46b450;
-}
-
-.health-check-accordion-trigger .badge.purple {
-	border: 1px solid #826eb4;
-}
-
-.health-check-accordion-trigger .badge.gray {
-	border: 1px solid #ccd0d4;
-}
-
-.health-check-accordion-trigger[aria-expanded="true"] .icon,
-.site-health-view-passed[aria-expanded="true"] .icon {
-	transform: translateY(-30%) rotate(135deg)
-}
-
-.health-check-accordion-panel {
-	margin: 0;
-	padding: 1em 1.5em;
-	background: #fff;
-}
-
-.health-check-accordion-panel[hidden] {
-	display: none;
-}
-
-.health-check-accordion-panel a .dashicons {
-	text-decoration: none;
-}
 
 /* Better position for the WordPress admin notices and update nag. */
 .site-health .notice {
@@ -411,20 +302,29 @@
 	flex-shrink: 0;
 }
 
-@media screen and (max-width: 782px) {
-	.health-check-body {
-		margin: 0 12px;
-		width: auto;
-	}
+/* Styling unique to the dashboard widget. */
+#dashboard_site_health .site-health-details {
+	padding-right: 16px;
+}
 
-	.site-health .notice {
-		margin: 5px 10px 15px;
-	}
+#dashboard_site_health .health-check-widget {
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	grid-auto-rows: minmax(64px, auto);
+	column-gap: 16px;
+	align-items: center;
+}
+#dashboard_site_health .site-health-progress-label {
+	margin-right: 0;
+}
 
-	.site-health .update-nag {
-		margin-left: 10px;
-		margin-right: 10px;
+@media screen and (max-width: 480px) {
+	#dashboard_site_health .health-check-widget {
+		grid-template-columns: 100%;
 	}
+}
+
+@media screen and (max-width: 782px) {
 
 	.site-health-issues-wrapper .health-check-accordion-trigger {
 		flex-direction: column;
@@ -457,10 +357,3 @@
 	}
 }
 
-/* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
-@media only screen and (max-width: 1004px) {
-	.health-check-body {
-		margin: 0 22px;
-		width: auto;
-	}
-}