Refine live controls and compact show cards

src/app.css

@@ -1057,6 +1057,13 @@ textarea:focus {
 	text-transform: uppercase;
 }
 
+.timer-label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.25rem;
+}
+
 .live-output-state strong {
 	overflow: hidden;
 	font-size: 0.75rem;
@@ -1151,6 +1158,39 @@ textarea:focus {
 	text-align: center;
 }
 
+.section-timer-control {
+	display: flex;
+	align-items: stretch;
+	gap: 0.3rem;
+}
+
+.section-timer-control form {
+	display: flex;
+}
+
+.live-timer-toggle {
+	display: grid;
+	width: 2.15rem;
+	padding: 0;
+	place-items: center;
+	border: 1px solid var(--line);
+	border-radius: 0.65rem;
+	background: color-mix(in srgb, #d65c55 12%, var(--panel-soft));
+	color: #d65c55;
+	cursor: pointer;
+	font-size: 0.85rem;
+}
+
+.live-timer-toggle.paused {
+	background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
+	color: var(--accent-strong);
+}
+
+.live-timer-toggle:hover,
+.live-timer-toggle:focus-visible {
+	border-color: currentColor;
+}
+
 .total-countdown {
 	color: var(--text);
 	cursor: pointer;
@@ -1185,17 +1225,20 @@ textarea:focus {
 	color: #d24d45;
 }
 
-.live-output-state > span {
-	width: 0.5rem;
-	height: 0.5rem;
+.live-output-state > .live-output-icon {
+	display: grid;
+	width: 1.5rem;
+	height: 1.5rem;
 	flex: 0 0 auto;
-	border-radius: 50%;
-	background: var(--text-faint);
+	place-items: center;
+	border-radius: 0.45rem;
+	background: var(--panel-soft);
+	color: var(--text-faint);
 }
 
-.live-output-control.active .live-output-state > span {
-	background: var(--accent);
-	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 12%, transparent);
+.live-output-control.active .live-output-icon {
+	background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
+	color: var(--accent-strong);
 }
 
 .live-output-control {
@@ -1256,7 +1299,10 @@ textarea:focus {
 }
 
 .live-menu-trigger {
+	display: flex;
 	width: fit-content;
+	align-items: center;
+	gap: 0.32rem;
 	padding: 0.48rem 0.65rem;
 	border: 1px solid var(--line);
 	border-radius: 0.65rem;
@@ -2093,6 +2139,16 @@ textarea:focus {
 	}
 }
 
+@media (max-width: 30rem) {
+	.live-status-row {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+	}
+
+	.live-output-control {
+		grid-column: 1 / -1;
+	}
+}
+
 @media (max-width: 23rem) {
 	.live-context-summary {
 		display: grid;
@@ -6296,11 +6352,16 @@ textarea:focus {
 	.show-card,
 	.show-card-facts {
 		align-items: flex-start;
-		flex-direction: column;
 	}
 	.show-card-facts {
-		width: 100%;
-		gap: 0.4rem;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.7rem;
+	}
+	.show-card-facts span {
+		display: flex;
+		align-items: baseline;
+		gap: 0.25rem;
 	}
 	.show-settings-form .wide-field,
 	.usage-edit-form .wide-field {