From bddb9716dc7928463bb47c796fdffbf8430c8cb9 Mon Sep 17 00:00:00 2001
From: Cameron <cameron@pfiffer.org>
Date: Mon, 28 Sep 2026 23:18:38 -0700
Subject: [PATCH] Phone card polish: Let go is a trash can by the close button,
 mode is one segmented track, programs are rounded chips on one row, top bar
 page buttons are quiet tabs

---
 src/style.css | 29 +++++++++++++++++++++++++++++
 src/ui.ts     |  7 +++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index bd9d350e..8ec78b85 100644
--- a/src/style.css
+++ b/src/style.css
@@ -510,3 +510,32 @@ button:focus-visible { outline-color: var(--amber); }
 .versionrun { border-radius: var(--r); background: rgba(242, 169, 59, .04); }
 .card .x { background: none; border-color: transparent; border-radius: 999px; }
 .card .x:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
+
+/* the trash can next to the close button: let go of this machine */
+.card .x { display: grid; place-items: center; }
+.card .x svg { display: block; }
+.card .trash { right: 32px; color: var(--muted); }
+.card .trash:hover:not(:disabled) { color: var(--danger); }
+.card .head { padding-right: 52px; }
+
+/* phones: softer, calmer panels. Mode is one segmented track, programs are rounded chips,
+   and the top bar's page buttons are quiet tabs instead of heavy boxes */
+@media (max-width: 700px) {
+  .card { padding: 14px 14px 12px; gap: 10px; border-radius: 22px; }
+  .card .x { top: 4px; right: 4px; }
+  .card .trash { right: 46px; }
+  .card .head { padding-right: 92px; row-gap: 4px; }
+  .card h3 { font-size: 13px; }
+  .card .chips { gap: 4px 14px; }
+  .sect { gap: 6px; padding-top: 12px; }
+  .modes { gap: 2px; padding: 3px; background: rgba(0, 0, 0, .35); border: 1px solid var(--glass-line); border-radius: 13px; }
+  .modes button { min-height: 38px; border: 0; background: none; border-radius: 10px; color: var(--muted); font-size: 10.5px; letter-spacing: .12em; }
+  .modes button.on { background: rgba(255, 255, 255, .13); color: var(--amber); box-shadow: var(--glass-hi); }
+  .acts.progs { gap: 5px; }
+  .acts.progs > .act { min-height: 40px; padding: 6px 4px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0; column-gap: 0; justify-content: center; text-align: center; }
+  .act[data-act="uninstall"] { border-color: rgba(229, 72, 77, .35); }
+  .topbar { border-radius: 20px; padding: 6px 12px 8px; }
+  .brand { gap: 2px; margin-left: -6px; }
+  .brand button { min-height: 40px; padding: 0 10px; border-color: transparent; background: none; color: var(--bone-dim); letter-spacing: .04em; }
+  .brand button:hover:not(:disabled) { background: rgba(255, 255, 255, .07); border-color: transparent; }
+}
diff --git a/src/ui.ts b/src/ui.ts
index 0171ee2c..e52d829f 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -134,11 +134,15 @@ function heldText(held: DataType[]) {
 /** A labelled part of a card: what it's doing, its mode, its program. */
 const section = (label: string, body: string) => body ? `<div class="sect"><div class="sub">${label}</div>${body}</div>` : '';
 
+const TRASH = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 4h11M6.5 4V2.5h3V4M4 4l.7 9.5h6.6L12 4M6.8 6.5v4.5M9.2 6.5v4.5"/></svg>';
 function machineCard(S: State, m: Machine) {
   const take = jobFor(S, 'take', m.id);
   const status = m.owned ? (m.prog ? PROGRAMS[m.prog].name : m.home ? 'You' : 'Yours') : take ? 'Taking' : m.claimed ? 'Claimed' : '';
   const site = siteOf(S, m), where = `<button class="link" data-act="site" data-arg="${site}" title="See this site">${siteName(S, site)}</button> · ${S.rooms[m.room].name}`;
-  let h = `<div class="head"><div class="sub">${where}</div><h3>${m.name}</h3>${status ? `<span class="tag"${m.prog ? ` title="${PROGRAMS[m.prog].desc}"` : ''}>${status}</span>` : ''}</div>`;
+  // letting go sits up by the close button as a trash can, out of the way of the program buttons
+  const letgo = canLetGo(m) && !jobFor(S, 'install', m.id)
+    ? `<button class="x trash" data-act="letgo" aria-label="Let go" title="Let go · L\nGive this machine back. You lose it and what it holds, but its trail goes too: a trace that reaches it goes cold.">${TRASH}</button>` : '';
+  let h = `<div class="head"><div class="sub">${where}</div><h3>${m.name}</h3>${status ? `<span class="tag"${m.prog ? ` title="${PROGRAMS[m.prog].desc}"` : ''}>${status}</span>` : ''}${letgo}</div>`;
   const cover = S.cover[m.id] ?? 0;
   const inRoom = roomMachines(S, m.room), got = inRoom.filter(x => x.owned).length;
   const room: [string, string] = ['room', got === inRoom.length ? 'sealed' : `${got}/${inRoom.length}`];
@@ -249,7 +253,6 @@ function machineCard(S: State, m: Machine) {
         title: `${PROGRAMS[k].name} · ${PROGRAMS[k].work}`, desc: PROGRAMS[k].desc });
     }
     if (m.prog) acts.push({ act: 'uninstall', title: 'Remove', desc: `Remove the ${PROGRAMS[m.prog].name.toLowerCase()}.` });
-    if (canLetGo(m)) acts.push({ act: 'letgo', title: 'Let go', desc: 'Give this machine back. You lose it and what it holds, but its trail goes too: a trace that reaches it goes cold.' });
   }
   prog += actsHtml(acts).replace('class="acts"', 'class="acts progs"'); acts.length = 0;
   h += section('Program', prog);
-- 
2.51.2