[fix](advisor+ui): guided weight adjuster, separate 1/2 sections, single Export, tidy footer, deep labelled diagrams, responsive sliders, never-wrap chrome

Owner feedback rounds on the Fase 2d PR:
- ADJUST BUG: the weights adjuster was expert-gated, so guided users could
  never customise — ungated (plain-language panel is newcomer-safe); verified
  end-to-end: set 35% -> Done -> applied & persisted, reopen keeps the value.
- Project factors (1) and Quality priorities (2) are now SEPARATE collapsible
  sections; PrioritiesCard/Toolbar internal headers removed ("4 Export" was
  doubled); two newly-orphaned dict keys deleted.
- Footer: tidy two-line centered stack (glyph + wordmark, then (c) + short
  licenses); browser guidance stays as hover title.
- Catalog detail diagrams rev.2: every part carries its own tiny label
  (CLIENT/SERVER, EVENT BUS, WRITE/READ MODEL, PORTS/ADAPTERS/CORE, E1..E5,
  TEAM A/B/C...) + flow arrows + an explanation line; hero canvas enlarged
  (clamp 180-230px); label type scaled DOWN (6/7px) so text never overpowers
  the drawing; event-driven boxes widened to fit their labels.
- Pattern Library slider: arrows now visible on phones/tablets too (smaller,
  edge-tucked; swipe still works).
- How-it-works: grid on desktop, arrowless swipe slider on <=1024 (media block
  relocated after the base rule so the cascade actually applies).
- Never-wrap app bar: compact-nav chrome breakpoint raised 1024 -> 1180 (any
  width where the bar would wrap now gets the mobile chrome); docs updated
  (design-spec 6.1, mobile-experience-plan 5).

119 unit + 14 e2e, lint, tsc, build, all 6 guards green; verified: guided
adjust applies, tablet-900 steps=flex/desktop=grid, 1100px uses compact
chrome, phone arrows visible.

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

Author: programmerShinobi

docs/03-blueprint/design-specification.md

@@ -279,7 +279,7 @@ utilities via `tailwind.config.js`); view code references these instead of hardc
 | **Type** | `--aa-fs-2xs..2xl` = 11/12/12.5/13.5/15 px + fluid lg/xl/2xl via `clamp()`; `--aa-lh` 1.6 |
 | **Elevation** | `--aa-shadow-sm/md/lg` over a theme-aware `--aa-shadow-color` |
 | **Touch & focus** | `--aa-touch` 44 px (coarse pointers); `--aa-focus-ring` 2 px info, global `:focus-visible` |
-| **Breakpoints** | canonical (cannot be `var()` in `@media`): **phone ≤ 640 px · tablet 641–1024 px · laptop ≥ 1025 px**. **Navigation chrome switches at ≤ 1024 px** (Fase 2b): phones AND tablets share the compact mobile chrome (bottom tab bar, action bar, settings sheet, compact top bar — brand left + Guide) so the app bar never wraps; content-density rules (`.f-div`, overlay padding, grid columns) keep the 640 px phone tier. Historical `-phone` class names mean "compact tier". |
+| **Breakpoints** | canonical (cannot be `var()` in `@media`): **phone ≤ 640 px · tablet 641–1024 px · laptop ≥ 1025 px**. **Navigation chrome switches at ≤ 1180 px** (Fase 2b, raised Fase 2d: ANY width where the app bar would wrap gets the compact chrome): phones, tablets and small laptops share the compact mobile chrome (bottom tab bar, action bar, settings sheet, compact top bar — brand left + Guide) so the app bar never wraps; content-density rules (`.f-div`, overlay padding, grid columns) keep the 640 px phone tier. Historical `-phone` class names mean "compact tier". |
 
 Base classes: `.aa-page` / `.aa-frame` / `.aa-surface` / `.aa-panel` / `.aa-card` / `.aa-wrap` /
 `.aa-touch`. New classes are namespaced `aa-`; no `!important`.

docs/03-blueprint/mobile-experience-plan.md

@@ -62,7 +62,7 @@ Desktop (≥641px) is unchanged (top nav + header controls as today).
 
 - ~~Phone tier: **≤640px** (canonical, design-spec §6.1). Bottom nav + action bar + settings sheet are
   phone-only; ≥641px keeps the current top-nav desktop layout.~~ **Updated (Fase 2b, 2026-07-16):**
-  the navigation chrome now switches at **≤1024px** — tablets share the phone's bottom nav /
+  the navigation chrome now switches at **≤1180px** (raised Fase 2d) — tablets share the phone's bottom nav /
   action bar / settings sheet / compact top bar so the app bar never wraps; only content-density
   rules stay on the 640px phone tier (design-spec §6.1).
 - Safe area: `padding-bottom: env(safe-area-inset-bottom)` on the fixed bars; the viewport already

src/App.tsx

@@ -296,16 +296,21 @@ export default function App() {
 
         <div className="f-div" />
 
-        {/* Step 1 — project factors + derived priorities (collapsible card, Fase 2d). */}
+        {/* Step 1 — project factors (its own dropdown section; owner feedback: factors and
+            priorities must be SEPARATE so nobody gets confused). */}
         <StepSection id="aa-sec-1" n="1" titleG="step1.g" titleE="step1.e">
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '18px' }}>
-            <FactorInputs levels={levels} onChange={setLevels} />
-            {/* Step 2 anchor: the derived priorities live here; the adjust editor opens RIGHT
-                under the card (owner feedback: it used to land far below the factor column). */}
-            <div id="aa-sec-2" style={{ display: 'grid', gap: '14px', alignContent: 'start', scrollMarginTop: '132px' }}>
-              <PrioritiesCard weights={weights} onAdjust={() => setEditWeights((v) => !v)} editing={mode === 'expert' && editWeights} />
-              {mode === 'expert' && editWeights && <QaOverridePanel weights={weights} overrides={overrides} onChange={setOverrides} />}
-            </div>
+          <FactorInputs levels={levels} onChange={setLevels} />
+        </StepSection>
+
+        <div className="f-div" />
+
+        {/* Step 2 — derived quality priorities; the adjust editor opens right underneath.
+            Ungated (Fase 2d rev.3, owner): guided users can customise weights too — the
+            plain-language adjuster is newcomer-safe. */}
+        <StepSection id="aa-sec-2" n="2" titleG="step2.g" titleE="step2.e">
+          <div style={{ display: 'grid', gap: '14px' }}>
+            <PrioritiesCard weights={weights} onAdjust={() => setEditWeights((v) => !v)} editing={editWeights} />
+            {editWeights && <QaOverridePanel weights={weights} overrides={overrides} onChange={setOverrides} />}
           </div>
         </StepSection>
 
@@ -397,29 +402,27 @@ export default function App() {
               }}
             />
 
-            {/* Global footer (Fase 2d: simple & professional) — one calm identity line with the
-                brand glyph; browser guidance (FR-EDGE-4) folded into a hover title. */}
+            {/* Global footer (Fase 2d rev.2 — owner: "rapi & simple"): a tidy two-line centered
+                stack — brand line, then one short legal line. Browser guidance (FR-EDGE-4)
+                lives in the hover title. */}
             <footer
               className="screen-only"
               title={t('footer.browsers')}
               style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: '10px',
-                flexWrap: 'wrap',
+                display: 'grid',
+                justifyItems: 'center',
+                gap: '6px',
                 padding: 'var(--aa-space-7) var(--aa-panel-pad) var(--aa-space-5)',
-                fontSize: 'var(--aa-fs-2xs)',
-                color: 'var(--color-text-tertiary)',
                 textAlign: 'center',
               }}
             >
-              <span style={{ display: 'inline-flex', color: 'var(--color-text-secondary)' }} aria-hidden>
-                <BrandMark size={16} />
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: 'var(--color-text-secondary)', fontFamily: 'var(--font-display)', fontSize: '12.5px', fontWeight: 600, letterSpacing: '-0.01em' }}>
+                <BrandMark size={15} />
+                {t('app.title')}
+              </span>
+              <span style={{ fontSize: 'var(--aa-fs-2xs)', color: 'var(--color-text-tertiary)' }}>
+                {SITE_COPYRIGHT} · {t('footer.rights')}
               </span>
-              <span>{SITE_COPYRIGHT}</span>
-              <span aria-hidden>·</span>
-              <span>{t('footer.rights')}</span>
             </footer>
           </div>
         </div>

src/components/advisor/PrioritiesCard.tsx

@@ -18,17 +18,12 @@ export function PrioritiesCard({ weights, onAdjust, editing = false }: Props) {
 
   return (
     <div style={{ border: '0.5px solid var(--color-border-tertiary)', borderRadius: 'var(--border-radius-lg)', padding: '15px 16px' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '3px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span className="f-num">2</span>
-          <span style={{ fontSize: '14px', fontWeight: 500 }}>
-            <span className="guided-only">{t('prio.title.g')}</span>
-            <span className="expert-only">{t('step2.e')}</span>
-          </span>
-        </div>
+      {/* No internal number/title — the StepSection card already shows "2 · …" (owner
+          feedback: factors and priorities are now SEPARATE dropdown sections). */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', marginBottom: '3px' }}>
         <button
           type="button"
-          className="expert-only f-btn"
+          className="f-btn"
           onClick={onAdjust}
           aria-pressed={editing}
           style={

src/components/chrome/Toolbar.tsx

@@ -56,14 +56,8 @@ export function Toolbar({ run, status, setStatus, mode, onImport }: Props) {
 
   return (
     <div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '11px' }}>
-        <span className="f-num">4</span>
-        <span style={{ fontSize: '15px', fontWeight: 500 }}>
-          <span className="guided-only">{t('export.title.g')}</span>
-          <span className="expert-only">{t('step4.e')}</span>
-        </span>
-      </div>
-
+      {/* No internal heading — the StepSection card already shows "4 · Save & share"
+          (owner feedback: the number was doubled). */}
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '9px' }}>
         <button
           type="button"