diff --git a/app/logic/document_outputs.py b/app/logic/document_outputs.py
index 28a33a6..5cc26b6 100644
--- a/app/logic/document_outputs.py
+++ b/app/logic/document_outputs.py
@@ -67,6 +67,7 @@ from reportlab.lib.utils import ImageReader
 from reportlab.pdfbase.pdfmetrics import stringWidth
 from reportlab.pdfgen import canvas
 from reportlab.pdfbase import pdfmetrics
+from reportlab.pdfbase.ttfonts import TTFont
 from sqlalchemy import func
 from sqlalchemy.orm import Session
 
@@ -368,7 +369,32 @@ def _fit_font_size_for_bbox_text(text: str, box_width: float, box_height: float)
 
 
 def _safe_pdf_font_name(font_name: str | None) -> str:
-    candidate = (font_name or "Helvetica").strip()
+    raw = (font_name or "Helvetica").strip()
+    key = raw.lower()
+
+    # ReportLab core PDF fonts only unless TTFs are registered.
+    # Map common UI font names to visible built-in PDF fonts.
+    aliases = {
+        "arial": "Helvetica",
+        "calibri": "Helvetica",
+        "verdana": "Helvetica",
+        "trebuchet ms": "Helvetica",
+        "helvetica": "Helvetica",
+
+        "times new roman": "Times-Roman",
+        "times": "Times-Roman",
+        "georgia": "Times-Roman",
+        "cambria": "Times-Roman",
+        "liberation serif": "Times-Roman",
+        "dejavu serif": "Times-Roman",
+
+        "courier new": "Courier",
+        "courier": "Courier",
+        "liberation mono": "Courier",
+        "dejavu sans mono": "Courier",
+    }
+
+    candidate = aliases.get(key, raw)
     try:
         pdfmetrics.getFont(candidate)
         return candidate
@@ -380,8 +406,9 @@ def _font_size_for_box(text: str, font_name: str, box_width: float, box_height:
     fitted = _fit_font_size_for_bbox_text(text, box_width, box_height)
 
     if saved_size and saved_size > 0:
-        # Saved UI/editor font size is allowed, but geometry wins for replica output.
-        return max(1.0, min(float(saved_size), float(fitted)))
+        # Layout Review is the source of truth after manual editing.
+        # Do not silently shrink manual font edits back to the fitted estimate.
+        return max(1.0, float(saved_size))
 
     return max(1.0, float(fitted))
 
@@ -993,6 +1020,12 @@ def build_replica_layout(document: Document, mode: str = "shared") -> dict:
     current_file, raw_ocr, reviewed, source_layout, layout_source = _get_replica_source_context(document)
     reader = PdfReader(str(current_file))
 
+    source_layout_meta = source_layout if isinstance(source_layout, dict) else {}
+    prefer_word_entries = (
+        source_layout_meta.get("layout_sync_source") == "layout_review"
+        or source_layout_meta.get("layout_sync_status") == "synced"
+    )
+
     pages = []
     page_layouts = {page["page"]: page for page in (source_layout.get("pages", []) if isinstance(source_layout, dict) else [])}
 
@@ -1066,6 +1099,7 @@ def build_replica_layout(document: Document, mode: str = "shared") -> dict:
                 "page_height": page_h,
                 "image_width": src_w,
                 "image_height": src_h,
+                  "prefer_word_entries": prefer_word_entries,
                 "lines": line_entries,
                 "words": page_layout.get("words", []) or [],
             }
@@ -1156,8 +1190,35 @@ def _render_replica_pdf_from_layout(
 
             page_layout = pages.get(page_num, {"lines": []})
 
+            edited_words = [
+                w for w in (page_layout.get("words") or [])
+                if (isinstance(w.get("manual_flags"), dict) and w.get("manual_flags", {}).get("style_edited"))
+                or str(w.get("text_color_guess") or "#000000").lower() != "#000000"
+            ]
+            if edited_words:
+                print(
+                    "[replica-render-debug]",
+                    "page=", page_num,
+                    "prefer_word_entries=", page_layout.get("prefer_word_entries"),
+                    "edited_words=",
+                    [
+                        (
+                            w.get("id"),
+                            w.get("text"),
+                            w.get("font_size_guess"),
+                            w.get("font_family_guess"),
+                            w.get("text_color_guess"),
+                            w.get("manual_flags"),
+                        )
+                        for w in edited_words[:20]
+                    ],
+                    flush=True,
+                )
+
             render_entries = []
-            if page_layout.get("lines"):
+            if page_layout.get("prefer_word_entries") and page_layout.get("words"):
+                render_entries = _build_word_entries_for_page(page_layout, page_h)
+            if not render_entries and page_layout.get("lines"):
                 render_entries = _build_line_entries_for_page(page_layout, page_h)
             if not render_entries and page_layout.get("words"):
                 render_entries = _build_word_entries_for_page(page_layout, page_h)
@@ -1189,8 +1250,18 @@ def _render_replica_pdf_from_layout(
                     c.setStrokeColorRGB(1, 0, 0)
                     c.setFillColorRGB(1, 0, 0)
                 else:
-                    c.setStrokeColorRGB(0, 0, 0)
-                    c.setFillColorRGB(0, 0, 0)
+                    color = str(line.get("text_color_guess") or "#000000").lstrip("#")
+                    try:
+                        if len(color) == 6:
+                            r = int(color[0:2], 16) / 255.0
+                            g = int(color[2:4], 16) / 255.0
+                            b = int(color[4:6], 16) / 255.0
+                        else:
+                            r = g = b = 0
+                    except Exception:
+                        r = g = b = 0
+                    c.setStrokeColorRGB(r, g, b)
+                    c.setFillColorRGB(r, g, b)
 
                 text_obj.textLine(text_line)
                 c.drawText(text_obj)
diff --git a/app/models/__init__.py b/app/models/__init__.py
index ab7e0db..d11d447 100644
--- a/app/models/__init__.py
+++ b/app/models/__init__.py
@@ -1,4 +1,5 @@
 from app.models.document import Document
+from app.models.document_review_state import DocumentReviewState
 from app.models.document_version import DocumentVersion
 from app.models.text_version import TextVersion
 from app.models.extracted_field import ExtractedField
@@ -8,6 +9,8 @@ from app.models.document_additional_field import DocumentAdditionalField
 from app.models.document_preset import DocumentPreset
 
 __all__ = [
+    "DocumentReplicaReviewState",
+    "DocumentReviewState",
     "DocumentAnalysisVersion",
     "Document",
     "DocumentVersion",
diff --git a/app/routes/documents.py b/app/routes/documents.py
index 39bb27b..bc567aa 100644
--- a/app/routes/documents.py
+++ b/app/routes/documents.py
@@ -19,7 +19,7 @@ from io import BytesIO
 from fastapi import APIRouter, Depends, Form, Query, Request
 from fastapi.responses import FileResponse, HTMLResponse, RedirectResponse, Response
 from fastapi.templating import Jinja2Templates
-from sqlalchemy import distinct
+from sqlalchemy import distinct, text
 from sqlalchemy import func
 from sqlalchemy.orm import Session, selectinload
 from pypdf import PdfReader
@@ -2023,12 +2023,30 @@ async def save_layout_review(document_id: str, request: Request, db: Session = D
             x_right = max(x1, x2)
             y_top = min(y1, y2)
             y_bottom = max(y1, y2)
-
             if abs(x_right - x_left) < 1.0 or abs(y_bottom - y_top) < 1.0:
                 continue
 
-            font_size_guess = float(word.get("font_size_guess") or max(6.0, (y_bottom - y_top) * 0.75))
-            font_family_guess = (word.get("font_family_guess") or "Helvetica")
+            manual_flags = word.get("manual_flags") if isinstance(word.get("manual_flags"), dict) else {}
+            style_edited = manual_flags.get("style_edited") is True
+            override_style = word.get("override_style") if style_edited and isinstance(word.get("override_style"), dict) else {}
+            resolved_style = word.get("resolved_style") if style_edited and isinstance(word.get("resolved_style"), dict) else {}
+
+            font_size_guess = float(word.get("font_size_guess") or override_style.get("font_size") or max(6.0, (y_bottom - y_top) * 0.75))
+            font_family_guess = word.get("font_family_guess") or override_style.get("font_family") or "Helvetica"
+            font_weight_guess = int(word.get("font_weight_guess") or resolved_style.get("font_weight") or 400)
+            font_style_guess = word.get("font_style_guess") or resolved_style.get("font_style") or "normal"
+            letter_spacing_guess = float(word.get("letter_spacing_guess") or resolved_style.get("letter_spacing") or 0)
+            text_color_guess = word.get("text_color_guess") or override_style.get("text_color") or "#000000"
+
+            if style_edited:
+                override_style = dict(override_style)
+                override_style.update({"font_family": font_family_guess, "font_size": font_size_guess, "text_color": text_color_guess})
+                resolved_style = dict(resolved_style)
+                resolved_style.update(override_style)
+            else:
+                override_style = {}
+                resolved_style = {}
+                manual_flags["style_edited"] = False
 
             words.append({
                 "id": int(word.get("id") or word_idx),
@@ -2037,6 +2055,13 @@ async def save_layout_review(document_id: str, request: Request, db: Session = D
                 "confidence": None,
                 "font_size_guess": font_size_guess,
                 "font_family_guess": font_family_guess,
+                "font_weight_guess": font_weight_guess,
+                "font_style_guess": font_style_guess,
+                "letter_spacing_guess": letter_spacing_guess,
+                "text_color_guess": text_color_guess,
+                "override_style": override_style,
+                "resolved_style": resolved_style,
+                "manual_flags": manual_flags,
             })
 
         words.sort(key=lambda w: (w["bbox"][1], w["bbox"][0]))
@@ -2186,12 +2211,27 @@ def document_detail(document_id: str, request: Request, queue: str | None = None
                 bbox = word.get("bbox") or [0, 0, 0, 0]
                 if not isinstance(bbox, (list, tuple)) or len(bbox) != 4:
                     continue
+                resolved_style = word.get("resolved_style") if isinstance(word.get("resolved_style"), dict) else {}
+                override_style = word.get("override_style") if isinstance(word.get("override_style"), dict) else {}
+                inferred_style = word.get("inferred_style") if isinstance(word.get("inferred_style"), dict) else {}
+                manual_flags = word.get("manual_flags") if isinstance(word.get("manual_flags"), dict) else {}
+                font_size_value = word.get("font_size_guess") or override_style.get("font_size") or resolved_style.get("font_size") or max(6.0, (float(bbox[3]) - float(bbox[1])) * 0.75)
+                font_family_value = word.get("font_family_guess") or override_style.get("font_family") or resolved_style.get("font_family") or "Helvetica"
+                text_color_value = word.get("text_color_guess") or override_style.get("text_color") or resolved_style.get("text_color") or "#000000"
                 word_row = {
                     "id": idx,
                     "text": (word.get("text") or "").strip(),
                     "bbox": [float(bbox[0]), float(bbox[1]), float(bbox[2]), float(bbox[3])],
-                    "font_size_guess": float(word.get("font_size_guess") or max(6.0, (float(bbox[3]) - float(bbox[1])) * 0.75)),
-                    "font_family_guess": (word.get("font_family_guess") or "Helvetica"),
+                    "font_size_guess": float(font_size_value),
+                    "font_family_guess": font_family_value,
+                    "font_weight_guess": int(word.get("font_weight_guess") or resolved_style.get("font_weight") or 400),
+                    "font_style_guess": word.get("font_style_guess") or resolved_style.get("font_style") or "normal",
+                    "letter_spacing_guess": float(word.get("letter_spacing_guess") or resolved_style.get("letter_spacing") or 0),
+                    "text_color_guess": text_color_value,
+                    "inferred_style": inferred_style,
+                    "override_style": override_style,
+                    "resolved_style": resolved_style,
+                    "manual_flags": manual_flags,
                 }
                 words.append(word_row)
 
@@ -3293,78 +3333,151 @@ async def run_diagnostic_candidates(document_id: str, db: Session = Depends(get_
     )
 
 
-@router.get("/{document_id}/diagnostic-output/{output_id}/download")
-async def download_diagnostic_output(document_id: str, output_id: int, db: Session = Depends(get_db)):
-    document = db.query(Document).filter(Document.document_id == document_id).first()
-    if document is None:
-        return HTMLResponse(content="Document not found", status_code=404)
 
-    row = db.execute(
-        text("""
-            SELECT file_path, engine, output_type, version_number
-            FROM document_diagnostic_outputs
-            WHERE id = :id AND document_id = :document_id
-        """),
-        {"id": output_id, "document_id": document.id},
-    ).mappings().first()
+@router.get("/{document_id}/diagnostic-output/{output_id}/download")
+async def download_diagnostic_output(document_id: str, output_id: int):
+    with engine.connect() as conn:
+        row = conn.execute(
+            text("""
+                SELECT ddo.file_path, ddo.engine, ddo.output_type, ddo.version_number
+                FROM document_diagnostic_outputs ddo
+                JOIN documents d ON d.id = ddo.document_id
+                WHERE ddo.id = :id AND d.document_id = :document_id
+            """),
+            {"id": output_id, "document_id": document_id},
+        ).mappings().first()
 
     if not row or not row["file_path"]:
         return HTMLResponse(content="Diagnostic output not found", status_code=404)
 
     path = Path(row["file_path"])
     if not path.exists():
-        return HTMLResponse(content="Diagnostic output file missing", status_code=404)
+        return HTMLResponse(content=f"Diagnostic output file missing: {path}", status_code=404)
 
     return FileResponse(path=str(path), filename=path.name)
 
 
 @router.post("/{document_id}/diagnostic-output/{output_id}/select")
-async def select_diagnostic_output(document_id: str, output_id: int, db: Session = Depends(get_db)):
-    document = db.query(Document).filter(Document.document_id == document_id).first()
-    if document is None:
-        return HTMLResponse(content="Document not found", status_code=404)
+async def select_diagnostic_output(document_id: str, output_id: int):
+    with engine.begin() as conn:
+        row = conn.execute(
+            text("""
+                SELECT ddo.id, ddo.document_id, ddo.engine, ddo.output_type
+                FROM document_diagnostic_outputs ddo
+                JOIN documents d ON d.id = ddo.document_id
+                WHERE ddo.id = :id AND d.document_id = :document_id
+            """),
+            {"id": output_id, "document_id": document_id},
+        ).mappings().first()
 
-    row = db.execute(
-        text("""
-            SELECT engine, output_type
-            FROM document_diagnostic_outputs
-            WHERE id = :id AND document_id = :document_id
-        """),
-        {"id": output_id, "document_id": document.id},
-    ).mappings().first()
+        if not row:
+            return HTMLResponse(content="Diagnostic output not found", status_code=404)
 
-    if not row:
-        return HTMLResponse(content="Diagnostic output not found", status_code=404)
+        conn.execute(
+            text("""
+                UPDATE document_diagnostic_outputs
+                SET is_selected = false
+                WHERE document_id = :document_pk
+                  AND engine = :engine
+                  AND output_type = :output_type
+            """),
+            {
+                "document_pk": row["document_id"],
+                "engine": row["engine"],
+                "output_type": row["output_type"],
+            },
+        )
 
-    db.execute(
-        text("""
-            UPDATE document_diagnostic_outputs
-            SET is_selected = false
-            WHERE document_id = :document_id
-              AND engine = :engine
-              AND output_type = :output_type
-        """),
-        {
-            "document_id": document.id,
-            "engine": row["engine"],
-            "output_type": row["output_type"],
-        },
-    )
-
-    db.execute(
-        text("""
-            UPDATE document_diagnostic_outputs
-            SET is_selected = true, updated_at = NOW()
-            WHERE id = :id AND document_id = :document_id
-        """),
-        {"id": output_id, "document_id": document.id},
-    )
-
-    db.commit()
+        conn.execute(
+            text("""
+                UPDATE document_diagnostic_outputs
+                SET is_selected = true, updated_at = NOW()
+                WHERE id = :id
+            """),
+            {"id": output_id},
+        )
 
     return RedirectResponse(
         url=f"/documents/{document_id}?tab=ocr-review&success=diagnostic_candidate_selected",
         status_code=303,
     )
 
+
+
+
+@router.post("/{document_id}/diagnostic-output/select")
+async def select_diagnostic_output_from_form(document_id: str, diagnostic_output_id: int = Form(...)):
+    return await select_diagnostic_output(document_id, diagnostic_output_id)
+
+
+@router.get("/{document_id}/diagnostic-output/{output_id}/view")
+async def view_diagnostic_output(document_id: str, output_id: int):
+    with engine.connect() as conn:
+        row = conn.execute(
+            text("""
+                SELECT ddo.file_path, ddo.engine, ddo.output_type, ddo.version_number
+                FROM document_diagnostic_outputs ddo
+                JOIN documents d ON d.id = ddo.document_id
+                WHERE ddo.id = :id AND d.document_id = :document_id
+            """),
+            {"id": output_id, "document_id": document_id},
+        ).mappings().first()
+
+    if not row or not row["file_path"]:
+        return HTMLResponse(content="Diagnostic output not found", status_code=404)
+
+    path = Path(row["file_path"])
+    if not path.exists():
+        return HTMLResponse(content=f"Diagnostic output file missing: {path}", status_code=404)
+
+    suffix = path.suffix.lower()
+
+    if suffix == ".pdf":
+        return FileResponse(path=str(path), filename=path.name, media_type="application/pdf")
+
+    if suffix == ".docx":
+        with open(path, "rb") as f:
+            result = mammoth.convert_to_html(f)
+
+        body = result.value or ""
+        return HTMLResponse(content=f"""
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {{
+      margin: 0;
+      padding: 1rem;
+      background: #2b2b31;
+      font-family: Arial, Helvetica, sans-serif;
+    }}
+    .page {{
+      background: white;
+      color: #111827;
+      max-width: 8.5in;
+      min-height: 11in;
+      margin: 0 auto;
+      padding: 0.5in;
+      box-sizing: border-box;
+      box-shadow: 0 0 0.25rem rgba(0,0,0,0.35);
+    }}
+    @media (max-width: 900px) {{
+      body {{ padding: 0.5rem; }}
+      .page {{ padding: 0.35in; font-size: 0.8rem; }}
+    }}
+  </style>
+</head>
+<body>
+  <main class="page">
+    {body}
+  </main>
+</body>
+</html>
+""")
+
+    return FileResponse(path=str(path), filename=path.name)
+
+
 # --- diagnostic candidate routes end ---
diff --git a/app/templates/documents/detail.html b/app/templates/documents/detail.html
index a3be104..a8b25c6 100644
--- a/app/templates/documents/detail.html
+++ b/app/templates/documents/detail.html
@@ -1,3 +1,12 @@
+
+<style id="layout-apply-feedback-fix">
+  #layout-popover-apply.layout-apply-flash {
+    outline: 3px solid #22c55e !important;
+    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18) !important;
+    font-weight: 800 !important;
+  }
+</style>
+
 {% extends "base.html" %}
 {% block title %}Document Detail
 <script>
@@ -19,6 +28,50 @@ document.addEventListener("DOMContentLoaded", () => {
 
   syncNums();
 });
+
+  window.toolbarTextColorSyncInstalled = true;
+
+  (function installToolbarTextColorSync() {
+    const toolbarColor = document.getElementById('layout-toolbar-text-color');
+
+    function findPopupTextColorInput() {
+      return (
+        document.getElementById('layout-word-text-color') ||
+        document.getElementById('layout-markup-text-color') ||
+        document.querySelector('#layout-word-popover input[type="color"]')
+      );
+    }
+
+    function syncToPopup() {
+      const popupColor = findPopupTextColorInput();
+      if (toolbarColor && popupColor) {
+        popupColor.value = toolbarColor.value || '#111827';
+        popupColor.dispatchEvent(new Event('input', { bubbles: true }));
+        popupColor.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    }
+
+    if (toolbarColor) {
+      toolbarColor.addEventListener('input', syncToPopup);
+      toolbarColor.addEventListener('change', syncToPopup);
+    }
+
+    document.addEventListener('click', () => {
+      setTimeout(syncToPopup, 50);
+    });
+  })();
+
+
+      function forceLayoutRibbonLeft() {
+        const ribbon = document.getElementById("layout-review-toolbar");
+        if (ribbon) ribbon.scrollLeft = 0;
+      }
+
+      window.addEventListener("load", forceLayoutRibbonLeft);
+      setTimeout(forceLayoutRibbonLeft, 250);
+      setTimeout(forceLayoutRibbonLeft, 1000);
+
+
 </script>
 
 
@@ -263,56 +316,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
 
-<div class="card" style="margin-top:0.75rem;">
-  <div style="display:flex; justify-content:space-between; gap:0.75rem; align-items:center; flex-wrap:wrap;">
-    <h2 class="card-title" style="margin:0;">Diagnostic candidates</h2>
-    <form method="post" action="/documents/{{ document.document_id }}/run-diagnostic-candidates" style="display:inline;">
-      <button type="submit">Run Candidate Outputs</button>
-    </form>
-  </div>
-
-  {% if diagnostic_outputs %}
-    <div class="diagnostic-candidate-list" style="display:grid; gap:0.65rem; margin-top:0.8rem;">
-      {% for out in diagnostic_outputs %}
-      <div class="diagnostic-candidate-card" style="border:1px solid #e5e7eb; border-radius:0.85rem; padding:0.75rem; background:#fff;">
-        <div style="display:flex; justify-content:space-between; gap:0.75rem; align-items:flex-start;">
-          <div style="min-width:0;">
-            <div style="font-weight:700; font-size:1rem;">
-              {% if out.is_selected %}✓ {% endif %}{{ out.engine }} · {{ out.output_type }}
-            </div>
-            <div style="color:#6b7280; font-size:0.9rem; margin-top:0.15rem;">
-              v{{ out.version_number }} · {{ out.status }}
-            </div>
-          </div>
-          <div style="white-space:nowrap; font-size:0.9rem; color:#6b7280;">
-            {{ out.created_at }}
-          </div>
-        </div>
-
-        {% if out.error_message %}
-          <div style="margin-top:0.5rem; color:#991b1b; font-size:0.86rem; word-break:break-word;">
-            {{ out.error_message }}
-          </div>
-        {% endif %}
-
-        <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.65rem;">
-          {% if out.file_path %}
-            <a class="button-link" href="/documents/{{ document.document_id }}/diagnostic-output/{{ out.id }}/download">Download</a>
-            <form method="post" action="/documents/{{ document.document_id }}/diagnostic-output/{{ out.id }}/select" style="display:inline;">
-              <button type="submit">Select</button>
-            </form>
-          {% else %}
-            <span style="color:#6b7280;">No file output</span>
-          {% endif %}
-        </div>
-      </div>
-      {% endfor %}
-    </div>
-  {% else %}
-    <p class="empty-state" style="margin-top:0.75rem;">No diagnostic candidates saved yet.</p>
-  {% endif %}
-</div>
-
 <div class="workspace-grid">
             <section>
                 <div class="card preview-card">
@@ -351,7 +354,63 @@ document.addEventListener("DOMContentLoaded", () => {
                       <span>Words</span>
                     </label>
                   </div>
-                  {% endif %}
+                    <div class="preview-overlay-controls diagnostic-candidate-row" style="display:flex; gap:0.4rem; flex-wrap:wrap; margin-top:0.45rem; align-items:center;">
+                      <div style="display:inline-flex; gap:0.35rem; align-items:center; flex-wrap:nowrap;">
+                        <span style="font-size:0.82rem; color:#6b7280; white-space:nowrap;">Diagnostics:</span>
+                        <form method="post" action="/documents/{{ document.document_id }}/run-diagnostic-candidates" style="display:inline;">
+                          <button type="submit" style="padding:0.18rem 0.45rem; font-size:0.76rem;">Run</button>
+                        </form>
+
+                      {% set selected_diag = diagnostic_outputs | selectattr("is_selected") | list | first %}
+                      {% set default_diag = selected_diag or (diagnostic_outputs | selectattr("file_path") | list | first) %}
+
+                      {% if diagnostic_outputs %}
+                        <form method="post" action="/documents/{{ document.document_id }}/diagnostic-output/select" style="display:inline-flex; gap:0.35rem; align-items:center; flex-wrap:nowrap;">
+                          <select id="diagnostic-output-select" name="diagnostic_output_id" style="max-width:13rem; font-size:0.78rem; padding:0.18rem 0.35rem;">
+                            {% for out in diagnostic_outputs %}
+                              {% if out.file_path %}
+                                <option
+                                  value="{{ out.id }}"
+                                  data-view="/documents/{{ document.document_id }}/diagnostic-output/{{ out.id }}/view"
+                                  data-download="/documents/{{ document.document_id }}/diagnostic-output/{{ out.id }}/download"
+                                  {% if default_diag and out.id == default_diag.id %}selected{% endif %}
+                                >
+                                  {% if out.is_selected %}✓ {% endif %}{{ out.engine }} {{ out.output_type }} v{{ out.version_number }}
+                                </option>
+                              {% endif %}
+                            {% endfor %}
+                          </select>
+                          <button type="submit" style="padding:0.18rem 0.45rem; font-size:0.76rem;">Select</button>
+                        </form>
+                      </div>
+
+                        <a id="diagnostic-view-link" href="{% if default_diag %}/documents/{{ document.document_id }}/diagnostic-output/{{ default_diag.id }}/view{% else %}#{% endif %}" target="_blank" style="font-size:0.78rem;">View</a>
+                        <a id="diagnostic-download-link" href="{% if default_diag %}/documents/{{ document.document_id }}/diagnostic-output/{{ default_diag.id }}/download{% else %}#{% endif %}" style="font-size:0.78rem;">Download</a>
+
+                        <script>
+                          document.addEventListener("DOMContentLoaded", () => {
+                            const sel = document.getElementById("diagnostic-output-select");
+                            const view = document.getElementById("diagnostic-view-link");
+                            const dl = document.getElementById("diagnostic-download-link");
+                            if (!sel || !view || !dl) return;
+
+                            const syncDiagnosticLinks = () => {
+                              const opt = sel.options[sel.selectedIndex];
+                              if (!opt) return;
+                              view.href = opt.dataset.view || "#";
+                              dl.href = opt.dataset.download || "#";
+                            };
+
+                            sel.addEventListener("change", syncDiagnosticLinks);
+                            syncDiagnosticLinks();
+                          });
+                        </script>
+                      {% else %}
+                        <span style="font-size:0.78rem; color:#6b7280;">none</span>
+                      {% endif %}
+                    </div>
+
+{% endif %}
 
 
                     </div>
@@ -614,24 +673,1324 @@ document.addEventListener("DOMContentLoaded", () => {
       gap:0.35rem;
       align-items:center;
     }
-  </style>
 
-  <div id="layout-review-toolbar">
-    <button type="button" class="layout-tool-btn active" id="layout-tool-select">Select</button>
-    <button type="button" class="layout-tool-btn" id="layout-tool-pan">Pan</button>
-    <button type="button" class="layout-tool-btn" id="layout-tool-add">Add</button>
-    <button type="button" class="layout-tool-btn danger" id="layout-delete-word">Delete</button>
-    <button type="button" class="layout-tool-btn" id="layout-undo">Undo</button>
-    <button type="button" class="layout-tool-btn" id="layout-redo">Redo</button>
-    <button type="button" class="layout-tool-btn" id="layout-zoom-out">−</button>
-    <button type="button" class="layout-tool-btn" id="layout-fit-width">Fit</button>
-    <button type="button" class="layout-tool-btn" id="layout-zoom-in">+</button>
-    <span id="layout-zoom-label">100%</span>
-    <button type="submit" form="layout-review-save-form" class="layout-tool-btn primary" onclick="window.prepareLayoutReviewSubmit && window.prepareLayoutReviewSubmit()">Save</button>
-    <span id="layout-review-status">Ready</span>
-  </div>
 
-  <div id="layout-review-shell">
+
+  /* Word-like floating mini toolbar for selected word */
+  #layout-word-popover {
+    width: min(92vw, 30rem) !important;
+    padding: 0.55rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.65rem !important;
+    background: linear-gradient(#f8fbff, #eef4fc) !important;
+    box-shadow: 0 0.7rem 1.8rem rgba(15,23,42,0.18) !important;
+  }
+
+  #layout-word-popover > div:first-child {
+    margin-bottom: 0.3rem !important;
+    font-size: 0.72rem !important;
+    color: #475569 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.03em !important;
+  }
+
+  #layout-word-popover input[type="text"],
+  #layout-word-popover input[type="number"] {
+    min-height: 1.75rem !important;
+    padding: 0.2rem 0.45rem !important;
+    border: 1px solid #cbd5e1 !important;
+    border-radius: 0.35rem !important;
+    font-size: 0.8rem !important;
+    background: #ffffff !important;
+  }
+
+  #layout-word-popover input[type="color"] {
+    width: 1.55rem !important;
+    height: 1.55rem !important;
+    padding: 0.04rem !important;
+    border: 1px solid #94a3b8 !important;
+    border-radius: 0.25rem !important;
+  }
+
+  #layout-word-popover label {
+    font-size: 0.72rem !important;
+    color: #475569 !important;
+    white-space: nowrap !important;
+  }
+
+  #layout-word-popover button {
+    min-height: 1.75rem !important;
+    padding: 0.22rem 0.55rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.35rem !important;
+    background: linear-gradient(#ffffff, #e9eef7) !important;
+    color: #1f2937 !important;
+    font-size: 0.76rem !important;
+  }
+
+  #layout-popover-apply {
+    background: linear-gradient(#dbeafe, #bfdbfe) !important;
+    border-color: #60a5fa !important;
+    color: #1e3a8a !important;
+  }
+
+  #layout-popover-delete {
+    background: linear-gradient(#fff1f2, #ffe4e6) !important;
+    border-color: #fda4af !important;
+    color: #9f1239 !important;
+  }
+
+  #layout-word-popover .layout-mini-grid {
+    grid-template-columns: 4rem auto 4.8rem auto auto auto !important;
+    gap: 0.28rem !important;
+    align-items: center !important;
+  }
+
+
+  /* Floating selected-word mini toolbar: Word-like font group */
+  #layout-word-popover {
+    width: min(94vw, 34rem) !important;
+    padding: 0.55rem 0.65rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.65rem !important;
+    background: linear-gradient(#f8fbff, #eef4fc) !important;
+    box-shadow: 0 0.7rem 1.8rem rgba(15,23,42,0.18) !important;
+  }
+
+  #layout-word-popover > div:first-child {
+    font-size: 0.72rem !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.04em !important;
+    color: #475569 !important;
+    margin-bottom: 0.35rem !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) {
+    display: grid !important;
+    grid-template-columns: 1.7fr 1fr auto auto auto auto auto !important;
+    gap: 0.3rem !important;
+    align-items: center !important;
+  }
+
+  #layout-word-popover input[type="text"],
+  #layout-word-popover input[type="number"] {
+    min-height: 2rem !important;
+    padding: 0.25rem 0.45rem !important;
+    border: 1px solid #cbd5e1 !important;
+    border-radius: 0.32rem !important;
+    font-size: 0.86rem !important;
+    background: #ffffff !important;
+  }
+
+  #layout-word-popover label {
+    font-size: 0.72rem !important;
+    color: #475569 !important;
+    white-space: nowrap !important;
+  }
+
+  #layout-word-popover input[type="color"] {
+    width: 2rem !important;
+    height: 2rem !important;
+    padding: 0.04rem !important;
+    border: 1px solid #94a3b8 !important;
+    border-radius: 0.25rem !important;
+  }
+
+  #layout-word-popover button {
+    min-height: 2rem !important;
+    padding: 0.25rem 0.55rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.32rem !important;
+    background: linear-gradient(#ffffff, #e9eef7) !important;
+    color: #1f2937 !important;
+    font-size: 0.82rem !important;
+    font-weight: 600 !important;
+  }
+
+  #layout-word-popover .layout-mini-grid {
+    display: contents !important;
+  }
+
+  #layout-popover-apply {
+    background: linear-gradient(#dbeafe, #bfdbfe) !important;
+    border-color: #60a5fa !important;
+    color: #1e3a8a !important;
+  }
+
+  #layout-popover-delete {
+    background: linear-gradient(#fff1f2, #ffe4e6) !important;
+    border-color: #fda4af !important;
+    color: #9f1239 !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-review-toolbar {
+      grid-template-columns: repeat(4, auto) !important;
+    }
+
+    #layout-word-popover > div:nth-child(2) {
+      grid-template-columns: 1fr 4.5rem auto auto !important;
+    }
+  }
+
+
+  /* Word-like selected-word mini toolbar, compact not huge */
+  #layout-word-popover {
+    width: min(92vw, 28rem) !important;
+    padding: 0.55rem !important;
+    border-radius: 0.65rem !important;
+    background: #f8fbff !important;
+    border: 1px solid #cbd5e1 !important;
+    box-shadow: 0 0.65rem 1.4rem rgba(15,23,42,0.18) !important;
+  }
+
+  #layout-word-popover .layout-mini-grid {
+    grid-template-columns: 4.5rem auto auto auto auto auto !important;
+    gap: 0.25rem !important;
+    align-items: center !important;
+  }
+
+  #layout-word-popover input[type="text"],
+  #layout-word-popover input[type="number"] {
+    min-height: 1.8rem !important;
+    font-size: 0.82rem !important;
+    padding: 0.22rem 0.4rem !important;
+  }
+
+  #layout-word-popover button {
+    min-height: 1.8rem !important;
+    padding: 0.22rem 0.48rem !important;
+    font-size: 0.78rem !important;
+  }
+
+  #layout-word-popover input[type="color"] {
+    width: 1.65rem !important;
+    height: 1.65rem !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-review-toolbar {
+      gap: 0.22rem !important;
+      padding: 0.35rem !important;
+    }
+
+    #layout-review-toolbar .layout-tool-btn,
+    #layout-review-toolbar button {
+      font-size: 0.76rem !important;
+      padding: 0.25rem 0.42rem !important;
+    }
+
+    #layout-review-toolbar label {
+      font-size: 0.72rem !important;
+      padding: 0.15rem 0.28rem !important;
+    }
+  }
+
+
+  /* Rebuilt Word-style ribbon toolbar */
+  #layout-review-toolbar.word-ribbon-toolbar {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: stretch !important;
+    gap: 0 !important;
+    padding: 0.25rem 0.35rem !important;
+    border: 1px solid #c7d3e2 !important;
+    border-radius: 0.55rem !important;
+    background: #f7f9fc !important;
+    box-shadow: inset 0 -1px 0 #d8e1ec !important;
+  }
+
+  .word-ribbon-group {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    gap: 0.18rem !important;
+    padding: 0.25rem 0.55rem 0.12rem !important;
+    border-right: 1px solid #cbd5e1 !important;
+    min-height: 4.1rem !important;
+  }
+
+  .word-ribbon-row {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.25rem !important;
+    min-height: 1.55rem !important;
+  }
+
+  .word-ribbon-label {
+    text-align: center !important;
+    font-size: 0.64rem !important;
+    color: #64748b !important;
+    line-height: 1 !important;
+  }
+
+  #layout-review-toolbar .layout-tool-btn,
+  #layout-review-toolbar button {
+    min-height: 1.55rem !important;
+    padding: 0.18rem 0.45rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.22rem !important;
+    background: linear-gradient(#ffffff, #eef3fa) !important;
+    color: #1f2937 !important;
+    font-size: 0.76rem !important;
+    font-weight: 600 !important;
+    line-height: 1 !important;
+  }
+
+  #layout-review-toolbar .layout-tool-btn.active,
+  #layout-review-toolbar .layout-tool-btn.primary {
+    background: #dbeafe !important;
+    border-color: #60a5fa !important;
+    color: #1e3a8a !important;
+  }
+
+  #layout-review-toolbar .layout-tool-btn.danger {
+    background: #ffe4e6 !important;
+    border-color: #fda4af !important;
+    color: #9f1239 !important;
+  }
+
+  #layout-review-toolbar label {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.22rem !important;
+    font-size: 0.74rem !important;
+    color: #334155 !important;
+    white-space: nowrap !important;
+  }
+
+  #layout-review-toolbar input[type="checkbox"] {
+    width: 0.95rem !important;
+    height: 0.95rem !important;
+    margin: 0 !important;
+    accent-color: #2563eb !important;
+  }
+
+  #layout-review-toolbar input[type="color"] {
+    width: 1.45rem !important;
+    height: 1.45rem !important;
+    padding: 0 !important;
+    border: 1px solid #94a3b8 !important;
+    border-radius: 0.2rem !important;
+    background: #ffffff !important;
+  }
+
+  .word-ribbon-select,
+  .word-ribbon-font-size {
+    height: 1.55rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    padding: 0 0.4rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.2rem !important;
+    background: white !important;
+    font-size: 0.74rem !important;
+    color: #334155 !important;
+  }
+
+  .word-ribbon-select {
+    min-width: 5.3rem !important;
+  }
+
+  .word-ribbon-blue-a {
+    font-size: 1.05rem !important;
+    font-weight: 700 !important;
+    color: #2563eb !important;
+  }
+
+  #layout-zoom-label,
+  #layout-review-status {
+    font-size: 0.8rem !important;
+    color: #334155 !important;
+    padding: 0 0.25rem !important;
+    white-space: nowrap !important;
+  }
+
+
+  /* Force Word-like single horizontal ribbon */
+  #layout-review-toolbar.word-ribbon-toolbar {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    gap: 0 !important;
+    padding: 0.25rem 0.35rem !important;
+    min-height: 4.85rem !important;
+    max-height: 5.25rem !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    border: 1px solid #c7d3e2 !important;
+    border-radius: 0.45rem !important;
+    background: #f6f8fb !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-group {
+    flex: 0 0 auto !important;
+    min-height: 4.3rem !important;
+    height: 4.3rem !important;
+    padding: 0.25rem 0.55rem 0.1rem !important;
+    border-right: 1px solid #cbd5e1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-row {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.22rem !important;
+    min-height: 1.45rem !important;
+    white-space: nowrap !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-label {
+    height: 0.75rem !important;
+    font-size: 0.58rem !important;
+    color: #64748b !important;
+    text-align: center !important;
+    line-height: 0.75rem !important;
+  }
+
+  #layout-review-toolbar button,
+  #layout-review-toolbar .layout-tool-btn {
+    min-height: 1.45rem !important;
+    height: 1.45rem !important;
+    padding: 0.12rem 0.38rem !important;
+    font-size: 0.68rem !important;
+    border-radius: 0.18rem !important;
+    line-height: 1 !important;
+  }
+
+  #layout-review-toolbar label {
+    min-height: 1.45rem !important;
+    font-size: 0.68rem !important;
+    gap: 0.18rem !important;
+    padding: 0 !important;
+  }
+
+  #layout-review-toolbar input[type="checkbox"] {
+    width: 0.82rem !important;
+    height: 0.82rem !important;
+  }
+
+  #layout-review-toolbar input[type="color"] {
+    width: 1.25rem !important;
+    height: 1.25rem !important;
+    padding: 0 !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-select {
+    min-width: 4.6rem !important;
+    height: 1.45rem !important;
+    font-size: 0.68rem !important;
+    padding: 0 0.3rem !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-font-size {
+    height: 1.45rem !important;
+    font-size: 0.68rem !important;
+    padding: 0 0.32rem !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-blue-a {
+    font-size: 0.95rem !important;
+  }
+
+  #layout-zoom-label,
+  #layout-review-status {
+    font-size: 0.72rem !important;
+    height: 1.45rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+  }
+
+
+  /* Refine Word-like ribbon: denser, usable horizontal scroll */
+  #layout-review-toolbar.word-ribbon-toolbar {
+    min-height: 4.35rem !important;
+    max-height: 4.6rem !important;
+    padding: 0.18rem 0.25rem !important;
+    scrollbar-width: thin !important;
+    background: linear-gradient(#f8fafc, #eef3f8) !important;
+  }
+
+  #layout-review-toolbar.word-ribbon-toolbar::-webkit-scrollbar {
+    height: 0.35rem !important;
+  }
+
+  #layout-review-toolbar.word-ribbon-toolbar::-webkit-scrollbar-thumb {
+    background: #cbd5e1 !important;
+    border-radius: 999px !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-group {
+    height: 3.85rem !important;
+    min-height: 3.85rem !important;
+    padding: 0.2rem 0.42rem 0.08rem !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-row {
+    min-height: 1.35rem !important;
+  }
+
+  #layout-review-toolbar button,
+  #layout-review-toolbar .layout-tool-btn {
+    height: 1.35rem !important;
+    min-height: 1.35rem !important;
+    padding: 0.08rem 0.34rem !important;
+    font-size: 0.66rem !important;
+  }
+
+  #layout-review-toolbar label,
+  #layout-review-toolbar .word-ribbon-select,
+  #layout-review-toolbar .word-ribbon-font-size,
+  #layout-zoom-label,
+  #layout-review-status {
+    height: 1.35rem !important;
+    min-height: 1.35rem !important;
+    font-size: 0.66rem !important;
+  }
+
+  #layout-review-toolbar input[type="color"] {
+    width: 1.18rem !important;
+    height: 1.18rem !important;
+  }
+
+  #layout-review-toolbar input[type="checkbox"] {
+    width: 0.78rem !important;
+    height: 0.78rem !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-label {
+    height: 0.65rem !important;
+    line-height: 0.65rem !important;
+    font-size: 0.55rem !important;
+  }
+
+  #layout-review-toolbar .word-ribbon-select {
+    min-width: 4.25rem !important;
+  }
+
+
+  /* arrow group row */
+  #layout-word-popover > div:nth-child(2) > div:nth-of-type(2) {
+    grid-column: 1 / 2 !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.28rem !important;
+    flex-wrap: wrap !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) > div:nth-of-type(2) > div {
+    display: contents !important;
+  }
+
+  /* apply/delete row */
+  #layout-word-popover > div:nth-child(2) > div:nth-of-type(3) {
+    grid-column: 2 / 3 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 0.28rem !important;
+    flex-wrap: wrap !important;
+  }
+
+  #layout-popover-apply {
+    background: linear-gradient(#dbeafe, #c9defc) !important;
+    border-color: #8cb4f4 !important;
+    color: #1e3a8a !important;
+  }
+
+  #layout-popover-delete {
+    background: linear-gradient(#fff1f2, #ffe4e6) !important;
+    border-color: #f3b0b8 !important;
+    color: #9f1239 !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-word-popover {
+      width: min(96vw, 30rem) !important;
+    }
+
+    #layout-word-popover .layout-mini-grid {
+      grid-template-columns: minmax(7rem, 1fr) 3.2rem auto auto auto 1.8rem !important;
+    }
+
+    #layout-popover-text,
+    #layout-popover-font-family,
+    #layout-popover-font-size {
+      font-size: 0.78rem !important;
+    }
+
+    #layout-popover-font-down,
+    #layout-popover-font-up,
+    #layout-popover-font-all,
+    #layout-popover-up,
+    #layout-popover-left,
+    #layout-popover-down,
+    #layout-popover-right,
+    #layout-popover-apply,
+    #layout-popover-delete {
+      font-size: 0.76rem !important;
+      padding: 0.12rem 0.34rem !important;
+    }
+  }
+
+
+  /* Word-like selected-word popup */
+  #layout-word-popover {
+    width: min(94vw, 38rem) !important;
+    padding: 0.32rem !important;
+    border: 1px solid #bfc8d4 !important;
+    border-radius: 0.12rem !important;
+    background: #ffffff !important;
+    box-shadow: 0 0.35rem 1.05rem rgba(15, 23, 42, 0.22) !important;
+  }
+
+  #layout-word-popover > div:first-child {
+    display: none !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) {
+    display: grid !important;
+    grid-template-columns: auto auto auto auto auto auto auto auto auto !important;
+    grid-auto-rows: 1.9rem !important;
+    gap: 0.18rem !important;
+    align-items: center !important;
+  }
+
+  #layout-popover-text {
+    grid-column: 1 / 4 !important;
+    grid-row: 1 !important;
+    width: 11.5rem !important;
+    min-height: 1.85rem !important;
+    padding: 0.16rem 0.36rem !important;
+    border: 1px solid #bfc8d4 !important;
+    border-radius: 0 !important;
+    font-size: 0.86rem !important;
+    background: #ffffff !important;
+  }
+
+  #layout-word-popover .layout-mini-grid {
+    display: contents !important;
+  }
+
+  #layout-popover-font-family {
+    grid-column: 1 / 3 !important;
+    grid-row: 2 !important;
+    width: 9.5rem !important;
+  }
+
+  #layout-popover-font-size {
+    grid-column: 3 / 4 !important;
+    grid-row: 2 !important;
+    width: 3.6rem !important;
+    text-align: center !important;
+  }
+
+  #layout-popover-font-family,
+  #layout-popover-font-size {
+    height: 1.85rem !important;
+    padding: 0.12rem 0.34rem !important;
+    border: 1px solid #bfc8d4 !important;
+    border-radius: 0 !important;
+    background: #ffffff !important;
+    font-size: 0.84rem !important;
+  }
+
+  #layout-word-popover label[for="layout-popover-font-family"],
+  #layout-word-popover label[for="layout-popover-text-color"] {
+    display: none !important;
+  }
+
+  #layout-popover-font-down,
+  #layout-popover-font-up,
+  #layout-popover-font-all,
+  #layout-popover-up,
+  #layout-popover-left,
+  #layout-popover-down,
+  #layout-popover-right,
+  #layout-popover-apply,
+  #layout-popover-delete {
+    height: 1.85rem !important;
+    min-height: 1.85rem !important;
+    padding: 0.12rem 0.42rem !important;
+    border: 1px solid #bfc8d4 !important;
+    border-radius: 0 !important;
+    background: linear-gradient(#ffffff, #edf2f8) !important;
+    color: #111827 !important;
+    font-size: 0.82rem !important;
+    font-weight: 600 !important;
+    line-height: 1 !important;
+  }
+
+  #layout-popover-font-down {
+    grid-column: 4 !important;
+    grid-row: 1 !important;
+  }
+
+  #layout-popover-font-up {
+    grid-column: 5 !important;
+    grid-row: 1 !important;
+  }
+
+  #layout-popover-font-all {
+    grid-column: 6 !important;
+    grid-row: 1 !important;
+  }
+
+  #layout-popover-text-color {
+    grid-column: 7 !important;
+    grid-row: 1 !important;
+    width: 1.85rem !important;
+    height: 1.85rem !important;
+    padding: 0 !important;
+    border: 1px solid #94a3b8 !important;
+    border-radius: 0 !important;
+    background: #ffffff !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) > div:nth-of-type(2) {
+    display: contents !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) > div:nth-of-type(2) > div {
+    display: contents !important;
+  }
+
+  #layout-popover-up {
+    grid-column: 8 !important;
+    grid-row: 1 !important;
+  }
+
+  #layout-popover-left {
+    grid-column: 8 !important;
+    grid-row: 2 !important;
+  }
+
+  #layout-popover-down {
+    grid-column: 9 !important;
+    grid-row: 2 !important;
+  }
+
+  #layout-popover-right {
+    grid-column: 10 !important;
+    grid-row: 2 !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) > div:nth-of-type(3) {
+    display: contents !important;
+  }
+
+  #layout-popover-apply {
+    grid-column: 4 / 6 !important;
+    grid-row: 2 !important;
+    background: linear-gradient(#ffffff, #edf2f8) !important;
+  }
+
+  #layout-popover-delete {
+    grid-column: 6 / 8 !important;
+    grid-row: 2 !important;
+    background: linear-gradient(#fff7f8, #ffe4e6) !important;
+    color: #9f1239 !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-word-popover {
+      width: min(96vw, 34rem) !important;
+      overflow-x: auto !important;
+    }
+
+    #layout-word-popover > div:nth-child(2) {
+      min-width: 32rem !important;
+    }
+  }
+
+
+
+  /* Lock-size control in selected-word popup */
+  #layout-word-popover .layout-popover-lock-size-label {
+    height: 1.85rem !important;
+    padding: 0 0.35rem !important;
+    border: 1px solid #bfc8d4 !important;
+    background: #ffffff !important;
+    font-size: 0.78rem !important;
+    color: #334155 !important;
+    box-sizing: border-box !important;
+  }
+
+  #layout-popover-lock-size {
+    width: 0.9rem !important;
+    height: 0.9rem !important;
+    margin: 0 !important;
+  }
+
+
+  /* Move selected-word controls into ribbon */
+  #layout-ribbon-selection-group {
+    min-width: 42rem !important;
+  }
+
+  #layout-ribbon-selection-group .word-ribbon-row {
+    gap: 0.25rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-inline-field {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.2rem !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    min-height: 1.35rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-inline-field span {
+    font-size: 0.62rem !important;
+    color: #64748b !important;
+  }
+
+  #layout-ribbon-selection-group input,
+  #layout-ribbon-selection-group select {
+    height: 1.35rem !important;
+    min-height: 1.35rem !important;
+    padding: 0.08rem 0.3rem !important;
+    font-size: 0.66rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.18rem !important;
+    background: #fff !important;
+    box-sizing: border-box !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-text-field input {
+    width: 7.5rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-font-field input {
+    width: 6.5rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-size-field input {
+    width: 3.2rem !important;
+    text-align: center !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-color-field input[type="color"] {
+    width: 1.35rem !important;
+    padding: 0 !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-small-select select {
+    width: 4.8rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-small-field input,
+  #layout-ribbon-selection-group .ribbon-xy-field input {
+    width: 3.6rem !important;
+  }
+
+  #layout-ribbon-selection-group button {
+    height: 1.35rem !important;
+    min-height: 1.35rem !important;
+    padding: 0.08rem 0.32rem !important;
+    font-size: 0.64rem !important;
+  }
+
+  #layout-props-card {
+    display: none !important;
+  }
+
+
+  /* Better fit selected-word ribbon controls */
+  #layout-review-toolbar.word-ribbon-toolbar {
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    max-width: 100% !important;
+  }
+
+  #layout-ribbon-selection-group {
+    min-width: 36rem !important;
+    max-width: none !important;
+    flex: 0 0 auto !important;
+    padding-left: 0.4rem !important;
+    padding-right: 0.4rem !important;
+  }
+
+  #layout-ribbon-selection-group .word-ribbon-row {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    gap: 0.18rem !important;
+    overflow: hidden !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-inline-field {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.12rem !important;
+    min-width: 0 !important;
+    white-space: nowrap !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-inline-field span {
+    font-size: 0.58rem !important;
+    max-width: 3.4rem !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  #layout-ribbon-selection-group input,
+  #layout-ribbon-selection-group select,
+  #layout-ribbon-selection-group button {
+    height: 1.25rem !important;
+    min-height: 1.25rem !important;
+    font-size: 0.6rem !important;
+    padding: 0.05rem 0.22rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-text-field input {
+    width: 7rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-font-field input {
+    width: 5.8rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-size-field input {
+    width: 2.6rem !important;
+    text-align: center !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-color-field input[type="color"] {
+    width: 1.25rem !important;
+    min-width: 1.25rem !important;
+    padding: 0 !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-small-select select {
+    width: 4.2rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-small-field input {
+    width: 3rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-xy-field {
+    display: none !important;
+  }
+
+  #layout-ribbon-selection-group #layout-apply-style-line,
+  #layout-ribbon-selection-group #layout-apply-style-page,
+  #layout-ribbon-selection-group #layout-reset-style-word {
+    display: none !important;
+  }
+
+  #layout-ribbon-selection-group #layout-delete-word-inline {
+    color: #9f1239 !important;
+    background: #ffe4e6 !important;
+    border-color: #fda4af !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-ribbon-selection-group {
+      min-width: 31rem !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-text-field input {
+      width: 6rem !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-font-field input {
+      width: 5rem !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-inline-field span {
+      display: none !important;
+    }
+  }
+
+
+  /* Selection ribbon polish with compact position controls */
+  #layout-ribbon-selection-group {
+    min-width: 38rem !important;
+    padding-left: 0.25rem !important;
+    padding-right: 0.25rem !important;
+  }
+
+  #layout-ribbon-selection-group .word-ribbon-row {
+    gap: 0.12rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-inline-field {
+    gap: 0.08rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-inline-field span {
+    display: inline-flex !important;
+    font-size: 0.54rem !important;
+    max-width: 2.4rem !important;
+    color: #64748b !important;
+  }
+
+  #layout-ribbon-selection-group input,
+  #layout-ribbon-selection-group select,
+  #layout-ribbon-selection-group button {
+    height: 1.18rem !important;
+    min-height: 1.18rem !important;
+    font-size: 0.58rem !important;
+    padding: 0.03rem 0.18rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-text-field input {
+    width: 6.2rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-font-field input {
+    width: 4.8rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-size-field input {
+    width: 2.25rem !important;
+    text-align: center !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-color-field input[type="color"] {
+    width: 1.12rem !important;
+    min-width: 1.12rem !important;
+    padding: 0 !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-small-select select {
+    width: 3.55rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-small-field input {
+    width: 2.55rem !important;
+  }
+
+  /* Restore compact x/y position controls */
+  #layout-ribbon-selection-group .ribbon-xy-field {
+    display: inline-flex !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-xy-field span {
+    display: inline-flex !important;
+    max-width: 1rem !important;
+    font-size: 0.52rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-xy-field input {
+    width: 2.45rem !important;
+    text-align: right !important;
+  }
+
+  #layout-ribbon-selection-group #layout-apply-style-word {
+    min-width: 3.2rem !important;
+  }
+
+  #layout-ribbon-selection-group #layout-apply-word {
+    min-width: 2.5rem !important;
+  }
+
+  #layout-ribbon-selection-group #layout-delete-word-inline {
+    min-width: 4.3rem !important;
+    color: #9f1239 !important;
+    background: #ffe4e6 !important;
+    border-color: #fda4af !important;
+  }
+
+  #layout-ribbon-selection-group .word-ribbon-label {
+    margin-top: 0.02rem !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-ribbon-selection-group {
+      min-width: 37rem !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-inline-field span {
+      display: inline-flex !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-text-field input {
+      width: 5.6rem !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-font-field input {
+      width: 4.4rem !important;
+    }
+
+    #layout-ribbon-selection-group .ribbon-xy-field input {
+      width: 2.25rem !important;
+    }
+  }
+
+
+
+  /* Real paired font select */
+  .layout-font-family-select {
+    height: 1.18rem !important;
+    min-height: 1.18rem !important;
+    width: 1.35rem !important;
+    padding: 0 !important;
+    margin-left: 0.08rem !important;
+    font-size: 0.58rem !important;
+    border: 1px solid #b8c6d8 !important;
+    border-radius: 0.18rem !important;
+    background: #ffffff !important;
+    box-sizing: border-box !important;
+  }
+
+  #layout-popover-font-family-select {
+    width: 1.8rem !important;
+    height: 1.9rem !important;
+    min-height: 1.9rem !important;
+    grid-column: 1 / 2 !important;
+    grid-row: 2 !important;
+    justify-self: end !important;
+    z-index: 2 !important;
+  }
+
+  #layout-popover-font-family {
+    padding-right: 2rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-font-field {
+    min-width: 6.5rem !important;
+  }
+
+  #layout-ribbon-selection-group .ribbon-font-field input {
+    width: 4.6rem !important;
+  }
+
+
+
+  /* Popup: anchored normally on desktop, bottom bar only on mobile */
+  #layout-word-popover {
+    box-sizing: border-box !important;
+    z-index: 9998 !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-word-popover {
+      position: fixed !important;
+      left: 4.35rem !important;
+      right: 0.35rem !important;
+      bottom: 0.45rem !important;
+      top: auto !important;
+      width: auto !important;
+      max-width: none !important;
+      transform: none !important;
+      overflow: visible !important;
+    }
+  }
+
+  /* Keep ribbon from loading half-scrolled / visually clipped */
+  #layout-review-toolbar.word-ribbon-toolbar {
+    scroll-behavior: auto !important;
+  }
+
+  #layout-ribbon-selection-group {
+    max-width: none !important;
+  }
+
+
+  /* Mobile popup final cleanup */
+  #layout-review-debug {
+    display: none !important;
+  }
+
+  @media (max-width: 760px) {
+    #layout-word-popover {
+      position: fixed !important;
+      left: 4.25rem !important;
+      right: 0.35rem !important;
+      bottom: calc(env(safe-area-inset-bottom, 0px) + 0.6rem) !important;
+      top: auto !important;
+      width: auto !important;
+      max-width: none !important;
+      max-height: 9.5rem !important;
+      overflow: hidden !important;
+      padding: 0.35rem !important;
+      box-sizing: border-box !important;
+      z-index: 9998 !important;
+    }
+
+    #layout-word-popover > div:nth-child(2) {
+      display: grid !important;
+      grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem 3.4rem !important;
+      grid-auto-rows: 1.9rem !important;
+      gap: 0.25rem !important;
+      min-width: 0 !important;
+      max-width: 100% !important;
+      align-items: center !important;
+    }
+
+    #layout-popover-text {
+      grid-column: 1 / 5 !important;
+      grid-row: 1 !important;
+      width: 100% !important;
+    }
+
+    #layout-popover-font-family {
+      grid-column: 1 / 2 !important;
+      grid-row: 2 !important;
+      width: 100% !important;
+      min-width: 0 !important;
+      padding-right: 0.35rem !important;
+    }
+
+    #layout-popover-font-family-select {
+      grid-column: 2 / 3 !important;
+      grid-row: 2 !important;
+      width: 100% !important;
+      height: 1.9rem !important;
+      min-height: 1.9rem !important;
+      position: static !important;
+      justify-self: stretch !important;
+    }
+
+    #layout-popover-font-size {
+      grid-column: 3 / 4 !important;
+      grid-row: 2 !important;
+      width: 100% !important;
+      text-align: center !important;
+    }
+
+    #layout-popover-text-color {
+      grid-column: 4 / 5 !important;
+      grid-row: 2 !important;
+      width: 100% !important;
+      height: 1.9rem !important;
+      position: static !important;
+      justify-self: stretch !important;
+    }
+
+    #layout-popover-font-down {
+      grid-column: 1 / 2 !important;
+      grid-row: 3 !important;
+    }
+
+    #layout-popover-font-up {
+      grid-column: 2 / 3 !important;
+      grid-row: 3 !important;
+    }
+
+    #layout-popover-font-all {
+      grid-column: 3 / 4 !important;
+      grid-row: 3 !important;
+    }
+
+    #layout-popover-apply {
+      grid-column: 1 / 3 !important;
+      grid-row: 4 !important;
+    }
+
+    #layout-popover-delete {
+      grid-column: 3 / 5 !important;
+      grid-row: 4 !important;
+    }
+
+    .layout-popover-lock-size-label {
+      grid-column: 1 / 5 !important;
+      grid-row: 5 !important;
+      height: 1.5rem !important;
+      min-height: 1.5rem !important;
+      padding: 0.15rem 0.3rem !important;
+    }
+
+    #layout-popover-up,
+    #layout-popover-left,
+    #layout-popover-down,
+    #layout-popover-right {
+      display: none !important;
+    }
+
+    #layout-word-popover input,
+    #layout-word-popover select,
+    #layout-word-popover button {
+      min-width: 0 !important;
+      box-sizing: border-box !important;
+    }
+  }
+
+</style>
+
+      <div id="layout-review-toolbar" class="word-ribbon-toolbar">
+      <div class="word-ribbon-group">
+        <div class="word-ribbon-row">
+          <button type="button" class="layout-tool-btn active" id="layout-tool-select">Select</button>
+          <button type="button" class="layout-tool-btn" id="layout-tool-pan">Pan</button>
+          <button type="button" class="layout-tool-btn" id="layout-tool-add">Add</button>
+          <button type="button" class="layout-tool-btn danger" id="layout-delete-word">Delete</button>
+        </div>
+        <div class="word-ribbon-label">Tools</div>
+      </div>
+
+      <div class="word-ribbon-group">
+        <div class="word-ribbon-row">
+          <button type="button" class="layout-tool-btn" id="layout-undo">Undo</button>
+          <button type="button" class="layout-tool-btn" id="layout-redo">Redo</button>
+        </div>
+        <div class="word-ribbon-label">Edit</div>
+      </div>
+
+      <div class="word-ribbon-group">
+        <div class="word-ribbon-row">
+          <button type="button" class="layout-tool-btn" id="layout-zoom-out">−</button>
+          <button type="button" class="layout-tool-btn" id="layout-fit-width">Fit</button>
+          <button type="button" class="layout-tool-btn" id="layout-zoom-in">+</button>
+          <span id="layout-zoom-label">100%</span>
+        </div>
+        <div class="word-ribbon-label">Zoom</div>
+      </div>
+
+      <div class="word-ribbon-group word-ribbon-font-group">
+        <div class="word-ribbon-row">
+          <span class="word-ribbon-select">OCR Text</span>
+          <span class="word-ribbon-font-size">11</span>
+          <label class="word-ribbon-color-control">
+            <span class="word-ribbon-blue-a">A</span>
+            <input type="color" id="layout-toolbar-text-color" value="#111827">
+          </label>
+        </div>
+        <div class="word-ribbon-row">
+          <label><input type="checkbox" id="layout-show-text"> Text</label>
+          <label><input type="checkbox" id="layout-show-baselines"> Baselines</label>
+        </div>
+        <div class="word-ribbon-label">Font</div>
+      </div>
+
+      <div class="word-ribbon-group">
+        <div class="word-ribbon-row">
+          <label><input type="checkbox" id="layout-show-scan" checked> Scan</label>
+          <label><input type="checkbox" id="layout-show-boxes" checked> Boxes</label>
+          <label><input type="checkbox" id="layout-show-guides" checked> Guides</label>
+          <label><input type="checkbox" id="layout-show-snap" checked> Snap</label>
+        </div>
+        <div class="word-ribbon-row">
+          <label class="word-ribbon-color-control">Box <input type="color" id="layout-markup-color" value="#dc2626"></label>
+          <label class="word-ribbon-color-control">Selected <input type="color" id="layout-selected-color" value="#2563eb"></label>
+          <label class="word-ribbon-color-control">Baseline <input type="color" id="layout-baseline-color" value="#10b981"></label>
+        </div>
+        <div class="word-ribbon-label">Display</div>
+      </div>
+
+      
+      <div class="word-ribbon-group word-ribbon-selection-group" id="layout-ribbon-selection-group">
+        <div class="word-ribbon-row" id="layout-ribbon-selection-row-1"></div>
+        <div class="word-ribbon-row" id="layout-ribbon-selection-row-2"></div>
+        <div class="word-ribbon-label">Selection</div>
+      </div>
+<div class="word-ribbon-group">
+        <div class="word-ribbon-row">
+          <button type="submit" form="layout-review-save-form" class="layout-tool-btn primary" onclick="window.prepareLayoutReviewSubmit && window.prepareLayoutReviewSubmit()">Save</button>
+          <span id="layout-review-status">Ready</span>
+        </div>
+        <div class="word-ribbon-label">Document</div>
+      </div>
+    </div>
+<div id="layout-review-shell">
     <div>
       <div id="layout-review-canvas-wrap" oncontextmenu="return false;">
         <div id="layout-review-stage">
@@ -650,7 +2009,30 @@ document.addEventListener("DOMContentLoaded", () => {
               <input id="layout-popover-text" type="text" style="width:100%;" placeholder="Word text">
               <div class="layout-mini-grid">
                 <input id="layout-popover-font-size" type="number" step="0.1" min="6" style="width:100%;" placeholder="Font size">
-                <button type="button" id="layout-popover-font-down">A-</button>
+                
+          <label for="layout-popover-font-family">Font</label>
+          <input id="layout-popover-font-family" type="text" placeholder="Helvetica"><select id="layout-popover-font-family-select" class="layout-font-family-select"><option value="">▼</option>
+<option value="Helvetica">Helvetica</option>
+<option value="Arial">Arial</option>
+<option value="Calibri">Calibri</option>
+<option value="Cambria">Cambria</option>
+<option value="Times New Roman">Times New Roman</option>
+<option value="Courier New">Courier New</option>
+<option value="Georgia">Georgia</option>
+<option value="Verdana">Verdana</option>
+<option value="Trebuchet MS">Trebuchet MS</option>
+<option value="DejaVu Sans">DejaVu Sans</option>
+<option value="DejaVu Serif">DejaVu Serif</option>
+<option value="Liberation Sans">Liberation Sans</option>
+<option value="Liberation Serif">Liberation Serif</option></select>
+
+          <label for="layout-popover-text-color">Text color</label>
+          <input id="layout-popover-text-color" type="color" value="#000000">
+                <label class="layout-popover-lock-size-label" style="display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap;">
+                  <input id="layout-popover-lock-size" type="checkbox">
+                  Lock size
+                </label>
+<button type="button" id="layout-popover-font-down">A-</button>
                 <button type="button" id="layout-popover-font-up">A+</button>
                 <button type="button" id="layout-popover-font-all">All</button>
               </div>
@@ -697,7 +2079,20 @@ document.addEventListener("DOMContentLoaded", () => {
 
         <div>
           <label for="layout-word-font-family">Font family</label>
-          <input id="layout-word-font-family" type="text" style="width:100%;" placeholder="Helvetica">
+          <input id="layout-word-font-family" type="text" style="width:100%;" placeholder="Helvetica"><select id="layout-word-font-family-select" class="layout-font-family-select"><option value="">▼</option>
+<option value="Helvetica">Helvetica</option>
+<option value="Arial">Arial</option>
+<option value="Calibri">Calibri</option>
+<option value="Cambria">Cambria</option>
+<option value="Times New Roman">Times New Roman</option>
+<option value="Courier New">Courier New</option>
+<option value="Georgia">Georgia</option>
+<option value="Verdana">Verdana</option>
+<option value="Trebuchet MS">Trebuchet MS</option>
+<option value="DejaVu Sans">DejaVu Sans</option>
+<option value="DejaVu Serif">DejaVu Serif</option>
+<option value="Liberation Sans">Liberation Sans</option>
+<option value="Liberation Serif">Liberation Serif</option></select>
         </div>
 
         <div class="layout-field-grid">
@@ -769,7 +2164,94 @@ document.addEventListener("DOMContentLoaded", () => {
     <input type="hidden" name="layout_review_json" id="layout-review-json">
   </form>
 
-  <script id="layout-review-data" type="application/json">{{ layout_review_pages|tojson }}</script>
+  
+<style id="layout-mobile-popover-fit-fix">
+@media (max-width: 760px) {
+  #layout-word-popover {
+    position: fixed !important;
+    left: 4.4rem !important;
+    right: 0.45rem !important;
+    bottom: 0.45rem !important;
+    top: auto !important;
+    width: auto !important;
+    max-width: none !important;
+    max-height: 42vh !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    z-index: 99999 !important;
+    box-sizing: border-box !important;
+    padding: 0.55rem !important;
+    pointer-events: auto !important;
+    touch-action: manipulation !important;
+  }
+
+  #layout-word-popover * {
+    pointer-events: auto !important;
+  }
+
+  #layout-word-popover input,
+  #layout-word-popover button,
+  #layout-word-popover select,
+  #layout-word-popover label {
+    touch-action: manipulation !important;
+  }
+
+  #layout-word-popover > div:nth-child(2) {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) 5.5rem 4rem 4rem !important;
+    gap: 0.45rem !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  #layout-popover-text {
+    grid-column: 1 / -1 !important;
+  }
+
+  #layout-popover-font-family {
+    grid-column: 1 / 2 !important;
+    min-width: 0 !important;
+  }
+
+  #layout-popover-font-size {
+    grid-column: 2 / 3 !important;
+  }
+
+  #layout-popover-text-color {
+    grid-column: 3 / 4 !important;
+    width: 100% !important;
+    height: 2.65rem !important;
+  }
+
+  #layout-popover-apply {
+    grid-column: 1 / 3 !important;
+  }
+
+  #layout-popover-delete {
+    grid-column: 3 / -1 !important;
+  }
+
+  #layout-popover-font-down,
+  #layout-popover-font-up,
+  #layout-popover-font-all {
+    min-height: 2.65rem !important;
+  }
+
+  #layout-lock-size-row,
+  #layout-popover-lock-size-row,
+  #layout-popover-lock-size,
+  label[for="layout-popover-lock-size"] {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.45rem !important;
+    grid-column: 1 / -1 !important;
+    min-height: 2.4rem !important;
+  }
+}
+</style>
+
+
+<script id="layout-review-data" type="application/json">{{ layout_review_pages|tojson }}</script>
   <script>
   (function () {
     const panel = document.querySelector('.tab-panel[data-panel="layout-review"]');
@@ -785,6 +2267,15 @@ document.addEventListener("DOMContentLoaded", () => {
     const saveJsonInput = document.getElementById("layout-review-json");
     const statusEl = document.getElementById("layout-review-status");
     const zoomLabel = document.getElementById("layout-zoom-label");
+    const showScanInput = document.getElementById("layout-show-scan");
+    const showBoxesInput = document.getElementById("layout-show-boxes");
+    const showTextInput = document.getElementById("layout-show-text");
+    const showBaselinesInput = document.getElementById("layout-show-baselines");
+      const showGuidesInput = document.getElementById("layout-show-guides");
+      const showSnapInput = document.getElementById("layout-show-snap");
+    const markupColorInput = document.getElementById("layout-markup-color");
+    const selectedColorInput = document.getElementById("layout-selected-color");
+    const baselineColorInput = document.getElementById("layout-baseline-color");
 
     if (!panel || !dataTag || !wrap || !stage || !canvas || !image) return;
 
@@ -796,7 +2287,8 @@ document.addEventListener("DOMContentLoaded", () => {
     const fontStyleInput = document.getElementById("layout-word-font-style");
     const letterSpacingInput = document.getElementById("layout-word-letter-spacing");
     const textColorInput = document.getElementById("layout-word-text-color");
-    const x1Input = document.getElementById("layout-x1");
+        const toolbarTextColorInput = document.getElementById("layout-toolbar-text-color");
+const x1Input = document.getElementById("layout-x1");
     const y1Input = document.getElementById("layout-y1");
     const x2Input = document.getElementById("layout-x2");
     const y2Input = document.getElementById("layout-y2");
@@ -804,14 +2296,134 @@ document.addEventListener("DOMContentLoaded", () => {
     const popoverEl = document.getElementById("layout-word-popover");
     const popoverTextInput = document.getElementById("layout-popover-text");
     const popoverFontSizeInput = document.getElementById("layout-popover-font-size");
+    const popoverFontFamilyInput = document.getElementById("layout-popover-font-family");
+    const popoverTextColorInput = document.getElementById("layout-popover-text-color");
+      const popoverLockSizeInput = document.getElementById("layout-popover-lock-size");
 
     const applyStyleWordBtn = document.getElementById("layout-apply-style-word");
     const applyStyleLineBtn = document.getElementById("layout-apply-style-line");
     const applyStylePageBtn = document.getElementById("layout-apply-style-page");
     const resetStyleWordBtn = document.getElementById("layout-reset-style-word");
 
-    const HANDLE_SIZE_PX = 14;
-    const HANDLE_HIT_PX = 26;
+      function moveSelectionControlsToRibbon() {
+        const row1 = document.getElementById("layout-ribbon-selection-row-1");
+        const row2 = document.getElementById("layout-ribbon-selection-row-2");
+        const propsCard = document.getElementById("layout-props-card");
+        if (!row1 || !row2 || !propsCard) return;
+
+        function moveInputWithLabel(inputId, targetRow, compactClass = "") {
+          const input = document.getElementById(inputId);
+          if (!input) return;
+
+          const label = propsCard.querySelector(`label[for="${inputId}"]`);
+          const wrap = document.createElement("label");
+          wrap.className = "ribbon-inline-field " + compactClass;
+
+          if (label) {
+            const labelText = document.createElement("span");
+            labelText.textContent = label.textContent || "";
+            wrap.appendChild(labelText);
+            label.style.display = "none";
+          }
+
+          wrap.appendChild(input);
+
+          const companionSelect = document.getElementById(inputId + "-select");
+          if (companionSelect) {
+            wrap.appendChild(companionSelect);
+          }
+          targetRow.appendChild(wrap);
+        }
+
+        function moveEl(id, targetRow) {
+          const el = document.getElementById(id);
+          if (el) targetRow.appendChild(el);
+        }
+
+        moveInputWithLabel("layout-word-text", row1, "ribbon-text-field");
+        moveInputWithLabel("layout-word-font-family", row1, "ribbon-font-field");
+        moveInputWithLabel("layout-word-font-size", row1, "ribbon-size-field");
+        moveInputWithLabel("layout-word-text-color", row1, "ribbon-color-field");
+
+        moveEl("layout-font-down", row1);
+        moveEl("layout-font-up", row1);
+        moveEl("layout-font-all", row1);
+
+        moveInputWithLabel("layout-word-font-weight", row2, "ribbon-small-select");
+        moveInputWithLabel("layout-word-font-style", row2, "ribbon-small-select");
+        moveInputWithLabel("layout-word-letter-spacing", row2, "ribbon-small-field");
+
+        moveEl("layout-apply-style-word", row2);
+        moveEl("layout-apply-style-line", row2);
+        moveEl("layout-apply-style-page", row2);
+        moveEl("layout-reset-style-word", row2);
+
+        moveInputWithLabel("layout-x1", row2, "ribbon-xy-field");
+        moveInputWithLabel("layout-y1", row2, "ribbon-xy-field");
+        moveInputWithLabel("layout-x2", row2, "ribbon-xy-field");
+        moveInputWithLabel("layout-y2", row2, "ribbon-xy-field");
+
+        moveEl("layout-apply-word", row2);
+        moveEl("layout-delete-word-inline", row2);
+
+        propsCard.style.display = "none";
+      }
+
+      moveSelectionControlsToRibbon();
+
+      function installRealFontFamilySelects() {
+        const pairs = [
+          ["layout-word-font-family", "layout-word-font-family-select"],
+          ["layout-popover-font-family", "layout-popover-font-family-select"],
+        ];
+
+        function setFont(font) {
+          if (!font) return;
+
+          for (const [inputId, selectId] of pairs) {
+            const input = document.getElementById(inputId);
+            const select = document.getElementById(selectId);
+
+            if (input) {
+              input.value = font;
+              input.dispatchEvent(new Event("input", { bubbles: true }));
+              input.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+
+            if (select) select.value = font;
+          }
+
+          const w = getSelectedWord();
+          if (w) {
+            applyStyleToWord(w, { font_family: font });
+            refreshSelectionUI({ geometryOnly: true });
+            syncReviewedTextarea();
+            renderCanvas();
+          }
+        }
+
+        for (const [inputId, selectId] of pairs) {
+          const input = document.getElementById(inputId);
+          const select = document.getElementById(selectId);
+          if (!input || !select) continue;
+
+          select.addEventListener("change", () => {
+            if (select.value) setFont(select.value);
+          });
+
+          input.addEventListener("change", () => {
+            const typed = input.value || "";
+            const matched = Array.from(select.options).some(opt => opt.value === typed);
+            select.value = matched ? typed : "";
+          });
+        }
+      }
+
+      installRealFontFamilySelects();
+
+
+const HANDLE_SIZE_PX = 14;
+    const HANDLE_HIT_PX = 12;
     const SNAP_THRESHOLD_PX = 10;
     const LINE_GROUP_TOLERANCE = 12;
     const MIN_ZOOM = 0.2;
@@ -948,6 +2560,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     function syncFontInputs(value, word = null) {
       const v = Number.isFinite(Number(value)) ? Number(value) : "";
+
       if (fontSizeInput) fontSizeInput.value = v;
       if (popoverFontSizeInput) popoverFontSizeInput.value = v;
 
@@ -956,11 +2569,42 @@ document.addEventListener("DOMContentLoaded", () => {
       ensureStyle(word);
       resolveStyle(word);
 
-      if (fontFamilyInput) fontFamilyInput.value = word.resolved_style?.font_family || "Helvetica";
-      if (fontWeightInput) fontWeightInput.value = String(word.resolved_style?.font_weight || 400);
-      if (fontStyleInput) fontStyleInput.value = word.resolved_style?.font_style || "normal";
-      if (letterSpacingInput) letterSpacingInput.value = String(word.resolved_style?.letter_spacing || 0);
-      if (textColorInput) textColorInput.value = word.resolved_style?.text_color || "#000000";
+      const style = word.resolved_style || {};
+      const color = (word.resolved_style && word.resolved_style.text_color) || word.text_color_guess || "#000000";
+      const family = (word.resolved_style && word.resolved_style.font_family) || word.font_family_guess || "Helvetica";
+
+      if (fontFamilyInput) fontFamilyInput.value = family;
+      if (popoverFontFamilyInput) popoverFontFamilyInput.value = family;
+      if (fontWeightInput) fontWeightInput.value = String(style.font_weight || 400);
+      if (fontStyleInput) fontStyleInput.value = style.font_style || "normal";
+      if (letterSpacingInput) letterSpacingInput.value = String(style.letter_spacing || 0);
+
+      if (textColorInput) textColorInput.value = color;
+      if (popoverTextColorInput) popoverTextColorInput.value = color;
+      if (toolbarTextColorInput) toolbarTextColorInput.value = color;
+    }
+
+
+    function setSelectedWordTextColorFromInput(color) {
+      const word = getSelectedWord();
+      if (!word || !color) return;
+
+      ensureStyle(word);
+      word.style = word.style || {};
+      word.resolved_style = word.resolved_style || {};
+
+      ensureStyle(word);
+      word.override_style.text_color = color;
+      resolveStyle(word);
+      word.text_color_guess = color;
+
+      if (textColorInput) textColorInput.value = color;
+      if (popoverTextColorInput) popoverTextColorInput.value = color;
+      if (toolbarTextColorInput) toolbarTextColorInput.value = color;
+
+      refreshSelectionUI({ geometryOnly: true });
+      syncReviewedTextarea();
+      renderCanvas();
     }
 
     function pageToCanvasPoint(px, py, displayWidth, displayHeight) {
@@ -1129,7 +2773,32 @@ document.addEventListener("DOMContentLoaded", () => {
       popoverEl.style.top = desiredTop + "px";
     }
 
-    function refreshSelectionUI(opts = {}) {
+    
+    function positionPopoverFixedSize(word = null) {
+      if (!popoverEl) return;
+
+      const w = word || getSelectedWord();
+      const wrapRect = wrap.getBoundingClientRect();
+
+      let left = wrapRect.left + 24;
+      let top = wrapRect.top + 24;
+
+      if (w && Array.isArray(w.bbox)) {
+        const bbox = normalizeBBox(w.bbox);
+        const displayWidth = image.clientWidth || image.naturalWidth || 1;
+        const displayHeight = image.clientHeight || image.naturalHeight || 1;
+
+        const p = pageToCanvasPoint(bbox[0], bbox[3], displayWidth, displayHeight);
+        left = wrapRect.left + p.x + 12;
+        top = wrapRect.top + p.y + 12;
+      }
+
+      popoverEl.style.setProperty("--layout-popover-left", `${Math.round(left)}px`);
+      popoverEl.style.setProperty("--layout-popover-top", `${Math.round(top)}px`);
+    }
+
+function refreshSelectionUI(opts = {}) {
+      if (!getSelectedWord() && popoverEl) popoverEl.style.display = "none";
       const { forceText = false, geometryOnly = false } = opts;
       const w = getSelectedWord();
 
@@ -1154,7 +2823,7 @@ document.addEventListener("DOMContentLoaded", () => {
       if (y1Input) y1Input.value = bbox[1];
       if (x2Input) x2Input.value = bbox[2];
       if (y2Input) y2Input.value = bbox[3];
-      syncFontInputs(getWordFontSize(w));
+      syncFontInputs(getWordFontSize(w), w);
 
       const activeId = document.activeElement ? document.activeElement.id : "";
       const editingText = activeId === "layout-word-text" || activeId === "layout-popover-text";
@@ -1166,6 +2835,13 @@ document.addEventListener("DOMContentLoaded", () => {
       positionPopover();
     }
 
+    function baselineYForWord(word, bboxOverride = null) {
+      const bbox = normalizeBBox(bboxOverride || word?.bbox || [0,0,0,0]);
+      const m = bboxMetrics(bbox);
+      const fs = Number(word?.resolved_style?.font_size || word?.font_size_guess || defaultFontSizeForBBox(bbox));
+      return m.y2 - Math.max(0.5, fs * 0.18);
+    }
+
     function snapBBox(rawBBox, movingWordId) {
       const rect = canvas.getBoundingClientRect();
       const tx = SNAP_THRESHOLD_PX * (Number(page.page_width || 1) / Math.max(1, rect.width));
@@ -1175,16 +2851,31 @@ document.addEventListener("DOMContentLoaded", () => {
       let out = [box.x1, box.y1, box.x2, box.y2];
       snapGuides = { x: null, y: null };
 
+      if (!layoutToggleChecked(showSnapInput, true)) {
+        return normalizeBBox(out);
+      }
+
+      const movingWord = words.find(w => String(w.id) === String(movingWordId)) || null;
+
       const candidates = [];
       for (const word of words) {
         if (String(word.id) === String(movingWordId)) continue;
+        if (!Array.isArray(word.bbox)) continue;
+
+        ensureStyle(word);
+        resolveStyle(word);
+
         const m = bboxMetrics(word.bbox || [0,0,0,0]);
-        candidates.push(m);
+        candidates.push({
+          x: [m.x1, m.cx, m.x2],
+          y: [m.y1, m.cy, m.y2, baselineYForWord(word)],
+        });
       }
 
       function applyDeltaX(delta) {
         out = [out[0] + delta, out[1], out[2] + delta, out[3]];
       }
+
       function applyDeltaY(delta) {
         out = [out[0], out[1] + delta, out[2], out[3] + delta];
       }
@@ -1193,24 +2884,18 @@ document.addEventListener("DOMContentLoaded", () => {
       let bestY = null;
 
       const current = bboxMetrics(out);
-      const xPoints = [
-        { value: current.x1, kind: "left" },
-        { value: current.cx, kind: "center" },
-        { value: current.x2, kind: "right" },
-      ];
+      const xPoints = [current.x1, current.cx, current.x2];
       const yPoints = [
-        { value: current.y1, kind: "top" },
-        { value: current.cy, kind: "center" },
-        { value: current.y2, kind: "bottom" },
+        current.y1,
+        current.cy,
+        current.y2,
+        baselineYForWord(movingWord, out),
       ];
 
       for (const c of candidates) {
-        const cxPoints = [c.x1, c.cx, c.x2];
-        const cyPoints = [c.y1, c.cy, c.y2];
-
         for (const xp of xPoints) {
-          for (const gv of cxPoints) {
-            const delta = gv - xp.value;
+          for (const gv of c.x) {
+            const delta = gv - xp;
             if (Math.abs(delta) <= tx && (!bestX || Math.abs(delta) < Math.abs(bestX.delta))) {
               bestX = { delta, guide: gv };
             }
@@ -1218,8 +2903,8 @@ document.addEventListener("DOMContentLoaded", () => {
         }
 
         for (const yp of yPoints) {
-          for (const gv of cyPoints) {
-            const delta = gv - yp.value;
+          for (const gv of c.y) {
+            const delta = gv - yp;
             if (Math.abs(delta) <= ty && (!bestY || Math.abs(delta) < Math.abs(bestY.delta))) {
               bestY = { delta, guide: gv };
             }
@@ -1231,6 +2916,7 @@ document.addEventListener("DOMContentLoaded", () => {
         applyDeltaX(bestX.delta);
         snapGuides.x = bestX.guide;
       }
+
       if (bestY) {
         applyDeltaY(bestY.delta);
         snapGuides.y = bestY.guide;
@@ -1239,6 +2925,111 @@ document.addEventListener("DOMContentLoaded", () => {
       return normalizeBBox(out);
     }
 
+    function hexToRgba(hex, alpha) {
+      const clean = String(hex || "#000000").replace("#", "");
+      if (clean.length !== 6) return `rgba(0,0,0,${alpha})`;
+      const r = parseInt(clean.slice(0, 2), 16);
+      const g = parseInt(clean.slice(2, 4), 16);
+      const b = parseInt(clean.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+
+    function layoutToggleChecked(input, fallback) {
+      return input ? !!input.checked : fallback;
+    }
+
+    function drawReplicaText(word, bbox, x1, y1, x2, y2, w, h, scaleX, scaleY) {
+      const text = String(word.text || "").trim();
+      if (!text) return;
+
+      ensureStyle(word);
+      resolveStyle(word);
+      const style = word.resolved_style || {};
+
+      const fontFamily = (word.resolved_style && word.resolved_style.font_family) || word.font_family_guess || "Helvetica";
+      const fontWeight = style.font_weight || 400;
+      const fontStyle = style.font_style || "normal";
+
+      const sourceFontSize = Number(style.font_size || word.font_size_guess || 10);
+      const fontPx = Math.max(1, Math.min(h * 0.92, sourceFontSize * scaleY));
+
+      ctx.save();
+      ctx.globalAlpha = Number(style.opacity || 1);
+      ctx.fillStyle = toolbarTextColorInput ? toolbarTextColorInput.value : "#000000";
+      ctx.font = `${fontStyle} ${fontWeight} ${fontPx}px ${fontFamily}, Arial, sans-serif`;
+      ctx.textBaseline = "alphabetic";
+
+      // Approximate PDF baseline from box bottom. This is for live visual alignment.
+      const baselineY = y2 - Math.max(0.5, fontPx * 0.18);
+      const measured = ctx.measureText(text).width;
+      const fitScale = measured > 0 && measured > w ? Math.max(0.35, w / measured) : 1;
+
+      ctx.translate(x1, baselineY);
+      ctx.scale(fitScale, 1);
+      ctx.fillText(text, 0, 0);
+      ctx.restore();
+    }
+
+    function drawBaselineGuide(x1, x2, y2, h) {
+      const fontGuideY = y2 - Math.max(0.5, h * 0.18);
+      ctx.save();
+      ctx.strokeStyle = hexToRgba(baselineColorInput ? baselineColorInput.value : "#10b981", 0.85);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([3, 3]);
+      ctx.beginPath();
+      ctx.moveTo(x1, fontGuideY);
+      ctx.lineTo(x2, fontGuideY);
+      ctx.stroke();
+      ctx.restore();
+    }
+
+    
+    function drawPageGuideLine(axis, pageValue, color) {
+      const displayWidth = image.clientWidth || image.naturalWidth || 1;
+      const displayHeight = image.clientHeight || image.naturalHeight || 1;
+
+      ctx.save();
+      ctx.setLineDash([6, 6]);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = color;
+      ctx.beginPath();
+
+      if (axis === "x") {
+        const p = pageToCanvasPoint(pageValue, 0, displayWidth, displayHeight);
+        ctx.moveTo(p.x, 0);
+        ctx.lineTo(p.x, canvas.height);
+      } else {
+        const p = pageToCanvasPoint(0, pageValue, displayWidth, displayHeight);
+        ctx.moveTo(0, p.y);
+        ctx.lineTo(canvas.width, p.y);
+      }
+
+      ctx.stroke();
+      ctx.restore();
+    }
+
+    function drawSelectedAlignmentGuides() {
+      if (!layoutToggleChecked(showGuidesInput, true)) return;
+
+      const w = getSelectedWord();
+      if (!w || !Array.isArray(w.bbox)) return;
+
+      ensureStyle(w);
+      resolveStyle(w);
+
+      const m = bboxMetrics(w.bbox || [0,0,0,0]);
+      const baseline = baselineYForWord(w);
+
+      // Selected box edges / centers / baseline
+      [m.x1, m.cx, m.x2].forEach(x => drawPageGuideLine("x", x, "rgba(37,99,235,0.22)"));
+      [m.y1, m.cy, m.y2].forEach(y => drawPageGuideLine("y", y, "rgba(37,99,235,0.22)"));
+      drawPageGuideLine("y", baseline, "rgba(16,185,129,0.55)");
+
+      // Active snap guides
+      if (snapGuides?.x != null) drawPageGuideLine("x", snapGuides.x, "rgba(220,38,38,0.9)");
+      if (snapGuides?.y != null) drawPageGuideLine("y", snapGuides.y, "rgba(220,38,38,0.9)");
+    }
+
     function renderCanvas() {
       const sized = sizeCanvasToStage();
       if (!sized) {
@@ -1250,6 +3041,15 @@ document.addEventListener("DOMContentLoaded", () => {
       const displayHeight = sized.height;
       ctx.clearRect(0, 0, displayWidth, displayHeight);
 
+      const showScan = layoutToggleChecked(showScanInput, true);
+      const showBoxes = layoutToggleChecked(showBoxesInput, true);
+      const showText = layoutToggleChecked(showTextInput, false);
+      const showGuides = layoutToggleChecked(showGuidesInput, true);
+      const showBaselines = layoutToggleChecked(showBaselinesInput, false);
+
+      image.style.opacity = showScan ? "1" : "0";
+      image.style.visibility = showScan ? "visible" : "hidden";
+
       const scaleX = displayWidth / Number(page.page_width || 1);
       const scaleY = displayHeight / Number(page.page_height || 1);
 
@@ -1263,22 +3063,34 @@ document.addEventListener("DOMContentLoaded", () => {
         const h = Math.max(1, y2 - y1);
         const selected = String(word.id) === String(selectedId);
 
-        ctx.save();
-        ctx.strokeStyle = selected ? "rgba(37,99,235,0.98)" : "rgba(220,38,38,0.85)";
-        ctx.lineWidth = selected ? 2 : 1;
-        ctx.fillStyle = selected ? "rgba(37,99,235,0.12)" : "rgba(220,38,38,0.03)";
-        ctx.fillRect(x1, y1, w, h);
-        ctx.strokeRect(x1, y1, w, h);
-
-        if (selected) {
-          const handle = HANDLE_SIZE_PX;
-          ctx.fillStyle = "rgba(37,99,235,0.98)";
-          ctx.fillRect(x1 - handle / 2, y1 - handle / 2, handle, handle);
-          ctx.fillRect(x2 - handle / 2, y1 - handle / 2, handle, handle);
-          ctx.fillRect(x1 - handle / 2, y2 - handle / 2, handle, handle);
-          ctx.fillRect(x2 - handle / 2, y2 - handle / 2, handle, handle);
+        if (showText) {
+          drawReplicaText(word, bbox, x1, y1, x2, y2, w, h, scaleX, scaleY);
+        }
+
+        if (showBaselines) {
+          drawBaselineGuide(x1, x2, y2, h);
+        }
+
+        if (showBoxes) {
+          ctx.save();
+          const boxColor = markupColorInput ? markupColorInput.value : "#dc2626";
+          const selColor = selectedColorInput ? selectedColorInput.value : "#2563eb";
+          ctx.strokeStyle = selected ? hexToRgba(selColor, 0.98) : hexToRgba(boxColor, 0.85);
+          ctx.lineWidth = selected ? 2 : 1;
+          ctx.fillStyle = selected ? hexToRgba(selColor, 0.12) : hexToRgba(boxColor, 0.03);
+          ctx.fillRect(x1, y1, w, h);
+          ctx.strokeRect(x1, y1, w, h);
+
+          if (selected) {
+            const handle = HANDLE_SIZE_PX;
+            ctx.fillStyle = hexToRgba(selColor, 0.98);
+            ctx.fillRect(x1 - handle / 2, y1 - handle / 2, handle, handle);
+            ctx.fillRect(x2 - handle / 2, y1 - handle / 2, handle, handle);
+            ctx.fillRect(x1 - handle / 2, y2 - handle / 2, handle, handle);
+            ctx.fillRect(x2 - handle / 2, y2 - handle / 2, handle, handle);
+          }
+          ctx.restore();
         }
-        ctx.restore();
       }
 
       if (dragState && dragState.mode === "add-preview") {
@@ -1289,6 +3101,7 @@ document.addEventListener("DOMContentLoaded", () => {
         const p1 = pageToCanvasPoint(x1, y1, displayWidth, displayHeight);
         const p2 = pageToCanvasPoint(x2, y2, displayWidth, displayHeight);
         ctx.save();
+        if (showGuides) {
         ctx.strokeStyle = "rgba(37,99,235,0.98)";
         ctx.lineWidth = 2;
         ctx.setLineDash([6, 4]);
@@ -1307,7 +3120,8 @@ document.addEventListener("DOMContentLoaded", () => {
           ctx.moveTo(x, 0);
           ctx.lineTo(x, displayHeight);
           ctx.stroke();
-        }
+        
+        }}
         if (snapGuides.y != null) {
           const y = snapGuides.y * scaleY;
           ctx.beginPath();
@@ -1322,8 +3136,13 @@ document.addEventListener("DOMContentLoaded", () => {
       debug("render words=" + words.length);
     }
 
-    function hitTestSelectedHandles(clientX, clientY) {
-      const w = getSelectedWord();
+    function isBoxSizeLocked() {
+      return !!(popoverLockSizeInput && popoverLockSizeInput.checked);
+    }
+
+      function hitTestSelectedHandles(clientX, clientY) {
+        if (isBoxSizeLocked()) return null;
+        const w = getSelectedWord();
       if (!w) return null;
 
       const rect = canvas.getBoundingClientRect();
@@ -1368,39 +3187,74 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     function applyEditorValues(push = true) {
-      const w = getSelectedWord();
-      if (!w) return;
-      if (push) pushHistory();
+        const w = getSelectedWord();
+        if (!w) return null;
+        if (push) pushHistory();
 
-      const nextText = popoverTextInput && document.activeElement === popoverTextInput
-        ? popoverTextInput.value
-        : (textInput ? textInput.value : w.text);
+        const readValue = (el, fallback) => {
+          if (!el) return fallback;
+          const value = String(el.value ?? "");
+          return value.length ? value : fallback;
+        };
 
-      const nextFontSize = popoverFontSizeInput && document.activeElement === popoverFontSizeInput
-        ? Number(popoverFontSizeInput.value)
-        : Number(fontSizeInput ? fontSizeInput.value : getWordFontSize(w));
+        const nextText = readValue(popoverTextInput, textInput ? textInput.value : (w.text || ""));
+        const nextFamily = readValue(
+          document.getElementById("layout-popover-font-family"),
+          fontFamilyInput ? fontFamilyInput.value : (w.font_family_guess || "Helvetica")
+        ).trim() || "Helvetica";
 
-      w.text = nextText;
-      w.font_size_guess = (Number.isFinite(nextFontSize) && nextFontSize > 0) ? nextFontSize : getWordFontSize(w);
-      if (!w.font_family_guess) w.font_family_guess = "Helvetica";
+        const sizeSource = document.getElementById("layout-popover-font-size") || fontSizeInput;
+        const nextSizeRaw = Number(sizeSource ? sizeSource.value : w.font_size_guess);
+        const nextSize = Number.isFinite(nextSizeRaw) && nextSizeRaw > 0
+          ? nextSizeRaw
+          : Number(w.font_size_guess || 10);
 
-      if (textInput) textInput.value = nextText;
-      if (popoverTextInput) popoverTextInput.value = nextText;
-      syncFontInputs(w.font_size_guess, w);
+        const colorSource = document.getElementById("layout-popover-text-color") || textColorInput;
+        const nextColor = readValue(colorSource, w.text_color_guess || "#000000");
 
-      w.bbox = normalizeBBox([
-        Number(x1Input ? x1Input.value : 0),
-        Number(y1Input ? y1Input.value : 0),
-        Number(x2Input ? x2Input.value : 0),
-        Number(y2Input ? y2Input.value : 0),
-      ]);
+        w.text = nextText;
+        w.font_family_guess = nextFamily;
+        w.font_size_guess = nextSize;
+        w.text_color_guess = nextColor;
 
-      snapGuides = null;
-      refreshSelectionUI({ forceText: true });
-      syncReviewedTextarea();
-      renderCanvas();
-      setStatus("Applied changes");
-    }
+        w.override_style = w.override_style && typeof w.override_style === "object" ? w.override_style : {};
+        w.override_style.font_family = nextFamily;
+        w.override_style.font_size = nextSize;
+        w.override_style.text_color = nextColor;
+
+        w.resolved_style = w.resolved_style && typeof w.resolved_style === "object" ? w.resolved_style : {};
+        w.resolved_style.font_family = nextFamily;
+        w.resolved_style.font_size = nextSize;
+        w.resolved_style.text_color = nextColor;
+
+        w.manual_flags = w.manual_flags && typeof w.manual_flags === "object" ? w.manual_flags : {};
+        w.manual_flags.text_edited = true;
+        w.manual_flags.style_edited = true;
+
+        if (textInput) textInput.value = nextText;
+        if (popoverTextInput) popoverTextInput.value = nextText;
+        if (fontFamilyInput) fontFamilyInput.value = nextFamily;
+        if (document.getElementById("layout-popover-font-family")) document.getElementById("layout-popover-font-family").value = nextFamily;
+        if (fontSizeInput) fontSizeInput.value = String(nextSize);
+        if (popoverFontSizeInput) popoverFontSizeInput.value = String(nextSize);
+        if (textColorInput) textColorInput.value = nextColor;
+        if (document.getElementById("layout-popover-text-color")) document.getElementById("layout-popover-text-color").value = nextColor;
+
+        const b = normalizeBBox([
+          Number(x1Input ? x1Input.value : (w.bbox || [0,0,0,0])[0]),
+          Number(y1Input ? y1Input.value : (w.bbox || [0,0,0,0])[1]),
+          Number(x2Input ? x2Input.value : (w.bbox || [0,0,0,0])[2]),
+          Number(y2Input ? y2Input.value : (w.bbox || [0,0,0,0])[3]),
+        ]);
+        w.bbox = b;
+
+        snapGuides = null;
+        refreshSelectionUI({ forceText: true });
+        syncReviewedTextarea();
+        renderCanvas();
+        setStatus("Applied changes: " + nextFamily + " " + nextSize);
+        return w;
+      }
 
     function changeSelectedFontSize(delta) {
       const w = getSelectedWord();
@@ -1481,70 +3335,78 @@ document.addEventListener("DOMContentLoaded", () => {
           page_width: page.page_width || 1,
           page_height: page.page_height || 1,
           words: words.map((w, idx) => {
-            ensureStyle(w);
-            resolveStyle(w);
-            return {
+            const bbox = normalizeBBox([
+              Number((w.bbox || [0,0,0,0])[0] || 0),
+              Number((w.bbox || [0,0,0,0])[1] || 0),
+              Number((w.bbox || [0,0,0,0])[2] || 0),
+              Number((w.bbox || [0,0,0,0])[3] || 0),
+            ]);
+
+            const manualFlags = Object.assign({}, w.manual_flags || {});
+            const isStyleEdited = manualFlags.style_edited === true;
+
+            const family = String(w.font_family_guess || "Helvetica");
+            const size = Number(w.font_size_guess || defaultFontSizeForBBox(bbox));
+            const color = String(w.text_color_guess || "#000000");
+
+            const out = {
               id: Number(w.id || (idx + 1)),
-              text: w.text || "",
-              font_size_guess: getWordFontSize(w),
-              font_family_guess: getWordFontFamily(w),
-              font_weight_guess: Number((w.resolved_style && w.resolved_style.font_weight) || 400),
-              font_style_guess: String((w.resolved_style && w.resolved_style.font_style) || "normal"),
-              letter_spacing_guess: Number((w.resolved_style && w.resolved_style.letter_spacing) || 0),
-              text_color_guess: String((w.resolved_style && w.resolved_style.text_color) || "#000000"),
-              bbox: normalizeBBox([
-                Number((w.bbox || [0,0,0,0])[0] || 0),
-                Number((w.bbox || [0,0,0,0])[1] || 0),
-                Number((w.bbox || [0,0,0,0])[2] || 0),
-                Number((w.bbox || [0,0,0,0])[3] || 0),
-              ]),
+              text: String(w.text || ""),
+              bbox,
+              font_size_guess: size,
+              font_family_guess: family,
+              font_weight_guess: Number(w.font_weight_guess || 400),
+              font_style_guess: String(w.font_style_guess || "normal"),
+              letter_spacing_guess: Number(w.letter_spacing_guess || 0),
+              text_color_guess: color,
+              manual_flags: manualFlags,
             };
+
+            if (isStyleEdited) {
+              out.override_style = Object.assign({}, w.override_style || {}, {
+                font_family: family,
+                font_size: size,
+                text_color: color,
+              });
+              out.resolved_style = Object.assign({}, w.resolved_style || {}, out.override_style);
+            } else {
+              out.override_style = {};
+              out.resolved_style = {};
+              out.manual_flags.style_edited = false;
+            }
+
+            return out;
           }),
         }],
       });
     }
 
-    window.prepareLayoutReviewSubmit = function () {
-      applyEditorValues(false);
-      syncReviewedTextarea();
-      const payload = buildLayoutReviewPayload();
-      if (saveJsonInput) saveJsonInput.value = payload;
-      if (statusEl) statusEl.textContent = "[layout-review] manual payload bytes: " + (payload ? payload.length : -1);
-      return payload;
-    };
-
-
-    function prepareLayoutReviewSubmit() {
-      try { applyEditorValues(false); } catch (e) { console.error("[layout-review] applyEditorValues failed", e); }
-      try { syncReviewedTextarea(); } catch (e) { console.error("[layout-review] syncReviewedTextarea failed", e); }
-      try {
-        if (saveJsonInput) {
-          saveJsonInput.value = buildLayoutReviewPayload();
-          console.log("[layout-review] prepared payload length", saveJsonInput.value.length);
+      function prepareLayoutReviewSubmit() {
+        try {
+          // Intentionally do not call applyEditorValues(false) here.
+          // Apply button is the mutation point. Save should only serialize current editor state.
+          syncReviewedTextarea();
+          if (saveJsonInput) {
+            saveJsonInput.value = buildLayoutReviewPayload();
+            console.log("[layout-review] prepared payload length", saveJsonInput.value.length);
+          }
+        } catch (e) {
+          console.error("[layout-review] prepare payload failed", e);
         }
-      } catch (e) {
-        console.error("[layout-review] build payload failed", e);
       }
-    }
 
-    window.buildLayoutReviewPayload = buildLayoutReviewPayload;
-    window.prepareLayoutReviewSubmit = prepareLayoutReviewSubmit;
+      window.buildLayoutReviewPayload = buildLayoutReviewPayload;
+      window.prepareLayoutReviewSubmit = prepareLayoutReviewSubmit;
 
-    function prepareLayoutReviewSubmit() {
-      try { applyEditorValues(false); } catch (e) { console.error("[layout-review] applyEditorValues failed", e); }
-      try { syncReviewedTextarea(); } catch (e) { console.error("[layout-review] syncReviewedTextarea failed", e); }
-      try {
-        if (saveJsonInput) {
-          saveJsonInput.value = buildLayoutReviewPayload();
-          console.log("[layout-review] prepared payload length", saveJsonInput.value.length);
-        }
-      } catch (e) {
-        console.error("[layout-review] build payload failed", e);
+      if (saveForm && saveForm.dataset.cleanPayloadSubmit !== "1") {
+        saveForm.dataset.cleanPayloadSubmit = "1";
+        saveForm.addEventListener("submit", () => {
+          prepareLayoutReviewSubmit();
+        }, true);
       }
-    }
 
-    window.buildLayoutReviewPayload = buildLayoutReviewPayload;
-    window.prepareLayoutReviewSubmit = prepareLayoutReviewSubmit;
+
+
 
     function beginPan(ev) {
       dragState = {
@@ -1562,7 +3424,6 @@ document.addEventListener("DOMContentLoaded", () => {
       selectedId = String(hit.word.id);
       refreshSelectionUI({ forceText: true });
       renderCanvas();
-      pushHistory();
 
       dragState = {
         mode: "move",
@@ -1576,7 +3437,13 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     function beginResize(ev, handleName) {
-      const w = getSelectedWord();
+        if (isBoxSizeLocked()) {
+          dragState = null;
+          canvas.style.cursor = "move";
+          setStatus("Box size locked");
+          return;
+        }
+        const w = getSelectedWord();
       if (!w) return;
       pushHistory();
       dragState = {
@@ -1655,37 +3522,78 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     function handlePointerDown(ev) {
-      ev.preventDefault();
-
       if (tool === "pan") {
+        ev.preventDefault();
         beginPan(ev);
         return;
       }
+
       if (tool === "add") {
+        ev.preventDefault();
         beginAdd(ev);
         return;
       }
 
       const handleName = hitTestSelectedHandles(ev.clientX, ev.clientY);
       if (handleName) {
+        ev.preventDefault();
         beginResize(ev, handleName);
         return;
       }
 
       const hit = pickWord(ev.clientX, ev.clientY);
       if (!hit) {
+        selectedId = null;
+        dragState = null;
+        snapGuides = null;
+        if (popoverEl) popoverEl.style.display = "none";
+        canvas.style.cursor = "default";
+        refreshSelectionUI({ forceText: true });
         renderCanvas();
-        setStatus(selectedId != null ? "Selection kept" : "No selection");
+        setStatus("No selection");
         return;
       }
 
-      beginMove(hit, ev);
+      // Click selects immediately. Drag starts only if pointer moves enough.
+      ev.preventDefault();
+      selectedId = String(hit.word.id);
+      refreshSelectionUI({ forceText: true });
+      renderCanvas();
+
+      dragState = {
+        mode: "pending-move",
+        wordId: hit.word.id,
+        startX: ev.clientX,
+        startY: ev.clientY,
+        startBBox: normalizeBBox(hit.word.bbox || [0,0,0,0]),
+        historyPushed: false,
+      };
+
+      canvas.style.cursor = "move";
+      setStatus("Selected");
     }
 
     function handlePointerMove(ev) {
       if (!dragState) return;
+      if (ev && ev.pointerType === "touch") markLayoutReviewDragging();
       ev.preventDefault();
 
+
+      if (dragState.mode === "pending-move") {
+        const moved = Math.hypot(ev.clientX - dragState.startX, ev.clientY - dragState.startY);
+
+        if (moved < 4) {
+          return;
+        }
+
+        dragState.mode = "move";
+        if (!dragState.historyPushed) {
+          pushHistory();
+          dragState.historyPushed = true;
+        }
+        setStatus("Dragging selection");
+      }
+
       if (dragState.mode === "pan") {
         wrap.scrollLeft = dragState.startScrollLeft - (ev.clientX - dragState.startX);
         wrap.scrollTop = dragState.startScrollTop - (ev.clientY - dragState.startY);
@@ -1712,7 +3620,14 @@ document.addEventListener("DOMContentLoaded", () => {
       }
 
       if (dragState.mode === "resize") {
-        const w = getSelectedWord();
+          if (isBoxSizeLocked()) {
+            dragState = null;
+            canvas.style.cursor = "move";
+            setStatus("Box size locked");
+            renderCanvas();
+            return;
+          }
+          const w = getSelectedWord();
         if (!w) return;
         const point = clientToPage(ev.clientX, ev.clientY);
         let [x1, y1, x2, y2] = dragState.startBBox;
@@ -1742,7 +3657,23 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }
 
+    function markLayoutReviewDragging() {
+      document.body.classList.add("layout-review-dragging");
+    }
+
+    function clearLayoutReviewDragging() {
+      document.body.classList.remove("layout-review-dragging");
+    }
+
     function endDrag() {
+      if (dragState && dragState.mode === "pending-move") {
+        dragState = null;
+        snapGuides = null;
+        canvas.style.cursor = tool === "pan" ? "grab" : (tool === "add" ? "crosshair" : "default");
+        renderCanvas();
+        return;
+      }
+      clearLayoutReviewDragging();
       if (!dragState) return;
       if (dragState.mode === "add-preview") {
         finalizeAdd();
@@ -1751,7 +3682,8 @@ document.addEventListener("DOMContentLoaded", () => {
         snapGuides = null;
         canvas.style.cursor = tool === "pan" ? "grab" : (tool === "add" ? "crosshair" : "default");
         renderCanvas();
-        setStatus("Ready");
+        drawSelectedAlignmentGuides();
+      setStatus("Ready");
       }
     }
 
@@ -1793,11 +3725,76 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("layout-delete-word-inline")?.addEventListener("click", deleteSelectedWord);
     document.getElementById("layout-popover-delete")?.addEventListener("click", deleteSelectedWord);
 
-    document.getElementById("layout-popover-apply")?.addEventListener("click", () => {
-      if (textInput && popoverTextInput) textInput.value = popoverTextInput.value;
-      if (fontSizeInput && popoverFontSizeInput) fontSizeInput.value = popoverFontSizeInput.value;
-      applyEditorValues(true);
-    });
+      document.getElementById("layout-popover-apply")?.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (ev.stopImmediatePropagation) ev.stopImmediatePropagation();
+      
+        const word = getSelectedWord();
+        if (!word) {
+          setStatus("No word selected");
+          return;
+        }
+      
+        pushHistory();
+      
+        const textEl = document.getElementById("layout-popover-text");
+        const familyTextEl = document.getElementById("layout-popover-font-family");
+        const familySelectEl = document.getElementById("layout-popover-font-family-select");
+        const sizeEl = document.getElementById("layout-popover-font-size");
+        const colorEl = document.getElementById("layout-popover-text-color");
+      
+        const nextText = textEl ? String(textEl.value || "") : String(word.text || "");
+        const nextFamily = (
+          familySelectEl && familySelectEl.value
+            ? String(familySelectEl.value).trim()
+            : familyTextEl
+              ? String(familyTextEl.value || "Helvetica").trim()
+              : String(word.font_family_guess || "Helvetica").trim()
+        ) || "Helvetica";
+        const nextSizeRaw = sizeEl ? Number(sizeEl.value) : Number(word.font_size_guess);
+        const nextSize = Number.isFinite(nextSizeRaw) && nextSizeRaw > 0 ? nextSizeRaw : Number(word.font_size_guess || 10);
+        const nextColor = colorEl ? String(colorEl.value || "#000000") : String(word.text_color_guess || "#000000");
+      
+        word.text = nextText;
+        word.font_family_guess = nextFamily;
+        word.font_size_guess = nextSize;
+        word.text_color_guess = nextColor;
+        word.override_style = word.override_style && typeof word.override_style === "object" ? word.override_style : {};
+        word.override_style.font_family = nextFamily;
+        word.override_style.font_size = nextSize;
+        word.override_style.text_color = nextColor;
+        word.resolved_style = word.resolved_style && typeof word.resolved_style === "object" ? word.resolved_style : {};
+        word.resolved_style.font_family = nextFamily;
+        word.resolved_style.font_size = nextSize;
+        word.resolved_style.text_color = nextColor;
+        word.manual_flags = word.manual_flags && typeof word.manual_flags === "object" ? word.manual_flags : {};
+        word.manual_flags.text_edited = true;
+        word.manual_flags.style_edited = true;
+      
+        if (textInput) textInput.value = nextText;
+        if (fontFamilyInput) fontFamilyInput.value = nextFamily;
+        if (popoverFontFamilyInput) popoverFontFamilyInput.value = nextFamily;
+        if (familyTextEl) familyTextEl.value = nextFamily;
+        if (familySelectEl) familySelectEl.value = nextFamily;
+        if (fontSizeInput) fontSizeInput.value = String(nextSize);
+        if (popoverFontSizeInput) popoverFontSizeInput.value = String(nextSize);
+        if (textColorInput) textColorInput.value = nextColor;
+        if (popoverTextColorInput) popoverTextColorInput.value = nextColor;
+      
+        syncReviewedTextarea();
+        refreshSelectionUI({ forceText: true });
+        renderCanvas();
+      
+        const oldText = ev.currentTarget.textContent;
+        ev.currentTarget.textContent = "Applied ✓";
+        ev.currentTarget.classList.add("layout-apply-flash");
+        setStatus("Applied selected word only: " + nextText + " / " + nextFamily + " / " + nextSize + "pt");
+window.setTimeout(() => {
+          ev.currentTarget.textContent = oldText || "Apply";
+          ev.currentTarget.classList.remove("layout-apply-flash");
+        }, 900);
+      });
 
     document.getElementById("layout-font-down")?.addEventListener("click", () => changeSelectedFontSize(-0.5));
     document.getElementById("layout-font-up")?.addEventListener("click", () => changeSelectedFontSize(0.5));
@@ -1841,7 +3838,61 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.getElementById("layout-fit-width")?.addEventListener("click", fitWidth);
 
-    canvas.addEventListener("pointerdown", handlePointerDown, { passive: false });
+
+    function syncPopoverStyleControlsToWord() {
+      const w = getSelectedWord();
+      if (!w) return;
+
+      const patch = {};
+
+      if (popoverFontSizeInput) {
+        const nextFontSize = Number(popoverFontSizeInput.value);
+        if (Number.isFinite(nextFontSize) && nextFontSize > 0) {
+          patch.font_size = nextFontSize;
+        }
+      }
+
+      if (popoverFontFamilyInput && popoverFontFamilyInput.value.trim()) {
+        patch.font_family = popoverFontFamilyInput.value.trim();
+      }
+
+      if (popoverTextColorInput && popoverTextColorInput.value) {
+        patch.text_color = popoverTextColorInput.value;
+      }
+
+      if (Object.keys(patch).length) {
+        applyStyleToWord(w, patch);
+        refreshSelectionUI({ geometryOnly: true });
+        syncReviewedTextarea();
+        renderCanvas();
+      }
+    }
+
+    [popoverFontSizeInput, popoverFontFamilyInput, popoverTextColorInput].forEach((el) => {
+      if (el) el.addEventListener("input", syncPopoverStyleControlsToWord);
+      if (el) el.addEventListener("change", syncPopoverStyleControlsToWord);
+    });
+
+    
+      function installWordPopoverClickAway() {
+        document.addEventListener("pointerdown", function (ev) {
+          if (!popoverEl) return;
+          if (popoverEl.style.display === "none") return;
+
+          const target = ev.target;
+          const clickedPopover = popoverEl.contains(target);
+          const clickedCanvas = canvas && canvas.contains(target);
+          const clickedToolbar = document.getElementById("layout-review-toolbar")?.contains(target);
+
+          if (!clickedPopover && !clickedCanvas && !clickedToolbar) {
+            popoverEl.style.display = "none";
+          }
+        }, true);
+      }
+
+      installWordPopoverClickAway();
+
+canvas.addEventListener("pointerdown", handlePointerDown, { passive: false });
     window.addEventListener("pointermove", handlePointerMove, { passive: false });
     window.addEventListener("pointerup", endDrag, { passive: false });
     window.addEventListener("keydown", handleKeyDown);
@@ -1867,7 +3918,14 @@ document.addEventListener("DOMContentLoaded", () => {
     setTool("select");
     updateZoomLabel();
 
-    function initialRender() {
+    
+      function resetLayoutRibbonScroll() {
+        const ribbon = document.getElementById("layout-review-toolbar");
+        if (ribbon) ribbon.scrollLeft = 0;
+      }
+
+function initialRender() {
+        resetLayoutRibbonScroll();
       fitWidth();
       syncReviewedTextarea();
       refreshSelectionUI({ forceText: true });
@@ -1877,7 +3935,47 @@ document.addEventListener("DOMContentLoaded", () => {
 
     if (image.complete) initialRender();
     else image.addEventListener("load", initialRender, { once: true });
-    window.addEventListener("resize", renderCanvas);
+    [showScanInput, showBoxesInput, showTextInput, showBaselinesInput, showGuidesInput, showSnapInput].forEach((el) => {
+      if (el) el.addEventListener("change", renderCanvas);
+    });
+
+      toolbarTextColorInput?.addEventListener("input", () => {
+        const color = toolbarTextColorInput.value || "#000000";
+
+        if (textColorInput) textColorInput.value = color;
+        if (popoverTextColorInput) popoverTextColorInput.value = color;
+
+        const word = getSelectedWord();
+        if (word) {
+          applyStyleToWord(word, { text_color: color });
+          refreshSelectionUI({ geometryOnly: true });
+          syncReviewedTextarea();
+          renderCanvas();
+        }
+      });
+
+
+      function installTextColorOverlayHandlers() {
+        [toolbarTextColorInput, textColorInput, popoverTextColorInput].forEach((el) => {
+          if (!el) return;
+          el.addEventListener("input", () => setSelectedWordTextColorFromInput(el.value || "#000000"));
+          el.addEventListener("change", () => setSelectedWordTextColorFromInput(el.value || "#000000"));
+        });
+      }
+
+      installTextColorOverlayHandlers();
+
+[markupColorInput, selectedColorInput, baselineColorInput, toolbarTextColorInput].forEach((el) => {
+      if (el) el.addEventListener("input", renderCanvas);
+    });
+
+    
+  
+
+window.addEventListener("resize", renderCanvas);
+      window.addEventListener("scroll", () => positionPopoverFixedSize(), true);
+      window.addEventListener("resize", () => positionPopoverFixedSize());
+
 
     function collectStylePatchFromInputs() {
       return {
@@ -1886,7 +3984,7 @@ document.addEventListener("DOMContentLoaded", () => {
         font_weight: Number(fontWeightInput?.value || 400),
         font_style: fontStyleInput?.value || "normal",
         letter_spacing: Number(letterSpacingInput?.value || 0),
-        text_color: textColorInput?.value || "#000000",
+        text_color: toolbarTextColorInput?.value || textColorInput?.value || "#000000",
       };
     }
 
@@ -2040,7 +4138,6 @@ document.addEventListener("DOMContentLoaded", () => {
                             <a class="button-link" href="/presets/">Create first preset</a>
                         </div>
                     {% endif %}
-
 <form method="post" action="/documents/{{ document.document_id }}/save-additional-fields">
                             <div class="form-grid">
                                 <div class="form-field">
@@ -2579,8 +4676,27 @@ document.addEventListener("DOMContentLoaded", () => {
 })();
 </script>
 
+<script id="disable-layout-font-all-buttons">
+document.addEventListener("DOMContentLoaded", () => {
+  for (const id of ["layout-font-all", "layout-popover-font-all"]) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.disabled = true;
+      el.title = "Disabled while selected-word styling is being stabilized";
+      el.style.opacity = "0.45";
+    }
+  }
+});
+</script>
 
-
-
-
-
+<script id="layout-disable-all-font-buttons-final">
+document.addEventListener("DOMContentLoaded", () => {
+  for (const id of ["layout-font-all", "layout-popover-font-all"]) {
+    const btn = document.getElementById(id);
+    if (!btn) continue;
+    btn.disabled = true;
+    btn.title = "Disabled to prevent accidental whole-document font changes";
+    btn.style.opacity = "0.45";
+  }
+});
+</script>