Mark the active panel with an accent line, not a tinted header

Tinting the whole header strip of the focused panel was too much: the
strip changed color every time focus moved. Both panels now share one
neutral header strip, and the active panel is marked by a thin accent
line along its top edge (an inset shadow, so switching panels never
shifts the layout).

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

ui/src/app/skins/shadlike/file-panel/file-panel.html

@@ -1,5 +1,8 @@
 <!-- session strip -->
-<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1" [class]="headerSurface()">
+<div
+  class="relative flex items-center gap-1.5 border-b border-border bg-toolbar px-2 py-1"
+  [style.box-shadow]="activeMarker()"
+>
   <button
     (click)="toggleMenu()"
     class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
@@ -158,7 +161,7 @@
 </div>
 
 <!-- path bar -->
-<div class="flex items-center gap-1 border-b border-border px-2 py-1.5" [class]="headerSurface()">
+<div class="flex items-center gap-1 border-b border-border bg-toolbar px-2 py-1.5">
   <button
     (click)="panel().up()"
     [disabled]="blocked()"
@@ -195,8 +198,7 @@
 <div
   (contextmenu)="headerContextMenu($event)"
   [style.grid-template-columns]="gridTemplate()"
-  class="grid border-b border-border text-[0.6875rem] font-medium text-muted-foreground"
-  [class]="headerSurface()"
+  class="grid border-b border-border bg-toolbar text-[0.6875rem] font-medium text-muted-foreground"
 >
   <button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('name')">
     {{ i18n.t('columns.name') }} {{ sortIndicator('name') }}

ui/src/app/skins/shadlike/file-panel/file-panel.ts

@@ -55,9 +55,11 @@ export class FilePanel {
   private readonly rpc = inject(RpcService);
   readonly panel = computed(() => this.panels.get(this.side()));
   readonly isActive = computed(() => this.panels.activeSide() === this.side());
-  /** The header strip's surface (session strip, path bar, column headers):
-   *  the active panel's carries the accent tint. */
-  readonly headerSurface = computed(() => (this.isActive() ? 'bg-toolbar-active' : 'bg-toolbar'));
+  /** The active panel's marker: an accent line along its top edge. Inset, so
+   *  switching panels never shifts the layout. */
+  readonly activeMarker = computed(() =>
+    this.isActive() ? 'inset 0 0.125rem 0 var(--primary)' : null,
+  );
   readonly isRemote = computed(() => this.panel().sessionId() !== 'local');
   /** Input is ignored while the panel is connecting or a listing is in flight. */
   readonly blocked = computed(() => this.panel().busy());

ui/src/styles.css

@@ -19,8 +19,6 @@
   --background: oklch(1 0 0);
   --chrome: oklch(0.935 0.002 286.375);
   --toolbar: oklch(0.965 0.001 286.375);
-  /* the active panel's header strip: a whisper of the accent (graphite: neutral) */
-  --toolbar-active: color-mix(in oklab, var(--primary) 8%, var(--toolbar));
   --row-alt: oklch(0.978 0.001 286.375);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -60,7 +58,6 @@
   --background: oklch(0.2178 0.002 107);
   --chrome: oklch(0.165 0.002 107);
   --toolbar: oklch(0.265 0.002 107);
-  --toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
   --row-alt: oklch(0.232 0.002 107);
   --foreground: oklch(0.982 0.003 107);
   /* above --toolbar, so a popover never reads darker than the strip it covers */
@@ -93,7 +90,6 @@
     --background: oklch(0.2178 0.002 107);
     --chrome: oklch(0.165 0.002 107);
     --toolbar: oklch(0.265 0.002 107);
-    --toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
     --row-alt: oklch(0.232 0.002 107);
     --foreground: oklch(0.982 0.003 107);
     --card: oklch(0.285 0.002 107);
@@ -127,8 +123,8 @@
    #000 (OLED pixels actually off). Elevation survives only through --card and
    --accent; --border/--input are raised to 16%/18% because on pure black those
    lines are the only thing defining panes, bars and rows. The surface layers
-   (--toolbar, its active tint, --row-alt) collapse to black too: AMOLED stays
-   one flat black on purpose, so every NEW surface token needs a line here.
+   (--toolbar, --row-alt) collapse to black too: AMOLED stays one flat black on
+   purpose, so every NEW surface token needs a line here.
    Duplicated for forced-dark and system-dark like the token blocks above — the
    extra attribute outranks them. Never declare a token both here and in the
    accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
@@ -136,7 +132,6 @@
   --background: oklch(0 0 0);
   --chrome: oklch(0 0 0);
   --toolbar: oklch(0 0 0);
-  --toolbar-active: oklch(0 0 0);
   --row-alt: oklch(0 0 0);
   --card: oklch(0.21 0.002 107);
   --secondary: oklch(0.274 0.003 107);
@@ -151,7 +146,6 @@
     --background: oklch(0 0 0);
     --chrome: oklch(0 0 0);
     --toolbar: oklch(0 0 0);
-    --toolbar-active: oklch(0 0 0);
     --row-alt: oklch(0 0 0);
     --card: oklch(0.21 0.002 107);
     --secondary: oklch(0.274 0.003 107);
@@ -167,7 +161,6 @@
   --color-background: var(--background);
   --color-chrome: var(--chrome);
   --color-toolbar: var(--toolbar);
-  --color-toolbar-active: var(--toolbar-active);
   --color-row-alt: var(--row-alt);
   --color-foreground: var(--foreground);
   --color-card: var(--card);