Stand the pin upright once a tab is pinned

The pinned state and the hover affordance drew the same slanted pin, so the
only difference was opacity. Rotating the pinned one to vertical separates
"this is pinned" from "click to pin", and the short transition reads as the
toggle landing.

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

media/tabs.css

@@ -160,6 +160,16 @@ button.marker:focus-visible {
     outline-offset: -1px;
 }
 
+/* The pin leans over while it is only an offer; once the tab is really pinned it
+   stands upright, so the state reads apart from the hover affordance. */
+button.pin svg {
+    transition: transform 80ms ease-out;
+}
+
+button.pin.on svg {
+    transform: rotate(-45deg);
+}
+
 /* An unsaved file shows a dot, which the close button replaces on hover. */
 .dirty {
     flex: 0 0 auto;