(function(){
/* FORGE — Mittelstand tenant Act 1-2 screens.
   Babel-standalone in-browser React. NO ES imports / exports.

   Globals used (resolved at runtime via window):
     React, navigate, getActiveTenant, registerMittelstandRoute,
     MSCard, MSPill, MSBtn   (from mittelstand/cross-cutting.jsx)

   Screens:
     S05  ScreenMittelstandRFQ        /forge/rfq        — MAHLE 24-mill call-off intake
     S06  ScreenMittelstandMatcher    /forge/matcher    — MTL-220 vs DMG Mori DMU 75 monoBLOCK
     S10  ScreenMittelstandCarryover  /forge/carryover  — Rev C → Rev D BOM diff, ECO-MS-0017
     S14  ScreenMittelstandQuote      /forge/quote      — 24-unit quote with ECO-MS-0017 roll-in

   Style:
     - cool-graphite palette (oklch hue 240–260, near-zero chroma) per spec §10
     - mono privileged for tolerances (±3 µm), lead-time (180 d), cost (€32,000),
       part numbers (MTL-220.50.01)
     - paper / chassis ink / steel accent / graphite ruling
     - founder-voice copy, no emoji, no marketing language
*/

const { useState: uSMS12, useMemo: uMMS12, useEffect: uEMS12, useRef: uRMS12 } = React;

// ─────────────────────────────────────────────────────────────────────
// Local style tokens — graphite-cool palette per spec §10.
// Mirrors mittelstand/cross-cutting.jsx tokens; duplicated locally so this
// file can stand alone if the cross-cutting file loads after it. Atoms
// (MSCard / MSPill / MSBtn) come from cross-cutting; if not yet present
// the helpers below provide identical fallbacks.
// ─────────────────────────────────────────────────────────────────────
const MS12_BG          = "oklch(0.97  0.003 250)";
const MS12_BG_2        = "oklch(0.92  0.004 250)";
const MS12_BG_3        = "oklch(0.95  0.003 250)";
const MS12_INK         = "oklch(0.18  0.01  250)";
const MS12_INK_2       = "oklch(0.32  0.01  250)";
const MS12_INK_3       = "oklch(0.48  0.01  250)";
const MS12_INK_4       = "oklch(0.62  0.005 250)";
const MS12_LINE        = "oklch(0.82  0.005 250)";
const MS12_LINE_S      = "oklch(0.88  0.004 250)";
const MS12_ACCENT      = "oklch(0.55  0.02  250)";
const MS12_AMBER       = "oklch(0.62  0.13  60)";
const MS12_BAD         = "oklch(0.55  0.18  25)";
const MS12_GOOD        = "oklch(0.55  0.13  155)";
const MS12_BLUE        = "oklch(0.55  0.10  240)";

const MS12_FONT_UI     = "var(--font-ui)";
const MS12_FONT_MONO   = "var(--font-mono)";
const MS12_FONT_SERIF  = "var(--font-serif)";

// ─────────────────────────────────────────────────────────────────────
// Layout helpers
// ─────────────────────────────────────────────────────────────────────
function ms12Root() {
  return {
    background: MS12_BG,
    color: MS12_INK,
    minHeight: "100vh",
    overflowY: "auto",
    fontFamily: MS12_FONT_UI,
    fontSize: 14,
    lineHeight: 1.5,
    width: "100%",
    position: "absolute",
    inset: 0,
    WebkitFontSmoothing: "antialiased",
  };
}

function ms12Container() {
  return { maxWidth: 1280, margin: "0 auto", padding: "32px 40px", width: "100%" };
}

function ms12Mono() {
  return {
    fontFamily: MS12_FONT_MONO,
    fontSize: 12,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: MS12_INK_3,
  };
}

function ms12Nav(path) {
  if (typeof navigate === "function") navigate(path);
}

// ─────────────────────────────────────────────────────────────────────
// Atom resolution — prefer cross-cutting MSCard/MSPill/MSBtn, fallback
// to local equivalents so this file renders even if cross-cutting hasn't
// loaded yet.
// ─────────────────────────────────────────────────────────────────────
function ms12Card(props) {
  if (typeof MSCard === "function") return React.createElement(MSCard, props, props.children);
  const merged = Object.assign({
    background: MS12_BG_3,
    border: `1px solid ${MS12_LINE}`,
    borderRadius: 10,
    padding: 20,
  }, props.style || {});
  return React.createElement("div", { style: merged }, props.children);
}

function ms12Pill(props) {
  if (typeof MSPill === "function") return React.createElement(MSPill, props, props.children);
  const tone = props.tone || "default";
  const palette = {
    default: { bg: MS12_BG_3, fg: MS12_INK_2, bd: MS12_LINE },
    accent:  { bg: MS12_BG_3, fg: MS12_ACCENT, bd: MS12_ACCENT },
    good:    { bg: MS12_BG_3, fg: MS12_GOOD,   bd: MS12_GOOD   },
    bad:     { bg: MS12_BG_3, fg: MS12_BAD,    bd: MS12_BAD    },
    amber:   { bg: MS12_BG_3, fg: MS12_AMBER,  bd: MS12_AMBER  },
    blue:    { bg: MS12_BG_3, fg: MS12_BLUE,   bd: MS12_BLUE   },
    mute:    { bg: MS12_BG_2, fg: MS12_INK_4,  bd: MS12_LINE   },
  }[tone] || { bg: MS12_BG_3, fg: MS12_INK_2, bd: MS12_LINE };
  return React.createElement("span", {
    style: {
      display: "inline-flex", alignItems: "center", gap: 6,
      height: 22, padding: "0 10px", borderRadius: 999,
      fontFamily: MS12_FONT_MONO, fontSize: 12,
      letterSpacing: "0.08em", textTransform: "uppercase",
      border: `1px solid ${palette.bd}`,
      color: palette.fg, background: palette.bg,
    },
  }, props.children);
}

function MS12BtnFallback(props) {
  const variant = props.variant || "primary";
  const [h, setH] = uSMS12(false);
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    gap: 8, cursor: "pointer", fontFamily: MS12_FONT_UI, fontWeight: 600,
    letterSpacing: "-0.005em", borderRadius: 8,
    transition: "transform .12s ease, background .12s ease, border-color .12s ease",
    border: "1px solid transparent", whiteSpace: "nowrap", userSelect: "none",
    height: 38, padding: "0 18px", fontSize: 13,
    transform: h ? "translateY(-1px)" : "translateY(0)",
  };
  let palette;
  if (variant === "primary") {
    palette = { background: MS12_INK, color: MS12_BG, borderColor: MS12_INK };
  } else if (variant === "secondary") {
    palette = { background: h ? MS12_INK : "transparent", color: h ? MS12_BG : MS12_INK, borderColor: MS12_INK };
  } else {
    palette = { background: h ? MS12_BG_2 : "transparent", color: MS12_INK_2, borderColor: MS12_LINE };
  }
  return React.createElement("button", {
    onClick: props.onClick,
    onMouseEnter: () => setH(true),
    onMouseLeave: () => setH(false),
    style: Object.assign({}, base, palette, props.style || {}),
  }, props.children);
}

function ms12Btn(props) {
  if (typeof MSBtn === "function") return React.createElement(MSBtn, props, props.children);
  return React.createElement(MS12BtnFallback, props);
}

// ─────────────────────────────────────────────────────────────────────
// Local micro-helpers shared by screens
// ─────────────────────────────────────────────────────────────────────
function ms12Header(props) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={Object.assign({}, ms12Mono(), { marginBottom: 8 })}>{props.eyebrow}</div>
      <h1 style={{
        fontFamily: MS12_FONT_SERIF, fontSize: 34, fontWeight: 600,
        letterSpacing: "-0.015em", margin: 0, color: MS12_INK,
      }}>{props.title}</h1>
      {props.subtitle && (
        <div style={{ marginTop: 8, color: MS12_INK_3, fontSize: 14 }}>{props.subtitle}</div>
      )}
    </div>
  );
}

function ms12RowBtn() {
  return {
    padding: "4px 10px",
    fontFamily: MS12_FONT_MONO,
    fontSize: 12,
    letterSpacing: "0.06em",
    textTransform: "uppercase",
    color: MS12_INK_2,
    background: MS12_BG_3,
    border: `1px solid ${MS12_LINE}`,
    borderRadius: 6,
    cursor: "pointer",
  };
}

function ms12HeadCell() {
  return {
    textAlign: "left",
    padding: "10px 12px",
    fontFamily: MS12_FONT_MONO,
    fontSize: 12,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: MS12_INK_3,
    fontWeight: 500,
    borderBottom: `1px solid ${MS12_LINE}`,
  };
}

function ms12BodyCell() {
  return { padding: "10px 12px", verticalAlign: "top" };
}

function ms12FmtEUR(n) {
  // German thousand-separator with thin space: € 24,000 → €24.000
  // Spec §10 wants explicit currency unit; keep "€" prefix and locale grouping.
  if (typeof n !== "number" || isNaN(n)) return "—";
  // Prefer forgeI18n so the tenant locale (en-DE / de-DE) drives the grouping
  // separator. Falls back to a hand-rolled de-DE format if forgeI18n hasn't
  // loaded yet (script-order race on first paint).
  const i18n = (typeof window !== "undefined") ? window.forgeI18n : null;
  if (i18n && typeof i18n.formatMoneyMinor === "function") {
    const out = i18n.formatMoneyMinor(String(Math.round(n * 100)), "EUR");
    if (out) return out;
  }
  return "€" + n.toLocaleString("de-DE");
}

function ms12FmtDays(n) {
  if (typeof n !== "number" || isNaN(n)) return "—";
  return n + " d";
}

// Generic forgeI18n helpers for the screens that mix free-form text + amounts.
function _ms12_money(minor, currency, fallback) {
  const i18n = (typeof window !== "undefined") ? window.forgeI18n : null;
  if (i18n && typeof i18n.formatMoneyMinor === "function") {
    const out = i18n.formatMoneyMinor(minor, currency || "EUR");
    if (out) return out;
  }
  return fallback;
}
function _ms12_date(iso, fallback) {
  const i18n = (typeof window !== "undefined") ? window.forgeI18n : null;
  if (i18n && typeof i18n.formatDate === "function") {
    const out = i18n.formatDate(iso);
    if (out) return out;
  }
  return fallback || iso;
}

// ════════════════════════════════════════════════════════════════════
// S05 — Mittelstand RFQ intake (MAHLE 24-mill annual call-off)
// ════════════════════════════════════════════════════════════════════
function ScreenMittelstandRFQ() {
  // Customer + program
  const [customer, setCustomer] = uSMS12("MAHLE Industriebeteiligungen GmbH");
  const [shipTo,   setShipTo]   = uSMS12("MAHLE Werk Stuttgart-Cannstatt, DE");
  const [contract, setContract] = uSMS12("FRM-MAHLE-2025-09");
  const [revLevel, setRevLevel] = uSMS12("Rev D");

  // Run-size / batches
  const [totalUnits, setTotalUnits] = uSMS12(24);
  const [batch1Qty,  setBatch1Qty]  = uSMS12(12);
  const [batch2Qty,  setBatch2Qty]  = uSMS12(12);
  const [batch1Due,  setBatch1Due]  = uSMS12("2026-12-15");
  const [batch2Due,  setBatch2Due]  = uSMS12("2027-06-30");
  const [faiTarget,  setFaiTarget]  = uSMS12("2026-08-14");

  // Technical envelope — anchored to spec §1-3, 6
  const [axisX, setAxisX] = uSMS12(3000);  // X-stroke mm
  const [axisY, setAxisY] = uSMS12(2500);  // Y-stroke mm
  const [axisZ, setAxisZ] = uSMS12(1200);  // Z-stroke mm
  const [spindleRpm,  setSpindleRpm]  = uSMS12(24000);
  const [spindleHsk,  setSpindleHsk]  = uSMS12("HSK-A63");
  const [graniteFlat, setGraniteFlat] = uSMS12(3);   // µm — Rev D tightened
  const [vibLimit,    setVibLimit]    = uSMS12(0.8); // mm/s RMS @ 12k rpm

  // Compliance flags (multi-select per spec §7)
  const [ppap, setPpap]     = uSMS12(true);
  const [iatf, setIatf]     = uSMS12(true);
  const [iso23x, setIso23x] = uSMS12(true);
  const [ce, setCe]         = uSMS12(true);

  const [notes, setNotes] = uSMS12(
    "Annual frame contract, two FY-split batches. Rev D incorporates ECO-MS-0017 (granite flatness ±5 µm → ±3 µm, two-pass lap with re-grind between rough and finish). Three field returns on Rev C feeder mills (S/N 0089–0094) traced to vibration > 0.8 mm/s RMS during high-feed contouring; root cause confirmed at granite cross-beam. PPAP Level 3 re-submission required. MAHLE rep witness slot on FAI."
  );

  const [flash, setFlash] = uSMS12("");
  uEMS12(() => {
    if (!flash) return;
    const t = setTimeout(() => setFlash(""), 2400);
    return () => clearTimeout(t);
  }, [flash]);

  // Prior MAHLE call-offs against the same frame
  const priorRFQs = [
    // 2.8M EUR = 280,000,000 cents · 2.1M EUR = 210,000,000 cents · 820k EUR = 82,000,000 cents.
    { id: "RFQ-MAHLE-2024-06", date: "2024-06-10", program: "MTL-220 Rev B · 8-unit refresh",     qty: 8,  status: "won",  value: _ms12_money("280000000", "EUR", "€2.8M"),  note: "Rev B → C cut-over, no ECO" },
    { id: "RFQ-MAHLE-2024-11", date: "2024-11-21", program: "MTL-220 Rev C · 6-unit feeder",       qty: 6,  status: "won",  value: _ms12_money("210000000", "EUR", "€2.1M"),  note: "Three returns post-ship — vibration" },
    { id: "RFQ-MAHLE-2025-05", date: "2025-05-04", program: "MTL-220 Rev C · spindle re-stock",    qty: 4,  status: "lost", value: _ms12_money("82000000",  "EUR", "€820k"),  note: "Lost on lead-time (GMN 180 d)" },
  ];

  // Form atoms
  const fld = {
    width: "100%",
    height: 38,
    padding: "0 12px",
    fontFamily: MS12_FONT_UI,
    fontSize: 14,
    color: MS12_INK,
    background: MS12_BG,
    border: `1px solid ${MS12_LINE}`,
    borderRadius: 8,
    outline: "none",
  };
  const fldMono = Object.assign({}, fld, { fontFamily: MS12_FONT_MONO });
  const lbl = Object.assign({}, ms12Mono(), { display: "block", marginBottom: 6 });

  function onAdvance() {
    ms12Nav("/forge/matcher");
  }

  // Sum check — the two batches should tile the frame total
  const tileWarn = (batch1Qty + batch2Qty !== totalUnits);

  return (
    <div style={ms12Root()}>
      <div style={ms12Container()}>
        {ms12Header({
          eyebrow: "Forge · RFQ-INTAKE · MAHLE FRAME 2025-09",
          title: "Inbound RFQ — MAHLE 24-mill call-off",
          subtitle: "Capture envelope. Match performance. Open Rev D cost-out with ECO-MS-0017 roll-in.",
        })}

        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 24 }}>
          {/* ───── Form ───── */}
          {ms12Card({
            children: (
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
                  <div style={ms12Mono()}>RFQ-MAHLE-2025-09 · draft · frame call-off</div>
                  <div style={{ display: "flex", gap: 8 }}>
                    {ms12Pill({ tone: "amber",  children: "frame contract" })}
                    {ms12Pill({ tone: "blue",   children: "Tier-1 automotive" })}
                    {ms12Pill({ tone: "accent", children: "IATF 16949 PPAP-3" })}
                  </div>
                </div>

                {/* Customer block */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
                  <div>
                    <label style={lbl} htmlFor="fld-ms-1">Customer</label>
                    <input id="fld-ms-1" style={fld} value={customer} onChange={(e) => setCustomer(e.target.value)} />
                  </div>
                  <div>
                    <label style={lbl} htmlFor="fld-ms-2">Ship-to</label>
                    <input id="fld-ms-2" style={fld} value={shipTo} onChange={(e) => setShipTo(e.target.value)} />
                  </div>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 16 }}>
                  <div>
                    <label style={lbl} htmlFor="fld-ms-3">Frame contract</label>
                    <input id="fld-ms-3" style={fldMono} value={contract} onChange={(e) => setContract(e.target.value)} />
                  </div>
                  <div>
                    <label style={lbl} htmlFor="fld-ms-4">Engineering rev</label>
                    <select id="fld-ms-4" style={fld} value={revLevel} onChange={(e) => setRevLevel(e.target.value)}>
                      <option>Rev B</option>
                      <option>Rev C</option>
                      <option>Rev D</option>
                    </select>
                  </div>
                  <div>
                    <label style={lbl} htmlFor="fld-ms-5">FAI target date</label>
                    <input id="fld-ms-5" type="date" style={fldMono} value={faiTarget} onChange={(e) => setFaiTarget(e.target.value)} />
                  </div>
                </div>

                {/* Quantity / batches */}
                <div style={{
                  marginBottom: 16, padding: 14,
                  background: MS12_BG_2,
                  border: `1px solid ${MS12_LINE_S}`, borderRadius: 8,
                }}>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 12 })}>
                    Run size · two batches, FY-split
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 12 }}>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-6">Total units (frame)</label>
                      <input id="fld-ms-6" type="number" style={fldMono} value={totalUnits} onChange={(e) => setTotalUnits(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-7">Batch 1 qty</label>
                      <input id="fld-ms-7" type="number" style={fldMono} value={batch1Qty} onChange={(e) => setBatch1Qty(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-8">Batch 1 due</label>
                      <input id="fld-ms-8" type="date" style={fldMono} value={batch1Due} onChange={(e) => setBatch1Due(e.target.value)} />
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
                    <div />
                    <div>
                      <label style={lbl} htmlFor="fld-ms-9">Batch 2 qty</label>
                      <input id="fld-ms-9" type="number" style={fldMono} value={batch2Qty} onChange={(e) => setBatch2Qty(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-10">Batch 2 due</label>
                      <input id="fld-ms-10" type="date" style={fldMono} value={batch2Due} onChange={(e) => setBatch2Due(e.target.value)} />
                    </div>
                  </div>
                  {tileWarn && (
                    <div style={{
                      marginTop: 12, padding: 8,
                      background: MS12_BG_3,
                      border: `1px solid ${MS12_AMBER}`,
                      color: MS12_AMBER,
                      fontFamily: MS12_FONT_MONO, fontSize: 12,
                      borderRadius: 6,
                    }}>
                      batches do not tile the frame total — 12 + 12 expected, got {batch1Qty} + {batch2Qty} = {batch1Qty + batch2Qty}
                    </div>
                  )}
                </div>

                {/* Technical envelope */}
                <div style={{
                  marginBottom: 16, padding: 14,
                  background: MS12_BG_3,
                  border: `1px solid ${MS12_LINE_S}`, borderRadius: 8,
                }}>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 12 })}>
                    Technical envelope · MTL-220.00.00 axes & spindle
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 12 }}>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-11">X-axis stroke (mm)</label>
                      <input id="fld-ms-11" type="number" style={fldMono} value={axisX} onChange={(e) => setAxisX(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-12">Y-axis stroke (mm)</label>
                      <input id="fld-ms-12" type="number" style={fldMono} value={axisY} onChange={(e) => setAxisY(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-13">Z-axis stroke (mm)</label>
                      <input id="fld-ms-13" type="number" style={fldMono} value={axisZ} onChange={(e) => setAxisZ(Number(e.target.value))} />
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 12 }}>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-14">Spindle speed (rpm)</label>
                      <input id="fld-ms-14" type="number" style={fldMono} value={spindleRpm} onChange={(e) => setSpindleRpm(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-15">Spindle interface</label>
                      <select id="fld-ms-15" style={fldMono} value={spindleHsk} onChange={(e) => setSpindleHsk(e.target.value)}>
                        <option>HSK-A63</option>
                        <option>HSK-A100</option>
                        <option>BT-40</option>
                      </select>
                    </div>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-16">Surface plate flatness (µm)</label>
                      <input id="fld-ms-16" type="number" style={fldMono} value={graniteFlat} onChange={(e) => setGraniteFlat(Number(e.target.value))} />
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
                    <div>
                      <label style={lbl} htmlFor="fld-ms-17">Vibration limit (mm/s RMS @ 12k rpm)</label>
                      <input id="fld-ms-17" type="number" step="0.05" style={fldMono} value={vibLimit} onChange={(e) => setVibLimit(Number(e.target.value))} />
                    </div>
                    <div style={{ gridColumn: "span 2" }}>
                      <div style={lbl}>Anchor part numbers</div>
                      <div style={{
                        height: 38, padding: "0 12px", display: "flex", alignItems: "center", gap: 12,
                        fontFamily: MS12_FONT_MONO, fontSize: 12, color: MS12_INK_2,
                        background: MS12_BG, border: `1px solid ${MS12_LINE}`, borderRadius: 8,
                      }}>
                        <span>MTL-220.00.00</span>
                        <span style={{ color: MS12_INK_4 }}>·</span>
                        <span>50.01 (GMN spindle)</span>
                        <span style={{ color: MS12_INK_4 }}>·</span>
                        <span>10.01 (granite base)</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Compliance */}
                <div style={{ marginBottom: 16 }}>
                  <label style={lbl} htmlFor="fld-ms-comp-0">Compliance scope</label>
                  <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                    {[
                      { v: ppap,   set: setPpap,   l: "IATF 16949 PPAP Level 3" },
                      { v: iatf,   set: setIatf,   l: "ISO 9001:2015 §8.3 / §8.5.6" },
                      { v: iso23x, set: setIso23x, l: "EN ISO 230-1 / 230-2 acceptance" },
                      { v: ce,     set: setCe,     l: "CE / Machinery Directive 2006/42/EC" },
                    ].map((c, i) => (
                      <label key={c.l} htmlFor={`fld-ms-comp-${i}`} style={{
                        display: "inline-flex", alignItems: "center", gap: 8,
                        padding: "8px 12px",
                        background: MS12_BG_3,
                        border: `1px solid ${c.v ? MS12_ACCENT : MS12_LINE}`,
                        borderRadius: 6,
                        fontSize: 12, color: MS12_INK_2,
                        cursor: "pointer",
                      }}>
                        <input id={`fld-ms-comp-${i}`} type="checkbox" checked={c.v} onChange={(e) => c.set(e.target.checked)} />
                        <span>{c.l}</span>
                      </label>
                    ))}
                  </div>
                </div>

                <div style={{ marginBottom: 20 }}>
                  <label style={lbl} htmlFor="fld-ms-notes">Notes</label>
                  <textarea
                    id="fld-ms-notes"
                    style={Object.assign({}, fld, { height: 110, padding: "10px 12px", resize: "vertical", lineHeight: 1.55 })}
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                  />
                </div>

                {flash && (
                  <div style={{
                    marginBottom: 12, padding: 10,
                    background: MS12_BG_3,
                    border: `1px solid ${MS12_GOOD}`,
                    color: MS12_GOOD, borderRadius: 8,
                    fontFamily: MS12_FONT_MONO, fontSize: 12,
                  }}>{flash}</div>
                )}

                <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
                  {ms12Btn({ variant: "tertiary", onClick: () => setFlash("Draft saved · RFQ-MAHLE-2025-09 retained for review"), children: "Save draft" })}
                  {ms12Btn({ variant: "secondary", onClick: () => setFlash("Decline noted · MAHLE notified, frame remains open"), children: "Decline" })}
                  {ms12Btn({ variant: "primary",   onClick: onAdvance, children: "Match performance envelope →" })}
                </div>
              </div>
            ),
          })}

          {/* ───── Right rail ───── */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {ms12Card({
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 14 })}>MAHLE · prior call-offs</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                    {priorRFQs.map((r) => {
                      const tone = r.status === "won" ? "good" : r.status === "lost" ? "bad" : "amber";
                      return (
                        <div key={r.id} style={{
                          borderTop: `1px solid ${MS12_LINE_S}`,
                          paddingTop: 12,
                        }}>
                          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                            <span style={{ fontFamily: MS12_FONT_MONO, fontSize: 12, color: MS12_INK }}>{r.id}</span>
                            {ms12Pill({ tone: tone, children: r.status })}
                          </div>
                          <div style={{ fontSize: 13, color: MS12_INK_2, marginBottom: 4 }}>
                            {r.program} · <span style={{ fontFamily: MS12_FONT_MONO }}>{r.qty}</span> units · <span style={{ fontFamily: MS12_FONT_MONO }}>{r.value}</span>
                          </div>
                          <div style={{ fontSize: 12, color: MS12_INK_4 }}>
                            {_ms12_date(r.date, r.date)} — {r.note}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ),
            })}

            {ms12Card({
              style: { background: MS12_BG_2 },
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 10 })}>Heuristic preview</div>
                  <div style={{ fontFamily: MS12_FONT_SERIF, fontSize: 16, color: MS12_INK, marginBottom: 8 }}>
                    24 × MTL-220.00.00 Rev D · 5-axis bridge mill
                  </div>
                  <div style={{ fontSize: 12, color: MS12_INK_3, lineHeight: 1.6 }}>
                    Likely match: <b style={{ color: MS12_INK }}>MTL-220</b> Rev D against MAHLE machining-cell envelope. ECO-MS-0017 raises granite flatness from <span style={{ fontFamily: MS12_FONT_MONO }}>±5 µm</span> to <span style={{ fontFamily: MS12_FONT_MONO }}>±3 µm</span>; net program slip <span style={{ fontFamily: MS12_FONT_MONO }}>0 d</span> — GMN spindle remains critical at <span style={{ fontFamily: MS12_FONT_MONO }}>180 d</span>.
                  </div>
                </div>
              ),
            })}

            {ms12Card({
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 10 })}>Field-return context</div>
                  <div style={{ fontSize: 12, color: MS12_INK_2, lineHeight: 1.6, marginBottom: 8 }}>
                    Three Rev C feeder mills (S/N <span style={{ fontFamily: MS12_FONT_MONO }}>0089–0094</span>) returned with vibration above the <span style={{ fontFamily: MS12_FONT_MONO }}>0.8 mm/s RMS</span> limit during high-feed contouring at <span style={{ fontFamily: MS12_FONT_MONO }}>12k rpm</span>. Root cause traced to granite cross-beam flatness drift.
                  </div>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                    {ms12Pill({ tone: "bad", children: "3 returns" })}
                    {ms12Pill({ tone: "amber", children: "ECO-MS-0017 open" })}
                    {ms12Pill({ tone: "default", children: "CAPA pending" })}
                  </div>
                </div>
              ),
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// S06 — Performance match: MTL-220 vs DMG Mori DMU 75 monoBLOCK
// ════════════════════════════════════════════════════════════════════
function ScreenMittelstandMatcher() {
  // Filter state — selectors mutate row visibility
  const [boreFilter,    setBoreFilter]    = uSMS12("HSK-A63");
  const [strokeFilter,  setStrokeFilter]  = uSMS12("≥3000");
  const [costFilter,    setCostFilter]    = uSMS12("any");
  const [leadFilter,    setLeadFilter]    = uSMS12("any");

  // Side-by-side comparison rows.
  // visibleWhen describes which filter values keep the row in view.
  // The MTL-220 column is the proposal; DMU 75 monoBLOCK is the ref bench.
  const compareRows = [
    {
      key: "axis-stroke",
      label: "Axis stroke (X / Y / Z, mm)",
      mtl:    "3000 / 2500 / 1200",
      dmu:    "750 / 600 / 520",
      note:   "MAHLE envelope demands 3 m gantry travel — DMU 75 monoBLOCK is shop-class only",
      visibleWhen: { stroke: ["≥3000", "any"] },
    },
    {
      key: "spindle-rpm",
      label: "Spindle speed (rpm)",
      mtl:    "24,000",
      dmu:    "20,000 (HSC option)",
      note:   "Both clear the high-feed contouring envelope",
      visibleWhen: { bore: ["HSK-A63", "any"] },
    },
    {
      key: "spindle-iface",
      label: "Spindle interface",
      mtl:    "HSK-A63",
      dmu:    "HSK-A63 / HSK-A100 (opt)",
      note:   "MAHLE tooling carryover requires HSK-A63",
      visibleWhen: { bore: ["HSK-A63", "any"] },
    },
    {
      key: "surface-plate",
      label: "Surface plate flatness (µm)",
      mtl:    "±3 µm (Rev D, ECO-MS-0017)",
      dmu:    "±5 µm",
      note:   "Rev D tightens flatness by 2 µm, two-pass lap with re-grind",
      visibleWhen: { bore: ["any", "HSK-A63"] },
    },
    {
      key: "vibration",
      label: "Vibration acceptance (mm/s RMS @ 12k rpm)",
      mtl:    "0.8",
      dmu:    "1.2",
      note:   "Rev C field returns drove the tighter Mittelstand limit",
      visibleWhen: {},
    },
    {
      key: "control",
      label: "Control system",
      mtl:    "Heidenhain TNC 640 + LC 415 encoder",
      dmu:    "Siemens 840D sl",
      note:   "MAHLE shop-floor MES is Heidenhain-native",
      visibleWhen: {},
    },
    {
      key: "atc",
      label: "ATC tool magazine",
      mtl:    "24-pocket carousel (DMG Mori OEM)",
      dmu:    "30 / 60 / 80 chain (config)",
      note:   "Both adequate for MAHLE part program library",
      visibleWhen: {},
    },
    {
      key: "rotary",
      label: "A/C tilting head",
      mtl:    "Kessler · direct-drive torque",
      dmu:    "DMG Mori monoBLOCK integral",
      note:   "Direct-drive eliminates the gearbox path Rev B used",
      visibleWhen: {},
    },
    {
      key: "fai",
      label: "FAI / acceptance protocol",
      mtl:    "ISO 230-2 + IATF PPAP-3",
      dmu:    "ISO 230-2 (no PPAP)",
      note:   "PPAP-3 mandatory for MAHLE Tier-1 supply",
      visibleWhen: {},
    },
    {
      key: "lead-time",
      label: "Lead time (days, end-to-end)",
      mtl:    "252 d (GMN spindle critical)",
      dmu:    "180 d (catalog stock)",
      note:   "GMN spindle 180 d sets MTL-220 critical path",
      visibleWhen: { lead: ["any", "≥180"] },
    },
    {
      key: "cost-unit",
      label: "Unit cost (€)",
      mtl:    _ms12_money("24750000", "EUR", "€247,500"),
      dmu:    _ms12_money("31200000", "EUR", "€312,000"),
      note:   "Rev D ECO roll-in adds " + _ms12_money("82000", "EUR", "€820") + " / unit",
      visibleWhen: { cost: ["any", "≤€300k"] },
    },
    {
      key: "frame",
      label: "Frame contract eligibility",
      mtl:    "Yes — 24-unit annual frame, two batches",
      dmu:    "No — catalog only, list-price",
      note:   "Frame economics are the structural moat",
      visibleWhen: {},
    },
  ];

  function isRowVisible(row) {
    const v = row.visibleWhen || {};
    if (v.bore && v.bore.indexOf(boreFilter) === -1)       return false;
    if (v.stroke && v.stroke.indexOf(strokeFilter) === -1) return false;
    if (v.cost && v.cost.indexOf(costFilter) === -1)       return false;
    if (v.lead && v.lead.indexOf(leadFilter) === -1)       return false;
    return true;
  }

  const visibleRows = compareRows.filter(isRowVisible);

  // Top-line scoring tile
  const score = useMemo_safe(() => {
    let mtl = 0, dmu = 0;
    if (strokeFilter === "≥3000") mtl += 30;
    if (boreFilter === "HSK-A63") mtl += 15;
    if (costFilter !== "any")     mtl += 20;
    mtl += visibleRows.length * 3;
    dmu = Math.max(20, 60 - visibleRows.length * 2);
    return { mtl: Math.min(99, 60 + mtl), dmu: Math.max(20, dmu) };
  }, [boreFilter, strokeFilter, costFilter, leadFilter, visibleRows.length]);

  function FilterButtons(props) {
    return (
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {props.options.map((opt) => (
          <button
            key={opt}
            onClick={() => props.onChange(opt)}
            style={Object.assign({}, ms12RowBtn(), {
              background: props.value === opt ? MS12_INK : MS12_BG_3,
              color:      props.value === opt ? MS12_BG  : MS12_INK_2,
              borderColor: props.value === opt ? MS12_INK : MS12_LINE,
            })}
          >{opt}</button>
        ))}
      </div>
    );
  }

  return (
    <div style={ms12Root()}>
      <div style={ms12Container()}>
        {ms12Header({
          eyebrow: "Forge · MATCHER · MTL-220 ↔ DMU 75 monoBLOCK",
          title: "Performance match — MAHLE 24-mill envelope",
          subtitle: "Bench MTL-220 Rev D against DMG Mori DMU 75 monoBLOCK across the MAHLE machining-cell envelope.",
        })}

        <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 24 }}>
          {/* ───── Sidebar filters ───── */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {ms12Card({
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 14 })}>Filters</div>

                  <div style={{ marginBottom: 14 }}>
                    <div style={Object.assign({}, ms12Mono(), { fontSize: 12, marginBottom: 6 })}>Spindle bore</div>
                    <FilterButtons options={["any", "HSK-A63", "HSK-A100", "BT-40"]} value={boreFilter} onChange={setBoreFilter} />
                  </div>

                  <div style={{ marginBottom: 14 }}>
                    <div style={Object.assign({}, ms12Mono(), { fontSize: 12, marginBottom: 6 })}>X-stroke</div>
                    <FilterButtons options={["any", "≥3000", "≥2000", "≥1000"]} value={strokeFilter} onChange={setStrokeFilter} />
                  </div>

                  <div style={{ marginBottom: 14 }}>
                    <div style={Object.assign({}, ms12Mono(), { fontSize: 12, marginBottom: 6 })}>Unit cost ceiling</div>
                    <FilterButtons options={["any", "≤€250k", "≤€300k", "≤€400k"]} value={costFilter} onChange={setCostFilter} />
                  </div>

                  <div>
                    <div style={Object.assign({}, ms12Mono(), { fontSize: 12, marginBottom: 6 })}>Lead time band</div>
                    <FilterButtons options={["any", "≤180", "≥180", "≥240"]} value={leadFilter} onChange={setLeadFilter} />
                  </div>
                </div>
              ),
            })}

            {ms12Card({
              style: { background: MS12_BG_2 },
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 8 })}>Match score</div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 6, alignItems: "baseline", marginBottom: 6 }}>
                    <span style={{ fontSize: 12, color: MS12_INK_2 }}>MTL-220 Rev D</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, fontSize: 18, color: MS12_GOOD, fontWeight: 600 }}>{score.mtl}</span>
                    <span style={{ fontSize: 12, color: MS12_INK_2 }}>DMU 75 monoBLOCK</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, fontSize: 18, color: MS12_INK_3 }}>{score.dmu}</span>
                  </div>
                  <div style={{ fontSize: 12, color: MS12_INK_4, marginTop: 4 }}>
                    {visibleRows.length} of {compareRows.length} comparison rows under current filters
                  </div>
                </div>
              ),
            })}

            {ms12Card({
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 10 })}>Critical path</div>
                  <div style={{ fontSize: 12, color: MS12_INK_2, lineHeight: 1.6 }}>
                    GMN main spindle (<span style={{ fontFamily: MS12_FONT_MONO }}>50.01</span>) at <span style={{ fontFamily: MS12_FONT_MONO }}>180 d</span> sets the program critical path. ECO-MS-0017 adds <span style={{ fontFamily: MS12_FONT_MONO }}>+11 d</span> on the granite path; net program slip <span style={{ fontFamily: MS12_FONT_MONO }}>0 d</span>.
                  </div>
                </div>
              ),
            })}
          </div>

          {/* ───── Comparison matrix ───── */}
          {ms12Card({
            style: { overflow: "auto" },
            children: (
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                  <div style={ms12Mono()}>comparison matrix · {visibleRows.length} / {compareRows.length} rows</div>
                  <div style={{ display: "flex", gap: 8 }}>
                    {ms12Pill({ tone: "good", children: "winner: MTL-220 Rev D" })}
                    {ms12Pill({ tone: "default", children: "ref: DMU 75 monoBLOCK" })}
                  </div>
                </div>

                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
                  <thead>
                    <tr style={{ background: MS12_BG_2 }}>
                      <th style={ms12HeadCell()}>Dimension</th>
                      <th style={Object.assign({}, ms12HeadCell(), { background: MS12_BG_3, borderLeft: `2px solid ${MS12_GOOD}` })}>
                        MTL-220 Rev D
                      </th>
                      <th style={Object.assign({}, ms12HeadCell(), { background: MS12_BG_2 })}>
                        DMG Mori DMU 75 monoBLOCK
                      </th>
                      <th style={ms12HeadCell()}>Note</th>
                    </tr>
                  </thead>
                  <tbody>
                    {visibleRows.map((row) => (
                      <tr key={row.key} style={{ borderBottom: `1px solid ${MS12_LINE_S}` }}>
                        <td style={Object.assign({}, ms12BodyCell(), { color: MS12_INK_2, fontWeight: 500 })}>
                          {row.label}
                        </td>
                        <td style={Object.assign({}, ms12BodyCell(), {
                          fontFamily: MS12_FONT_MONO,
                          color: MS12_INK,
                          background: MS12_BG_3,
                          borderLeft: `2px solid ${MS12_GOOD}`,
                          fontWeight: 600,
                        })}>
                          {row.mtl}
                        </td>
                        <td style={Object.assign({}, ms12BodyCell(), {
                          fontFamily: MS12_FONT_MONO,
                          color: MS12_INK_3,
                        })}>
                          {row.dmu}
                        </td>
                        <td style={Object.assign({}, ms12BodyCell(), { color: MS12_INK_3, fontSize: 12 })}>
                          {row.note}
                        </td>
                      </tr>
                    ))}
                    {visibleRows.length === 0 && (
                      <tr>
                        <td colSpan={4} style={Object.assign({}, ms12BodyCell(), {
                          textAlign: "center",
                          color: MS12_INK_4,
                          fontSize: 12,
                          padding: "32px 12px",
                        })}>
                          no rows match the current filter selection
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>

                {/* ───── Selected configuration card ───── */}
                <div style={{
                  marginTop: 24, padding: 18,
                  background: MS12_BG_2,
                  border: `1px solid ${MS12_ACCENT}`,
                  borderRadius: 10,
                }}>
                  <div style={Object.assign({}, ms12Mono(), { color: MS12_ACCENT, marginBottom: 8 })}>
                    Selected configuration
                  </div>
                  <div style={{ fontFamily: MS12_FONT_SERIF, fontSize: 18, color: MS12_INK, marginBottom: 6 }}>
                    MTL-220 Rev D · 24-unit MAHLE frame · ECO-MS-0017 incorporated
                  </div>
                  <div style={{ fontSize: 13, color: MS12_INK_2, lineHeight: 1.6, marginBottom: 10 }}>
                    GMN HSK-A63 spindle at <span style={{ fontFamily: MS12_FONT_MONO }}>24,000 rpm</span>. Heidenhain TNC 640 control. Granite base flatness <span style={{ fontFamily: MS12_FONT_MONO }}>±3 µm</span> per Rev D. Two-batch FY-split delivery — <span style={{ fontFamily: MS12_FONT_MONO }}>12 + 12</span>. Critical path on spindle long-lead; net program slip <span style={{ fontFamily: MS12_FONT_MONO }}>0 d</span>.
                  </div>
                  <div style={{ display: "flex", gap: 10 }}>
                    {ms12Btn({ variant: "primary",   onClick: () => ms12Nav("/forge/carryover"), children: "Open carryover (Rev C → Rev D) →" })}
                    {ms12Btn({ variant: "tertiary",  onClick: () => ms12Nav("/forge/quote"),     children: "Cost-out quote" })}
                    {ms12Btn({ variant: "tertiary",  onClick: () => ms12Nav("/forge/rfq"),       children: "← back to RFQ" })}
                  </div>
                </div>
              </div>
            ),
          })}
        </div>
      </div>
    </div>
  );
}

// React.useMemo wrapper — keeps the file readable in Babel-standalone where
// useMemo is destructured under an alias above.
function useMemo_safe(fn, deps) {
  return uMMS12(fn, deps);
}

// ════════════════════════════════════════════════════════════════════
// S10 — Carryover diff: MTL-220 Rev C → Rev D (ECO-MS-0017 highlighted)
// ════════════════════════════════════════════════════════════════════
function ScreenMittelstandCarryover() {
  const [flash, setFlash] = uSMS12("");
  uEMS12(() => {
    if (!flash) return;
    const t = setTimeout(() => setFlash(""), 2400);
    return () => clearTimeout(t);
  }, [flash]);

  // BOM-line carryover. status: "same" | "swap" | "added" | "removed"
  // The two granite rows (10.01, 10.02) are the ECO-MS-0017 anchor pair.
  const rows = [
    { pn: "MTL-220.10.00", desc: "Granite-bed substructure",          lhs: "10.00 / Rev C / ±5 µm",           rhs: "10.00 / Rev D / ±3 µm",           status: "swap",    eco: true,  note: "ECO-MS-0017 — flatness tightened" },
    { pn: "MTL-220.10.01", desc: "Granite base block",                 lhs: "GR-BASE-C · ±5 µm · single lap", rhs: "GR-BASE-D · ±3 µm · 2-pass lap", status: "swap",    eco: true,  note: "ECO-MS-0017 — re-grind between rough & finish" },
    { pn: "MTL-220.10.02", desc: "Granite cross-beam",                 lhs: "GR-XB-C · ±5 µm",                rhs: "GR-XB-D · ±3 µm",                status: "swap",    eco: true,  note: "ECO-MS-0017 — root cause of S/N 0089–0094 returns" },
    { pn: "MTL-220.10.04", desc: "Lapping plate (granite cell tooling)",lhs: "LP-2000 (existing)",            rhs: "LP-2000 + RG-RGRIND-A",          status: "added",   eco: true,  note: "Re-grind plate added between rough & finish ops" },
    { pn: "MTL-220.20.00", desc: "X-axis carriage assy",               lhs: "20.00 / Rev C",                  rhs: "20.00 / Rev C",                  status: "same",    eco: false, note: "" },
    { pn: "MTL-220.20.04", desc: "X-axis linear guideway (Bosch)",     lhs: "BR-LG-65-X · 3000 mm",           rhs: "BR-LG-65-X · 3000 mm",           status: "same",    eco: false, note: "" },
    { pn: "MTL-220.30.00", desc: "Y-axis bridge assy",                 lhs: "30.00 / Rev C",                  rhs: "30.00 / Rev C",                  status: "same",    eco: false, note: "" },
    { pn: "MTL-220.30.04", desc: "Y-axis linear guideway (Bosch)",     lhs: "BR-LG-65-Y · 2500 mm",           rhs: "BR-LG-65-Y · 2500 mm",           status: "same",    eco: false, note: "" },
    { pn: "MTL-220.40.00", desc: "Z-axis ram assy",                    lhs: "40.00 / Rev C",                  rhs: "40.00 / Rev C",                  status: "same",    eco: false, note: "" },
    { pn: "MTL-220.40.04", desc: "Z-axis ball-screw (Bosch)",          lhs: "BR-BS-50-Z · 1200 mm",           rhs: "BR-BS-50-Z · 1200 mm",           status: "same",    eco: false, note: "" },
    { pn: "MTL-220.50.00", desc: "A/C tilting head — Kessler",         lhs: "KESSLER-AC-160 / Rev B",         rhs: "KESSLER-AC-160 / Rev B",         status: "same",    eco: false, note: "" },
    { pn: "MTL-220.50.01", desc: "Main spindle — GMN HSK-A63 24k rpm", lhs: "GMN-HSK63-24k",                  rhs: "GMN-HSK63-24k",                  status: "same",    eco: false, note: "180 d lead — critical path" },
    { pn: "MTL-220.50.02", desc: "C-axis rotary direct drive — Siemens",lhs: "SIE-DDR-C-160",                 rhs: "SIE-DDR-C-160",                  status: "same",    eco: false, note: "Direct-drive (no gearbox)" },
    { pn: "MTL-220.60.00", desc: "ATC carousel (24-pocket) — DMG Mori",lhs: "DMG-ATC-24",                     rhs: "DMG-ATC-24",                     status: "same",    eco: false, note: "" },
    { pn: "MTL-220.70.00", desc: "Control cabinet — Heidenhain TNC 640",lhs: "HEI-TNC640-A",                  rhs: "HEI-TNC640-A",                   status: "same",    eco: false, note: "" },
    { pn: "MTL-220.70.04", desc: "Linear encoder — Heidenhain LC 415", lhs: "HEI-LC-415-A",                   rhs: "HEI-LC-415-A",                   status: "same",    eco: false, note: "" },
    { pn: "MTL-220.80.00", desc: "Coolant & chip mgmt unit",           lhs: "CL-V2",                          rhs: "CL-V2",                          status: "same",    eco: false, note: "" },
    { pn: "MTL-220.80.02", desc: "Coolant filter cartridge",           lhs: "CL-FLT-25µ",                     rhs: "CL-FLT-10µ",                     status: "swap",    eco: false, note: "Tightened to 10 µm to match granite tolerance" },
    { pn: "MTL-220.90.00", desc: "Machine enclosure",                  lhs: "ENCL-A",                         rhs: "ENCL-A",                         status: "same",    eco: false, note: "" },
    { pn: "MTL-220.99.01", desc: "Vibration dampening pad set (legacy)",lhs: "VDP-RUBBER-V1",                 rhs: null,                             status: "removed", eco: false, note: "Obsoleted — granite mass uplift makes them ineffective" },
    { pn: "MTL-220.10.99", desc: "Granite metrology gauge ID",         lhs: null,                             rhs: "ZEISS-UPMC-CMM-2026",            status: "added",   eco: true,  note: "ECO-MS-0017 — extra metrology pass mandated" },
  ];

  const swapCount    = rows.filter((r) => r.status === "swap").length;
  const sameCount    = rows.filter((r) => r.status === "same").length;
  const addedCount   = rows.filter((r) => r.status === "added").length;
  const removedCount = rows.filter((r) => r.status === "removed").length;
  const ecoCount     = rows.filter((r) => r.eco).length;
  const carryoverPct = Math.round((sameCount / rows.length) * 100);

  function statusStyle(s, eco) {
    if (eco)             return { bg: MS12_BG_2,  fg: MS12_AMBER, label: s };
    if (s === "swap")    return { bg: MS12_BG_3,  fg: MS12_AMBER, label: "swap" };
    if (s === "added")   return { bg: MS12_BG_3,  fg: MS12_GOOD,  label: "added" };
    if (s === "removed") return { bg: MS12_BG_3,  fg: MS12_BAD,   label: "removed" };
    return                       { bg: MS12_BG,   fg: MS12_INK_4, label: "same" };
  }

  return (
    <div style={ms12Root()}>
      <div style={ms12Container()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 24 }}>
          {ms12Header({
            eyebrow: "Forge · CARRYOVER · MTL-220 Rev C → Rev D",
            title: "Design carryover · MTL-220 Rev C → Rev D",
            subtitle: `Predecessor on left, current on right. ${swapCount} swaps · ${addedCount} adds · ${removedCount} removed · ${ecoCount} lines under ECO-MS-0017.`,
          })}
          <div style={{ display: "flex", gap: 10 }}>
            {ms12Btn({ variant: "tertiary", onClick: () => setFlash("Re-derive against Rev B baseline · scoped"), children: "Re-derive from Rev B" })}
          </div>
        </div>

        {flash && (
          <div style={{
            marginBottom: 16, padding: 12,
            background: MS12_BG_3,
            border: `1px solid ${MS12_GOOD}`,
            color: MS12_GOOD, borderRadius: 8,
            fontFamily: MS12_FONT_MONO, fontSize: 12,
          }}>{flash}</div>
        )}

        {/* summary tiles */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, marginBottom: 24 }}>
          {[
            { l: "carryover",  v: `${carryoverPct}%`,    sub: `${sameCount} of ${rows.length} lines` , tone: "default" },
            { l: "swapped",    v: swapCount,    sub: "form-fit-function delta", tone: "amber"   },
            { l: "added",      v: addedCount,   sub: "new line items",          tone: "good"    },
            { l: "removed",    v: removedCount, sub: "obsoleted",               tone: "bad"     },
            { l: "ECO-MS-0017",v: ecoCount,     sub: "lines under change",      tone: "amber"   },
          ].map((t) => (
            <div key={t.l}>
              {ms12Card({
                style: { padding: 16 },
                children: (
                  <div>
                    <div style={Object.assign({}, ms12Mono(), { marginBottom: 6 })}>{t.l}</div>
                    <div style={{ fontFamily: MS12_FONT_SERIF, fontSize: 30, color: MS12_INK }}>{t.v}</div>
                    <div style={{ fontSize: 12, color: MS12_INK_3, marginTop: 4 }}>{t.sub}</div>
                  </div>
                ),
              })}
            </div>
          ))}
        </div>

        {/* diff table */}
        {ms12Card({
          style: { overflow: "auto", padding: 0 },
          children: (
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
              <thead>
                <tr style={{ background: MS12_BG_2 }}>
                  <th style={ms12HeadCell()}>P/N</th>
                  <th style={ms12HeadCell()}>Description</th>
                  <th style={Object.assign({}, ms12HeadCell(), { background: MS12_BG_3 })}>
                    Rev C (predecessor)
                  </th>
                  <th style={Object.assign({}, ms12HeadCell(), { background: MS12_BG_2, borderLeft: `2px solid ${MS12_ACCENT}` })}>
                    Rev D (current)
                  </th>
                  <th style={ms12HeadCell()}>status</th>
                  <th style={ms12HeadCell()}>note</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => {
                  const s = statusStyle(r.status, r.eco);
                  const dim = r.status === "same";
                  const baseColor = dim ? MS12_INK_4 : MS12_INK;
                  return (
                    <tr key={r.pn} style={{
                      background: s.bg,
                      borderTop: `1px solid ${MS12_LINE_S}`,
                      color: baseColor,
                      borderLeft: r.eco ? `3px solid ${MS12_AMBER}` : "3px solid transparent",
                    }}>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO, fontWeight: r.eco ? 600 : 400 })}>{r.pn}</td>
                      <td style={ms12BodyCell()}>{r.desc}</td>
                      <td style={Object.assign({}, ms12BodyCell(), {
                        fontFamily: MS12_FONT_MONO,
                        color: r.status === "removed" ? MS12_BAD : baseColor,
                      })}>
                        {r.lhs || <span style={{ color: MS12_INK_4 }}>—</span>}
                      </td>
                      <td style={Object.assign({}, ms12BodyCell(), {
                        fontFamily: MS12_FONT_MONO,
                        color: r.status === "added" ? MS12_GOOD : baseColor,
                        borderLeft: `2px solid ${MS12_ACCENT}`,
                      })}>
                        {r.rhs || <span style={{ color: MS12_INK_4 }}>—</span>}
                      </td>
                      <td style={ms12BodyCell()}>
                        <span style={{
                          fontFamily: MS12_FONT_MONO, fontSize: 12,
                          letterSpacing: "0.06em", textTransform: "uppercase",
                          color: s.fg,
                        }}>{s.label}{r.eco ? " · ECO" : ""}</span>
                      </td>
                      <td style={Object.assign({}, ms12BodyCell(), { color: MS12_INK_3, fontSize: 12 })}>{r.note}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          ),
        })}

        {/* ECO-MS-0017 banner — net effect + open ECO CTA */}
        <div style={{
          marginTop: 24, padding: 20,
          background: MS12_BG_2,
          border: `1px solid ${MS12_AMBER}`,
          borderRadius: 10,
          display: "grid", gridTemplateColumns: "1fr auto", gap: 18, alignItems: "center",
        }}>
          <div>
            <div style={Object.assign({}, ms12Mono(), { color: MS12_AMBER, marginBottom: 6 })}>
              ECO-MS-0017 · granite flatness tightening
            </div>
            <div style={{ fontFamily: MS12_FONT_SERIF, fontSize: 22, color: MS12_INK, marginBottom: 4 }}>
              Net cost delta · <span style={{ fontFamily: MS12_FONT_MONO }}>+{_ms12_money("82000", "EUR", "€820")}</span> / unit · <span style={{ fontFamily: MS12_FONT_MONO }}>+{_ms12_money("1968000", "EUR", "€19,680")}</span> over 24-unit batch
            </div>
            <div style={{ fontSize: 13, color: MS12_INK_2, lineHeight: 1.6 }}>
              Engineering ✓ R. Vogt · Manufacturing ✓ D. Becker · Quality ⚠ awaiting CMM gauge R&R · Sign-off pending Quality. Lead-time delta <span style={{ fontFamily: MS12_FONT_MONO }}>+11 d</span> on granite path; net program slip <span style={{ fontFamily: MS12_FONT_MONO }}>0 d</span> (GMN spindle remains critical at <span style={{ fontFamily: MS12_FONT_MONO }}>180 d</span>).
            </div>
          </div>
          {ms12Btn({ variant: "primary", onClick: () => ms12Nav("/build/eco"), children: "Open ECO-MS-0017 →" })}
        </div>

        {/* footer nav */}
        <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", gap: 10 }}>
          {ms12Btn({ variant: "tertiary", onClick: () => ms12Nav("/forge/matcher"), children: "← back to matcher" })}
          {ms12Btn({ variant: "primary",  onClick: () => ms12Nav("/forge/quote"),   children: "Roll into quote builder →" })}
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// S14 — Quote builder · 24-unit MAHLE · ECO-MS-0017 cost roll-in
// ════════════════════════════════════════════════════════════════════
function ScreenMittelstandQuote() {
  // Margin model — Mittelstand reads tighter than pump-CDMO; defaults 14% / 2%
  const [marginPct,  setMarginPct]  = uSMS12(14);
  const [freightPct, setFreightPct] = uSMS12(2);
  const [includeEco, setIncludeEco] = uSMS12(true);

  const [flash, setFlash] = uSMS12("");
  const mountedRef = uRMS12(true);
  uEMS12(() => {
    mountedRef.current = true;
    return () => { mountedRef.current = false; };
  }, []);
  uEMS12(() => {
    if (!flash) return;
    const t = setTimeout(() => { if (mountedRef.current) setFlash(""); }, 2400);
    return () => clearTimeout(t);
  }, [flash]);

  // ── Cost stack (€/unit), per spec §3 BOM and §6 ECO delta ─────────
  // Direct spend on the 10 anchor rows from §3:
  const baseLines = [
    { pn: "10.00", name: "Granite-bed substructure",            sup: "in-house",   lead: 75,  cost:  48000 },
    { pn: "20.00", name: "X-axis carriage assy",                sup: "in-house",   lead: 60,  cost:  36500 },
    { pn: "30.00", name: "Y-axis bridge assy",                  sup: "in-house",   lead: 65,  cost:  42000 },
    { pn: "40.00", name: "Z-axis ram assy",                     sup: "in-house",   lead: 60,  cost:  38500 },
    { pn: "50.00", name: "A/C tilting head (Kessler)",          sup: "Kessler",    lead: 90,  cost:  86000 },
    { pn: "50.01", name: "Main spindle · HSK-A63 24k rpm (GMN)",sup: "GMN",        lead: 180, cost:  32000 },
    { pn: "60.00", name: "ATC carousel (24-pocket, DMG Mori)",  sup: "DMG Mori",   lead: 55,  cost:  24500 },
    { pn: "70.00", name: "Control cabinet · Heidenhain TNC 640",sup: "Heidenhain", lead: 45,  cost:  52000 },
    { pn: "80.00", name: "Coolant & chip mgmt unit",            sup: "in-house",   lead: 35,  cost:  18000 },
    { pn: "90.00", name: "Machine enclosure",                   sup: "in-house",   lead: 40,  cost:  22000 },
  ];

  const partCostPerUnit = baseLines.reduce(function (a, b) { return a + b.cost; }, 0); // €399,500
  const labourPerUnit   = 38000;   // assembly + alignment + acceptance
  const overheadPerUnit = 22000;   // factory burden, IATF / ISO compliance, FAI gen
  const ecoDelta        = includeEco ? 820 : 0;  // ECO-MS-0017 +€820 / unit

  // Compose unit cost — §6 says €820/unit, but the headline quote line is
  // €247,500 (a price point, not a cost). The cost stack here represents
  // direct spend; the quote line is set by the customer-facing list price.
  const unitCostStack   = partCostPerUnit + labourPerUnit + overheadPerUnit + ecoDelta;
  const freightPerUnit  = Math.round(unitCostStack * (freightPct / 100));
  const subtotal        = unitCostStack + freightPerUnit;

  // The MAHLE list price is the §3 anchor — €247,500 / unit for the 24-unit
  // run. We render this as the customer-facing line and break out gross
  // margin against the cost stack so the operator sees the bridge.
  const listPriceUnit   = 247500;
  const grossMarginUnit = listPriceUnit - subtotal;
  const grossMarginPctActual = subtotal > 0 ? (grossMarginUnit / subtotal) * 100 : 0;

  // The margin slider biases the *displayed* unit price for what-if runs;
  // when the operator drags margin up, the price tile rises while the cost
  // stack remains anchored.
  const whatIfPriceUnit = Math.round(subtotal * (1 + marginPct / 100));
  const totalRunQty     = 24;
  const totalListValue  = listPriceUnit * totalRunQty;
  const totalWhatIfVal  = whatIfPriceUnit * totalRunQty;

  // Critical-path lead time — GMN spindle 180 d, +72 d downstream = 252 d.
  // ECO-MS-0017 +11 d on granite path absorbed (granite at 75 d + 11 d still
  // shorter than spindle critical path).
  const leadCriticalPath = 252;

  function send() {
    setFlash("Quote dispatched to MAHLE Procurement · ledger event QUOTE_SENT recorded");
    setTimeout(function () {
      if (mountedRef.current) ms12Nav("/auditor/ledger");
    }, 700);
  }

  return (
    <div style={ms12Root()}>
      <div style={ms12Container()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 24 }}>
          {ms12Header({
            eyebrow: "Forge · QUOTE-BUILDER · MAHLE 24-MILL FRAME",
            title: "Quote — MAHLE · 24 × MTL-220 Rev D",
            subtitle: "Two-batch FY-split. ECO-MS-0017 cost roll-in shown line-item. Critical path 252 d on GMN spindle.",
          })}
          <div style={{ display: "flex", gap: 8 }}>
            {ms12Btn({ variant: "tertiary", onClick: () => setFlash("Draft saved · QT-MS-2026-0017 retained"),  children: "Save draft" })}
            {ms12Btn({ variant: "tertiary", onClick: () => setFlash("PDF render queued · IATF traveler bundle"), children: "Download PDF" })}
            {ms12Btn({ variant: "tertiary", onClick: () => setFlash("Email composed · MAHLE Procurement"),       children: "Send via email" })}
          </div>
        </div>

        {flash && (
          <div style={{
            marginBottom: 16, padding: 12,
            background: MS12_BG_3,
            border: `1px solid ${MS12_GOOD}`,
            color: MS12_GOOD, borderRadius: 8,
            fontFamily: MS12_FONT_MONO, fontSize: 12,
          }}>{flash}</div>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24 }}>
          {/* ───── Quote sheet ───── */}
          {ms12Card({
            style: { padding: 36, background: "white" },
            children: (
              <div>
                {/* Letterhead */}
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "flex-start",
                  paddingBottom: 18, borderBottom: `2px solid ${MS12_INK}`,
                }}>
                  <div>
                    <div style={{
                      fontFamily: MS12_FONT_SERIF, fontSize: 28,
                      letterSpacing: "-0.02em", color: MS12_INK,
                    }}>
                      Mittelstand-pilot Werkzeugbau GmbH
                    </div>
                    <div style={{ fontSize: 12, color: MS12_INK_3, marginTop: 4 }}>
                      Industriestraße 14, 70565 Stuttgart, DE · USt-ID DE284567890 · ERP SAP B1 + proALPHA
                    </div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={Object.assign({}, ms12Mono(), { fontSize: 12, marginBottom: 6 })}>Quote</div>
                    <div style={{ fontFamily: MS12_FONT_MONO, fontSize: 14, color: MS12_INK }}>QT-MS-2026-0017</div>
                    <div style={{ fontSize: 12, color: MS12_INK_3, marginTop: 4 }}>Issued: 2025-11-04</div>
                    <div style={{ fontSize: 12, color: MS12_INK_3 }}>Valid: 30 days</div>
                  </div>
                </div>

                {/* Customer block */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 22, marginBottom: 22 }}>
                  <div>
                    <div style={Object.assign({}, ms12Mono(), { marginBottom: 6 })}>Bill to</div>
                    <div style={{ fontFamily: MS12_FONT_SERIF, fontSize: 16, color: MS12_INK }}>
                      MAHLE Industriebeteiligungen GmbH
                    </div>
                    <div style={{ fontSize: 12, color: MS12_INK_3, lineHeight: 1.6, marginTop: 4 }}>
                      Pragstraße 26–46<br />
                      70376 Stuttgart, DE<br />
                      Attn: Procurement · Mr. T. Wiedemann
                    </div>
                  </div>
                  <div>
                    <div style={Object.assign({}, ms12Mono(), { marginBottom: 6 })}>Ship to</div>
                    <div style={{ fontFamily: MS12_FONT_SERIF, fontSize: 16, color: MS12_INK }}>
                      MAHLE Werk Stuttgart-Cannstatt
                    </div>
                    <div style={{ fontSize: 12, color: MS12_INK_3, lineHeight: 1.6, marginTop: 4 }}>
                      Werk-Tor 4, machining cell B<br />
                      Mode: EXW Stuttgart, road freight<br />
                      Frame contract: <span style={{ fontFamily: MS12_FONT_MONO }}>FRM-MAHLE-2025-09</span>
                    </div>
                  </div>
                </div>

                {/* Headline line item — 24-unit run @ €247,500 */}
                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, marginBottom: 18 }}>
                  <thead>
                    <tr style={{ borderBottom: `1px solid ${MS12_INK}` }}>
                      <th style={Object.assign({}, ms12HeadCell(), { borderBottom: "none" })}>SKU</th>
                      <th style={Object.assign({}, ms12HeadCell(), { borderBottom: "none" })}>Description</th>
                      <th style={Object.assign({}, ms12HeadCell(), { borderBottom: "none" })}>Qty</th>
                      <th style={Object.assign({}, ms12HeadCell(), { borderBottom: "none", textAlign: "right" })}>Unit €</th>
                      <th style={Object.assign({}, ms12HeadCell(), { borderBottom: "none", textAlign: "right" })}>Total €</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO })}>MTL-220.00.00</td>
                      <td style={ms12BodyCell()}>
                        5-axis bridge mill · Rev D · X3000 / Y2500 / Z1200 · HSK-A63 24k rpm · TNC 640<br />
                        <span style={{ fontSize: 12, color: MS12_INK_3 }}>
                          ECO-MS-0017 incorporated · granite flatness <span style={{ fontFamily: MS12_FONT_MONO }}>±3 µm</span> · IATF 16949 PPAP-3
                        </span>
                      </td>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO })}>{totalRunQty}</td>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO, textAlign: "right" })}>{ms12FmtEUR(listPriceUnit)}</td>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO, textAlign: "right", fontWeight: 600 })}>{ms12FmtEUR(totalListValue)}</td>
                    </tr>
                    <tr style={{ background: MS12_BG_2 }}>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO, color: MS12_AMBER })}>ECO-MS-0017</td>
                      <td style={Object.assign({}, ms12BodyCell(), { color: MS12_INK_2, fontSize: 12 })}>
                        Granite flatness tightening · two-pass lap with re-grind · extra metrology pass on Zeiss UPMC CMM
                      </td>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO })}>{totalRunQty}</td>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO, textAlign: "right", color: MS12_AMBER })}>+{ms12FmtEUR(820)}</td>
                      <td style={Object.assign({}, ms12BodyCell(), { fontFamily: MS12_FONT_MONO, textAlign: "right", color: MS12_AMBER, fontWeight: 600 })}>+{ms12FmtEUR(820 * totalRunQty)}</td>
                    </tr>
                  </tbody>
                </table>

                {/* Cost stack breakdown */}
                <div style={{ background: MS12_BG_2, padding: 16, borderRadius: 8, marginBottom: 18 }}>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 10 })}>Unit cost stack</div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 6, fontSize: 13 }}>
                    <span style={{ color: MS12_INK_2 }}>Direct spend · 10 anchor rows (BOM)</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(partCostPerUnit)}</span>
                    <span style={{ color: MS12_INK_2 }}>Labour · assy + alignment + FAI</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(labourPerUnit)}</span>
                    <span style={{ color: MS12_INK_2 }}>Overhead · IATF compliance, factory burden</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(overheadPerUnit)}</span>
                    <span style={{ color: includeEco ? MS12_AMBER : MS12_INK_4 }}>
                      ECO-MS-0017 roll-in · granite re-work + extra metrology
                    </span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right", color: includeEco ? MS12_AMBER : MS12_INK_4 }}>
                      {includeEco ? "+" + ms12FmtEUR(820) : "—"}
                    </span>
                    <span style={{ color: MS12_INK_2 }}>Freight ({freightPct}% · EXW)</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(freightPerUnit)}</span>
                    <span style={{
                      color: MS12_INK, fontWeight: 600,
                      borderTop: `1px solid ${MS12_LINE}`,
                      paddingTop: 6, marginTop: 4,
                    }}>Cost subtotal · per unit</span>
                    <span style={{
                      fontFamily: MS12_FONT_MONO, fontWeight: 600, textAlign: "right",
                      borderTop: `1px solid ${MS12_LINE}`,
                      paddingTop: 6, marginTop: 4,
                    }}>{ms12FmtEUR(subtotal)}</span>
                    <span style={{ color: MS12_INK_3 }}>Customer list price</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(listPriceUnit)}</span>
                    <span style={{ color: MS12_GOOD }}>Gross margin · per unit</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right", color: MS12_GOOD }}>
                      {ms12FmtEUR(grossMarginUnit)} ({grossMarginPctActual.toFixed(1)}%)
                    </span>
                  </div>
                </div>

                {/* Critical path */}
                <div style={{ background: MS12_BG_3, padding: 16, borderRadius: 8, marginBottom: 18, border: `1px solid ${MS12_LINE}` }}>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 10 })}>Critical path · 252 d</div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 4, fontSize: 12 }}>
                    <span style={{ color: MS12_INK_2 }}>GMN main spindle · 50.01 · long-lead</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, color: MS12_BAD }}>180 d</span>
                    <span style={{ color: MS12_INK_2 }}>Bridge assy machining · downstream of spindle PO</span>
                    <span style={{ fontFamily: MS12_FONT_MONO }}>40 d</span>
                    <span style={{ color: MS12_INK_2 }}>Final assy + alignment</span>
                    <span style={{ fontFamily: MS12_FONT_MONO }}>20 d</span>
                    <span style={{ color: MS12_INK_2 }}>FAI + acceptance · ISO 230-2 + IATF</span>
                    <span style={{ fontFamily: MS12_FONT_MONO }}>12 d</span>
                    <span style={{ color: MS12_INK_2 }}>ECO-MS-0017 granite path delta (absorbed)</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, color: MS12_AMBER }}>+11 d (slack)</span>
                    <span style={{ color: MS12_INK, fontWeight: 600, borderTop: `1px solid ${MS12_LINE}`, paddingTop: 6, marginTop: 4 }}>
                      End-to-end · 1st article
                    </span>
                    <span style={{
                      fontFamily: MS12_FONT_MONO, fontWeight: 600, textAlign: "right",
                      color: MS12_BAD,
                      borderTop: `1px solid ${MS12_LINE}`,
                      paddingTop: 6, marginTop: 4,
                    }}>{ms12FmtDays(leadCriticalPath)}</span>
                  </div>
                </div>

                {/* Terms */}
                <div style={{ fontSize: 12, color: MS12_INK_3, lineHeight: 1.7 }}>
                  <div style={Object.assign({}, ms12Mono(), { color: MS12_INK_2, marginBottom: 6 })}>Terms</div>
                  Payment: 30% on PO · 40% on FAI sign-off · 30% on shipment, NET 30.<br />
                  Incoterms: EXW Stuttgart-Cannstatt; insurance to buyer's account.<br />
                  Lead time: 252 d to first article · 12 + 12 batch FY-split.<br />
                  Compliance: IATF 16949 PPAP Level 3 · ISO 9001:2015 §8.3 / §8.5.6 · EN ISO 230-1 / 230-2 · CE / 2006/42/EC.<br />
                  Warranty: 24 months from acceptance, 12,000 spindle-hours, whichever first.<br />
                  Change control: ECO-MS-0017 incorporated; further design changes per IATF §8.5.6.
                </div>

                <div style={{
                  marginTop: 28, paddingTop: 18, borderTop: `1px solid ${MS12_LINE}`,
                  fontSize: 12, color: MS12_INK_4, textAlign: "right",
                }}>
                  Authorized signatory · D. Becker (Manufacturing Lead) · Mittelstand-pilot Werkzeugbau GmbH
                </div>
              </div>
            ),
          })}

          {/* ───── Right rail · margin model + send ───── */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {ms12Card({
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 14 })}>Margin model · what-if</div>

                  <div style={{ marginBottom: 14 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                      <span style={{ fontSize: 12, color: MS12_INK_3 }}>Margin %</span>
                      <span style={{ fontFamily: MS12_FONT_MONO, fontSize: 12, color: MS12_INK }}>{marginPct}%</span>
                    </div>
                    <input id="ms-act1-2-f1" name="ms-act1-2-f1"
                      type="range" min="6" max="28" value={marginPct}
                      onChange={(e) => setMarginPct(Number(e.target.value))}
                      style={{ width: "100%" }}
                    />
                  </div>

                  <div style={{ marginBottom: 14 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                      <span style={{ fontSize: 12, color: MS12_INK_3 }}>Freight buffer %</span>
                      <span style={{ fontFamily: MS12_FONT_MONO, fontSize: 12, color: MS12_INK }}>{freightPct}%</span>
                    </div>
                    <input id="ms-act1-2-f2" name="ms-act1-2-f2"
                      type="range" min="1" max="6" value={freightPct}
                      onChange={(e) => setFreightPct(Number(e.target.value))}
                      style={{ width: "100%" }}
                    />
                  </div>

                  <label style={{
                    display: "inline-flex", alignItems: "center", gap: 8,
                    padding: "8px 12px",
                    background: MS12_BG_3,
                    border: `1px solid ${includeEco ? MS12_AMBER : MS12_LINE}`,
                    borderRadius: 6,
                    fontSize: 12, color: MS12_INK_2,
                    cursor: "pointer", marginBottom: 16,
                  }}>
                    <input id="ms-act1-2-f3" name="ms-act1-2-f3" type="checkbox" checked={includeEco} onChange={(e) => setIncludeEco(e.target.checked)} />
                    <span>roll-in ECO-MS-0017 (+{ms12FmtEUR(820)} / unit)</span>
                  </label>

                  <div style={{
                    marginTop: 4, padding: 14,
                    background: MS12_BG_2,
                    border: `1px solid ${MS12_LINE}`,
                    borderRadius: 8,
                  }}>
                    <div style={Object.assign({}, ms12Mono(), { marginBottom: 6 })}>What-if recompute</div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 4, fontSize: 12 }}>
                      <span style={{ color: MS12_INK_3 }}>Cost subtotal</span>
                      <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(subtotal)}</span>
                      <span style={{ color: MS12_INK_3 }}>What-if unit price</span>
                      <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right" }}>{ms12FmtEUR(whatIfPriceUnit)}</span>
                      <span style={{ color: MS12_INK_3 }}>What-if 24-unit total</span>
                      <span style={{ fontFamily: MS12_FONT_MONO, textAlign: "right", fontWeight: 600 }}>{ms12FmtEUR(totalWhatIfVal)}</span>
                    </div>
                  </div>
                </div>
              ),
            })}

            {ms12Card({
              style: { background: MS12_BG_2 },
              children: (
                <div>
                  <div style={Object.assign({}, ms12Mono(), { marginBottom: 10 })}>Frame economics</div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 6, fontSize: 12 }}>
                    <span style={{ color: MS12_INK_2 }}>List price · per unit</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, color: MS12_INK }}>{ms12FmtEUR(listPriceUnit)}</span>
                    <span style={{ color: MS12_INK_2 }}>Run quantity</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, color: MS12_INK }}>{totalRunQty} units</span>
                    <span style={{ color: MS12_INK_2 }}>Frame total</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, color: MS12_INK, fontWeight: 600 }}>{ms12FmtEUR(totalListValue)}</span>
                    <span style={{ color: MS12_AMBER }}>ECO-MS-0017 roll-in</span>
                    <span style={{ fontFamily: MS12_FONT_MONO, color: MS12_AMBER }}>{ms12FmtEUR(820 * totalRunQty)}</span>
                  </div>
                </div>
              ),
            })}

            {ms12Btn({
              variant: "primary",
              onClick: send,
              style: { height: 48, fontSize: 14 },
              children: "Send to MAHLE Procurement →",
            })}

            {ms12Btn({
              variant: "tertiary",
              onClick: () => ms12Nav("/forge/carryover"),
              children: "← back to carryover",
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// Route registration · register all four screens with the Mittelstand
// route registry. Mirrors pump/registry-index.jsx contract.
// ════════════════════════════════════════════════════════════════════
if (typeof registerMittelstandRoute === "function") {
  registerMittelstandRoute({
    path: "/forge/rfq",
    mode: "forge",
    title: "RFQ intake — MAHLE 24-mill",
    renderer: () => React.createElement(ScreenMittelstandRFQ),
  });
  registerMittelstandRoute({
    path: "/forge/matcher",
    mode: "forge",
    title: "Performance match — MTL-220 ↔ DMU 75",
    renderer: () => React.createElement(ScreenMittelstandMatcher),
  });
  registerMittelstandRoute({
    path: "/forge/carryover",
    mode: "forge",
    title: "Carryover — Rev C → Rev D (ECO-MS-0017)",
    renderer: () => React.createElement(ScreenMittelstandCarryover),
  });
  registerMittelstandRoute({
    path: "/forge/quote",
    mode: "forge",
    title: "Quote builder — 24-unit MAHLE frame",
    renderer: () => React.createElement(ScreenMittelstandQuote),
  });
}

// Expose screen renderers on window so the registry-router and command
// palette can fall back gracefully if the registry isn't yet mounted.
if (typeof window !== "undefined") {
  window.ScreenMittelstandRFQ        = ScreenMittelstandRFQ;
  window.ScreenMittelstandMatcher    = ScreenMittelstandMatcher;
  window.ScreenMittelstandCarryover  = ScreenMittelstandCarryover;
  window.ScreenMittelstandQuote      = ScreenMittelstandQuote;
}
})();