Compact the critical cell editor

src/RolemasterDb.App/wwwroot/app.css

@@ -788,21 +788,12 @@ textarea {
     background: rgba(252, 248, 238, 0.96);
 }
 
-.critical-editor-preview-card {
-    display: grid;
-    gap: 0.85rem;
-}
-
-.critical-editor-preview-card .critical-cell-description {
-    font-size: 1.05rem;
-}
-
 .critical-editor-textarea {
     min-height: 7rem;
 }
 
 .critical-editor-textarea.compact {
-    min-height: 4.5rem;
+    min-height: 3.5rem;
 }
 
 .critical-editor-textarea.json {
@@ -810,7 +801,7 @@ textarea {
 }
 
 .critical-editor-textarea.tall {
-    min-height: 10rem;
+    min-height: 8rem;
 }
 
 .critical-editor-error {
@@ -825,42 +816,56 @@ textarea {
     margin: 0;
 }
 
-.critical-editor-chip-list {
+.critical-editor-inline-list {
     display: grid;
-    gap: 0.65rem;
+    gap: 0.55rem;
 }
 
-.critical-editor-chip-card {
+.critical-editor-inline-row {
+    display: block;
+}
+
+.critical-editor-effect-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
-    padding: 0.65rem 0.8rem;
+    padding: 0.65rem 0.75rem;
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.7);
     border: 1px solid rgba(127, 96, 55, 0.12);
 }
 
-.critical-editor-chip-preview {
-    display: flex;
-    align-items: center;
-    gap: 0.55rem;
-    flex-wrap: wrap;
+.critical-editor-effect-row-main {
+    display: grid;
+    gap: 0.65rem;
+    grid-template-columns: minmax(88px, auto) minmax(180px, 1.3fr) minmax(130px, 0.8fr);
+    align-items: end;
+    flex: 1 1 auto;
+}
+
+.critical-editor-effect-badge {
     min-width: 0;
 }
 
-.critical-editor-chip-preview .affix-badge-list {
+.critical-editor-effect-badge .affix-badge-list {
     margin-top: 0;
 }
 
-.critical-editor-chip-name {
-    font-family: var(--font-heading);
-    color: #5b4327;
+.critical-editor-effect-kind,
+.critical-editor-effect-value,
+.critical-editor-effect-extra {
+    min-width: 0;
 }
 
-.critical-editor-effect-fields {
+.critical-editor-branch-line {
     display: grid;
-    gap: 0.75rem;
+    gap: 0.65rem;
+    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr);
+}
+
+.critical-editor-branch-outcome {
+    min-width: 0;
 }
 
 .critical-editor-validation-list {
@@ -883,7 +888,7 @@ textarea {
 .critical-editor-advanced {
     border-radius: 18px;
     border: 1px solid rgba(127, 96, 55, 0.14);
-    background: rgba(247, 239, 225, 0.42);
+    background: rgba(247, 239, 225, 0.3);
     overflow: hidden;
 }
 
@@ -912,7 +917,7 @@ textarea {
 .critical-editor-advanced-body {
     display: grid;
     gap: 0.85rem;
-    padding: 0 1rem 1rem;
+    padding: 0 0.9rem 0.9rem;
 }
 
 .critical-editor-diagnostic-grid {
@@ -971,15 +976,21 @@ textarea {
     text-align: right;
 }
 
-.critical-editor-effect-grid {
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+.critical-editor-inline-button {
+    border: none;
+    background: transparent;
+    color: var(--accent);
+    padding: 0.2rem 0.1rem;
+    white-space: nowrap;
 }
 
-.critical-editor-checkbox {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: #5d4429;
+.critical-editor-inline-button:hover {
+    color: #6e4320;
+}
+
+.critical-editor-compact-button {
+    padding: 0.55rem 0.9rem;
+    box-shadow: none;
 }
 
 @media (max-width: 640.98px) {
@@ -1013,7 +1024,7 @@ textarea {
         align-items: stretch;
     }
 
-    .critical-editor-chip-card,
+    .critical-editor-effect-row,
     .critical-editor-card-header,
     .critical-editor-section-header,
     .critical-editor-advanced-summary,
@@ -1022,6 +1033,11 @@ textarea {
         align-items: stretch;
     }
 
+    .critical-editor-effect-row-main,
+    .critical-editor-branch-line {
+        grid-template-columns: 1fr;
+    }
+
     .critical-editor-diagnostic-values {
         justify-items: start;
         text-align: left;