MFD PROFILE: vertical situation view (altitude vs distance along the plan)

The PROFILE softkey was dead. Now it overlays a vertical profile at the bottom of
the MFD map: own aircraft at the left, upcoming waypoints with their target
altitudes, the magenta planned descent path, and an altitude grid — pure geometry
from the active flight plan + current altitude.

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

web/src/components/MFD.jsx

@@ -54,6 +54,7 @@ export default function MFD({ values: V, flightPlan, fp, mapMode, page = 'map',
               terrain={xp?.terrain} rose onView={({ rangeNm }) => setRangeNm(rangeNm)} />
             <MapChrome V={V} rangeNm={rangeNm} />
           </div>
+          {page === 'map' && mapMode?.profile && <VertProfile V={V} fp={flightPlan} />}
           {page === 'nrst' && <Nearest xp={xp} full />}
           {page === 'fpl' && xp && <FplPage xp={xp} full vnav={vnav} onVnav={onVnav} />}
           {/* page-group indicator (bottom-right), like the real G1000 — selected
@@ -123,6 +124,59 @@ function MfdTopBar({ V, fp }) {
   );
 }
 
+/* ---------------- vertical profile (PROFILE softkey) ---------------- */
+// Altitude-vs-distance view along the active flight plan: the aircraft at the
+// left, upcoming waypoints with their target altitudes, and the planned descent
+// path between them. Pure geometry from the plan + current altitude.
+function VertProfile({ V, fp }) {
+  const R = 3440.065, rad = (d) => (d * Math.PI) / 180;
+  const dist = (a, b) => {
+    const dLat = rad(b.lat - a.lat), dLon = rad(b.lon - a.lon);
+    const s = Math.sin(dLat / 2) ** 2 + Math.cos(rad(a.lat)) * Math.cos(rad(b.lat)) * Math.sin(dLon / 2) ** 2;
+    return 2 * R * Math.asin(Math.min(1, Math.sqrt(s)));
+  };
+  const wps = fp?.waypoints || [];
+  const ai = Math.max(1, Math.min(wps.length - 1, fp?.activeLeg ?? 1));
+  const alt = num(V.altitude);
+  const pts = []; let cum = 0, prev = { lat: num(V.lat), lon: num(V.lon) };
+  for (let i = ai; i < wps.length; i++) { cum += dist(prev, wps[i]); prev = wps[i]; pts.push({ d: cum, alt: num(wps[i].alt) || null, id: wps[i].id }); }
+  const maxD = Math.max(10, cum);
+  const altMax = Math.max(alt, ...pts.map((p) => p.alt || 0), 3000) * 1.15;
+  const W = 1000, H = 200, padL = 46, padR = 12, padT = 12, padB = 22;
+  const x = (d) => padL + (d / maxD) * (W - padL - padR);
+  const y = (a) => (H - padB) - (a / altMax) * (H - padT - padB);
+  const altPts = pts.filter((p) => p.alt != null);
+  const path = [`${x(0)},${y(alt)}`, ...altPts.map((p) => `${x(p.d)},${y(p.alt)}`)].join(' ');
+  const grid = [0, altMax / 2, altMax].map((a) => Math.round(a / 500) * 500);
+  return (
+    <div className="vprof">
+      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
+        <rect x="0" y="0" width={W} height={H} fill="#05080b" />
+        {grid.map((a) => (
+          <g key={a}>
+            <line x1={padL} y1={y(a)} x2={W - padR} y2={y(a)} stroke="#1b2730" strokeWidth="1" />
+            <text x={padL - 5} y={y(a) + 4} fill="#6f808d" fontSize="11" textAnchor="end" fontFamily="monospace">{Math.round(a / 100) * 100}</text>
+          </g>
+        ))}
+        {/* planned vertical path through waypoint target altitudes */}
+        {altPts.length > 0 && <polyline points={path} fill="none" stroke="#ff20ff" strokeWidth="2.5" />}
+        {/* waypoints */}
+        {pts.map((p, i) => (
+          <g key={p.id + i}>
+            <line x1={x(p.d)} y1={padT} x2={x(p.d)} y2={H - padB} stroke="#222d36" strokeWidth="1" />
+            {p.alt != null && <rect x={x(p.d) - 3} y={y(p.alt) - 3} width="6" height="6" fill="#4fa8ff" />}
+            <text x={x(p.d)} y={H - padB + 14} fill="#9fb3c0" fontSize="11" textAnchor="middle" fontFamily="monospace">{p.id}</text>
+            {p.alt != null && <text x={x(p.d)} y={y(p.alt) - 7} fill="#4fa8ff" fontSize="10" textAnchor="middle" fontFamily="monospace">{p.alt}</text>}
+          </g>
+        ))}
+        {/* own aircraft at the left edge */}
+        <polygon points={`${x(0) - 7},${y(alt)} ${x(0) + 7},${y(alt) - 5} ${x(0) + 7},${y(alt) + 5}`} fill="#ffce00" />
+        <text x={x(0) + 10} y={y(alt) - 6} fill="#ffce00" fontSize="11" fontFamily="monospace">{Math.round(alt)}</text>
+      </svg>
+    </div>
+  );
+}
+
 /* ---------------- engine instrument strip (EIS) ---------------- */
 function EisStrip({ V }) {
   const rpm = arr(V.engRpm);