From fe6350f93e220e195f5847584a3e629b10a16629 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <github@flamingcow.io>
Date: Mon, 16 Feb 2026 11:43:16 -0800
Subject: [PATCH] Use outlined appearance for locked room cards with blue
 border

---
 static/trip.html | 2 +-
 static/trip.js   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/static/trip.html b/static/trip.html
index 011702d..fbf1816 100644
--- a/static/trip.html
+++ b/static/trip.html
@@ -70,7 +70,7 @@
         #solver { margin-bottom: 0.75rem; }
         #solver-results { margin-top: 0.5rem; }
         .room-card { margin-bottom: 0.3rem; }
-        .room-locked { --border-width: 1px; --border-color: var(--wa-color-brand-50); }
+        .room-locked { --wa-color-surface-border: var(--wa-color-brand-50); }
         .room-label { font-weight: bold; font-size: 0.8rem; margin-bottom: 0.2rem; }
         .solver-score { font-size: 0.8rem; margin-top: 0.3rem; color: var(--wa-color-neutral-500); }
         .divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; }
diff --git a/static/trip.js b/static/trip.js
index 6dabccd..0b31b8b 100644
--- a/static/trip.js
+++ b/static/trip.js
@@ -427,7 +427,9 @@ document.getElementById('solve-btn').addEventListener('click', async () => {
             for (let i = 0; i < sol.rooms.length; i++) {
                 const key = sol.rooms[i].map(m => m.id).sort((a, b) => a - b).join(',');
                 const card = document.createElement('wa-card');
-                card.className = 'room-card' + (lockedRooms.has(key) ? ' room-locked' : '');
+                const locked = lockedRooms.has(key);
+                card.className = 'room-card' + (locked ? ' room-locked' : '');
+                if (locked) card.setAttribute('appearance', 'outlined');
                 const label = document.createElement('div');
                 label.className = 'room-label';
                 label.textContent = 'Room ' + (i + 1);