Add full capability readiness matrix

frontend/src/styles.css

@@ -186,6 +186,131 @@ h2 {
   margin-bottom: 16px;
 }
 
+.capSummary {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.capSummary div {
+  min-width: 0;
+  padding: 10px;
+  border-radius: 7px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.capSummary span,
+.capSummary strong {
+  display: block;
+}
+
+.capSummary span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.capSummary strong {
+  margin-top: 3px;
+  font-size: 20px;
+}
+
+.capabilityGrid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.capCard {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 7px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.capCard.ok {
+  border-color: rgba(157, 226, 111, 0.32);
+}
+
+.capCard.bad {
+  border-color: rgba(240, 113, 103, 0.55);
+}
+
+.capHead {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.capHead strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.capHead span {
+  color: var(--green);
+  font-size: 11px;
+  font-weight: 760;
+}
+
+.capCard.bad .capHead span {
+  color: var(--red);
+}
+
+.capNumbers {
+  display: grid;
+  gap: 3px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.capTags {
+  display: grid;
+  gap: 4px;
+}
+
+.capTags small {
+  min-width: 0;
+  padding: 4px 5px;
+  border-radius: 4px;
+  background: #080a08;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.requirementStrip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.requirementStrip span {
+  padding: 5px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  background: #101310;
+  font-size: 11px;
+}
+
+.requirementStrip span.ok {
+  color: var(--green);
+  border-color: rgba(157, 226, 111, 0.32);
+}
+
+.requirementStrip span.bad {
+  color: var(--red);
+  border-color: rgba(240, 113, 103, 0.55);
+}
+
 .metric, .panel {
   border: 1px solid var(--line);
   background: rgba(21, 24, 21, 0.94);
@@ -958,7 +1083,7 @@ meter {
   }
 
   nav {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     align-items: center;
   }
 
@@ -985,8 +1110,11 @@ meter {
   }
 
   .metrics,
+  .capSummary,
+  .capabilityGrid,
   .grid.two,
   .grid.three,
+  .grid.four,
   .taskColumns {
     grid-template-columns: 1fr;
   }