[feat](ui): calm text gradients, left-nav/right-controls app bar, compass brand v5, slim guided hint

Fase 2e-2g (owner feedback):
- Gradient TEXT ("evidence", "Always explains why") moved to muted theme-tuned
  --aa-grad-text (deeper on light, pastel on dark) — never glares; decorative
  fills keep the vivid accent.
- Modern app bar: ONE sticky glass bar — nav tabs top-LEFT (segmented
  icon badges), compact controls + brand docked RIGHT; wraps into two tidy
  right-aligned rows on mid widths (no horizontal scroll, e2e-verified).
  App title returns as a wordmark beside the compass (desktop).
- Guided "New here?" strip: slim calm inline hint (no card), power-user note
  right with a small ]K key cap; fixed the inline-display footgun so
  .aa-hide-phone wins on phones (360px overflow caught by e2e).
- Brand mark v5: minimal monochrome COMPASS on transparent bg via currentColor
  (black on light, auto-light on dark; favicon uses prefers-color-scheme);
  PWA icons regenerated (black compass on soft-white tile, maskable-safe).
- CHANGELOG for the whole Fase 2.

lint, tsc, build, 119 unit + 14 e2e, all 6 guards green; visual QA dark/light,
EN/ID, 1440/360.

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

Author: programmerShinobi

CHANGELOG.md

@@ -9,6 +9,27 @@ The decision **model** carries its own version, recorded in the
 
 ## [Unreleased]
 
+### Added / Changed (Fase 2 — richer scenarios & guidance, full-feature Guide, calm chrome — 2026-07-16)
+
+- **10 scenario presets** — five new helper scenarios (B2B SaaS, consumer mobile, data platform,
+  legacy modernization, real-time collaboration) marked `calibrated: false`; the five ADR-0002
+  presets stay bit-exact and guard-pinned. `check-app-config.mjs` extended accordingly; a new
+  unit test pins each helper's engine outcome per dimension (drift guard).
+- **Per-level factor examples** — every one of the 14 factors shows a bilingual real-world
+  example for the selected level in guided mode (pure UI copy; the frozen model is untouched).
+- **Guide = full feature map** — section 7 now covers Home, the guided/expert Advisor toolset,
+  all seven Insights lenses, save/export/share, the command palette & shortcuts, EN/ID, themes,
+  mobile chrome, and PWA install/offline.
+- **Calm text gradients** — gradient text ("evidence", "Always explains why") moved to a muted,
+  theme-tuned `--aa-grad-text` (deeper on light, pastel on dark) — decorative fills keep the
+  vivid accent, text never glares.
+- **Modern app bar** — one sticky glass bar: nav tabs (futuristic segmented badges) in the
+  top-left corner, compact controls + brand mark docked right; the app title lives on the Home
+  hero. The guided "New here?" strip is now a slim, calm inline hint with a ⌘K key cap.
+- **Brand mark v5 "compass"** — a minimal monochrome compass on a transparent background:
+  black in the light theme, auto-inverting via `currentColor` (app) and `prefers-color-scheme`
+  (favicon); PWA icons regenerated as a black compass on a soft-white tile.
+
 ### Changed (Fase 1 — "Aurora Glass" borderless evolution + identity — 2026-07-16)
 
 - **Component tree grouped by feature area** — `src/components/` reorganised into

public/favicon.svg

@@ -217,40 +217,44 @@ export default function App() {
             canvas; the header/nav are glass. The extra wrapper div is gone with the frame. */}
         <div>
           <div id="f-app" className={mode} style={{ position: 'relative' }}>
-            <Header
-              mode={mode}
-              onToggleMode={setMode}
-              onCmdK={() => setOverlay('palette')}
-              onHelp={() => setOverlay('shortcuts')}
-              onManual={() => setOverlay('manual')}
-              theme={theme}
-              onToggleTheme={toggleTheme}
-              saveSig={saveSig}
-            />
-
-            <nav aria-label={t('m.primaryNav')} className="screen-only aa-topnav aa-glass">
-              {(
-                [
-                  { v: 'home', key: 'nav.home', Icon: IconHome },
-                  { v: 'advisor', key: 'nav.advisor', Icon: IconCompass },
-                  { v: 'learn', key: 'nav.learn', Icon: IconBulb },
-                ] as const
-              ).map(({ v, key, Icon }) => {
-                const active = mainView === v;
-                return (
-                  <button
-                    key={v}
-                    type="button"
-                    aria-current={active ? 'page' : undefined}
-                    onClick={() => navigate(v)}
-                    className={'aa-topnav-tab' + (active ? ' on' : '')}
-                  >
-                    <Icon size={15} aria-hidden />
-                    {t(key)}
-                  </button>
-                );
-              })}
-            </nav>
+            {/* Modern app bar (Fase 2, DECISIONS.md): ONE sticky glass bar — nav tabs in the
+                top-LEFT corner, controls + brand docked RIGHT. The app title lives on the Home
+                hero and the document title, keeping the bar a single calm row. */}
+            <div className="aa-appbar aa-glass">
+              <nav aria-label={t('m.primaryNav')} className="screen-only aa-topnav">
+                {(
+                  [
+                    { v: 'home', key: 'nav.home', Icon: IconHome },
+                    { v: 'advisor', key: 'nav.advisor', Icon: IconCompass },
+                    { v: 'learn', key: 'nav.learn', Icon: IconBulb },
+                  ] as const
+                ).map(({ v, key, Icon }) => {
+                  const active = mainView === v;
+                  return (
+                    <button
+                      key={v}
+                      type="button"
+                      aria-current={active ? 'page' : undefined}
+                      onClick={() => navigate(v)}
+                      className={'aa-topnav-tab' + (active ? ' on' : '')}
+                    >
+                      <Icon size={15} aria-hidden />
+                      {t(key)}
+                    </button>
+                  );
+                })}
+              </nav>
+              <Header
+                mode={mode}
+                onToggleMode={setMode}
+                onCmdK={() => setOverlay('palette')}
+                onHelp={() => setOverlay('shortcuts')}
+                onManual={() => setOverlay('manual')}
+                theme={theme}
+                onToggleTheme={toggleTheme}
+                saveSig={saveSig}
+              />
+            </div>
 
             {mainView === 'home' ? (
               <div className="aa-panel">

public/icons/apple-touch-icon.png

@@ -1,53 +1,25 @@
 /**
- * The brand glyph v4 (Fase 1): the "neural radar" — a luminous decision core linked to five
- * glowing dimension nodes (5 dimensions → 1 recommendation), thin neon lines with real glow.
- * Mirrors `public/favicon.svg` (the single source); self-contained (renders its own tile),
- * so it works on any header background in both themes. Decorative: parents provide the
- * accessible name.
+ * The brand glyph v5 (Fase 2, DECISIONS.md): a minimal modern COMPASS — ring, needle, hub —
+ * in a single color on a TRANSPARENT background. Drawn with `currentColor`, so it is black in
+ * the light theme (the owner's elegant default) and automatically light in dark contexts.
+ * Mirrors `public/favicon.svg` (the single source). Decorative: parents provide the
+ * accessible name and the color context.
  */
 export function BrandMark({ size = 34 }: Readonly<{ size?: number }>) {
   return (
     <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden focusable="false" style={{ display: 'block' }}>
-      <defs>
-        <linearGradient id="aa-bm-ln" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0" stopColor="#8b7cff" />
-          <stop offset="0.55" stopColor="#38e1ff" />
-          <stop offset="1" stopColor="#7cf5c8" />
-        </linearGradient>
-        <radialGradient id="aa-bm-tile" cx="0.5" cy="0.32" r="0.9">
-          <stop offset="0" stopColor="#151a33" />
-          <stop offset="1" stopColor="#05060f" />
-        </radialGradient>
-        <radialGradient id="aa-bm-core" cx="0.5" cy="0.5" r="0.5">
-          <stop offset="0" stopColor="#ffffff" />
-          <stop offset="0.5" stopColor="#c9d4ff" />
-          <stop offset="1" stopColor="#8b7cff" />
-        </radialGradient>
-        <filter id="aa-bm-glow" x="-60%" y="-60%" width="220%" height="220%">
-          <feGaussianBlur stdDeviation="3.2" result="b" />
-          <feMerge>
-            <feMergeNode in="b" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-      <rect width="100" height="100" rx="23" fill="url(#aa-bm-tile)" />
-      <g filter="url(#aa-bm-glow)">
-        <polygon points="50,20 81.4,42.8 69.4,79.7 30.6,79.7 18.6,42.8" fill="none" stroke="url(#aa-bm-ln)" strokeWidth="1.6" strokeLinejoin="round" opacity="0.5" />
-        <g stroke="url(#aa-bm-ln)" strokeWidth="2" strokeLinecap="round" opacity="0.9">
-          <line x1="50" y1="53" x2="50" y2="20" />
-          <line x1="50" y1="53" x2="81.4" y2="42.8" />
-          <line x1="50" y1="53" x2="69.4" y2="79.7" />
-          <line x1="50" y1="53" x2="30.6" y2="79.7" />
-          <line x1="50" y1="53" x2="18.6" y2="42.8" />
-        </g>
-        <circle cx="50" cy="20" r="4.2" fill="#38e1ff" />
-        <circle cx="81.4" cy="42.8" r="3.4" fill="#7cf5c8" />
-        <circle cx="69.4" cy="79.7" r="3.4" fill="#8b7cff" />
-        <circle cx="30.6" cy="79.7" r="3.4" fill="#ff7ac3" />
-        <circle cx="18.6" cy="42.8" r="3.4" fill="#a99bff" />
-        <circle cx="50" cy="53" r="9" fill="url(#aa-bm-core)" />
+      <circle cx="50" cy="50" r="38" fill="none" stroke="currentColor" strokeWidth="6" />
+      {/* cardinal ticks */}
+      <circle cx="50" cy="21" r="2.4" fill="currentColor" opacity="0.55" />
+      <circle cx="79" cy="50" r="2.4" fill="currentColor" opacity="0.55" />
+      <circle cx="50" cy="79" r="2.4" fill="currentColor" opacity="0.55" />
+      <circle cx="21" cy="50" r="2.4" fill="currentColor" opacity="0.55" />
+      {/* needle: solid north blade, outlined south blade (one color, two weights) */}
+      <g transform="rotate(40 50 50)">
+        <polygon points="50,19 58.5,50 41.5,50" fill="currentColor" />
+        <polygon points="50,81 56.5,50 43.5,50" fill="none" stroke="currentColor" strokeWidth="4.6" strokeLinejoin="round" />
       </g>
+      <circle cx="50" cy="50" r="6" fill="currentColor" />
     </svg>
   );
 }

public/icons/icon-192.png

@@ -1,32 +1,32 @@
 import { IconSparkles, IconCommand } from '@tabler/icons-react';
 import { useI18n } from '../../i18n/I18nContext';
 
-// The "New here?" orientation banner — guided mode only (hidden in expert via .guided-only).
-// Modern treatment (Fase 1 polish): a floating glass card with badge pills + a ⌘K key cap,
-// replacing the old full-width info strip.
+// The "New here?" orientation hint — guided mode only (hidden in expert via .guided-only).
+// Fase 2 (owner feedback): a SLIM, calm inline strip — no card, no glass, muted colors; the
+// power-user hint sits quietly on the right with a small ⌘K key cap.
 export function GuidedBanner() {
   const { t } = useI18n();
   return (
     <div
-      className="guided-only aa-glass"
+      className="guided-only"
       style={{
         display: 'flex',
         flexWrap: 'wrap',
-        gap: '10px 14px',
-        alignItems: 'center',
-        padding: '12px 16px',
-        margin: 'var(--aa-space-3) var(--aa-panel-pad) 0',
-        borderRadius: 'var(--border-radius-xl)',
+        gap: '6px 14px',
+        alignItems: 'baseline',
+        padding: 'var(--aa-space-2) var(--aa-panel-pad)',
+        fontSize: '12.5px',
+        lineHeight: 1.55,
+        color: 'var(--color-text-tertiary)',
       }}
     >
-      <span className="aa-badge aa-badge-accent">
-        <IconSparkles size={13} aria-hidden />
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', fontWeight: 600, color: 'var(--color-text-secondary)', whiteSpace: 'nowrap' }}>
+        <IconSparkles size={13} aria-hidden style={{ opacity: 0.7 }} />
         {t('banner.new')}
       </span>
-      <span style={{ fontSize: '12.5px', color: 'var(--color-text-secondary)', lineHeight: 1.55, flex: '1 1 260px' }}>
-        {t('banner.body')}
-      </span>
-      <span className="aa-hide-phone" style={{ display: 'inline-flex', alignItems: 'center', gap: '7px', fontSize: '12px', color: 'var(--color-text-tertiary)' }}>
+      <span style={{ flex: '1 1 300px', minWidth: 0 }}>{t('banner.body')}</span>
+      {/* Layout via .aa-wrap (class, NOT inline display) so .aa-hide-phone can win on phones. */}
+      <span className="aa-hide-phone aa-wrap" style={{ whiteSpace: 'nowrap' }}>
         <span style={{ fontWeight: 600, color: 'var(--color-text-secondary)' }}>{t('banner.power')}</span>
         <span className="aa-kbd">
           <IconCommand size={11} aria-hidden />K

public/icons/icon-512.png

@@ -35,34 +35,9 @@ export function Header({ mode, onToggleMode, onCmdK, onHelp, onManual, theme, on
   }, [saveSig]);
 
   return (
-    <div
-      className="aa-glass"
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: 'var(--aa-space-4) var(--aa-panel-pad)',
-        borderRadius: 'var(--border-radius-xl)',
-        flexWrap: 'wrap',
-        gap: '10px',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0, flex: '0 1 auto' }}>
-        {/* BrandMark is self-contained (own dark tile + neon glyph) — no chip behind it. */}
-        <div style={{ borderRadius: '9px', boxShadow: '0 0 16px -4px rgba(56, 225, 255, 0.5)', flex: 'none' }}>
-          <BrandMark size={36} />
-        </div>
-        <div style={{ minWidth: 0 }}>
-          <div style={{ fontFamily: 'var(--font-display)', fontSize: '16px', fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.25, whiteSpace: 'nowrap' }}>{t('app.title')}</div>
-          {/* The tagline shrinks with ellipsis instead of pushing the controls to wrap. */}
-          <div style={{ fontSize: '12px', color: 'var(--color-text-tertiary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t('app.tagline')}</div>
-        </div>
-      </div>
-
-      {/* Controls cluster: ONE horizontal row, right-aligned — never stacks. Compact pieces
-          (icon-only save status, segmented toggles) keep it narrow enough for laptops; on
-          mid widths the whole row drops under the title as a single tidy line. */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'nowrap', flex: '0 0 auto', marginLeft: 'auto' }}>
+    // The RIGHT side of the app bar (Fase 2): one horizontal row of compact controls with the
+    // brand mark docked at the far right. The app title lives on the Home hero + document title.
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'nowrap', marginLeft: 'auto', minWidth: 0 }}>
         {/* Save status: compact icon-only badge — the full text lives in title/aria-label. */}
         <output
           className="aa-hide-phone aa-badge aa-badge-soft"
@@ -130,7 +105,15 @@ export function Header({ mode, onToggleMode, onCmdK, onHelp, onManual, theme, on
           </button>
         </div>
         </div>
-      </div>
+
+      {/* Brand — far right: monochrome compass (transparent, theme-aware) + wordmark.
+          The wordmark hides on phones (MobileChrome carries navigation labels there). */}
+      <span style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 'none', color: 'var(--color-text-primary)' }}>
+        <BrandMark size={30} />
+        <span className="aa-hide-phone" style={{ fontFamily: 'var(--font-display)', fontSize: '14px', fontWeight: 600, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
+          {t('app.title')}
+        </span>
+      </span>
     </div>
   );
 }