T3: flexbox layout system — data-layout row/col/stack/spread/center with 640px responsive

dist/asw.css

@@ -25,6 +25,7 @@
 /* Project-specific custom media */
 @custom-media --docs-toc-hidden  (width < 1100px);
 @custom-media --nav-compact      (width < 991px);
+@custom-media --compact          (width < 640px);
 
 /* ════════════════════════════════════════════════════════════════════════════
    ANIMATIONS — replaced open-props @keyframes
@@ -4445,6 +4446,59 @@ dl[data-layout="inline"] dd {
  * Part of: Agentic Semantic Web
  */
 
+/* ══════════════════════════════════════════════════════════════════════════
+   Flexbox primitives — data-layout attributes for layout composition
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* Row: horizontal flex with wrap — nav bars, action rows, inline groups */
+[data-layout="row"] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+}
+
+/* Column: vertical flex with standard gap */
+[data-layout="col"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* Stack: vertical flex with larger gap for section-level content spacing */
+[data-layout="stack"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/* Spread: space-between — stat bars, toolbar items, distributed nav */
+[data-layout="spread"] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+/* Center: centred flex — hero content, empty states, modals */
+[data-layout="center"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+}
+
+/* ── Responsive: collapse horizontal layouts to stacked at 640px ──── */
+@media (--compact) {
+  [data-layout="spread"],
+  [data-layout="row"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
 /* ── Container ─────────────────────────────────────────────────────── */
 
 .container {