UI: flatter, more native-macOS look across panes

- Drop the heavy borders that made the app feel Total-Commander-ish: function-key bar top border, selection info top border, file-pane outer outline, path bar / tab bar bottom borders, column-header borders
- New `--color-bg-info-bar` token (darker in light, lighter in dark) for the `SelectionInfo` band so it lifts off the function-key bar below
- Column headers now use `--color-bg-secondary` (same as tabs and path bar); `SortableHeader` gets `--radius-sm` + 100 ms hover transition
- Tab bar background back to `--color-bg-secondary`; tabs sit flush with the window title bar (no more 3 px spacer)
- Pane resizer widened from 5 px to 4 px and the file-pane outline removed so the divider is uniform at both the tabs and panes levels
- Cursor row picks up `--radius-sm`; disk-usage fill rounds its right edge
- `data-size-colors='none'` and cursor-row both collapse the size-tier "selected" gradient to `--color-selection-fg` so name/ext/size/date stay one color
- 100 ms hover transitions on column headers, F-bar buttons, tab close button, volume breadcrumb, breadcrumb options trigger, pane resizer
- F2/F3/…/F8 `kbd` chips lose their background
- Drop the now-unused `--color-bg-header` token

Author: vdavid

apps/desktop/src/app.css

@@ -15,7 +15,11 @@
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #f5f5f5;
   --color-bg-tertiary: #e8e8e8;
-  --color-bg-header: #f0f0f0;
+  /* Status-bar surface that contrasts gently with `--color-bg-secondary`.
+     Light: a touch darker than secondary. Dark: a touch lighter. Used by
+     `SelectionInfo` so the status band reads as distinct from the
+     function-key bar below (which keeps `--color-bg-secondary`). */
+  --color-bg-info-bar: #ececec;
 
   /* === Borders === */
   --color-border-strong: #bbb;
@@ -316,13 +320,20 @@
 }
 
 /* === Size tier palette: None ===
-   All tiers fall back to the secondary text color (no coloring). */
+   All tiers fall back to the secondary text color (no coloring). The
+   selected variants also flatten so a selected row doesn't fall back to
+   the gradient otherwise baked into `--color-size-*-selected`. */
 :root[data-size-colors='none'] {
   --color-size-bytes: var(--color-text-secondary);
   --color-size-kb: var(--color-text-secondary);
   --color-size-mb: var(--color-text-secondary);
   --color-size-gb: var(--color-text-secondary);
   --color-size-tb: var(--color-text-secondary);
+  --color-size-bytes-selected: var(--color-selection-fg);
+  --color-size-kb-selected: var(--color-selection-fg);
+  --color-size-mb-selected: var(--color-selection-fg);
+  --color-size-gb-selected: var(--color-selection-fg);
+  --color-size-tb-selected: var(--color-selection-fg);
 }
 
 /* === Date age palette: Wilting (light) ===
@@ -451,7 +462,9 @@
     --color-bg-primary: #1e1e1e;
     --color-bg-secondary: #2a2a2a;
     --color-bg-tertiary: #333333;
-    --color-bg-header: #252525;
+    /* Dark mode: lighter than secondary (opposite of light mode) so the
+       status band lifts away from the function-key bar below. */
+    --color-bg-info-bar: #323232;
 
     /* === Borders === */
     --color-border-strong: #555555;

apps/desktop/src/lib/file-explorer/navigation/VolumeBreadcrumb.svelte

@@ -659,6 +659,7 @@
         display: inline-flex;
         align-items: center;
         gap: var(--spacing-xs);
+        transition: background-color var(--transition-fast);
     }
 
     .volume-name:hover {
@@ -1108,6 +1109,9 @@
         align-items: center;
         gap: var(--spacing-xs);
         margin-left: var(--spacing-xxs);
+        transition:
+            background-color var(--transition-fast),
+            color var(--transition-fast);
     }
 
     .breadcrumb-options-trigger:hover,

apps/desktop/src/lib/file-explorer/pane/FilePane.svelte

@@ -2571,13 +2571,11 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        border: 1px solid var(--color-border-strong);
     }
 
     .header {
         padding: var(--spacing-xxs) var(--spacing-sm);
         background-color: var(--color-bg-secondary);
-        border-bottom: 1px solid var(--color-border-strong);
         font-size: var(--font-size-sm);
         white-space: nowrap;
         display: flex;
@@ -2597,6 +2595,7 @@
         height: 100%;
         transition: none;
         pointer-events: none;
+        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
     }
 
     .path {

apps/desktop/src/lib/file-explorer/pane/FunctionKeyBar.svelte

@@ -104,7 +104,6 @@
         display: flex;
         flex-shrink: 0;
         background: var(--color-bg-secondary);
-        border-top: 1px solid var(--color-border-strong);
     }
 
     button {
@@ -120,6 +119,7 @@
         font-family: var(--font-system) sans-serif;
         font-size: var(--font-size-sm);
         color: var(--color-text-primary);
+        transition: background-color var(--transition-fast);
     }
 
     button:last-child {
@@ -138,9 +138,7 @@
     kbd {
         font-family: var(--font-system) sans-serif;
         font-size: var(--font-size-xs);
-        background: var(--color-bg-tertiary);
         color: var(--color-text-secondary);
-        border-radius: var(--radius-sm);
         /* stylelint-disable-next-line declaration-property-value-disallowed-list */
         padding: 1px var(--spacing-xs);
     }

apps/desktop/src/lib/file-explorer/pane/PaneResizer.svelte

@@ -55,14 +55,14 @@
 
 <style>
     .pane-resizer {
-        width: 5px;
+        width: 4px;
         cursor: col-resize;
         display: flex;
         align-items: center;
         justify-content: center;
         background: var(--color-border-strong);
         flex-shrink: 0;
-        transition: background-color var(--transition-base);
+        transition: background-color var(--transition-fast);
     }
 
     .pane-resizer:hover,

apps/desktop/src/lib/file-explorer/selection/SelectionInfo.svelte

@@ -302,8 +302,7 @@
         font-family: var(--font-system), sans-serif;
         font-size: calc(var(--font-size-sm) * 0.95);
         color: var(--color-text-secondary);
-        background-color: var(--color-bg-secondary);
-        border-top: 1px solid var(--color-border-strong);
+        background-color: var(--color-bg-info-bar);
         min-height: 1.5em;
     }
 

apps/desktop/src/lib/file-explorer/selection/SortableHeader.svelte

@@ -54,12 +54,16 @@
         margin: 0 calc(-1 * var(--spacing-xs));
         background: transparent;
         border: none;
+        border-radius: var(--radius-sm);
         font: inherit;
         font-size: var(--font-size-sm);
         color: var(--color-text-secondary);
         white-space: nowrap;
         text-align: left;
         height: 100%;
+        transition:
+            background-color var(--transition-fast),
+            color var(--transition-fast);
     }
 
     .sortable-header:hover {

apps/desktop/src/lib/file-explorer/tabs/CLAUDE.md

@@ -13,13 +13,12 @@ Per-pane tab system for the dual-pane file explorer. Each pane side (left/right)
 
 ## Key decisions
 
-**Decision**: Tabs fill the entire bar height (`.tab { height: var(--spacing-tab-bar-height) }`) and the bar carries a
-non-scaled `padding-top: 3px` to push the colored top of the active tab below the (fixed-height) window title-bar.
-**Why**: tab and bar heights both scale with `--font-scale`, so any constant gap between them would scale too, making
-the colored top edge drift visibly across text sizes. Locking the tab to bar height eliminates the proportional gap; the
-3 px padding gives the static breathing room between title-bar and tab top, hidden inside the bar's own `bg-secondary`
-so it reads as a continuous strip. The active tab is `bar-height + 1px` with `margin-bottom: -1px` to cover the bar's
-bottom border (unchanged from the historical pattern).
+**Decision**: Tabs sit flush with the window title-bar — no top spacer. Tab and bar both use `--spacing-tab-bar-height`.
+**Why**: a fixed pixel spacer (e.g. `padding-top: 3px`) on the bar created a visible gap above the active tab; the user
+wants the colored top edge of the active tab to touch the title-bar at every text scale. With matching heights and
+`align-items: end`, tabs naturally land at the bar's bottom edge with no extra offset. The active tab still uses
+`bar-height + 1px` with `margin-bottom: -1px` so it hangs 1 px into the path bar below (covers any 1 px seam at the
+bar's lower edge).
 
 **Decision**: Cold load on tab switch via `{#key activeTabId}`: destroys and recreates FilePane, no warm cache **Why**:
 Keeping inactive tabs alive would mean multiple FilePanes with active file watchers, listing caches, and scroll state in

apps/desktop/src/lib/file-explorer/tabs/TabBar.svelte

@@ -155,20 +155,14 @@
     .tab-bar {
         display: flex;
         align-items: end;
-        /* Total height = scaled tab band + 3 px non-scaled top spacer.
-         * The spacer is bg-secondary (same as the bar), so it visually reads
-         * as a slim continuation of the (fixed-height) window title-bar above.
-         * Tabs anchor to the bar's content-area bottom (align-items: end);
-         * with `box-sizing: border-box`, the padding-top reduces the content
-         * area to exactly `--spacing-tab-bar-height`, so the colored top edge
-         * of the active tab sits 3 px below the title-bar at every scale. */
-        height: calc(var(--spacing-tab-bar-height) + 3px);
-        min-height: calc(var(--spacing-tab-bar-height) + 3px);
-        max-height: calc(var(--spacing-tab-bar-height) + 3px);
+        /* Tabs sit flush with the window title-bar — no top spacer. Tabs
+         * anchor to the bar's content-area bottom (align-items: end) and
+         * match the bar height exactly via `--spacing-tab-bar-height`. */
+        height: var(--spacing-tab-bar-height);
+        min-height: var(--spacing-tab-bar-height);
+        max-height: var(--spacing-tab-bar-height);
         background-color: var(--color-bg-secondary);
-        border-bottom: 1px solid var(--color-border);
-        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- 3px is a deliberate non-scaling visual offset, no spacing token fits */
-        padding: 3px var(--spacing-xxs) 0;
+        padding: 0 var(--spacing-xxs);
         overflow: hidden;
     }
 
@@ -317,7 +311,10 @@
         line-height: 1;
         color: var(--color-text-tertiary);
         opacity: 0;
-        transition: opacity var(--transition-fast);
+        transition:
+            opacity var(--transition-fast),
+            background-color var(--transition-fast),
+            color var(--transition-fast);
     }
 
     /* Show close button on tab hover or when tab is active */

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -917,8 +917,7 @@
     .header-row {
         display: flex;
         height: calc(22px * var(--font-scale));
-        background: var(--color-bg-header);
-        border-bottom: 1px solid var(--color-border);
+        background: var(--color-bg-secondary);
         flex-shrink: 0;
         padding: 0 var(--spacing-xs);
     }
@@ -1026,6 +1025,7 @@
         /* Faint accent-colored hairline outlining the cursor row. See
            FullList.svelte for the rationale. */
         box-shadow: inset 0 0 0 1px var(--color-cursor-outline);
+        border-radius: var(--radius-sm);
     }
 
     .brief-list-container.is-focused .file-entry.is-under-cursor {