style(header): hover moves the icon, never the button

A global `.btn-icon-header:hover { transform: rotate(45deg) }`, meant for
the settings gear, turned every header icon button on hover, so the folder,
Tiles, Split and the rest swung their rounded hover background into a
diamond. Three buttons had already cancelled it one by one (the font-size
buttons, notifications, the sidebar toggle).

The rule is gone, and with it those three overrides. Hover motion now moves
the icon only:
- the settings gear's icon turns 45 degrees (one tooth, so it lands on the
  same shape);
- the Tiles button's four squares spread apart, each toward its corner;
- the folder cross-fades to an open folder (a second drawing in its SVG,
  `.icon-folder-closed` / `.icon-folder-open`);
- every other icon just takes the hover colour.

Pointer devices only (`@media (hover: hover)`, so a tap cannot leave an icon
stuck mid-motion), and the transitions are off under reduced motion.

Owner request: the Tiles and folder buttons "weirdly turn" on hover.
Checked live on a dark and a light skin (rest, mid, end frames). Pinned by
test/header-icon-hover.test.ts, mutation-checked five ways (the button
rotation back, the open drawing missing, the motion not hover-gated, a
square spreading toward the wrong corner, reduced motion keeping its
transition). Gate: 507 files, 9798 tests passed.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/web/public/styles.css

@@ -2450,7 +2450,73 @@ html[data-tab-orientation='vertical'].tab-rail-compact
 .btn-icon-header:hover {
   background: rgba(255, 255, 255, 0.07);
   color: var(--text);
-  transform: rotate(45deg);
+}
+
+/* Hover motion moves the icon, never the button: turning the whole button used
+   to swing its hover background into a diamond on every header icon. Now only the
+   gear turns, the folder opens and the Tiles squares spread apart; every other
+   icon just takes the hover colour. Pointer devices only (a tap must not leave an
+   icon stuck mid-motion), and no motion at all under reduced motion. */
+.btn-icon-header.btn-settings svg,
+.btn-icon-header.btn-tile-grid svg rect,
+.btn-icon-header.btn-file-viewer svg .icon-folder-closed,
+.btn-icon-header.btn-file-viewer svg .icon-folder-open {
+  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease;
+}
+
+.btn-icon-header.btn-tile-grid svg rect {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.btn-icon-header.btn-file-viewer svg .icon-folder-open {
+  opacity: 0;
+  transform: translateY(1px);
+}
+
+@media (hover: hover) {
+  .btn-icon-header.btn-settings:hover svg {
+    transform: rotate(45deg);
+  }
+
+  .btn-icon-header.btn-tile-grid:hover svg rect:nth-of-type(1) {
+    transform: translate(-1.5px, -1.5px);
+  }
+
+  .btn-icon-header.btn-tile-grid:hover svg rect:nth-of-type(2) {
+    transform: translate(1.5px, -1.5px);
+  }
+
+  .btn-icon-header.btn-tile-grid:hover svg rect:nth-of-type(3) {
+    transform: translate(-1.5px, 1.5px);
+  }
+
+  .btn-icon-header.btn-tile-grid:hover svg rect:nth-of-type(4) {
+    transform: translate(1.5px, 1.5px);
+  }
+
+  .btn-icon-header.btn-file-viewer:hover svg .icon-folder-closed {
+    opacity: 0;
+  }
+
+  .btn-icon-header.btn-file-viewer:hover svg .icon-folder-open {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn-icon-header.btn-settings svg,
+  .btn-icon-header.btn-tile-grid svg rect,
+  .btn-icon-header.btn-file-viewer svg .icon-folder-closed,
+  .btn-icon-header.btn-file-viewer svg .icon-folder-open {
+    transition: none;
+  }
+
+  .btn-icon-header.btn-settings:hover svg,
+  .btn-icon-header.btn-tile-grid:hover svg rect {
+    transform: none;
+  }
 }
 
 /* Admin Panel header button: only shown to admins in multi-user mode (marker
@@ -2569,10 +2635,6 @@ html[data-tab-orientation='vertical'].tab-rail-compact
   font-weight: 600;
 }
 
-.btn-icon-header.btn-sm:hover {
-  transform: none;
-}
-
 .header-font-controls {
   display: flex;
   align-items: center;
@@ -9195,10 +9257,6 @@ kbd {
   margin-right: 2px;
 }
 
-.btn-icon-header.btn-notifications:hover {
-  transform: none;
-}
-
 .notification-badge {
   position: absolute;
   top: 2px;
@@ -19172,11 +19230,6 @@ html[data-session-list="sidebar"][data-sidebar="collapsed"] .session-sidebar .ta
   display: none !important;
 }
 
-/* .btn-icon-header:hover rotates 45deg globally — a panel glyph must not spin. */
-.btn-sidebar-toggle:hover {
-  transform: none;
-}
-
 html[data-session-list="sidebar"][data-sidebar="collapsed"] .btn-sidebar-toggle svg {
   transform: scaleX(-1);
 }