Glass panels catch the light at their edges (#51)

The glass surfaces had one 1px highlight along the top, which read as flat. They now have a rim
lit from the top-left and a fainter one on the far edges, as box-shadows, and a sheen from the
top-left corner as a background layer. A pseudo-element would have been the usual way, but the
detail pane, file list and dialogs scroll, and an absolutely placed layer in a scroller scrolls
away with the content.

Refraction was looked at and left out again: bending the live page needs backdrop-filter: url(),
which Firefox and Safari lack, and the WebGL libraries (liquid-glass-js, liquidGL) bend a
snapshot of the page that goes stale on a list that scrolls in its own pane.

The sheen lightens a dark panel under its text, so tests/contrast.js now checks every text colour
on a panel under the sheen at full strength. That capped it at 7% in dark mode; 9% put --faint,
--accent and --bad under AA.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/app.css

@@ -423,7 +423,9 @@
   --bad:#ff6961;
   --shadow:0 10px 36px rgba(0,0,0,.45);
   --glass-edge:rgba(255,255,255,.10);
-  --glass-hi:rgba(255,255,255,.14);
+  --glass-hi:rgba(255,255,255,.26);
+  --glass-lo:rgba(255,255,255,.10);
+  --glass-sheen:rgba(255,255,255,.07);
   --wash1:rgba(64,120,255,.30);
   --wash2:rgba(175,82,222,.24);
   --wash3:rgba(48,176,199,.20);
@@ -446,6 +448,8 @@
   --shadow:0 10px 36px rgba(30,50,90,.16);
   --glass-edge:rgba(255,255,255,.65);
   --glass-hi:rgba(255,255,255,.9);
+  --glass-lo:rgba(255,255,255,.45);
+  --glass-sheen:rgba(255,255,255,.5);
   --wash1:rgba(64,120,255,.22);
   --wash2:rgba(175,82,222,.16);
   --wash3:rgba(48,176,199,.18);
@@ -1082,7 +1086,10 @@ body:has(#player.on) #status{padding-bottom:3px}
 /* ---------- Glass: after Apple's Liquid Glass ---------- */
 /* Translucent panels over a coloured wash, blurred and saturated the way macOS and iOS do it.
    Apple's glass also bends light at its edges; that needs an SVG displacement filter that only
-   Chromium applies to a backdrop, and only on a shape of fixed size, so it is left out (#43). */
+   Chromium applies to a backdrop, and only on a shape of fixed size, so it is left out (#43).
+   What is kept is the light: the rim catches it at the top-left edges and, fainter, the far ones,
+   as it passes through (#51). */
+:root[data-theme="glass"]{--glass-rim:inset 1px 1px 0 var(--glass-hi),inset -1px -1px 0 var(--glass-lo)}
 :root[data-theme="glass"] body{
   font-family:-apple-system,BlinkMacSystemFont,system-ui,Inter,"Segoe UI",Roboto,sans-serif;
   background:
@@ -1099,11 +1106,14 @@ body:has(#player.on) #status{padding-bottom:3px}
 :root[data-theme="glass"] #detail,
 :root[data-theme="glass"] .card,
 :root[data-theme="glass"] .toast{
-  background:color-mix(in srgb,var(--panel) 70%,transparent);
+  /* A sheen from the top-left corner, where the light comes from. It is a background layer rather
+     than a pseudo-element because the detail pane, the file list and the dialogs scroll, and an
+     absolutely placed layer inside a scroller scrolls away with the content. */
+  background:linear-gradient(135deg,var(--glass-sheen),transparent 45%),color-mix(in srgb,var(--panel) 70%,transparent);
   -webkit-backdrop-filter:blur(24px) saturate(180%);
   backdrop-filter:blur(24px) saturate(180%);
   border-color:var(--glass-edge);
-  box-shadow:inset 0 1px 0 var(--glass-hi);
+  box-shadow:var(--glass-rim);
 }
 :root[data-theme="glass"] .toolbar,
 :root[data-theme="glass"] .ephead{
@@ -1113,7 +1123,7 @@ body:has(#player.on) #status{padding-bottom:3px}
   backdrop-filter:blur(20px) saturate(180%);
 }
 :root[data-theme="glass"] .card,
-:root[data-theme="glass"] .toast{box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow)}
+:root[data-theme="glass"] .toast{box-shadow:var(--glass-rim),var(--shadow)}
 :root[data-theme="glass"] .card{border-radius:20px}
 :root[data-theme="glass"] .toast{border-radius:14px}
 :root[data-theme="glass"] .toast.bad{border-color:var(--bad)}
@@ -1126,7 +1136,7 @@ body:has(#player.on) #status{padding-bottom:3px}
 :root[data-theme="glass"] .tgroup,
 :root[data-theme="glass"] .tabs{
   background:color-mix(in srgb,var(--panel2) 60%,transparent);
-  border-color:var(--glass-edge);border-radius:12px;box-shadow:inset 0 1px 0 var(--glass-hi);
+  border-color:var(--glass-edge);border-radius:12px;box-shadow:var(--glass-rim);
 }
 :root[data-theme="glass"] .btn,
 :root[data-theme="glass"] .sidetools button,