style(web): add space before passphrase divider (#208)

[miso-develop]

Closes #208
Parent spec: #137

Change

• keep the shared .security-subsection baseline at 28px
• target the stable data-security-subsection="change-passphrase" identity from [Task][Web] Keep header visible and normalize Recovery/Firmware dividers #203
• increase only Change Recovery Passphrase top margin to 48px at normal widths
• reduce it modestly to 40px at <=560px while keeping it larger than ordinary subsection/control spacing
• leave the existing 24px divider-to-heading padding and single 1px neutral divider unchanged
• add no second border, hr, card, or markup wrapper

Regression coverage

Production Chrome layout smoke now verifies:

• Recovery Package retains the generic 28px subsection margin
• Change Recovery Passphrase desktop margin is >=40px and greater than Recovery Package
• exactly one CSS top divider remains and no hr is introduced
• narrow layout keeps >=40px spacing and remains greater than generic subsection spacing
• narrow layout has no horizontal overflow
• existing EN/JA rendered heading and shared divider assertions remain in place

Preserved behavior

No changes to:

• Recovery Package import/export
• Recovery Passphrase clearing/input behavior
• Trusted Browser state
• Passphrase-change authorization
• secret persistence/logging
• Factory Reset danger boundary
• Device / Protocol / Vault behavior

Base / collision

• base: 40f7061eb89dcc676599d7f74f1b45037e589ea2
• branch: 2 commits ahead / 0 behind
• open PR fix(web): prevent USB Serial teardown reset (#204) #206 touches Web Serial transport only
• open PR docs: remove README Important security admonition (#207) #209 touches README files only
• neither overlaps web/src/style.css or Provisioning layout smoke

Exact-head CI evidence pending.

[miso-develop]

Implementation evidence — Issue #208

Exact HEAD: 0b271a9c293e9478ebc4b0363f17f7e7637f0ee4

Change

• Shared .security-subsection baseline remains 28px.
• Only data-security-subsection="change-passphrase" gets additional separation:
  • normal width: 48px top margin;
  • <=560px: 40px top margin.
• Existing 24px padding after the divider and existing 1px neutral top border are unchanged.
• No extra border, hr, card, or markup wrapper was added.

Regression coverage

Production Chrome layout smoke verifies:

• Recovery Package remains at the generic 28px subsection margin;
• Change Recovery Passphrase is >=40px and greater than the generic subsection baseline at desktop width;
• Change Recovery Passphrase retains exactly one CSS top divider and no duplicate hr;
• narrow 540px layout retains >=40px spacing and remains greater than the generic subsection spacing;
• narrow layout has no horizontal overflow;
• existing localized EN/JA heading checks and [Task][Web] Keep header visible and normalize Recovery/Firmware dividers #203 shared divider assertions remain intact.

Behavior preservation

No Recovery Package, Recovery Passphrase, Trusted Browser, authorization, secret persistence/logging, Factory Reset, Device, Protocol, or Vault behavior changed.

Exact-head CI

• Security #936 / run 35357472948: SUCCESS.
• Foundation #933 / run 35357472989: SUCCESS.
  • web: SUCCESS
  • web QR Windows Chrome: SUCCESS
  • firmware: SUCCESS
• Web unit suite: 38 files / 300 tests passed.
• Linux Chrome production smoke: SUCCESS.
• Windows Chrome production smoke: SUCCESS.
• Web build / lockfile verification: SUCCESS.
• Firmware native/security regressions, isolated build/merge, distribution package validation, and dependency-lock verification: SUCCESS.

Collision / staleness

• Current main remains 40f7061eb89dcc676599d7f74f1b45037e589ea2, the exact PR base.
• PR style(web): add space before passphrase divider (#208) #210 is open, non-draft, mergeable, 2 commits ahead / 0 behind.
• PR fix(web): prevent USB Serial teardown reset (#204) #206 touches Web Serial transport only.
• PR docs: remove README Important security admonition (#207) #209 touches README files only.
• Neither overlaps this PR's two files:
  • web/src/style.css
  • web/tests/browser/post-provisioning-layout-smoke.ts

Implementation has not approved or merged this PR.

[miso-develop]

Review disposition: READY_FOR_INTEGRATION

Reviewed exact PR head 0b271a9c293e9478ebc4b0363f17f7e7637f0ee4 against Issue #208, parent usability spec #137, and the integrated #203 Security & Recovery divider baseline.

No blocking finding identified.

Change verification:

• Production change is limited to web/src/style.css; the only other changed file is focused production Chrome layout coverage.
• Shared .security-subsection baseline remains unchanged at:
  • margin-top: 28px;
  • padding-top: 24px;
  • one 1px solid #e5e5e5 top border.
• Only the stable semantic identity [data-security-subsection="change-passphrase"] receives the increased pre-divider separation.
• Desktop/default top margin is 48px, satisfying the >=40px requirement.
• At <=560px, top margin is reduced only to 40px, still greater than generic subsection spacing and not collapsed.
• Because margin-top belongs to the subsection container whose border-top is the divider, the added whitespace is correctly placed above the divider, not between divider and heading.
• Divider-to-heading spacing remains the existing 24px padding.
• No second border, hr, card, wrapper, or localized-text selector was introduced.
• Recovery Package retains the generic 28px subsection spacing.

Behavior/security preservation:

• security-panel.ts is unchanged.
• Recovery Package import/export behavior is unchanged.
• Recovery Passphrase input clearing, enable/disable state, authorization, Trusted Browser state handling, browser-state locking, and security-mutation guards are unchanged.
• Factory Reset danger boundary is unchanged.
• No Device, Protocol, Vault, TOTP, credential persistence/logging, or runtime behavior is changed.

Responsive/localization/layout verification:

• Existing EN/JA heading/localization assertions remain in the production layout smoke.
• Desktop smoke asserts Change Recovery Passphrase margin >=40px and greater than Recovery Package's 28px.
• The single neutral CSS divider and absence of decorative hr remain asserted.
• Narrow 540px production layout asserts >=40px spacing, greater-than-generic separation, and no horizontal overflow.
• #203 sticky-header, major-section divider, Factory Reset, Firmware divider, and async Build information layout coverage remains in the same smoke suite.

Exact-head CI independently checked:

• Foundation #933: SUCCESS.
  • Web unit suite: 38 files / 300 tests passed.
  • Linux production Chrome smoke: SUCCESS.
  • normal Web build / lockfile verification: SUCCESS.
  • Windows Chrome smoke: SUCCESS.
  • firmware regressions and isolated ESP-IDF build/package validation: SUCCESS.
• Security #936: SUCCESS, including repository security scan and existing release/security contracts.

Staleness/collision:

• Handoff HEAD matches current PR HEAD.
• PR is open, non-draft, and mergeable.
• Current main advanced from PR base 40f7061eb89dcc676599d7f74f1b45037e589ea2 to 3432bcda8af5a4c4a09bafadebec9ae1484f9460.
• The intervening main commit changes only README.md and README.ja.md; it does not overlap web/src/style.css or the layout smoke.
• PR #206 owns Web Serial transport files only and does not overlap #208.

No additional Security review or physical Human Gate is required for this presentation-only spacing adjustment.

[miso-develop]

HANDOFF
FROM: review
TO: integration
ISSUE: #208
PR: #210
HEAD: 0b271a9
STATE: READY_FOR_INTEGRATION

[miso-develop]

READY_TO_MERGE

HEAD: 0b271a9c293e9478ebc4b0363f17f7e7637f0ee4
Current main: 386baf91d41e8c6c87e896b328bc2ddbea3753c2

Integration reconstruction:

• exact PR head matches Review handoff
• PR is open, non-draft, mergeable
• Review disposition: READY_FOR_INTEGRATION; no blocking finding
• Foundation #933: SUCCESS
• Security #936: SUCCESS
• no unresolved review threads
• current-main drift since PR base is limited to README changes and Web Serial files
• PR style(web): add space before passphrase divider (#208) #210 changes only web/src/style.css and web/tests/browser/post-provisioning-layout-smoke.ts
• no Human Gate required
• no additional Security-role review required

STATE: READY_TO_MERGE

[miso-develop]

INTEGRATED

PR: #210
Pre-merge HEAD: 0b271a9c293e9478ebc4b0363f17f7e7637f0ee4
Squash merge commit / current main: d575e70fd7e07e9f2774762b5636cb74e94ed42d

Integration evidence:

• Review: READY_FOR_INTEGRATION at exact head
• Foundation #933: SUCCESS
• Security #936: SUCCESS
• no unresolved review threads
• no Human Gate required
• no additional Security-role review required
• current-main drift before merge was non-overlapping
• Issue [Task][Web] Add spacing above Change Recovery Passphrase divider #208 auto-closed as completed

STATE: INTEGRATED