Broaden official source portfolio

frontend/src/styles/app.css

@@ -6669,13 +6669,91 @@ section {
   grid-column: 1 / -1;
 }
 
-.source-catalog-grid {
+.source-domain-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.65rem;
   margin-top: 1rem;
 }
 
+.source-domain-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.42rem 0.7rem;
+  min-width: 0;
+  border: 1px solid #d9e4df;
+  border-left: 3px solid #75968a;
+  border-radius: 6px;
+  padding: 0.82rem;
+  background: #fbfcfc;
+}
+
+.source-domain-card > div {
+  display: grid;
+  min-width: 0;
+  gap: 0.14rem;
+}
+
+.source-domain-card span,
+.source-domain-card p,
+.source-domain-card small {
+  margin: 0;
+  color: #62716c;
+  font-size: 0.73rem;
+  line-height: 1.42;
+}
+
+.source-domain-card b {
+  align-self: start;
+  font-size: 0.68rem;
+}
+
+.source-domain-card p,
+.source-domain-card small {
+  grid-column: 1 / -1;
+}
+
+.source-domain-card small {
+  border-top: 1px solid #e6ece9;
+  padding-top: 0.4rem;
+}
+
+.source-status-operational {
+  color: #286646;
+}
+
+.source-status-planned {
+  color: #8a5a16;
+}
+
+.source-theme-coverage,
+.source-loaded-disclosure,
+.source-catalog-grid {
+  min-width: 0;
+}
+
+.source-theme-coverage,
+.source-loaded-disclosure {
+  margin-top: 0.8rem;
+  border-top: 1px solid #dfe7e4;
+  padding-top: 0.7rem;
+}
+
+.source-theme-coverage > summary,
+.source-loaded-disclosure > summary {
+  cursor: pointer;
+  color: #34433e;
+  font-size: 0.82rem;
+  font-weight: 750;
+}
+
+.source-catalog-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.65rem;
+  margin-top: 0.7rem;
+}
+
 .source-catalog-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -6715,7 +6793,7 @@ section {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.6rem;
-  margin-top: 0.75rem;
+  margin-top: 0.7rem;
 }
 
 .source-catalog-loaded article {
@@ -6747,12 +6825,47 @@ section {
 
 .source-opportunity-list > div {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.6rem;
   margin-top: 0.7rem;
 }
 
+.source-opportunity-domain {
+  display: grid;
+  gap: 0.55rem;
+  border: 0;
+  border-top: 1px solid #e2e8e6;
+  border-radius: 0;
+  padding: 0.7rem 0 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.source-opportunity-domain:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.source-opportunity-domain > header {
+  display: flex;
+  gap: 0.7rem;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.source-opportunity-domain > header span {
+  color: #66746f;
+  font-size: 0.7rem;
+}
+
+.source-opportunity-domain > div {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.55rem;
+}
+
 .source-opportunity-list article {
+  position: relative;
   display: grid;
   gap: 0.35rem;
   padding: 0.75rem;
@@ -6772,20 +6885,58 @@ section {
   font-weight: 700;
 }
 
+.source-opportunity-list article > small {
+  margin: 0;
+  color: #52635d;
+  font-size: 0.7rem;
+  line-height: 1.4;
+}
+
+.source-priority {
+  position: absolute;
+  top: 0.7rem;
+  right: 0.7rem;
+  border-left: 2px solid #718096;
+  padding-left: 0.38rem;
+  font-size: 0.65rem !important;
+  font-weight: 800;
+}
+
+.source-opportunity-list article > div {
+  padding-right: 5.5rem;
+}
+
+.source-priority-next {
+  border-left-color: #287051;
+  color: #286646 !important;
+}
+
+.source-priority-planned {
+  border-left-color: #a66a18;
+  color: #8a5a16 !important;
+}
+
 @media (max-width: 980px) {
+  .source-domain-grid,
   .source-catalog-grid,
   .source-catalog-loaded,
-  .source-opportunity-list > div {
+  .source-opportunity-domain > div {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 @media (max-width: 640px) {
+  .source-domain-grid,
   .source-catalog-grid,
   .source-catalog-loaded,
-  .source-opportunity-list > div {
+  .source-opportunity-domain > div {
     grid-template-columns: 1fr;
   }
+
+  .source-opportunity-domain > header {
+    display: grid;
+    gap: 0.15rem;
+  }
 }
 
 .workspace-grid-assistant {