refactor(design): move light response onto chip borders; cut directional drop shadows (#116)

Operator feedback 2026-06-04 (after PR #115's two-light-source pass):
"A lot of gradients happening, though I want the gradient in the
background to be the focus, and then the border gets a highlight,
perhaps, in a corner that's closest to the background gradients...
the borders are reflecting the color, not necessarily the drop
shadows behind the cards. In fact, you could probably reduce those
box shadows quite a bit. At least they shouldn't span the entire
edge of the card. Just a subtle bit in the corner."

PR #115's outer directional drop-shadows (`--edge-light-warm` /
`--edge-light-cool`) DID make the chips respond to the two light
sources but spanned the entire bottom-left + top-right edges, which
competed visually with the body gradient. This PR moves the
warm/cool response onto the chip's 1px BORDER, concentrated in the
two corners closest to the matching light sources, and cuts the
directional drop-shadows entirely (just rim-light-inner + a single
neutral elevation-ambient remain).

Technique: the modern gradient-border pattern.
  background:
    /* surface fill, clipped to padding-box */
    linear-gradient(surface, surface) padding-box,
    /* warm catch-light at bottom-left, border-box-clipped */
    radial-gradient(at 0% 100%, warm 0%, transparent 42%) border-box,
    /* cool catch-light at top-right, border-box-clipped */
    radial-gradient(at 100% 0%, cool 0%, transparent 42%) border-box,
    /* faint diagonal white tint for the rest of the rim */
    chip-border-base border-box;
  border: 1px solid transparent;

The transparent border is what exposes the border-box-clipped
gradient layers as the visible rim.

Token changes (styles/globals.css):
- Retired: --edge-light-warm, --edge-light-cool (both themes).
  These were complete box-shadow declarations with offsets spanning
  the full bottom-left + top-right edges of every chip.
- Added: --corner-light-warm, --corner-light-cool — plain RGBA
  colors for radial-gradient consumption.
    Light: 0.50 warm / 0.38 cool.
    Dark:  0.68 warm / 0.58 cool (bumped so catch-lights read
           against the deep substrate).
- Added: --chip-border-base — faint 135deg white tint so the rest
  of the rim isn't invisible (sensible chip edge far from either
  light source). Lower alpha on dark.

Application sites:
- styles/globals.css `.glass-panel` and `.glass-panel-strong` —
  updated to multi-layer background + transparent border. Picks
  up DailyEmberWidget, CommandPaletteModal popover, UserMenu
  dropdown, the logged-out sidebar Support/Theme tray, etc.
- components/Layout.js nav-chip inline style — same treatment.
- components/ui/TopSearchBar.js inline style — same treatment.

Shadow stacks across all four sites are now just:
  var(--rim-light-inner), var(--elevation-ambient)
(or elevation-pronounced for .glass-panel-strong). The body
gradient stays unchanged from PR #115 — it remains the dominant
gradient story per operator's "I want the gradient in the
background to be the focus" framing.

Tests:
- npm run test:run: 113/113
- npm run lint: 0 errors (1 pre-existing warning)
- npm run build: green

Co-authored-by: Cursor <cursoragent@cursor.com>

components/Layout.js

@@ -845,24 +845,26 @@ export default function Layout({ children, user = null, showSearch = false }) {
         className="hidden md:flex md:flex-col md:gap-4 w-64"
         aria-label="Sidebar"
       >
-        {/* Nav chip. 2026-06-04 two-light-source pass: prepended the
-            two edge-light tokens so the nav chip's bottom-left and
-            top-right edges pick up warm + cool directional glows from
-            the matching corners of the body gradient — the chip
-            visually "responds" to the two light sources the operator
-            asked for. The chip is positioned at the top-left of the
-            viewport so it sits closer to the warm light source; that's
-            a coincidence of layout, not something the token reacts to,
-            but the warm glow does naturally read stronger on this chip
-            because the warm source is right there. */}
+        {/* Nav chip. 2026-06-04 corner-border pass: same gradient-
+            border technique as `.glass-panel` — the chip's fill is
+            clipped to padding-box, and three border-box-clipped
+            gradient layers expose the warm bottom-left + cool top-
+            right catch-lights through a 1px transparent border. The
+            warm/cool drop shadows that lived here through PR #115
+            are gone — the directional response is on the border
+            now, not extending into the body gradient. */}
         <div
           className="flex-1 flex flex-col md:rounded-3xl md:overflow-hidden min-h-0"
           style={{
-            background: 'var(--glass-surface-mid)',
+            background:
+              'linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid)) padding-box, ' +
+              'radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%) border-box, ' +
+              'radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) border-box, ' +
+              'var(--chip-border-base) border-box',
+            border: '1px solid transparent',
             backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
             WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
-            boxShadow:
-              'var(--edge-light-warm), var(--edge-light-cool), var(--rim-light-inner), var(--elevation-ambient)',
+            boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
           }}
         >
           <div className="p-4 h-full flex flex-col w-full">

components/ui/TopSearchBar.js

@@ -312,18 +312,21 @@ export default function TopSearchBar({
       // content directly.
       className="px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4 md:rounded-2xl"
       style={{
-        background: 'var(--glass-surface-mid)',
+        // 2026-06-04 corner-border pass: same gradient-border
+        // technique as .glass-panel — the chip's fill clipped to
+        // padding-box, with border-box-clipped warm bottom-left +
+        // cool top-right radial highlights exposed through a 1px
+        // transparent border. The directional outer drop shadows
+        // from PR #115 are gone — corner catch-lights only now.
+        background:
+          'linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid)) padding-box, ' +
+          'radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%) border-box, ' +
+          'radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) border-box, ' +
+          'var(--chip-border-base) border-box',
+        border: '1px solid transparent',
         backdropFilter: 'blur(12px) saturate(180%)',
         WebkitBackdropFilter: 'blur(12px) saturate(180%)',
-        // 2026-06-04 two-light-source pass: prepended edge-light
-        // tokens so the header's bottom-left and top-right edges
-        // pick up warm + cool directional glows. The header sits
-        // near the top-right of the viewport so the cool source
-        // reads stronger on it (the purple light is right above);
-        // the warm rim still appears on the bottom-left edge of the
-        // chip, just dimmer at this distance from the ember pool.
-        boxShadow:
-          'var(--edge-light-warm), var(--edge-light-cool), var(--rim-light-inner), var(--elevation-ambient)',
+        boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
       }}
     >
       {/* Search affordance — read-only-ish input that opens the

styles/globals.css

@@ -201,9 +201,10 @@ body {
 
 /* Apply theme colors.
    The hearth gradient: two diagonal light sources that the floating
-   chrome chips visually "respond" to via the --edge-light-warm /
-   --edge-light-cool design tokens (defined further down in :root /
-   [data-theme="dark"]).
+   chrome chips visually "respond" to via the --corner-light-warm /
+   --corner-light-cool design tokens (defined further down in :root /
+   [data-theme="dark"]; consumed as radial-gradient layers on each
+   chip's BORDER, not as outer drop shadows — see `.glass-panel`).
      - Warm ember light source: bottom-left of the viewport.
      - Cool purpley-blue light source: top-right of the viewport.
    The base linear-gradient runs along the same 45deg diagonal between
@@ -231,7 +232,7 @@ body {
     ),
     /* Purpley-blue pool, top-right — secondary light source (replaces
        the prior gold accent). Indigo→violet so the chip rims that
-       respond to this source via --edge-light-cool read as cool. */
+       respond to this source via --corner-light-cool read as cool. */
     radial-gradient(
       ellipse 85% 65% at 100% -8%,
       rgba(99, 102, 241, 0.42) 0%,
@@ -346,20 +347,32 @@ body {
   --bg-secondary-rgb: 247, 243, 237;
   --bg-tertiary-rgb: 240, 230, 214;
 
-  /* Two-light-source edge glow tokens (2026-06-04 operator request:
-     "let's have the corners or the edges of our sections respond as
-     if those two are light sources").
-     Each token is a complete box-shadow declaration with the offset
-     pointing toward the matching light source — the colored shadow
-     bleeds outward from the chip's bottom-left edge (warm) and top-
-     right edge (cool), reading as light catching on the rim.
-     Light theme alphas are softer; the dark theme override below
-     bumps them since the deeper substrate can absorb more saturation
-     before the effect over-reads. Compose into chip shadow stacks
-     ahead of rim-light-inner + elevation tokens so the directional
-     glow is the dominant edge cue. */
-  --edge-light-warm: -6px 6px 18px rgba(255, 110, 0, 0.16);
-  --edge-light-cool: 6px -6px 18px rgba(99, 102, 241, 0.12);
+  /* Corner-border light tokens (2026-06-04 refinement of the prior
+     two-light-source pass — operator feedback: "borders are
+     reflecting the color, not necessarily the drop shadows behind
+     the cards. In fact, you could probably reduce those box shadows
+     quite a bit. At least they shouldn't span the entire edge of
+     the card. Just a subtle bit in the corner.").
+     The prior `--edge-light-warm` / `--edge-light-cool` tokens were
+     complete box-shadow declarations with offsets that spanned the
+     entire bottom-left + top-right edges of every chip. They've
+     been retired. The replacement is a pair of plain RGBA colors
+     consumed by radial-gradient layers in the chip's BACKGROUND
+     (border-box-clipped) — see `.glass-panel` below — so the
+     warm/cool light response now reads as a corner-concentrated
+     highlight ON the chip's 1px border, not as an outer drop
+     shadow extending into the body gradient.
+     The `--chip-border-base` is a faint diagonal white tint that
+     paints under the corner gradients so the rest of the rim isn't
+     completely invisible (gives the chip a sensible edge even far
+     from either light source). */
+  --corner-light-warm: rgba(255, 110, 0, 0.50);
+  --corner-light-cool: rgba(99, 102, 241, 0.38);
+  --chip-border-base: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.14) 0%,
+    rgba(255, 255, 255, 0.04) 100%
+  );
 }
 
 /* Dark theme variables */
@@ -387,12 +400,18 @@ body {
   --input-text: var(--input-text-dark);
   --input-placeholder: var(--input-placeholder-dark);
 
-  /* Dark-theme edge glows — alphas bumped since the deeper substrate
-     can take more saturation before reading as garish, and so the
-     "lit by ember + lit by purple" effect carries on dark theme (the
-     default for first-time visitors). See :root for full rationale. */
-  --edge-light-warm: -8px 8px 26px rgba(255, 110, 30, 0.34);
-  --edge-light-cool: 8px -8px 26px rgba(139, 92, 246, 0.28);
+  /* Dark-theme corner-border colors — alphas bumped so the warm
+     and cool catch lights read clearly against the deep substrate.
+     See :root for the full rationale on the corner-vs-drop-shadow
+     refinement. The base white border tint drops in alpha here
+     because the deep canvas absorbs whites more readily. */
+  --corner-light-warm: rgba(255, 130, 30, 0.68);
+  --corner-light-cool: rgba(139, 92, 246, 0.58);
+  --chip-border-base: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.10) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
 }
 
 /* Custom component styles - Fire-themed */
@@ -752,35 +771,55 @@ body {
       the unprefixed form; Lightning CSS's autoprefixer adds the prefix
       per browserslist (ios_saf <18 still needs it). */
 /* Glass panels — the canonical floating-chrome surface. 2026-06-04
-   two-light-source pass: `--edge-light-warm` (offset toward bottom-
-   left) and `--edge-light-cool` (offset toward top-right) lead the
-   shadow stack so every glass surface picks up the directional rim
-   glows from the matching corners of the body gradient. Order
-   matters — directional glows must paint OUTSIDE the structural
-   elevation shadow, so they sit at the top of the stack (CSS paints
-   the LAST listed shadow lowest visually, but for box-shadow the
-   list order doesn't matter for compositing — what matters is each
-   shadow's geometry. They're listed warm→cool→rim→elevation as a
-   readability convention). */
+   corner-border pass (refines the prior two-light-source pass):
+   the warm + cool light response now paints on the chip's 1px
+   border using the multi-layer background + transparent-border
+   technique:
+     1. linear-gradient(surface, surface) padding-box — the chip's
+        translucent fill, clipped to the padding box so it doesn't
+        cover the 1px border ring.
+     2. radial-gradient(at 0% 100%, warm) border-box — warm corner
+        catch-light, anchored at the chip's bottom-left.
+     3. radial-gradient(at 100% 0%, cool) border-box — cool corner
+        catch-light, anchored at the chip's top-right.
+     4. --chip-border-base border-box — faint diagonal white tint
+        under the corner gradients so the rest of the rim isn't
+        invisible (gives the chip a sensible edge far from either
+        light source).
+   The `border: 1px solid transparent` is what exposes those
+   border-box-clipped gradient layers as the visible rim.
+   Drop-shadow stack is now just rim-light-inner + elevation —
+   the directional warm/cool outer glows are gone per operator
+   feedback ("reduce those box shadows quite a bit"). */
 .glass-panel {
-  background: var(--glass-surface-mid);
+  background:
+    linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid))
+      padding-box,
+    radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%)
+      border-box,
+    radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%)
+      border-box,
+    var(--chip-border-base) border-box;
+  border: 1px solid transparent;
   backdrop-filter: blur(12px) saturate(180%);
   box-shadow:
-    var(--edge-light-warm),
-    var(--edge-light-cool),
     var(--rim-light-inner),
-    var(--rim-light-outer),
     var(--elevation-ambient);
 }
 
 .glass-panel-strong {
-  background: var(--glass-surface-high);
+  background:
+    linear-gradient(var(--glass-surface-high), var(--glass-surface-high))
+      padding-box,
+    radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%)
+      border-box,
+    radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%)
+      border-box,
+    var(--chip-border-base) border-box;
+  border: 1px solid transparent;
   backdrop-filter: blur(20px) saturate(180%);
   box-shadow:
-    var(--edge-light-warm),
-    var(--edge-light-cool),
     var(--rim-light-inner),
-    var(--rim-light-outer),
     var(--elevation-pronounced);
 }