fix(sw): align header logo styles and refine viewer UI

packages/sw/src/theme/sw-viewer.css

@@ -9,8 +9,11 @@
   /* 2026-10-21 user request: the solid color of the Storybook viewer canvas (--sw-story-canvas base #0a0a0b), no gradient. */
   --hm-sw-viewer-background: #0a0a0b;
   --hm-sw-viewer-border-color: #071e18;
-  --hm-sw-viewer-brand-width: 72px;
-  /* No logo: no text or icon is drawn; the cap keeps only its slanted edge (no wide empty space). */
+  /* 2026-10-23: auto = the SWHeader home box (12px incl. the header border + logo + 36px): 79px with the 32 x 17
+     example logo, wider or narrower with the logo. */
+  --hm-sw-viewer-brand-width: auto;
+  /* These four are unused since 2026-10-23 (the cap is the SWHeader home shape; no cap without a logo); kept so
+     existing themes that set them stay valid. */
   --hm-sw-viewer-brand-empty-width: 24px;
   --hm-sw-viewer-brand-top: #123328;
   --hm-sw-viewer-brand-middle: #205241;
@@ -100,12 +103,23 @@
   margin-right: -2px;
   font-weight: 700;
 }
-/* With a logo: the reference 72px cap (logo at 24px), wider only for a wider logo. Without: the slanted edge only. */
-.hm-sw-viewer-header__brand[data-logo] { width: auto; min-width: var(--hm-sw-viewer-brand-width); padding: 0 25px 0 24px; }
+/* With a logo (2026-10-23): the SWHeader home — the same shape (shared .hm-sw-header__home-bg 9-slice of the Figma
+   asset: gradient, stroke, shadow, slant), the same box (12px + logo + 36px, 11px here + the 1px header border; the
+   logo centered) and the same 17px overlap of the next part, so the logo and the file-name area sit where SWHeader
+   puts them. No hover layer: the viewer cap keeps its own (focus only) look. Without a logo there is no cap. */
+.hm-sw-viewer-header__brand[data-logo] {
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--hm-sw-viewer-brand-width);
+  padding: 0 36px 0 11px;
+  margin-right: -17px;
+  overflow: hidden;
+  /* The 17px overlap must not take the clicks of the next part (Open icon / file name): only the surface behind the
+     shape (::before, up to where the next part starts) is the cap's hit area. Focus and keyboard are unchanged. */
+  pointer-events: none;
+}
+.hm-sw-viewer-header__brand[data-logo]::before { pointer-events: auto; }
 button.hm-sw-viewer-header__brand { text-align: left; }
-.hm-sw-viewer-header__brand-shape { position: absolute; inset: 0 auto 0 0; width: calc(100% + 16px); height: 100%; pointer-events: none; }
-.hm-sw-viewer-header__brand-mark { position: relative; display: inline-flex; align-items: center; }
-.hm-sw-viewer-header__brand-mark > :is(img, svg) { display: block; max-height: 24px; width: auto; }
 
 .hm-sw-viewer-header__document {
   display: flex;
@@ -209,7 +223,13 @@ button.hm-sw-viewer-header__brand { text-align: left; }
 /* No file open button before it: the file name starts 10px after the slanted logo edge (at mid height), as in
    SWHeader (text 10px after its home slant; measured 10.5px here with 18px). */
 .hm-sw-viewer-header__document[data-list] .hm-sw-header__document-button { padding: 0 16px 0 18px; }
-/* After the file open button (2026-10-21 user decision): 8px in. */
+/* Right after the logo cap (2026-10-23, the SWHeader home shape and 17px overlap): the first part keeps SWHeader's 5px
+   start (was 24px / 18px for the former viewer slant, which doubled the space after the logo). */
+:is(.hm-sw-viewer-header__brand, .hm-sw-viewer-header__logo-menu) + .hm-sw-header__document[data-tool] > .hm-sw-viewer-header__open,
+:is(.hm-sw-viewer-header__brand, .hm-sw-viewer-header__logo-menu) + .hm-sw-viewer-header__document[data-list] .hm-sw-header__document-button { padding-left: 5px; }
+/* No logo (2026-10-23): no cap, so the first part (Open or the file name) starts the row 12px in, like SWHeader. */
+.hm-sw-viewer-header > .hm-sw-header__document[data-tool]:first-child > .hm-sw-viewer-header__open,
+.hm-sw-viewer-header > .hm-sw-viewer-header__document[data-list]:first-child .hm-sw-header__document-button { padding-left: 12px; }/* After the file open button (2026-10-21 user decision): 8px in. */
 .hm-sw-viewer-header > .hm-sw-header__document[data-tool] + .hm-sw-viewer-header__document[data-list] .hm-sw-header__document-button { padding: 0 16px 0 8px; }
 /* The list (SWHeader face, placement and rows unchanged) is never narrower than the file-name button it opens from:
    its outer width is at least the button's (100% of the wrapper, plus the two borders the list starts left of it) and