Restyle app to match OHA branding

app.py

@@ -636,11 +636,11 @@ custom_css = """
 /* --- Global --- */
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-    max-width: 900px !important;
+    max-width: 960px !important;
     width: 100% !important;
     margin: 0 auto !important;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
     background: #FFFFFF !important;
     color: #212529 !important;
     font-size: 16px !important;
@@ -656,26 +656,23 @@ custom_css = """
     font-size: 0.8rem;
     padding: 6px 24px;
     letter-spacing: 0.03em;
-    margin: -16px -1rem 0 -1rem;
+    margin: -16px -1.5rem 0 -1.5rem;
 }
-.ct-gov-bar a {
+.ct-gov-bar a, .ct-gov-bar a span, .ct-gov-bar a strong {
     color: #FFFFFF !important;
     text-decoration: none;
 }
-.ct-gov-bar a:hover {
+.ct-gov-bar a:hover, .ct-gov-bar a:hover span {
     text-decoration: underline;
     color: #FFFFFF !important;
 }
-.ct-gov-bar span {
-    opacity: 0.85;
-}
 
 /* --- Blue Header Band --- */
 .oha-header {
     background: #003DA5;
     color: #FFFFFF;
     padding: 1.25rem 24px;
-    margin: 0 -1rem 1rem -1rem;
+    margin: 0 -1.5rem 1rem -1.5rem;
 }
 .oha-header a {
     color: #FFFFFF !important;
@@ -743,31 +740,60 @@ custom_css = """
     word-break: break-word;
 }
 
-/* --- Collapse empty Gradio wrappers --- */
-.gr-group:empty,
-.gr-block:empty,
-.gr-box:empty,
-.gr-padded:empty {
+/* --- Hide invisible step groups completely --- *
+ * When Gradio hides a Group, it may set display:none on the element
+ * itself or on a wrapper div. The white bars come from leftover
+ * border, padding, margin, and flex gap on those elements.
+ * We use .step-group elem_classes to target them precisely.
+ */
+
+/* The step-group element itself when hidden */
+.step-group[style*="display: none"],
+.step-group[style*="display:none"],
+.step-group.hidden,
+.step-group.hide {
     padding: 0 !important;
     margin: 0 !important;
-    min-height: 0 !important;
     border: none !important;
     box-shadow: none !important;
+    min-height: 0 !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
 }
-/* Hide Markdown components that have no visible text */
-.empty-md, .empty-md * {
+
+/* The wrapper div Gradio puts around each Group */
+div:has(> .step-group[style*="display: none"]),
+div:has(> .step-group[style*="display:none"]),
+div:has(> .step-group.hidden),
+div:has(> .step-group.hide) {
     padding: 0 !important;
     margin: 0 !important;
     min-height: 0 !important;
-    font-size: 0 !important;
-    line-height: 0 !important;
+    max-height: 0 !important;
+    gap: 0 !important;
     border: none !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+    display: none !important;
 }
-/* Chat separator uses HR inside markdown — collapse its wrapper padding */
-.chat-divider {
-    margin: 0.5rem 0 !important;
+
+/* Catch-all: any hidden div inside the app should fully collapse */
+.gradio-container div[style*="display: none"],
+.gradio-container div[style*="display:none"] {
     padding: 0 !important;
-    min-height: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    max-height: 0 !important;
+    overflow: hidden !important;
+}
+
+/* Eliminate flex gap contribution from hidden children */
+.gradio-container > div {
+    gap: 0 !important;
+}
+.gradio-container > div > div {
+    gap: 0 !important;
 }
 
 /* --- Headings --- */
@@ -935,18 +961,18 @@ hr {
 /* --- Mobile Responsive --- */
 @media (max-width: 640px) {
     .gradio-container {
-        padding-left: 0.5rem !important;
-        padding-right: 0.5rem !important;
+        padding-left: 0.75rem !important;
+        padding-right: 0.75rem !important;
     }
     .ct-gov-bar {
         padding: 6px 12px;
-        margin-left: -0.5rem;
-        margin-right: -0.5rem;
+        margin-left: -0.75rem;
+        margin-right: -0.75rem;
     }
     .oha-header {
         padding: 1rem 12px;
-        margin-left: -0.5rem;
-        margin-right: -0.5rem;
+        margin-left: -0.75rem;
+        margin-right: -0.75rem;
     }
     .oha-header h1 {
         font-size: 1.35rem !important;
@@ -1018,7 +1044,7 @@ def create_interface():
             )
 
         # Step 1: Choose path
-        step1 = gr.Group(visible=True)
+        step1 = gr.Group(visible=True, elem_classes="step-group")
         with step1:
             gr.Markdown("### How would you like to start?")
             with gr.Row():
@@ -1034,7 +1060,7 @@ def create_interface():
             )
 
         # Step 2a: Find hospital by ZIP
-        step2a = gr.Group(visible=False)
+        step2a = gr.Group(visible=False, elem_classes="step-group")
         with step2a:
             gr.Markdown("### Enter your ZIP code")
             zip_input = gr.Textbox(label="ZIP Code", placeholder="e.g., 06511", max_lines=1)
@@ -1046,7 +1072,7 @@ def create_interface():
             back_btn_a = gr.Button("Back", size="sm")
 
         # Step 2b: Select known hospital
-        step2b = gr.Group(visible=False)
+        step2b = gr.Group(visible=False, elem_classes="step-group")
         with step2b:
             gr.Markdown("### Select your hospital")
             hospital_dropdown = gr.Dropdown(
@@ -1057,7 +1083,7 @@ def create_interface():
             back_btn_b = gr.Button("Back", size="sm")
 
         # Step 3: Eligibility form
-        step3 = gr.Group(visible=False)
+        step3 = gr.Group(visible=False, elem_classes="step-group")
         with step3:
             selected_hospital_display = gr.Markdown()
 
@@ -1070,7 +1096,7 @@ def create_interface():
             back_btn_c = gr.Button("Back", size="sm")
 
         # Step 4: Results (with streaming) + follow-up chat
-        step4 = gr.Group(visible=False)
+        step4 = gr.Group(visible=False, elem_classes="step-group")
         with step4:
             results_output = gr.Markdown(elem_classes="results-area")
             with gr.Row():