Phone reader: back and the item's actions float over the text (#456)

On a phone they sat above the title and scrolled away with it, so
marking, pinning or sharing a long post meant scrolling back to its
top. Now back sits alone on the left and the actions in a capsule on
the right, sticky at the top of the reader, as Gmail's iOS reader does.
Each theme's own panel, frosted, so no theme changes colour; Glass gets
its sheen and a denser fill, since the text scrolls right under them,
and Classic its toolbar metal. Read and pin redraw the reader, which
now keeps its scroll position, since they are pressed mid-post. The
desktop reader is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RqkrVA8TdTxe556JB3sR1n

web/app.css

@@ -1363,6 +1363,17 @@ body:has(#player.on) #status{padding-bottom:3px}
   #detail{position:fixed;inset:0;z-index:38;display:none;border-top:0;padding:12px 16px 90px;padding-top:calc(12px + var(--safe-t))}
   body.reading #detail{display:block}
   #dback{display:inline-block;margin-bottom:10px}
+  /* Back and the item's actions float over the text as it scrolls, so they are at hand anywhere in
+     a long post (#456): back alone on the left, the actions in one capsule on the right. Each
+     theme's own panel, frosted, so nothing changes colour. The strip between them lets the text
+     show through and takes no presses. */
+  .dfloat{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;pointer-events:none}
+  #detail .dfloat>*{pointer-events:auto;background:color-mix(in srgb,var(--panel) 92%,transparent);
+    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
+    border:1px solid var(--line);box-shadow:var(--shadow)}
+  .dfloat #dback{margin:0;width:44px;height:44px;border-radius:999px}
+  .dfloat .dacts{gap:2px;padding:2px 6px;border-radius:999px}
+  #detail .dfloat .dacts .btn{background:transparent;border-color:transparent;box-shadow:none}
   /* Beside the reader while it is swiped (gestures.ts): the item next to it, with a strip of the
      page's own background between them, so the list under the reader never shows (#52). */
   #dpeek{position:fixed;top:0;bottom:0;left:0;width:calc(100% + 16px);z-index:38;background:var(--bg);pointer-events:none}
@@ -1558,6 +1569,9 @@ body:has(#player.on) #status{padding-bottom:3px}
 :root[data-theme="classic"] .btn,
 :root[data-theme="classic"] .tabs{background:linear-gradient(#ffffff,#d9d9d9);border-color:#8e8e8e;color:#1a1a1a}
 :root[data-theme="classic"] .tabs{border:1px solid #8e8e8e;border-radius:6px}
+/* The reader's floating back and actions (#456) in the toolbar's metal, solid, as its bars are. */
+:root[data-theme="classic"] #detail .dfloat>*{background:linear-gradient(#ffffff,#d9d9d9);border-color:#8e8e8e;color:#1a1a1a;
+  -webkit-backdrop-filter:none;backdrop-filter:none}
 @media (hover:hover){
   :root[data-theme="classic"] .tgroup button:hover:not(:disabled),
   :root[data-theme="classic"] .tgroup a:hover,
@@ -1648,6 +1662,12 @@ body:has(#player.on) #status{padding-bottom:3px}
 }
 :root[data-theme="glass"] .card,
 :root[data-theme="glass"] .toast{box-shadow:var(--glass-rim),var(--shadow)}
+/* The reader's floating back and actions (#456): the panels' glass, but denser, since the text
+   scrolls right under them, and with a shadow to lift them off it. */
+:root[data-theme="glass"] #detail .dfloat>*{
+  background:linear-gradient(135deg,var(--glass-sheen),transparent 45%),color-mix(in srgb,var(--panel) 90%,transparent);
+  border-color:var(--glass-edge);box-shadow:var(--glass-rim),var(--shadow);
+}
 :root[data-theme="glass"] .toast{border-radius:14px}
 :root[data-theme="glass"] .toast.bad{border-color:var(--bad)}
 /* A narrow screen slides the feed list over the page, so it keeps its shadow. */
@@ -1709,7 +1729,9 @@ body:has(#player.on) #status{padding-bottom:3px}
   :root[data-theme="glass"] .card,
   :root[data-theme="glass"] .toast,
   :root[data-theme="glass"] .tgroup,
-  :root[data-theme="glass"] .tabs{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line)}
+  :root[data-theme="glass"] .tabs,
+  :root[data-theme="glass"] #detail .dfloat>*,
+  #detail .dfloat>*{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line)}
   :root[data-theme="glass"] .toolbar,
   :root[data-theme="glass"] .ephead{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
   :root[data-theme="glass"] #modal{background:rgba(0,0,0,.6)}