From 5866c2f04013292fe9c23a1cc2d1ae100746ce33 Mon Sep 17 00:00:00 2001
From: Thomas Faour <tom@tfao.ca>
Date: Tue, 28 Jul 2026 02:40:58 +0000
Subject: [PATCH] Flatten page-level cards when installed as a standalone PWA

The boxed-card look reads as "still a website" once the app is
running full-screen off the home screen. Scoped to
display-mode: standalone so the regular browser-tab view is
untouched; dialog-internal cards keep their box since they group
subsections of one form rather than acting as page furniture.
---
 server/app/static/theme.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/server/app/static/theme.css b/server/app/static/theme.css
index 4cf08bd..0b78104 100644
--- a/server/app/static/theme.css
+++ b/server/app/static/theme.css
@@ -243,6 +243,36 @@ input[type="range"] {
 }
 .card + .card { margin-top: 20px; }
 
+/* Installed as a standalone app, the boxed-card look reads as "still a
+   website" -- flatten page-level cards into the page background so it
+   feels native. Cards inside the widget dialog keep their box: they're
+   grouping subsections of one form, not top-level page furniture. */
+@media (display-mode: standalone) {
+  .card {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 20px 0;
+  }
+  .card + .card {
+    margin-top: 4px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border);
+  }
+  #widget-dialog-body .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 20px 22px 22px;
+  }
+  #widget-dialog-body .card + .card {
+    margin-top: 20px;
+    padding-top: 22px;
+    border-top: none;
+  }
+}
+
 label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text); }
 label:first-child { margin-top: 0; }