@bridge_gpt/mcp-server 0.2.18 → 0.2.20

package/public/css/main.min.css

@@ -171,92 +171,403 @@ textarea {
     margin-bottom: 0;
 }
 
-/* Projects grid */
+/* ==========================================================================
+   BAPI-548: attention-first setup dashboard
+   Reuses the existing cream/coral globals.css tokens; no new palette fork.
+   ========================================================================== */
+
+/* Dashboard header counters */
+.setup-dashboard-title-group {
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.setup-dashboard-counts {
+    font-size: 0.9rem;
+    color: var(--secondary-color);
+}
+
+.setup-dashboard-count {
+    color: var(--secondary-color);
+}
+
+.setup-dashboard-attention-count {
+    color: var(--primary-color);
+    font-weight: 700;
+}
+
+/* Projects list — single-column, low-density signpost list */
 .projects-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 1rem;
+    gap: 1.25rem;
 }
 
 .project-card {
     background-color: var(--surface-color);
     border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 0.75rem;
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
 }
 
-.project-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+/* Summary row: state dot + title + repo tag on the left, status pill on the right */
+.project-card-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
 }
 
-.project-card h2 {
-    font-size: 1.125rem;
-    margin-bottom: 1rem;
+.project-identity {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+}
+
+.project-state-dot {
+    width: 0.65rem;
+    height: 0.65rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background-color: var(--secondary-color);
+}
+
+.project-state-dot--ok { background-color: var(--success-color); }
+.project-state-dot--warning { background-color: var(--light-orange); }
+.project-state-dot--critical { background-color: var(--primary-color); }
+.project-state-dot--unknown { background-color: #cfcabc; }
+
+.project-title {
+    font-size: 1.05rem;
+    font-weight: 700;
     color: var(--text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.project-repo-tag {
+    font-size: 0.72rem;
+    color: var(--secondary-color);
+    background-color: var(--secondary-button-background);
+    border: 1px solid var(--border-color);
+    border-radius: 0.35rem;
+    padding: 0.1rem 0.45rem;
+    white-space: nowrap;
+}
+
+/* Status pill */
+.project-status-pill {
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 0.28rem 0.7rem;
+    border-radius: 999px;
+    white-space: nowrap;
+}
+
+.project-status-pill--ok {
+    color: #0f8a5f;
+    background-color: rgba(16, 185, 129, 0.14);
+}
+
+.project-status-pill--attention {
+    color: var(--dark-orange);
+    background-color: rgba(242, 178, 122, 0.28);
+}
+
+/* A card carrying any critical signal uses the coral (error) pill treatment. */
+.project-card--critical .project-status-pill--attention {
+    color: var(--primary-color);
+    background-color: rgba(226, 98, 75, 0.14);
+}
+
+/* Muted meta line */
+.project-meta-line {
+    font-size: 0.8rem;
+    color: var(--secondary-color);
 }
 
-.project-card p {
+/* Description — clamped to two lines */
+.project-description {
     font-size: 0.875rem;
     color: var(--secondary-color);
-    margin-bottom: 1.5rem;
-    height: 4.5rem;
+    line-height: 1.45;
     overflow: hidden;
-    text-overflow: ellipsis;
     display: -webkit-box;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
-    line-clamp: 3;
 }
 
-.project-card .project-meta {
+/* Attention panels (signposts) */
+.project-attention-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.attention-panel {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    font-size: 0.75rem;
+    gap: 0.7rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: 0.55rem;
+    border: 1px solid transparent;
+}
+
+.attention-panel--warning {
+    background-color: rgba(242, 178, 122, 0.18);
+    border-color: rgba(242, 178, 122, 0.5);
+}
+
+.attention-panel--critical {
+    background-color: rgba(226, 98, 75, 0.1);
+    border-color: rgba(226, 98, 75, 0.35);
+}
+
+.attention-panel--unknown {
+    background-color: transparent;
+    border-style: dashed;
+    border-color: var(--border-color);
+}
+
+.attention-icon {
+    flex-shrink: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    background-color: var(--surface-color);
+    border: 1px solid var(--border-color);
+}
+
+.attention-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.attention-label {
+    font-weight: 700;
+    font-size: 0.85rem;
+    color: var(--text-color);
+}
+
+.attention-message {
+    font-size: 0.78rem;
     color: var(--secondary-color);
-    margin-bottom: 1rem;
 }
 
-/* Project card actions layout */
-.project-card-actions {
+.attention-fix-link {
+    flex-shrink: 0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    text-decoration: none;
+    background-color: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.4rem;
+    padding: 0.35rem 0.7rem;
+    white-space: nowrap;
+}
+
+.attention-fix-link:hover {
+    border-color: var(--primary-color);
+}
+
+.attention-fix-link--inert {
+    color: var(--secondary-color);
+    cursor: default;
+}
+
+/* "Show all checks" disclosure */
+.project-checks-details {
+    font-size: 0.82rem;
+}
+
+.project-checks-summary {
+    cursor: pointer;
+    color: var(--secondary-color);
+    font-weight: 600;
+    padding: 0.2rem 0;
+    width: fit-content;
+    list-style: revert;
+}
+
+.project-checks-list {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.35rem;
+    margin-top: 0.5rem;
+    padding-left: 0.5rem;
 }
 
-.project-card-actions-row {
+.project-check-row {
     display: flex;
+    align-items: center;
     gap: 0.5rem;
+}
+
+.project-check-icon {
+    flex-shrink: 0;
+    width: 1.2rem;
+    text-align: center;
+    color: var(--secondary-color);
+}
+
+.project-check-row--ok .project-check-icon { color: var(--success-color); }
+.project-check-row--warning .project-check-icon { color: var(--dark-orange); }
+.project-check-row--critical .project-check-icon { color: var(--primary-color); }
+
+/* Unknown / backend-dependent check rows are visually dashed & neutral. */
+.project-check-row--unknown {
+    color: var(--secondary-color);
+    border-left: 2px dashed var(--border-color);
+    padding-left: 0.5rem;
+}
+
+.project-check-label { font-weight: 600; color: var(--text-color); }
+.project-check-message { color: var(--secondary-color); }
+
+/* Bottom launcher row + overflow */
+.project-actions-footer {
+    display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 100%;
+    gap: 0.5rem;
+    margin-top: 0.4rem;
+    padding-top: 0.9rem;
+    border-top: 1px solid var(--border-color);
+    flex-wrap: wrap;
 }
 
-.project-card-actions-row .btn {
-    flex: 1;
-    text-align: center;
-    margin: 0.5rem;
+.project-launcher {
+    display: flex;
+    gap: 0.4rem;
+    flex-wrap: wrap;
 }
 
-.project-card-actions-secondary {
-    justify-content: flex-end;
+.project-launcher-link {
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: var(--text-color);
+    text-decoration: none;
+    background-color: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.45rem;
+    padding: 0.4rem 0.8rem;
 }
 
-/* Delete link styling */
-.delete-link {
-    color: var(--error-color);
+.project-launcher-link:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.project-overflow {
+    position: relative;
+}
+
+.project-overflow-summary {
+    cursor: pointer;
+    list-style: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.2rem;
+    height: 2.1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.45rem;
+    color: var(--secondary-color);
+    font-weight: 700;
+}
+
+.project-overflow-summary::-webkit-details-marker { display: none; }
+
+.project-overflow-menu {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.35rem);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    min-width: 12rem;
+    background-color: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    box-shadow: var(--box-shadow);
+    padding: 0.35rem;
+}
+
+.project-overflow-action {
+    font-size: 0.85rem;
+    text-align: left;
+    color: var(--text-color);
     text-decoration: none;
-    font-size: 0.875rem;
-    font-weight: 500;
+    background: none;
+    border: none;
+    border-radius: 0.35rem;
+    padding: 0.5rem 0.6rem;
     cursor: pointer;
-    transition: color 150ms ease;
+    font: inherit;
 }
 
-.delete-link:hover {
-    color: #dc2626;
-    text-decoration: underline;
+.project-overflow-action:hover {
+    background-color: var(--secondary-button-background);
+}
+
+.project-overflow-action--delete {
+    color: var(--error-color);
+}
+
+/* Empty & error states */
+.setup-empty-state,
+.setup-error-state {
+    text-align: center;
+    padding: 2.5rem 1.5rem;
+    border: 1px dashed var(--border-color);
+    border-radius: 0.75rem;
+    background-color: var(--background-color);
+}
+
+.setup-empty-title,
+.setup-error-title {
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.4rem;
+}
+
+.setup-empty-message,
+.setup-error-message {
+    font-size: 0.875rem;
+    color: var(--secondary-color);
+}
+
+.setup-error-state {
+    border-color: rgba(239, 68, 68, 0.4);
+}
+
+.setup-error-title { color: var(--error-color); }
+
+/* Keyboard-visible focus styles for interactive dashboard controls */
+.project-launcher-link:focus-visible,
+.project-overflow-summary:focus-visible,
+.project-overflow-action:focus-visible,
+.attention-fix-link:focus-visible,
+.project-checks-summary:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
 }
 
 /* Modal styles */
@@ -381,6 +692,39 @@ textarea {
         width: 90%;
         margin: 10% auto;
     }
+
+    /* BAPI-548: let the dashboard wrap instead of overflowing horizontally. */
+    .project-card-summary {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .project-status-pill {
+        align-self: flex-start;
+    }
+
+    .attention-panel {
+        flex-wrap: wrap;
+    }
+
+    .attention-fix-link {
+        margin-left: 2.45rem;
+    }
+
+    .project-actions-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .project-launcher {
+        justify-content: flex-start;
+    }
+
+    .project-overflow-menu {
+        right: auto;
+        left: 0;
+    }
 }
 /*!********************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/setup-detail.css ***!
@@ -494,6 +838,45 @@ textarea {
     line-height: 1.4;
 }
 
+/* Structured server-sourced setup instructions (BAPI-515), rendered inside
+   .explanation-content by renderExplanationContent(). Scoped to this wrapper
+   only — the container above is left untouched. */
+.explanation-content .setup-instructions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.explanation-content .setup-instructions-link {
+    color: var(--primary-color);
+    font-weight: 500;
+    text-decoration: underline;
+    overflow-wrap: anywhere;
+}
+
+.explanation-content .setup-instructions-link:hover {
+    color: var(--primary-dark);
+}
+
+.explanation-content .setup-instructions-link:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.explanation-content .setup-instructions-steps {
+    margin: 0;
+    padding-left: 20px;
+}
+
+.explanation-content .setup-instructions-steps li + li {
+    margin-top: 4px;
+}
+
+.explanation-content .setup-instructions-note {
+    margin: 0;
+    color: var(--secondary-color);
+}
+
 /* Form error styling */
 .form-error {
     color: var(--error-color);
@@ -1248,10 +1631,282 @@ select.input-error {
 }
 
 
-/*!********************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/public-pages.css ***!
-  \********************************************************************************************************/
-/* Public-page styling for the homepage and the legal placeholder pages.
+/*!*********************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/run-dashboard.css ***!
+  \*********************************************************************************************************/
+/* src/css/run-dashboard.css */
+/* Epic Conductor v2 run dashboard (BAPI-539, T8) — a dense, calm operations
+   surface. Reuses the Warm Coral + Cream tokens from globals.css instead of
+   hardcoding matching colors. Selectors are scoped under
+   .run-dashboard-container so nothing here leaks onto other pages. */
+
+.run-dashboard-container .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.run-dashboard-container .run-dashboard-error,
+.run-dashboard-container .gate-matrix-error,
+.run-dashboard-container .active-jobs-error,
+.run-dashboard-container .needs-human-error {
+    background-color: #fef2f2;
+    border: 1px solid var(--error-color);
+    /* var(--error-color) text on this pale background is only 3.44:1 —
+       below the 4.5:1 normal-text floor. var(--primary-dark) on the same
+       background is 5.48:1. */
+    color: var(--primary-dark);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    margin-bottom: 0.5rem;
+    font-size: 14px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Run health summary
+ * -------------------------------------------------------------------- */
+
+.run-dashboard-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.run-health-card {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.75rem 1rem;
+    box-shadow: var(--box-shadow);
+}
+
+.run-health-card--warning {
+    border-color: var(--dark-orange);
+    background: var(--secondary-button-background);
+}
+
+.run-health-card--error {
+    border-color: var(--error-color);
+    background: #fef2f2;
+}
+
+.run-health-card .card-label {
+    font-size: 14px;
+    color: var(--secondary-color);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.run-health-card .card-value {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+/* -------------------------------------------------------------------- *
+ * Ticket x Gate matrix
+ * -------------------------------------------------------------------- */
+
+.gate-matrix-wrapper {
+    overflow-x: auto;
+}
+
+.gate-matrix-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+.gate-matrix-table th,
+.gate-matrix-table td {
+    padding: 8px 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+    vertical-align: top;
+}
+
+.gate-matrix-table th {
+    font-weight: 600;
+    color: var(--secondary-color);
+    white-space: nowrap;
+}
+
+.gate-cell {
+    min-width: 96px;
+}
+
+.gate-status-badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 999px;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: capitalize;
+    color: var(--text-color);
+    background: var(--light-grey);
+}
+
+.gate-status-badge--passed {
+    /* white on var(--success-color) is only 2.54:1. This darker shade of the
+       same green is 5.34:1 against white. */
+    background: #0f7a53;
+    color: #ffffff;
+}
+
+.gate-status-badge--in_progress,
+.gate-status-badge--running {
+    background: var(--light-orange);
+    color: var(--text-color);
+}
+
+.gate-status-badge--needs_human {
+    /* white on var(--error-color) is only 3.76:1. var(--primary-dark) is
+       6.00:1 against white and reuses an existing token. */
+    background: var(--primary-dark);
+    color: #ffffff;
+}
+
+.gate-status-badge--failed {
+    background: var(--primary-dark);
+    color: #ffffff;
+}
+
+.gate-status-badge--pending,
+.gate-status-badge--queued,
+.gate-status-badge--skipped {
+    background: var(--light-grey);
+    color: var(--secondary-color);
+}
+
+.gate-observation-detail {
+    margin-top: 4px;
+}
+
+.gate-observation-detail summary {
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--secondary-color);
+}
+
+.observation-detail-body {
+    margin-top: 4px;
+    padding: 8px;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    font-size: 14px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* -------------------------------------------------------------------- *
+ * Active jobs
+ * -------------------------------------------------------------------- */
+
+.active-job-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 14px;
+}
+
+.active-job-row .phase-hint {
+    color: var(--secondary-color);
+    font-style: italic;
+}
+
+.active-job-row .job-commit-count,
+.active-job-row .job-activity {
+    color: var(--secondary-color);
+}
+
+/* -------------------------------------------------------------------- *
+ * Needs-human incident cards
+ * -------------------------------------------------------------------- */
+
+.needs-human-card {
+    background: var(--surface-color);
+    border: 1px solid var(--dark-orange);
+    border-radius: 0.25rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.needs-human-card h3 {
+    margin-bottom: 8px;
+}
+
+.needs-human-field {
+    margin-bottom: 4px;
+    font-size: 14px;
+}
+
+.needs-human-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+}
+
+.needs-human-secondary-action {
+    color: var(--secondary-color);
+    font-size: 14px;
+    font-style: italic;
+}
+
+/* -------------------------------------------------------------------- *
+ * Monospace + empty state
+ * -------------------------------------------------------------------- */
+
+.run-dashboard-container .monospace {
+    font-family: 'Courier New', Courier, monospace;
+    word-break: break-all;
+}
+
+.run-dashboard-container .empty-state {
+    padding: 1.5rem;
+    text-align: center;
+    color: var(--secondary-color);
+    font-size: 16px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Responsive
+ * -------------------------------------------------------------------- */
+
+@media (max-width: 768px) {
+    .run-dashboard-container .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+
+    .run-dashboard-summary {
+        grid-template-columns: 1fr;
+    }
+
+    .gate-matrix-table {
+        font-size: 14px;
+    }
+
+    .active-job-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+}
+
+/*!********************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/public-pages.css ***!
+  \********************************************************************************************************/
+/* Public-page styling for the homepage and the legal placeholder pages.
    Class-scoped only — no overrides of body, :root, .hidden, or form elements. */
 
 .public-page-header {
@@ -1670,104 +2325,339 @@ select.input-error {
     font-size: 0.875rem;
     line-height: 1.4;
 }
-/*!*************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/optimize_analysis.css ***!
-  \*************************************************************************************************************/
-/* Code Analysis Styling */
 
-.hidden {
-    display: none !important;
+/* --- Difficulty-adaptive review policy overrides (BAPI-579) --- */
+/* Page-scoped, low-specificity kebab-case classes that reuse the cream/coral
+   globals.css tokens (no new palette). State differences (default / override /
+   invalid) are always carried by a text label, never color alone. */
+#project-detail-container .review-policy-section {
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    margin-top: 0.5rem;
 }
 
-.analysis-section {
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid var(--border-color);
+#project-detail-container .review-policy-intro {
+    margin: 0.25rem 0 0.75rem;
 }
 
-#build-section {
-    padding-top: 2rem;
+/* Compact 1-10 boundary reference strip (display-only). */
+#project-detail-container .review-policy-boundary-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
 }
 
-.analysis-section:last-child {
-    border-bottom: none;
+#project-detail-container .review-policy-boundary-item {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    background-color: var(--secondary-button-background);
+    font-size: 0.8125rem;
 }
 
-.analysis-section h4 {
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
+#project-detail-container .review-policy-boundary-label {
+    color: var(--text-color);
     font-weight: 600;
 }
 
-.analysis-info-label {
-    margin-bottom: 10px;
-    font-style: italic;
-    color: #555;
-    line-height: 1.5;
-}
-
-.reanalyze-container {
-    margin-top: 10px;
-    font-size: 0.9em;
-}
-
-.reanalyze-container p {
-    margin: 0;
+#project-detail-container .review-policy-boundary-range {
+    color: var(--secondary-color);
 }
 
-.reanalyze-container a {
-    color: var(--primary-color);
-    text-decoration: none;
-    font-weight: 500;
+#project-detail-container .review-policy-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 0.75rem;
 }
 
-.reanalyze-container a:hover {
-    text-decoration: underline;
+#project-detail-container .review-policy-buckets {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
 }
 
-.code-analysis {
-    margin-top: 2rem;
-    padding: 1rem 0;
-    border-top: 1px solid var(--border-color);
+#project-detail-container .review-policy-bucket-card {
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    background-color: var(--surface-color);
 }
 
-.code-analysis h3 {
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-    font-weight: 600;
+/* Invalid buckets get a coral edge AND a visible error message below the header. */
+#project-detail-container .review-policy-bucket-card--invalid {
+    border-color: var(--error-color);
+    box-shadow: 0 0 0 0.15rem rgba(239, 68, 68, 0.2);
 }
 
-.code-analysis form {
+#project-detail-container .review-policy-bucket-header {
     display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
-.code-analysis form > div {
+#project-detail-container .review-policy-bucket-heading {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    margin-right: auto;
 }
 
-.code-analysis label {
-    font-weight: 500;
+#project-detail-container .review-policy-bucket-name {
+    font-weight: 600;
     color: var(--text-color);
 }
 
-.code-analysis select,
-.code-analysis textarea {
-    padding: 0.5rem;
+#project-detail-container .review-policy-bucket-range {
+    font-size: 0.8125rem;
+    color: var(--secondary-color);
+}
+
+/* State chip: text label always present ("Using built-in defaults" /
+   "Override active"); the color is a redundant, secondary cue. */
+#project-detail-container .review-policy-state {
+    padding: 0.125rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
     border: 1px solid var(--border-color);
-    border-radius: 0.25rem;
-    font-family: inherit;
 }
 
-.code-analysis select:focus,
-.code-analysis textarea:focus {
-    outline: none;
+#project-detail-container .review-policy-state--default {
+    color: var(--secondary-color);
+    background-color: var(--secondary-button-background);
+}
+
+#project-detail-container .review-policy-state--override {
+    color: var(--primary-dark);
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    background-color: var(--secondary-button-background);
+}
+
+#project-detail-container .review-policy-bucket-error {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+/* Two automation columns side-by-side; stacks on narrow viewports (see media). */
+#project-detail-container .review-policy-groups {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+#project-detail-container .review-policy-group {
+    flex: 1 1 220px;
+    min-width: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    background-color: var(--background-color);
+}
+
+#project-detail-container .review-policy-group-title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-color);
+}
+
+#project-detail-container .review-policy-rounds {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+#project-detail-container .review-policy-round {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#project-detail-container .review-policy-round-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+#project-detail-container .review-policy-round-label-text {
+    font-size: 0.8125rem;
+    color: var(--secondary-color);
+    white-space: nowrap;
+}
+
+#project-detail-container .review-policy-tier-select {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    background-color: var(--surface-color);
+    color: var(--text-color);
+    font-size: 0.875rem;
+}
+
+#project-detail-container .review-policy-empty {
+    margin: 0 0 0.5rem;
+    font-size: 0.8125rem;
+    font-style: italic;
+    color: var(--secondary-color);
+}
+
+/* Buttons: neutral by default; the two reset actions read as low-emphasis. */
+#project-detail-container .review-policy-add-round,
+#project-detail-container .review-policy-remove-round,
+#project-detail-container .review-policy-reset-bucket,
+#project-detail-container .review-policy-reset-all {
+    padding: 0.25rem 0.625rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    background-color: var(--secondary-button-background);
+    color: var(--text-color);
+    font-size: 0.8125rem;
+    cursor: pointer;
+}
+
+#project-detail-container .review-policy-add-round:hover:not(:disabled),
+#project-detail-container .review-policy-remove-round:hover:not(:disabled),
+#project-detail-container .review-policy-reset-bucket:hover,
+#project-detail-container .review-policy-reset-all:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-dark);
+}
+
+#project-detail-container .review-policy-add-round:disabled,
+#project-detail-container .review-policy-remove-round:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Keep a clearly-visible keyboard focus ring on every interactive control. */
+#project-detail-container .review-policy-tier-select:focus-visible,
+#project-detail-container .review-policy-add-round:focus-visible,
+#project-detail-container .review-policy-remove-round:focus-visible,
+#project-detail-container .review-policy-reset-bucket:focus-visible,
+#project-detail-container .review-policy-reset-all:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 1px;
+}
+
+/* Stack the clarify/critique groups on narrow viewports. */
+@media (max-width: 768px) {
+    #project-detail-container .review-policy-groups {
+        flex-direction: column;
+    }
+
+    #project-detail-container .review-policy-group {
+        flex-basis: auto;
+    }
+}
+/*!*************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/optimize_analysis.css ***!
+  \*************************************************************************************************************/
+/* Code Analysis Styling */
+
+.hidden {
+    display: none !important;
+}
+
+.analysis-section {
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+#build-section {
+    padding-top: 2rem;
+}
+
+.analysis-section:last-child {
+    border-bottom: none;
+}
+
+.analysis-section h4 {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.analysis-info-label {
+    margin-bottom: 10px;
+    font-style: italic;
+    color: #555;
+    line-height: 1.5;
+}
+
+.reanalyze-container {
+    margin-top: 10px;
+    font-size: 0.9em;
+}
+
+.reanalyze-container p {
+    margin: 0;
+}
+
+.reanalyze-container a {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.reanalyze-container a:hover {
+    text-decoration: underline;
+}
+
+.code-analysis {
+    margin-top: 2rem;
+    padding: 1rem 0;
+    border-top: 1px solid var(--border-color);
+}
+
+.code-analysis h3 {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.code-analysis form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.code-analysis form > div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.code-analysis label {
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+.code-analysis select,
+.code-analysis textarea {
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.25rem;
+    font-family: inherit;
+}
+
+.code-analysis select:focus,
+.code-analysis textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .status-message {
@@ -2324,6 +3214,621 @@ textarea {
     justify-content: center;
 }
 
+/*!*******************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/get-started.css ***!
+  \*******************************************************************************************************/
+/* ============================================================
+   Get-Started onboarding page styles
+   All rules scoped under #get-started-container
+   ============================================================ */
+
+#get-started-container .get-started-intro {
+    color: var(--text-muted, #666);
+    max-width: 720px;
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+}
+
+/* ---- Section cards ---- */
+#get-started-container .get-started-section {
+    background: var(--card-bg, #fff);
+    border: 1px solid var(--border-color, #e0e0e0);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+#get-started-container .get-started-section h2 {
+    margin-top: 0;
+    font-size: 1.15rem;
+    margin-bottom: 0.75rem;
+}
+
+/* ---- Install-key generation panel ---- */
+.install-key-panel {
+    border: 1px solid var(--border-color, #e0e0e0);
+    background: var(--code-bg, #f8f9fa);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    margin: 0.75rem 0 1.25rem;
+}
+
+.install-key-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.install-key-header h3 {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+}
+
+.install-key-header p {
+    margin: 0;
+    font-size: 0.88rem;
+    color: var(--text-muted, #666);
+    max-width: 48ch;
+}
+
+.install-key-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-shrink: 0;
+}
+
+.install-key-status {
+    font-size: 0.82rem;
+    color: var(--success-color, #28a745);
+}
+
+.install-key-error {
+    margin: 0.75rem 0 0;
+    font-size: 0.85rem;
+    color: var(--danger-color, #dc3545);
+}
+
+.install-key-error.hidden {
+    display: none;
+}
+
+.install-key-result {
+    margin-top: 1rem;
+}
+
+.install-key-result.hidden {
+    display: none;
+}
+
+/* Mirror the Security page warning treatment */
+.install-key-panel .key-warning {
+    color: #856404;
+    background: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    font-size: 0.88rem;
+}
+
+.install-key-panel .key-display {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.install-key-panel .key-display input {
+    flex: 1;
+    min-width: 200px;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 0.85rem;
+    background: #fff;
+}
+
+/* Snippet placeholder once the minted key has been injected */
+.bapi-api-key-slot-filled {
+    background: #d4edda;
+    color: #155724;
+    font-style: normal;
+}
+
+/* ---- Snippet tabs ---- */
+#editor-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 2px solid var(--border-color, #e0e0e0);
+    padding-bottom: 0.25rem;
+}
+
+.snippet-tab-btn {
+    background: none;
+    border: none;
+    padding: 0.4rem 0.8rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: var(--text-muted, #666);
+    border-radius: 4px 4px 0 0;
+    border-bottom: 3px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+}
+
+.snippet-tab-btn:hover {
+    color: var(--primary-color, #007bff);
+}
+
+.snippet-tab-btn.active,
+.snippet-tab-btn[aria-selected="true"] {
+    color: var(--primary-color, #007bff);
+    border-bottom-color: var(--primary-color, #007bff);
+    font-weight: 600;
+}
+
+.snippet-tab-btn:focus-visible {
+    outline: 2px solid var(--primary-color, #007bff);
+    outline-offset: 2px;
+}
+
+/* ---- Code panels ---- */
+.snippet-panel {
+    margin-bottom: 0.5rem;
+}
+
+.snippet-panel.hidden {
+    display: none;
+}
+
+.snippet-meta {
+    font-size: 0.78rem;
+    color: var(--text-muted, #888);
+    margin-bottom: 0.4rem;
+    font-family: monospace;
+}
+
+.snippet-notes {
+    font-size: 0.85rem;
+    color: var(--text-muted, #666);
+    margin-bottom: 0.5rem;
+    font-style: italic;
+}
+
+.snippet-panel pre {
+    background: var(--code-bg, #f5f5f5);
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 6px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin-bottom: 0.5rem;
+    max-width: 100%;
+}
+
+.snippet-panel code {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.82rem;
+    line-height: 1.5;
+    white-space: pre;
+    word-break: normal;
+    overflow-wrap: normal;
+}
+
+/* API-key placeholder slot */
+.bapi-api-key-slot {
+    background: #fff3cd;
+    color: #856404;
+    border-radius: 3px;
+    padding: 0 2px;
+    font-style: italic;
+    font-weight: 600;
+}
+
+/* ---- Copy row ---- */
+.snippet-copy-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+}
+
+.copy-status {
+    font-size: 0.82rem;
+    color: var(--success-color, #28a745);
+    min-width: 60px;
+}
+
+/* ---- /install-bridge hand-off ---- */
+.install-bridge-notice {
+    background: #fff8e1;
+    border-left: 4px solid #f59e0b;
+    padding: 0.75rem 1rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+.handoff-copy-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.handoff-command {
+    background: var(--code-bg, #f5f5f5);
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 4px;
+    padding: 0.3rem 0.6rem;
+    font-size: 0.95rem;
+    font-family: monospace;
+}
+
+/* ---- Config-status readout ---- */
+.status-summary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.status-total {
+    font-size: 0.85rem;
+    color: var(--text-muted, #666);
+}
+
+.status-chip {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.status-set {
+    background: #d4edda;
+    color: #155724;
+}
+
+.status-unset {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.status-group {
+    margin-bottom: 1rem;
+}
+
+.status-group-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-muted, #555);
+    margin: 0 0 0.4rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.status-field-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.6rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--border-color, #eee);
+    flex-wrap: wrap;
+}
+
+.status-field-row:last-child {
+    border-bottom: none;
+}
+
+.status-field-name {
+    font-size: 0.88rem;
+    font-family: monospace;
+}
+
+.status-field-value {
+    font-size: 0.8rem;
+    color: var(--text-muted, #888);
+    font-family: monospace;
+    word-break: break-all;
+}
+
+.status-empty {
+    color: var(--text-muted, #888);
+    font-style: italic;
+    font-size: 0.9rem;
+}
+
+/* ---- Integrations checklist (BAPI-516) ---- */
+/* Collapse the container entirely when the checklist renders nothing so the
+   absent-safe / fail-open cases leave no visual gap. */
+#get-started-container .install-integrations:empty {
+    display: none;
+}
+
+.install-integrations:not(:empty) {
+    margin: 0.75rem 0 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border-color, #eee);
+}
+
+.install-integrations-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0 0 0.35rem;
+}
+
+.install-integrations-note {
+    color: var(--text-muted, #666);
+    font-size: 0.8rem;
+    line-height: 1.5;
+    margin: 0 0 0.6rem;
+}
+
+.install-integrations-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.install-integration-row {
+    flex-wrap: wrap;
+}
+
+/* Integration labels are human-readable names, not field keys — override the
+   monospace treatment inherited from .status-field-name. */
+.install-integration-label {
+    font-family: inherit;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.install-integration-required {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+}
+
+.install-integration-link {
+    color: var(--primary-color, #0066cc);
+    font-size: 0.875rem;
+    text-decoration: underline;
+}
+
+.install-integration-link:focus-visible {
+    outline: 2px solid var(--primary-color, #0066cc);
+    outline-offset: 2px;
+}
+
+/* ---- Skeleton loading ---- */
+.get-started-state {
+    padding: 1rem 0;
+}
+
+.get-started-state.hidden {
+    display: none;
+}
+
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.4s infinite;
+    border-radius: 6px;
+    margin-bottom: 0.75rem;
+}
+
+@keyframes skeleton-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+.skeleton-tabs {
+    height: 36px;
+    width: 70%;
+}
+
+.skeleton-code {
+    height: 160px;
+    width: 100%;
+}
+
+.skeleton-status {
+    height: 80px;
+    width: 100%;
+}
+
+/* ---- Inline error ---- */
+.get-started-error-msg {
+    color: var(--danger-color, #dc3545);
+    margin-bottom: 0.75rem;
+}
+
+/* ---- Footer link ---- */
+.get-started-footer {
+    margin-top: 1rem;
+    text-align: center;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 600px) {
+    .snippet-tab-btn {
+        padding: 0.35rem 0.55rem;
+        font-size: 0.82rem;
+    }
+
+    .handoff-copy-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .install-key-header {
+        flex-direction: column;
+    }
+
+    .install-key-actions {
+        width: 100%;
+    }
+
+    .install-key-actions .btn {
+        flex: 1;
+    }
+
+    .install-key-panel .key-display {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .install-key-panel .key-display input,
+    .install-key-panel .key-display .btn {
+        width: 100%;
+    }
+
+    .status-field-row {
+        flex-direction: column;
+        gap: 0.2rem;
+    }
+
+    /* Collapse checklist rows into a readable single-column stack at narrow
+       widths so long required-for text never forces horizontal overflow. */
+    .install-integration-row {
+        align-items: flex-start;
+    }
+
+    .install-integration-required {
+        overflow-wrap: anywhere;
+    }
+
+    .github-connect-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .github-connect-actions .btn {
+        width: 100%;
+    }
+}
+
+/* ============================================================
+   GitHub App connect flow (BAPI-506)
+   ============================================================ */
+
+#get-started-container .github-connect-section {
+    /* Inherits .get-started-section card rhythm; nothing extra needed here. */
+}
+
+.github-connect-card {
+    border: 1px solid var(--border-color, #e0e0e0);
+    background: var(--card-bg, #fff);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    margin-top: 0.75rem;
+}
+
+.github-connect-card > p {
+    color: var(--text-muted, #666);
+    line-height: 1.6;
+    margin-top: 0;
+}
+
+.github-connect-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    margin: 0.75rem 0;
+}
+
+#github-connect-status {
+    color: var(--text-muted, #666);
+    font-size: 0.9rem;
+}
+
+.github-connect-result {
+    border: 1px solid var(--border-color, #e0e0e0);
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+    margin: 0.75rem 0;
+}
+
+.github-connect-result-title {
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+}
+
+.github-connect-result--success {
+    border-color: var(--success-color, #2e7d32);
+    background: var(--success-bg, #edf7ee);
+}
+
+.github-connect-result--warning {
+    border-color: var(--warning-color, #b26a00);
+    background: var(--warning-bg, #fff6e5);
+}
+
+.github-connect-result--error {
+    border-color: var(--error-color, #c62828);
+    background: var(--error-bg, #fdecea);
+}
+
+/* ---- Ambiguous-install repository picker ---- */
+.github-repo-picker-panel {
+    border: 1px solid var(--border-color, #e0e0e0);
+    background: var(--code-bg, #f8f9fa);
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+    margin: 0.75rem 0;
+}
+
+.github-repo-picker-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    margin-top: 0.5rem;
+}
+
+.github-repo-picker-option {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.15rem;
+    text-align: left;
+    width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.github-repo-picker-option:focus-visible {
+    outline: 2px solid var(--focus-ring, #1a73e8);
+    outline-offset: 2px;
+}
+
+.github-repo-picker-option-name {
+    font-weight: 600;
+    overflow-wrap: anywhere;
+}
+
+.github-repo-picker-option-owner {
+    color: var(--text-muted, #666);
+    font-size: 0.85rem;
+}
+
+/* ---- Manual fallback helper text ---- */
+.github-manual-fallback {
+    color: var(--text-muted, #666);
+    font-size: 0.9rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0;
+}
+
 /*!*******************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/css/data_health.css ***!
   \*******************************************************************************************************/