Make w7-flat actually flatten; document this round

The status bar's transfers summary is a text toggle, but 7.css painted it as
a full Aero push button — a stray bordered slab sitting in the status line.
Marked it w7-flat, the per-button escape hatch that existed for exactly this
and had never been used.

It did not work, for a reason worth keeping: 7.css restates border-color at
`.win7 button:not(:disabled):not(:hover)` = (0,3,1), which outranks
`.win7 .w7-flat` = (0,2,0). The .w7-toolbar arm of the same rule only ever
won that fight by tying on specificity and landing later in the same layer —
an accident w7-flat did not share. Split the rule: `background:
revert-layer` stays in `skin` (it must land on `utilities`), and the
paint-suppression literals move to `skinfix`, where layer order settles it
instead of a specificity arms race.

Docs updated in the same change per the working agreement — architecture.md
gains the tabs contract, the w7-flat/w7-toolbar split and the frame
transparency invariant; gotchas.md gains a win7-skin section (unlayered beats
every layer, the (0,3,1) border-color restatement, overflow-x clipping the
y-axis, 7.css's hardcoded light literals, exact selectors) plus the two
Angular traps this round hit: a duplicate `class` attribute is silently
dropped, and a backtick inside a component template's HTML comment terminates
the TS template literal.

Also recorded the verification trap that cost three wrong readings today:
`bun run start` leaves the old instance running and `import -window` grabs
the OLDEST match, so screenshots silently come from a stale build — this is
what made the w7-flat fix above look like a no-op when it was already
correct. Kill and count instances before capturing. And `pkill -f
'electrobun dev'` matches the shell running it and kills your own command.

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

ui/src/app/status-bar/status-bar.ts

@@ -15,9 +15,12 @@ import { TransfersService } from '../transfers.service';
       class="flex h-6 items-center justify-between gap-4 border-t border-border bg-chrome px-3 text-[11px] text-muted-foreground select-none"
     >
       <!-- transfers summary; click toggles the detailed list -->
+      <!-- w7-flat: this is a text toggle, not a push button. Without it 7.css
+           paints the full Aero slab and the status line reads as a stray
+           bordered button sitting in the status bar. -->
       <button
         (click)="transfers.expanded.set(!transfers.expanded())"
-        class="flex min-w-0 items-center gap-1.5 hover:text-foreground"
+        class="w7-flat flex min-w-0 items-center gap-1.5 hover:text-foreground"
         [title]="i18n.t('transfer.showDetails')"
       >
         @if (transfers.currentJob(); as job) {