Team schedule heatmap

app/features/availability/components/PlayableWindowsSummary.module.css

@@ -0,0 +1,43 @@
+.summary {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+	font-size: var(--font-xs);
+}
+
+.summaryRow {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: var(--s-1-5);
+}
+
+.summaryLabel {
+	font-weight: var(--weight-semi);
+}
+
+.tierDot {
+	display: inline-block;
+	vertical-align: middle;
+	align-self: center;
+	flex-shrink: 0;
+	width: 0.6rem;
+	height: 0.6rem;
+	border-radius: 50%;
+	background-color: var(--color-success-low);
+	border: 1px solid var(--color-success);
+
+	&.tierDotFull {
+		background-color: var(--color-success);
+	}
+}
+
+.windowList {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: var(--s-1) var(--s-2);
+}
+
+.window {
+	white-space: nowrap;
+}