feat: MedicalCondition trustworthy patient-info page layout

app.css

@@ -4758,3 +4758,101 @@ footer a:hover { color: var(--accent-2); }
   .em-body { padding: 0 1rem .6rem; }
   .em-excerpt { padding: .5rem 1rem; margin: 0 1rem; }
 }
+
+/* ── MEDICALCONDITION (trustworthy patient-info page) ── */
+.card.health-info {
+  background: var(--card);
+  border-radius: var(--radius);
+  --hi-teal: #0d9488;
+  --hi-teal-bg: rgba(13,148,136,.06);
+  --hi-teal-border: rgba(13,148,136,.18);
+}
+.card.health-info .hd.hidden { display: none; }
+
+.hi-header {
+  display: flex;
+  align-items: center;
+  gap: .7rem;
+  padding: 1.5rem 1.5rem .8rem;
+}
+.hi-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--hi-teal-bg);
+  color: var(--hi-teal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3rem;
+  flex-shrink: 0;
+}
+.hi-title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--ink);
+  line-height: 1.3;
+}
+
+.hi-notice {
+  display: flex;
+  align-items: center;
+  gap: .4rem;
+  margin: 0 1.5rem .8rem;
+  padding: .5rem .8rem;
+  background: #fefce8;
+  border: 1px solid #fde68a;
+  border-radius: 8px;
+  font-size: .78rem;
+  color: #92400e;
+  line-height: 1.4;
+}
+.hi-notice-icon {
+  font-size: .9rem;
+  flex-shrink: 0;
+}
+
+.hi-section {
+  padding: .5rem 1.5rem;
+}
+.hi-section + .hi-section {
+  border-top: 1px solid var(--line-2);
+}
+.hi-section-label {
+  font-size: .7rem;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--hi-teal);
+  font-weight: 700;
+  margin-bottom: .25rem;
+}
+.hi-section-body {
+  font-size: .84rem;
+  line-height: 1.6;
+  color: var(--ink-2);
+}
+
+.hi-overview {
+  font-size: .84rem;
+  line-height: 1.65;
+  color: var(--muted);
+  padding: .8rem 1.5rem;
+  border-top: 1px solid var(--line);
+  margin-top: .4rem;
+}
+
+.hi-footer {
+  text-align: center;
+  font-size: .7rem;
+  color: var(--muted-2);
+  padding: .8rem 1.5rem 1.2rem;
+  letter-spacing: .02em;
+}
+
+@media (max-width: 480px) {
+  .hi-header { padding: 1.2rem 1rem .6rem; }
+  .hi-title { font-size: 1.05rem; }
+  .hi-notice { margin: 0 1rem .6rem; }
+  .hi-section { padding: .4rem 1rem; }
+  .hi-overview { padding: .6rem 1rem; }
+}

app.js

@@ -2506,6 +2506,72 @@
       handled.add("hasMenuSection"); handled.add("provider"); handled.add("url");
     }
 
+    // ── MEDICALCONDITION (trustworthy patient-info page) ──
+    if (cfg.type === "MedicalCondition") {
+      const card = document.querySelector(".card");
+      if (card) card.classList.add("health-info");
+
+      // Hide normal header
+      const hd = document.querySelector(".hd");
+      if (hd) hd.classList.add("hidden");
+
+      // Remove generic hero
+      const heroMount = document.getElementById("hero-mount");
+      if (heroMount) heroMount.querySelector('.hero')?.remove();
+
+      // ── Calm header with soft teal ──
+      const hiHeader = document.createElement("div"); hiHeader.className = "hi-header";
+      const hiIcon = document.createElement("div"); hiIcon.className = "hi-icon";
+      hiIcon.textContent = "\u2695";
+      hiHeader.appendChild(hiIcon);
+      const title = data[cfg.titleProp];
+      if (title) {
+        const nameEl = document.createElement("div"); nameEl.className = "hi-title";
+        nameEl.textContent = title;
+        hiHeader.appendChild(nameEl);
+      }
+      view.appendChild(hiHeader);
+
+      // ── Informational-only notice banner ──
+      const notice = document.createElement("div"); notice.className = "hi-notice";
+      notice.innerHTML = "<span class=\"hi-notice-icon\">\u2139\uFE0F</span> <span>This is informational only — not medical advice. Consult a physician.</span>";
+      view.appendChild(notice);
+
+      // ── Section helper ──
+      const addSection = (label, text) => {
+        if (!text) return;
+        const sec = document.createElement("div"); sec.className = "hi-section";
+        sec.innerHTML = "<div class=\"hi-section-label\">" + label + "</div><div class=\"hi-section-body\">" + text + "</div>";
+        view.appendChild(sec);
+      };
+
+      // Symptoms
+      addSection("Signs & Symptoms", data["signOrSymptom"]);
+      // Anatomy
+      addSection("Associated Anatomy", data["associatedAnatomy"]);
+      // Treatment
+      addSection("Possible Treatment", data["possibleTreatment"]);
+      // Risk factors
+      addSection("Risk Factors", data["riskFactor"]);
+
+      // ── Description as overview ──
+      const desc = data["description"];
+      if (desc) {
+        const overview = document.createElement("div"); overview.className = "hi-overview";
+        overview.textContent = desc;
+        view.appendChild(overview);
+      }
+
+      // ── Reviewed-date footer feel ──
+      const footer = document.createElement("div"); footer.className = "hi-footer";
+      footer.textContent = "For informational purposes only \u00b7 Not a substitute for professional medical advice";
+      view.appendChild(footer);
+
+      handled.add("name"); handled.add("image"); handled.add("description");
+      handled.add("associatedAnatomy"); handled.add("possibleTreatment");
+      handled.add("riskFactor"); handled.add("signOrSymptom");
+    }
+
     // ── EMAILMESSAGE (email client reading pane) ──
     if (cfg.type === "EmailMessage") {
       const card = document.querySelector(".card");