Feat: Add mobile snippet views

src/css/common/_badges.scss

@@ -35,7 +35,7 @@
 }
 
 .network-shared {
-	color: #2271b1;
+	color: theme.$accent;
 	font-size: 22px;
 	inline-size: 100%;
 	cursor: help;
@@ -89,10 +89,12 @@
 	}
 }
 
+// #646970 (WP gray-50) keeps white badge text at 5.5:1 so locked/unlicensed
+// states stay WCAG AA without hover; #a7aaad was 2.3:1.
 .nav-tab-inactive .badge,
 .inverted-badges .badge {
 	color: #fff;
-	background-color: #a7aaad;
+	background-color: #646970;
 	border-color: #fff !important;
 
 	.dashicons {
@@ -123,3 +125,31 @@
 		}
 	}
 }
+
+// Override WordPress' .wp-core-ui .button .dashicons { line-height: 1.9 } —
+// inside a button the inflated line-box would shift the glyph below the
+// badge's bottom border. Placed at end-of-file so it follows all other
+// .dashicons rules in source order (no-descending-specificity).
+.wp-core-ui .button .badge .dashicons {
+	line-height: 1;
+}
+
+
+// Pro badge consolidated to the navigation pro-chip style: a light accent pill
+// in every context, overriding the badge colour map and the inverted/nav-tab
+// variants (whose white !important border must be beaten here). This is a
+// deliberate final override, so it intentionally follows higher-specificity
+// context rules above.
+/* stylelint-disable no-descending-specificity */
+.badge.pro-badge,
+.inverted-badges .badge.pro-badge,
+.nav-tab-inactive .badge.pro-badge {
+	color: theme.$accent;
+	background-color: #eff5f9;
+	border: 1px solid rgb(34 113 177 / 10%) !important;
+	border-radius: 999px;
+	padding-block: 3px;
+	padding-inline: 10px;
+	line-height: normal;
+}
+/* stylelint-enable no-descending-specificity */

src/css/common/_cards.scss

@@ -1,3 +1,5 @@
+@use 'theme';
+
 .code-snippets-cards {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(580px, 1fr));
@@ -7,16 +9,16 @@
 
 .code-snippets-card {
 	background: #fff;
-	border: 1px solid #c3c4c7;
-	border-radius: 6px;
+	border: 1px solid theme.$control-border;
+	border-radius: 5px;
 	margin: 0;
 	display: flex;
 	flex-flow: column;
 	box-sizing: border-box;
 
 	a {
 		text-decoration: none;
-		color: #2271b1;
+		color: theme.$accent;
 	}
 
 	.card-inner {
@@ -25,19 +27,46 @@
 
 	footer {
 		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		gap: 8px;
-		background: #f6f7f7;
+		background: theme.$background-light;
 		margin-block-start: auto;
-		border-block-start: 1px solid #c3c4c7;
+		border-block-start: 1px solid theme.$control-border;
 		padding-inline: 24px;
 		padding-block: 12px;
+		border-end-start-radius: 5px;
+		border-end-end-radius: 5px;
+	}
+
+	// The status label shrinks and clips away under pressure rather than
+	// pushing the action buttons onto a second line.
+	.snippet-card-footer-status {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex: 0 1 auto;
+		min-inline-size: 0;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.snippet-card-footer-actions {
+		display: flex;
 		align-items: center;
-		border-end-start-radius: 6px;
-		border-end-end-radius: 6px;
+		justify-content: flex-end;
+		flex-wrap: nowrap;
+		gap: 8px;
+		flex: 0 0 auto;
+
+		.button:not(.kebab-menu-trigger) {
+			min-inline-size: 103px;
+			text-align: center;
+			justify-content: center;
+		}
 	}
 
-	&.is-selectable,
-	&.has-corner-controls {
+	&.is-selectable {
 		position: relative;
 	}
 
@@ -54,16 +83,43 @@
 		}
 	}
 
-	&.is-selectable .card-inner h3 {
-		margin-inline-end: 48px;
+	input[type='checkbox'].snippet-card-select {
+		appearance: none;
+		display: grid;
+		place-content: center;
+		inline-size: 20px;
+		block-size: 20px;
+		padding: 0;
+		box-sizing: border-box;
+		background: #fff;
+		border: 1.5px solid theme.$accent;
+		border-radius: 5px;
+		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+		cursor: pointer;
+
+		&::before {
+			content: none;
+		}
+
+		&:checked {
+			background: theme.$accent;
+
+			&::before {
+				content: '';
+				inline-size: 14px;
+				block-size: 14px;
+				margin: 0;
+				background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat;
+			}
+		}
 	}
 
-	&.has-corner-controls .card-inner h3 {
-		margin-inline-end: 96px;
+	&.is-selectable .card-inner > h3 {
+		margin-inline-end: 48px;
 	}
 
 	&.is-selected {
-		border-color: #2271b1;
-		box-shadow: 0 0 0 1px #2271b1;
+		border-color: theme.$accent;
+		box-shadow: 0 0 0 1px theme.$accent;
 	}
 }

src/css/common/_kebab-menu.scss

@@ -0,0 +1,106 @@
+@use 'theme';
+
+// Generic kebab ("more actions") menu: a square accent-outlined trigger
+// button that opens a small popover of actions anchored to its
+// bottom-end corner, flipping above the trigger near the viewport edge.
+.kebab-menu {
+	position: relative;
+	display: inline-flex;
+}
+
+.kebab-menu-trigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	inline-size: 38px;
+	block-size: 38px;
+	box-sizing: border-box;
+	padding: 0;
+	background: #fff;
+	color: theme.$accent;
+	border: 1px solid theme.$accent;
+	border-radius: 5px;
+	cursor: pointer;
+
+	svg {
+		display: block;
+	}
+
+	&:hover,
+	&:focus {
+		background: #f0f6fc;
+	}
+}
+
+.kebab-menu-popover {
+	position: absolute;
+	inset-block-start: calc(100% + 4px);
+	inset-inline-end: 0;
+	z-index: 1000;
+	inline-size: 224px;
+	box-sizing: border-box;
+	margin: 0;
+	padding-block: 6px;
+	padding-inline: 0;
+	list-style: none;
+	background: #fff;
+	border: 1px solid #e2e2e4;
+	border-radius: 5px;
+	box-shadow: 0 3px 16px rgb(0 0 0 / 15%);
+
+	&.kebab-menu-popover-top {
+		inset-block: auto calc(100% + 4px);
+	}
+
+	li {
+		margin: 0;
+	}
+}
+
+.kebab-menu-item {
+	display: block;
+	inline-size: 100%;
+	box-sizing: border-box;
+	padding-block: 10px;
+	padding-inline: 14px;
+	background: none;
+	border: none;
+	font-family: inherit;
+	font-size: 14px;
+	line-height: 1.4;
+	color: #2c3337;
+	text-align: start;
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		background: #f0f0f1;
+	}
+
+	&:disabled {
+		color: #a7aaad;
+		cursor: default;
+		background: none;
+	}
+
+	&.kebab-menu-item-destructive {
+		color: #d63638;
+	}
+}
+
+.kebab-menu-divider {
+	margin-block: 6px;
+	border-block-start: 1px solid #e2e2e4;
+}
+
+.kebab-menu-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	box-sizing: border-box;
+	padding-block: 10px;
+	padding-inline: 14px;
+	font-size: 14px;
+	line-height: 1.4;
+	color: #2c3337;
+}