{% extends "base.html" %}
{% block title %}WriteGuard — ICDEV™ Dashboard{% endblock %}
{% block content %}
<style>
  /* ── WriteGuard layout ───────────────────────────────────────────── */
  .wg-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 1.5rem;
    align-items: start;
  }
  @media (max-width: 1024px) {
    .wg-layout { grid-template-columns: 1fr; }
  }

  /* ── Input panel ─────────────────────────────────────────────────── */
  .wg-input-card {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 10px;
    padding: 1.5rem;
  }
  .wg-textarea {
    width: 100%;
    min-height: 280px;
    background: var(--bg-primary, #12121c);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
  }
  .wg-tab-btn.active { background: var(--accent-blue, #4a9eff) !important; color: #fff !important; border-color: var(--accent-blue, #4a9eff) !important; }
  .wg-tab-btn:hover:not(.active) { background: rgba(255,255,255,0.05); }

  /* Markdown preview pane */
  #wg-preview, #wg-rewrite-preview {
    width: 100%;
    min-height: 280px;
    background: var(--bg-primary, #12121c);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    line-height: 1.7;
    overflow-y: auto;
  }
  #wg-preview h1, #wg-rewrite-preview h1 { font-size: 1.35rem; font-weight: 700; margin: 0.75rem 0 0.5rem; color: var(--text-primary); }
  #wg-preview h2, #wg-rewrite-preview h2 { font-size: 1.15rem; font-weight: 700; margin: 0.65rem 0 0.45rem; color: var(--text-primary); }
  #wg-preview h3, #wg-rewrite-preview h3 { font-size: 1.02rem; font-weight: 700; margin: 0.55rem 0 0.35rem; color: var(--text-primary); }
  #wg-preview p, #wg-rewrite-preview p { margin: 0 0 0.6rem; }
  #wg-preview ul, #wg-preview ol, #wg-rewrite-preview ul, #wg-rewrite-preview ol { padding-left: 1.4rem; margin: 0 0 0.6rem; }
  #wg-preview li, #wg-rewrite-preview li { margin-bottom: 0.25rem; }
  #wg-preview strong, #wg-rewrite-preview strong { font-weight: 700; color: var(--text-primary); }
  #wg-preview em, #wg-rewrite-preview em { font-style: italic; }
  #wg-preview code, #wg-rewrite-preview code { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 3px; padding: 1px 4px; font-size: 0.85em; }
  #wg-preview pre, #wg-rewrite-preview pre { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.6rem; overflow-x: auto; }
  #wg-preview blockquote, #wg-rewrite-preview blockquote { border-left: 3px solid var(--accent-blue); padding: 4px 12px; margin: 8px 0; color: var(--text-secondary); }
  #wg-preview table, #wg-rewrite-preview table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; }
  #wg-preview th, #wg-preview td, #wg-rewrite-preview th, #wg-rewrite-preview td { border: 1px solid var(--border-color); padding: 6px 10px; text-align: left; }
  #wg-preview th, #wg-rewrite-preview th { background: var(--bg-card); font-weight: 600; }

  .wg-file-drop {
    border: 2px dashed var(--border-color, #333);
    border-radius: 8px;
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
  }
  .wg-file-drop:hover, .wg-file-drop.drag-over {
    border-color: var(--accent-blue, #4a9eff);
    background: rgba(74,158,255,0.05);
  }
  .wg-file-drop input[type=file] { display: none; }
  .wg-file-name {
    font-size: 0.8rem;
    color: var(--accent-blue, #4a9eff);
    margin-top: 0.4rem;
    min-height: 1.2em;
  }

  .wg-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    margin-top: 0.5rem;
  }

  .wg-btn-analyze {
    background: var(--accent-blue, #4a9eff);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.65rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 1rem;
    width: 100%;
  }
  .wg-btn-analyze:hover:not(:disabled) {
    background: #2e8ae6;
    transform: translateY(-1px);
  }
  .wg-btn-analyze:disabled { opacity: 0.55; cursor: not-allowed; }

  /* ── Results panel ───────────────────────────────────────────────── */
  .wg-results-card {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 10px;
    padding: 1.5rem;
  }

  /* Composite gauge */
  .wg-gauge {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .wg-gauge-score {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-blue, #4a9eff);
    transition: color 0.4s;
  }
  .wg-gauge-label { font-size: 0.8rem; color: var(--text-muted, #888); margin-top: 0.25rem; }
  .wg-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-top: 0.6rem;
  }
  .wg-badge-passed  { background: rgba(0,200,100,0.15); color: #00c864; border: 1px solid #00c864; }
  .wg-badge-review  { background: rgba(255,165,0,0.15); color: #ffa500; border: 1px solid #ffa500; }
  .wg-badge-pending { background: rgba(136,136,136,0.15); color: #888; border: 1px solid #555; }

  /* Dimension bars */
  .wg-dim-list { display: flex; flex-direction: column; gap: 0.7rem; }
  .wg-dim-row { display: flex; align-items: center; gap: 0.6rem; }
  .wg-dim-name { font-size: 0.82rem; width: 100px; flex-shrink: 0; color: var(--text-primary, #e0e0e0); }
  .wg-dim-bar-wrap {
    flex: 1;
    background: var(--bg-primary, #12121c);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
  }
  .wg-dim-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--accent-blue, #4a9eff);
    width: 0;
    transition: width 0.6s ease;
  }
  .wg-dim-score {
    font-size: 0.8rem;
    font-weight: 600;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
  }
  .wg-dim-unavail { font-size: 0.75rem; color: #666; font-style: italic; }

  /* Findings */
  .wg-findings-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    margin: 1.2rem 0 0.6rem;
  }
  .wg-findings-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 320px; overflow-y: auto; }
  .wg-finding {
    background: var(--bg-primary, #12121c);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
  }
  .wg-sev {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
  }
  .sev-critical { background: rgba(229,62,62,0.2); color: #e53e3e; }
  .sev-high     { background: rgba(255,100,50,0.2); color: #ff6432; }
  .sev-medium   { background: rgba(255,165,0,0.2);  color: #ffa500; }
  .sev-low      { background: rgba(74,158,255,0.2); color: #4a9eff; }
  .sev-info     { background: rgba(136,136,136,0.2);color: #888; }

  .wg-finding-body { flex: 1; line-height: 1.4; }
  .wg-finding-dim  { font-size: 0.72rem; color: #888; margin-top: 0.2rem; }

  /* Recommendations */
  .wg-recs {
    margin-top: 1rem;
    background: rgba(74,158,255,0.07);
    border-left: 3px solid var(--accent-blue, #4a9eff);
    border-radius: 4px;
    padding: 0.75rem;
  }
  .wg-recs-title { font-size: 0.8rem; font-weight: 700; color: var(--accent-blue, #4a9eff); margin-bottom: 0.4rem; }
  .wg-recs ul { margin: 0; padding: 0 0 0 1.1rem; }
  .wg-recs li { font-size: 0.8rem; color: var(--text-primary, #e0e0e0); margin-bottom: 0.2rem; }

  /* Spinner */
  .wg-spinner {
    display: none;
    width: 20px; height: 20px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wg-spin 0.7s linear infinite;
    margin: 0 auto;
  }
  @keyframes wg-spin { to { transform: rotate(360deg); } }

  .wg-empty {
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 0.85rem;
    padding: 2rem 0;
  }
  .wg-error-msg {
    background: rgba(229,62,62,0.1);
    border: 1px solid #e53e3e;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: #e53e3e;
    margin-top: 0.5rem;
  }

  /* Color utilities for score */
  .score-good  { color: #00c864 !important; }
  .score-warn  { color: #ffa500 !important; }
  .score-bad   { color: #e53e3e !important; }
  .bar-good    { background: #00c864 !important; }
  .bar-warn    { background: #ffa500 !important; }
  .bar-bad     { background: #e53e3e !important; }

  /* ── Portion Marking section ─────────────────────────────────────── */
  .pm-section {
    margin-top: 1.4rem;
    border-top: 1px solid var(--border-color, #333);
    padding-top: 1rem;
  }
  .pm-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary, #e0e0e0);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Classification banner strip */
  .pm-banner {
    text-align: center;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
  }
  .pm-banner-U     { background: rgba(0,200,100,0.1);  color: #00c864; border: 1px solid #00c864; }
  .pm-banner-CUI   { background: rgba(74,158,255,0.1); color: #4a9eff; border: 1px solid #4a9eff; }
  .pm-banner-C     { background: rgba(0,150,255,0.1);  color: #0096ff; border: 1px solid #0096ff; }
  .pm-banner-S     { background: rgba(255,100,50,0.15); color: #ff6432; border: 1px solid #ff6432; }
  .pm-banner-TS    { background: rgba(255,165,0,0.15); color: #ffa500; border: 1px solid #ffa500; }
  .pm-banner-TSSCI { background: rgba(229,62,62,0.15); color: #e53e3e; border: 1px solid #e53e3e; }

  /* Stats row */
  .pm-stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }
  .pm-stat {
    background: var(--bg-primary, #12121c);
    border-radius: 5px;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    color: var(--text-muted, #888);
  }
  .pm-stat strong { color: var(--text-primary, #e0e0e0); }

  /* Violations list */
  .pm-violations { display: flex; flex-direction: column; gap: 0.45rem; }
  .pm-violation {
    background: var(--bg-primary, #12121c);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }
  .pm-violation-body { flex: 1; line-height: 1.4; }
  .pm-violation-rule {
    font-size: 0.68rem;
    color: #888;
    margin-top: 0.2rem;
  }

  /* Designation block */
  .pm-desig {
    background: var(--bg-primary, #12121c);
    border: 1px solid var(--border-color, #333);
    border-radius: 5px;
    padding: 0.65rem 0.75rem;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    white-space: pre-wrap;
    margin-top: 0.6rem;
  }
  .pm-ok-msg {
    font-size: 0.8rem;
    color: #00c864;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .pm-na-msg {
    font-size: 0.78rem;
    color: #888;
    font-style: italic;
  }

  /* Apply portion marks button */
  .pm-apply-btn {
    background: rgba(0,200,100,0.12);
    color: #00c864;
    border: 1px solid #00c864;
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-bottom: 0.75rem;
    width: 100%;
  }
  .pm-apply-btn:hover {
    background: rgba(0,200,100,0.22);
    transform: translateY(-1px);
  }

  /* Per-paragraph portion mark editor */
  .pm-para-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
  .pm-para-row {
    background: var(--bg-primary, #12121c);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
  }
  .pm-para-select {
    background: var(--bg-secondary, #1e1e2e);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 90px;
  }
  .pm-para-text {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted, #aaa);
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .pm-para-num {
    font-size: 0.7rem;
    color: #555;
    font-weight: 600;
    flex-shrink: 0;
    width: 18px;
    text-align: right;
  }

  /* Marked text preview */
  .pm-preview {
    background: var(--bg-primary, #12121c);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary, #e0e0e0);
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 0.75rem;
    display: none;
  }
  .pm-preview .pm-mark {
    font-weight: 700;
    color: #00c864;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
  }
  .pm-preview .pm-mark-cui { color: #4a9eff; }
  .pm-preview .pm-mark-s   { color: #ff6432; }
  .pm-preview .pm-mark-ts  { color: #ffa500; }
  .pm-banner { cursor: pointer; transition: opacity 0.2s, transform 0.1s; }
  .pm-banner:hover { opacity: 0.85; transform: scale(1.01); }

  /* Classification level toggle buttons */
  .pm-level-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 1.5px solid;
    transition: background 0.2s, transform 0.1s;
    text-transform: uppercase;
  }
  .pm-level-btn:hover { transform: translateY(-1px); }
  .pm-level-btn.active { transform: scale(1.05); box-shadow: 0 0 8px rgba(255,255,255,0.15); }
  .pm-level-btn[data-level="U"]     { border-color: #00c864; color: #00c864; background: transparent; }
  .pm-level-btn[data-level="U"].active { background: rgba(0,200,100,0.2); }
  .pm-level-btn[data-level="CUI"]   { border-color: #4a9eff; color: #4a9eff; background: transparent; }
  .pm-level-btn[data-level="CUI"].active { background: rgba(74,158,255,0.2); }
  .pm-level-btn[data-level="C"]     { border-color: #0096ff; color: #0096ff; background: transparent; }
  .pm-level-btn[data-level="C"].active { background: rgba(0,150,255,0.2); }
  .pm-level-btn[data-level="S"]     { border-color: #ff6432; color: #ff6432; background: transparent; }
  .pm-level-btn[data-level="S"].active { background: rgba(255,100,50,0.25); }
  .pm-level-btn[data-level="TS"]    { border-color: #ffa500; color: #ffa500; background: transparent; }
  .pm-level-btn[data-level="TS"].active { background: rgba(255,165,0,0.25); }
  .pm-level-btn[data-level="TS//SCI"] { border-color: #e53e3e; color: #e53e3e; background: transparent; }
  .pm-level-btn[data-level="TS//SCI"].active { background: rgba(229,62,62,0.25); }

  /* ── Word Limit panel ────────────────────────────────────────────── */
  .wl-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    margin-top: 0.75rem;
    user-select: none;
    transition: color 0.2s;
  }
  .wl-toggle:hover { color: var(--text-primary, #e0e0e0); }
  .wl-toggle svg { transition: transform 0.25s; }
  .wl-toggle.open svg { transform: rotate(90deg); }
  .wl-panel {
    display: none;
    margin-top: 0.6rem;
    background: var(--bg-primary, #12121c);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 1rem;
  }
  .wl-panel.open { display: block; }
  .wl-yaml {
    width: 100%;
    min-height: 100px;
    background: var(--bg-secondary, #1e1e2e);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    border-radius: 5px;
    padding: 0.5rem 0.65rem;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
  }
  .wl-yaml:focus { border-color: var(--accent-blue, #4a9eff); }
  .wl-btn-check {
    background: transparent;
    color: var(--accent-blue, #4a9eff);
    border: 1px solid var(--accent-blue, #4a9eff);
    border-radius: 5px;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.6rem;
    transition: background 0.2s;
  }
  .wl-btn-check:hover { background: rgba(74,158,255,0.1); }
  .wl-btn-check:disabled { opacity: 0.45; cursor: not-allowed; }
  .wl-results { margin-top: 0.75rem; display: none; }
  .wl-results-title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary, #e0e0e0); margin-bottom: 0.6rem; }
  .wl-section-row { margin-bottom: 0.55rem; }
  .wl-section-meta { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 0.2rem; }
  .wl-section-name {
    color: var(--text-primary, #e0e0e0);
    font-weight: 500;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wl-section-count { color: var(--text-muted, #888); font-variant-numeric: tabular-nums; }
  .wl-bar-wrap { background: rgba(255,255,255,0.06); border-radius: 4px; height: 7px; overflow: hidden; }
  .wl-bar { height: 100%; border-radius: 4px; transition: width 0.45s ease; max-width: 100%; }
  .wl-bar-ok   { background: #00c864; }
  .wl-bar-warn { background: #ffa500; }
  .wl-bar-over { background: #e53e3e; }
  .wl-bar-none { background: var(--accent-blue, #4a9eff); opacity: 0.35; }
  .wl-violation-banner {
    background: rgba(229,62,62,0.1);
    border: 1px solid rgba(229,62,62,0.35);
    border-radius: 5px;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: #e53e3e;
    margin-top: 0.6rem;
    display: none;
  }
  .wl-pass-banner {
    background: rgba(0,200,100,0.08);
    border: 1px solid rgba(0,200,100,0.3);
    border-radius: 5px;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: #00c864;
    margin-top: 0.6rem;
    display: none;
  }
  .wl-total-row { border-top: 1px solid var(--border-color, #333); margin-top: 0.5rem; padding-top: 0.5rem; font-weight: 700; }
</style>

<div class="container" style="max-width:1280px;margin:0 auto;padding:1.5rem;">
  <!-- Header -->
  <nav aria-label="breadcrumb" style="font-size:0.8rem;color:var(--text-muted,#888);margin-bottom:0.5rem;">
    <a href="/" style="color:inherit;text-decoration:none;">Home</a>
    <span style="margin:0 0.4rem;">&rsaquo;</span>
    <span style="color:var(--text-primary,#e0e0e0);">WriteGuard</span>
  </nav>

  <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.4rem;">
    <h1 style="margin:0;font-size:1.7rem;font-weight:800;">WriteGuard</h1>
    <span style="font-size:0.75rem;padding:0.2rem 0.6rem;background:rgba(74,158,255,0.15);color:var(--accent-blue,#4a9eff);border-radius:12px;font-weight:600;">Phase 1</span>
  </div>
  <p style="color:var(--text-muted,#888);margin:0 0 1.5rem;font-size:0.9rem;">
    Paste or upload content to run 5-dimension quality analysis — grammar, readability, tone, plagiarism, and AI detection.
  </p>

  <div class="wg-layout">

    <!-- ── Input panel ──────────────────────────────────────────────── -->
    <div class="wg-input-card">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px;">
        <h2 style="margin:0;font-size:1rem;font-weight:700;">Input Text</h2>
        {% if preload_title %}
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
          <span style="font-size:0.75rem;color:var(--text-secondary);">Loaded from proposal:</span>
          <span style="font-size:0.75rem;font-weight:600;color:var(--accent-blue-light,#6db3f8);">{{ preload_title[:60] }}{% if preload_title|length > 60 %}…{% endif %}</span>
          {% if preload_sections | length > 1 %}
          <select id="wg-section-selector" onchange="loadSection(this.value)" style="font-size:0.75rem;padding:2px 6px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-input);color:var(--text-primary);">
            <option value="">— All sections combined —</option>
            {% for s in preload_sections %}
            <option value="{{ loop.index0 }}">{{ s.title }}</option>
            {% endfor %}
          </select>
          {% endif %}
        </div>
        {% endif %}
      </div>

      <!-- Textarea -->
      <div id="wg-input-tabs" style="display:flex;gap:0.5rem;margin-bottom:0.5rem;">
        <button type="button" id="wg-tab-source" class="wg-tab-btn active" onclick="setInputTab('source')"
                style="background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;padding:0.25rem 0.6rem;font-size:0.78rem;cursor:pointer;">Source</button>
        <button type="button" id="wg-tab-preview" class="wg-tab-btn" onclick="setInputTab('preview')"
                style="background:var(--bg-primary);color:var(--text-muted);border:1px solid var(--border-color);border-radius:4px;padding:0.25rem 0.6rem;font-size:0.78rem;cursor:pointer;">Preview</button>
      </div>
      <textarea id="wg-text" class="wg-textarea"
        placeholder="Paste your content here — article, document, or any text to analyze...">{% if preload_sections %}{% for s in preload_sections %}{{ s.content }}{% if not loop.last %}

---

{% endif %}{% endfor %}{% endif %}</textarea>
      <div id="wg-preview" class="wg-textarea" style="display:none;overflow:auto;white-space:normal;"></div>

      {# Preloaded section data for JS picker #}
      {% if preload_sections %}
      <script id="wg-preload-data" type="application/json">{{ preload_sections | tojson }}</script>
      <script>
      var _wgSections = JSON.parse(document.getElementById('wg-preload-data').textContent);
      function loadSection(idx) {
          var ta = document.getElementById('wg-text');
          if (idx === '') {
              ta.value = _wgSections.map(function(s){ return s.content; }).join('\n\n---\n\n');
          } else {
              ta.value = _wgSections[parseInt(idx)].content;
          }
          ta.dispatchEvent(new Event('input'));
      }
      </script>
      {% endif %}

      <!-- File upload -->
      <div class="wg-file-drop" id="wg-drop-zone" title="Click to browse or drag and drop a file">
        <label for="wg-file-input" style="cursor:pointer;display:block;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin-bottom:0.3rem;vertical-align:middle;">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
            <polyline points="17 8 12 3 7 8"/>
            <line x1="12" y1="3" x2="12" y2="15"/>
          </svg>
          <span>Click to upload or drag &amp; drop</span><br>
          <span style="font-size:0.75rem;opacity:0.7;">.txt, .md, .docx supported</span>
        </label>
        <input type="file" id="wg-file-input" accept=".txt,.md,.docx">
      </div>
      <div class="wg-file-name" id="wg-file-name"></div>

      <!-- Meta -->
      <div class="wg-meta" id="wg-meta" style="display:none;">
        <span id="wg-word-count">0 words</span>
        <span id="wg-char-count">0 chars</span>
      </div>

      <!-- Content Mode selector -->
      <div style="margin-top:0.75rem;">
        <label for="wg-mode-select" style="display:block;font-size:0.8rem;font-weight:600;color:var(--text-muted,#888);margin-bottom:0.35rem;">
          Content Type (optional)
        </label>
        <select id="wg-mode-select"
          style="width:100%;background:var(--bg-primary,#12121c);color:var(--text-primary,#e0e0e0);
                 border:1px solid var(--border-color,#333);border-radius:6px;
                 padding:0.55rem 0.75rem;font-size:0.87rem;outline:none;cursor:pointer;">
          <option value="default">Default — Standard rules</option>
          <option value="blameless_postmortem">Blameless Post-Mortem</option>
          <option value="policy_language">Policy Language</option>
          <option value="adr">ADR (Architecture Decision Record)</option>
          <option value="bluf_exec">BLUF / Executive Summary</option>
          <option value="runbook">Runbook / SOP</option>
          <option value="rca">Root Cause Analysis (RCA)</option>
        </select>
        <div id="wg-mode-hint" style="font-size:0.75rem;color:var(--text-muted,#666);margin-top:0.3rem;min-height:1em;"></div>
      </div>

      <!-- Error -->
      <div class="wg-error-msg" id="wg-error" style="display:none;"></div>

      <!-- Style Template Selector (WG 10d) -->
      <div style="margin-top:0.75rem;padding:0.6rem;background:rgba(108,92,231,0.06);border-left:3px solid #6c5ce7;border-radius:4px;">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem;">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#6c5ce7" stroke-width="2.5">
            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>
          </svg>
          <span style="font-size:0.82rem;font-weight:600;color:#6c5ce7;">Style Template</span>
        </div>
        <select id="wg-profile-select" style="width:100%;background:var(--bg-primary,#12121c);color:var(--text-primary,#e0e0e0);border:1px solid var(--border-color,#444);border-radius:4px;padding:0.35rem 0.5rem;font-size:0.8rem;outline:none;">
          <option value="">— None (skip style matching) —</option>
        </select>
        <div style="display:flex;gap:0.4rem;margin-top:0.4rem;">
          <button type="button" onclick="openTemplateUploadModal()"
                  style="flex:1;background:rgba(108,92,231,0.2);color:#6c5ce7;border:1px solid #6c5ce7;border-radius:4px;padding:0.3rem 0.6rem;font-size:0.75rem;cursor:pointer;">
            + Upload New Template
          </button>
          <button type="button" id="wg-profile-delete-btn" onclick="deleteSelectedProfile()"
                  style="background:rgba(229,62,62,0.1);color:#e53e3e;border:1px solid #e53e3e;border-radius:4px;padding:0.3rem 0.6rem;font-size:0.75rem;cursor:pointer;display:none;">
            Delete
          </button>
        </div>
        <div id="wg-profile-info" style="font-size:0.7rem;color:#888;margin-top:0.3rem;"></div>
      </div>

      <!-- Template Upload Modal -->
      <div id="wg-template-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center;">
        <div style="background:var(--bg-secondary,#1e1e2e);border:1px solid #333;border-radius:10px;padding:1.5rem;max-width:560px;width:90%;max-height:80vh;overflow-y:auto;">
          <h3 style="margin:0 0 0.6rem;font-size:1rem;">Upload Style Template</h3>
          <p style="font-size:0.78rem;color:#888;margin:0 0 0.8rem;line-height:1.4;">
            Paste a sample document (1,500+ words recommended) that represents your preferred style. WriteGuard extracts 27 numeric features — sentence length, voice, tone, punctuation — and uses them to score new text and generate rewrite instructions.
          </p>
          <input type="text" id="wg-template-name" placeholder="Template name (e.g., ARB Review Style)"
                 style="width:100%;background:var(--bg-primary,#12121c);color:var(--text-primary,#e0e0e0);border:1px solid #444;border-radius:4px;padding:0.4rem 0.6rem;font-size:0.82rem;margin-bottom:0.5rem;box-sizing:border-box;">
          <select id="wg-template-type" style="width:100%;background:var(--bg-primary,#12121c);color:var(--text-primary,#e0e0e0);border:1px solid #444;border-radius:4px;padding:0.4rem 0.6rem;font-size:0.82rem;margin-bottom:0.5rem;">
            <option value="">— content type (optional) —</option>
            <option value="proposal_technical">Proposal — Technical</option>
            <option value="proposal_management">Proposal — Management</option>
            <option value="compliance_narrative">Compliance Narrative</option>
            <option value="blog">Blog / Pulse</option>
            <option value="adr">Architecture Decision Record</option>
            <option value="review_comment">ARB/ERB Review Comment</option>
            <option value="runbook">Runbook</option>
            <option value="exec_brief">Executive Brief</option>
          </select>
          <textarea id="wg-template-text" class="wg-textarea" style="min-height:240px;margin-bottom:0.5rem;"
                    placeholder="Paste 1,500+ words of sample content here..."></textarea>
          <div id="wg-template-word-count" style="font-size:0.72rem;color:#888;margin-bottom:0.75rem;"></div>
          <div style="display:flex;gap:0.5rem;">
            <button onclick="saveTemplate()" class="wg-btn-analyze" style="margin:0;flex:1;background:#6c5ce7;">
              Extract & Save
            </button>
            <button onclick="closeTemplateUploadModal()" class="wg-btn-analyze" style="margin:0;flex:1;background:#555;">
              Cancel
            </button>
          </div>
        </div>
      </div>

      <!-- Analyze button -->
      <button class="wg-btn-analyze" id="wg-btn" onclick="runAnalysis()">
        <span id="wg-btn-text">Analyze Content</span>
        <div class="wg-spinner" id="wg-spinner"></div>
      </button>

      <!-- Rewrite button (shown after analysis) -->
      <button class="wg-btn-analyze" id="wg-rewrite-btn" onclick="runRewrite()" style="display:none;background:#6c5ce7;margin-top:0.5rem;">
        <span id="wg-rewrite-text">Rewrite (Deterministic Fixes)</span>
        <div class="wg-spinner" id="wg-rewrite-spinner"></div>
      </button>

      <!-- Rewrite diff (shown after rewrite) -->
      <div id="wg-rewrite-result" style="display:none;margin-top:0.75rem;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;">
          <span style="font-size:0.85rem;font-weight:700;color:var(--text-primary,#e0e0e0);">Rewritten Text</span>
          <span id="wg-rewrite-delta" style="font-size:0.78rem;font-weight:600;"></span>
        </div>
        <div style="font-size:0.75rem;color:#888;margin-bottom:0.4rem;" id="wg-rewrite-changes"></div>
        <div style="display:flex;gap:0.5rem;margin-bottom:0.5rem;">
          <button type="button" id="wg-rewrite-tab-source" class="wg-tab-btn active" onclick="setRewriteTab('source')"
                  style="background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;padding:0.25rem 0.6rem;font-size:0.78rem;cursor:pointer;">Source</button>
          <button type="button" id="wg-rewrite-tab-preview" class="wg-tab-btn" onclick="setRewriteTab('preview')"
                  style="background:var(--bg-primary);color:var(--text-muted);border:1px solid var(--border-color);border-radius:4px;padding:0.25rem 0.6rem;font-size:0.78rem;cursor:pointer;">Preview</button>
        </div>
        <textarea id="wg-rewrite-output" class="wg-textarea" style="min-height:200px;" readonly></textarea>
        <div id="wg-rewrite-preview" style="display:none;min-height:200px;"></div>
        <button class="wg-btn-analyze" onclick="acceptRewrite()" style="background:#00c864;margin-top:0.5rem;font-size:0.82rem;">
          Accept Rewrite
        </button>
      </div>

      <!-- ── Word Limit config panel ────────────────────────────────── -->
      <div class="wl-toggle" id="wl-toggle" onclick="toggleWordLimit()" title="Configure per-section word caps">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
        <span>Word Limit</span>
        <span id="wl-badge" style="display:none;font-size:0.68rem;padding:0.12rem 0.5rem;
             border-radius:10px;font-weight:700;letter-spacing:0.04em;margin-left:0.3rem;"></span>
      </div>
      <div class="wl-panel" id="wl-panel">
        <div style="font-size:0.75rem;color:var(--text-muted,#888);margin-bottom:0.5rem;line-height:1.5;">
          Set per-section caps in YAML. Use markdown heading names as keys.
          Add <code style="background:rgba(255,255,255,0.07);padding:0.05rem 0.3rem;border-radius:3px;">total:</code> for a document-wide limit.
        </div>
        <textarea id="wl-yaml" class="wl-yaml"
          placeholder="# Example&#10;Introduction: 150&#10;Methodology: 300&#10;Conclusion: 100&#10;total: 800"></textarea>
        <div style="display:flex;gap:0.5rem;align-items:center;margin-top:0.6rem;">
          <button class="wl-btn-check" id="wl-btn" onclick="checkWordLimits()">Check Limits</button>
          <span id="wl-checking" style="display:none;font-size:0.75rem;color:#888;">checking…</span>
        </div>

        <!-- Results -->
        <div class="wl-results" id="wl-results">
          <div class="wl-results-title">Word Usage</div>
          <div id="wl-section-list"></div>
          <div class="wl-violation-banner" id="wl-violation-banner"></div>
          <div class="wl-pass-banner" id="wl-pass-banner"></div>
        </div>
      </div>
    </div>

    <!-- ── Results panel ────────────────────────────────────────────── -->
    <div class="wg-results-card">
      <h2 style="margin:0 0 1rem;font-size:1rem;font-weight:700;">Analysis Results</h2>

      <!-- Composite gauge -->
      <div class="wg-gauge">
        <div class="wg-gauge-score" id="wg-overall">—</div>
        <div class="wg-gauge-label">Overall Score (0–100)</div>
        <div style="display:flex;gap:0.4rem;flex-wrap:wrap;justify-content:center;align-items:center;">
          <span class="wg-badge wg-badge-pending" id="wg-badge">PENDING</span>
          <span id="wg-mode-badge" style="display:none;font-size:0.68rem;padding:0.18rem 0.55rem;
               background:rgba(108,92,231,0.18);color:#a29bfe;border-radius:10px;
               font-weight:600;letter-spacing:0.04em;border:1px solid rgba(108,92,231,0.35);"></span>
        </div>
      </div>

      <!-- Empty state -->
      <div class="wg-empty" id="wg-empty">
        Submit text or a file to see your quality score.
      </div>

      <!-- Dimension bars (hidden until analysis) -->
      <div id="wg-dims-section" style="display:none;">
        <div style="font-size:0.8rem;font-weight:600;color:var(--text-primary,#e0e0e0);margin-bottom:0.6rem;">Dimension Scores</div>
        <div class="wg-dim-list" id="wg-dims"></div>
      </div>

      <!-- Findings -->
      <div id="wg-findings-section" style="display:none;">
        <div class="wg-findings-header">
          Findings <span id="wg-finding-count" style="color:#888;font-weight:400;"></span>
        </div>
        <div class="wg-findings-list" id="wg-findings-list"></div>
      </div>

      <!-- Recommendations -->
      <div class="wg-recs" id="wg-recs" style="display:none;">
        <div class="wg-recs-title">Recommendations</div>
        <ul id="wg-recs-list"></ul>
      </div>

      <!-- Portion Marking -->
      <div class="pm-section" id="pm-section" style="display:none;">
        <div class="pm-section-title">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          Portion Marking (DoDM 5200.01)
        </div>
        <!-- Banner header/footer preview -->
        <div id="pm-banner-preview"></div>
        <!-- Auto-Detect Classification button (DoDM 5200.01) -->
        <div style="margin-bottom:0.75rem;padding:0.5rem;background:rgba(74,158,255,0.06);border-left:3px solid #4a9eff;border-radius:4px;">
          <button class="pm-apply-btn" id="pm-auto-detect-btn" onclick="runAutoDetectClassification()"
                  style="background:rgba(74,158,255,0.2);color:#4a9eff;border-color:#4a9eff;margin:0;">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="vertical-align:middle;margin-right:0.3rem;">
              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
            Auto-Detect Classification (DoDM 5200.01)
          </button>
          <div style="font-size:0.7rem;color:#888;margin-top:0.4rem;line-height:1.3;" id="pm-disclaimer">
            Classification detection is an aid only. All decisions require OCA or trained Derivative Classifier review per EO 13526.
          </div>
        </div>
        <!-- Auto-detect results panel -->
        <div id="pm-autodetect-results" style="display:none;margin-bottom:0.75rem;">
          <div id="pm-indicator-stats" style="display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.5rem;"></div>
          <div id="pm-review-warning" style="display:none;font-size:0.75rem;padding:0.4rem 0.6rem;background:rgba(229,62,62,0.1);border:1px solid #e53e3e;border-radius:4px;color:#e53e3e;margin-bottom:0.5rem;"></div>
          <div id="pm-compilation-warning" style="display:none;font-size:0.75rem;padding:0.4rem 0.6rem;background:rgba(255,165,0,0.12);border:1px solid #ffa500;border-radius:4px;color:#ffa500;margin-bottom:0.5rem;"></div>
          <details style="font-size:0.75rem;color:var(--text-muted,#888);">
            <summary style="cursor:pointer;font-weight:600;">Detected indicators (click to expand)</summary>
            <div id="pm-indicator-list" style="margin-top:0.4rem;max-height:250px;overflow-y:auto;"></div>
          </details>
        </div>
        <!-- Default level selector (apply-all) -->
        <div style="font-size:0.78rem;color:var(--text-muted,#888);margin-bottom:0.4rem;">Default level (apply to all unmarked):</div>
        <div id="pm-level-btns" style="display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.5rem;"></div>
        <!-- Custom mark input -->
        <div style="display:flex;gap:0.4rem;margin-bottom:0.75rem;">
          <input type="text" id="pm-custom-input" placeholder="Custom mark (e.g. S//NF)"
                 style="flex:1;background:var(--bg-primary,#12121c);color:var(--text-primary,#e0e0e0);border:1px solid var(--border-color,#444);border-radius:4px;padding:0.35rem 0.6rem;font-size:0.78rem;outline:none;"
                 onkeydown="if(event.key==='Enter'){addCustomMark();event.preventDefault();}">
          <button class="pm-level-btn" style="border-color:#c0c;color:#c0c;min-width:auto;padding:0.35rem 0.7rem;" onclick="addCustomMark()" title="Add custom portion mark">+ Add</button>
        </div>
        <!-- Per-paragraph editor -->
        <div id="pm-para-editor" style="display:none;">
          <div style="font-size:0.78rem;color:var(--text-muted,#888);margin-bottom:0.4rem;">Per-paragraph classification:</div>
          <div class="pm-para-list" id="pm-para-list"></div>
        </div>
        <!-- Apply button -->
        <button class="pm-apply-btn" id="pm-apply-btn" onclick="applyPortionMarks()" title="Click to apply portion marks to each paragraph">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="vertical-align:middle;margin-right:0.3rem;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          Apply Portion Marks
        </button>
        <!-- Marked text preview -->
        <div class="pm-preview" id="pm-preview"></div>
        <!-- Export buttons -->
        <div id="pm-export-wrap" style="display:none;gap:0.4rem;flex-wrap:wrap;margin-top:0.6rem;">
          <button class="pm-apply-btn" data-export="clipboard" onclick="exportMarkedText('clipboard')"
                  style="background:rgba(136,136,136,0.1);color:#ccc;border-color:#555;flex:1;min-width:100px;margin:0;">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:0.2rem;">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
            </svg>Copy
          </button>
          <button class="pm-apply-btn" onclick="exportMarkedText('txt')"
                  style="background:rgba(136,136,136,0.1);color:#ccc;border-color:#555;flex:1;min-width:100px;margin:0;">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:0.2rem;">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
            </svg>Export .txt
          </button>
          <button class="pm-apply-btn" onclick="exportMarkedText('md')"
                  style="background:rgba(136,136,136,0.1);color:#ccc;border-color:#555;flex:1;min-width:100px;margin:0;">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:0.2rem;">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
            </svg>Export .md
          </button>
        </div>
        <!-- Stats -->
        <div class="pm-stats" id="pm-stats"></div>
        <!-- Violations -->
        <div class="pm-violations" id="pm-violations"></div>
        <!-- Designation block -->
        <div id="pm-desig-wrap" style="display:none;">
          <div style="font-size:0.75rem;color:#888;margin-top:0.5rem;margin-bottom:0.3rem;">Classification Authority Block</div>
          <div class="pm-desig" id="pm-desig"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  // ── State ──────────────────────────────────────────────────────────
  let _uploadedFile = null;
  const textarea   = document.getElementById('wg-text');
  const fileInput  = document.getElementById('wg-file-input');
  const dropZone   = document.getElementById('wg-drop-zone');
  const fileNameEl = document.getElementById('wg-file-name');
  const metaEl     = document.getElementById('wg-meta');
  const wordEl     = document.getElementById('wg-word-count');
  const charEl     = document.getElementById('wg-char-count');
  const errorEl    = document.getElementById('wg-error');
  const btn        = document.getElementById('wg-btn');
  const btnText    = document.getElementById('wg-btn-text');
  const spinner    = document.getElementById('wg-spinner');

  // ── Markdown renderer (uses marked if loaded, else inline fallback) ─
  function renderMarkdown(text) {
    if (typeof marked !== 'undefined' && marked.parse) {
      try { return marked.parse(text, { breaks: true, gfm: true }); } catch (e) {}
    }
    // Inline fallback for common markdown
    return text
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/^#### (.+)$/gm, '<h4>$1</h4>')
      .replace(/^### (.+)$/gm, '<h3>$1</h3>')
      .replace(/^## (.+)$/gm, '<h2>$1</h2>')
      .replace(/^# (.+)$/gm, '<h1>$1</h1>')
      .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.+?)\*/g, '<em>$1</em>')
      .replace(/`(.+?)`/g, '<code>$1</code>')
      .replace(/^- (.+)$/gm, '<li>$1</li>')
      .replace(/^\d+\. (.+)$/gm, '<li>$1</li>')
      .replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>')
      .replace(/^\> (.+)$/gm, '<blockquote>$1</blockquote>')
      .replace(/\n\n/g, '</p><p>')
      .replace(/\n/g, '<br>');
  }

  // ── Input tab toggle (source / preview) ──────────────────────────────
  window.setInputTab = function(mode) {
    const sourceEl = document.getElementById('wg-text');
    const previewEl = document.getElementById('wg-preview');
    const sourceTab = document.getElementById('wg-tab-source');
    const previewTab = document.getElementById('wg-tab-preview');
    if (!sourceEl || !previewEl) return;
    if (mode === 'preview') {
      sourceEl.style.display = 'none';
      previewEl.style.display = 'block';
      previewEl.innerHTML = renderMarkdown(sourceEl.value);
      sourceTab.classList.remove('active');
      previewTab.classList.add('active');
      previewTab.style.color = '#fff';
      sourceTab.style.color = 'var(--text-muted)';
    } else {
      sourceEl.style.display = 'block';
      previewEl.style.display = 'none';
      sourceTab.classList.add('active');
      previewTab.classList.remove('active');
      sourceTab.style.color = '#fff';
      previewTab.style.color = 'var(--text-muted)';
    }
  };

  // Update preview live while typing if preview is visible
  textarea.addEventListener('input', function() {
    const previewEl = document.getElementById('wg-preview');
    if (previewEl && previewEl.style.display === 'block') {
      previewEl.innerHTML = renderMarkdown(textarea.value);
    }
  });

  // ── Rewrite tab toggle (source / preview) ────────────────────────────
  window.setRewriteTab = function(mode) {
    const sourceEl = document.getElementById('wg-rewrite-output');
    const previewEl = document.getElementById('wg-rewrite-preview');
    const sourceTab = document.getElementById('wg-rewrite-tab-source');
    const previewTab = document.getElementById('wg-rewrite-tab-preview');
    if (!sourceEl || !previewEl) return;
    if (mode === 'preview') {
      sourceEl.style.display = 'none';
      previewEl.style.display = 'block';
      previewEl.innerHTML = renderMarkdown(sourceEl.value);
      sourceTab.classList.remove('active');
      previewTab.classList.add('active');
      previewTab.style.color = '#fff';
      sourceTab.style.color = 'var(--text-muted)';
    } else {
      sourceEl.style.display = 'block';
      previewEl.style.display = 'none';
      sourceTab.classList.add('active');
      previewTab.classList.remove('active');
      sourceTab.style.color = '#fff';
      previewTab.style.color = 'var(--text-muted)';
    }
  };

  // ── Live word/char count ───────────────────────────────────────────
  textarea.addEventListener('input', updateMeta);
  function updateMeta() {
    const txt = textarea.value;
    if (!txt.trim()) { metaEl.style.display = 'none'; return; }
    const words = txt.trim().split(/\s+/).length;
    wordEl.textContent = words + ' word' + (words !== 1 ? 's' : '');
    charEl.textContent = txt.length + ' char' + (txt.length !== 1 ? 's' : '');
    metaEl.style.display = 'flex';
  }

  // ── File input ─────────────────────────────────────────────────────
  fileInput.addEventListener('change', function () {
    if (this.files && this.files[0]) setFile(this.files[0]);
  });

  // Drag & drop
  dropZone.addEventListener('dragover', function (e) {
    e.preventDefault();
    dropZone.classList.add('drag-over');
  });
  dropZone.addEventListener('dragleave', function () {
    dropZone.classList.remove('drag-over');
  });
  dropZone.addEventListener('drop', function (e) {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      setFile(e.dataTransfer.files[0]);
    }
  });

  function setFile(file) {
    const allowed = ['.txt', '.md', '.docx'];
    const ext = '.' + file.name.split('.').pop().toLowerCase();
    if (!allowed.includes(ext)) {
      showError('Unsupported file type. Accepted: .txt, .md, .docx');
      return;
    }
    _uploadedFile = file;
    fileNameEl.textContent = '\u2714 ' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
    hideError();
    // Clear textarea if a file is provided
    textarea.value = '';
    metaEl.style.display = 'none';
  }

  // ── Mode hint text ─────────────────────────────────────────────────
  const MODE_HINTS = {
    'default': '',
    'blameless_postmortem': 'Passive voice allowed. Flags personal blame. Checks for Timeline and Action Items sections.',
    'policy_language': 'Requires shall/must. Flags weak modals (may/might/should/could).',
    'adr': 'Requires Context, Decision, Consequences, and Alternatives sections.',
    'bluf_exec': 'First paragraph must contain an explicit ask, recommendation, and quantified impact.',
    'runbook': 'Requires numbered steps (1. 2. 3.) and a Rollback/Recovery section.',
    'rca': 'Requires Timeline, Impact, Root Cause, Corrective Action, and Preventive Action sections plus 5 Whys.',
  };

  (function initModeHints() {
    const sel = document.getElementById('wg-mode-select');
    const hint = document.getElementById('wg-mode-hint');
    if (!sel || !hint) return;
    sel.addEventListener('change', function () {
      hint.textContent = MODE_HINTS[sel.value] || '';
    });
  })();

  // ── Analysis ───────────────────────────────────────────────────────
  window.runAnalysis = async function () {
    hideError();
    const text = textarea.value.trim();
    if (!text && !_uploadedFile) {
      showError('Please paste text or upload a file before analyzing.');
      return;
    }

    const modeSelect = document.getElementById('wg-mode-select');
    const selectedMode = modeSelect ? modeSelect.value : 'default';

    setLoading(true);

    try {
      let response;
      if (_uploadedFile) {
        const fd = new FormData();
        fd.append('file', _uploadedFile);
        fd.append('mode', selectedMode);
        response = await fetch('/api/writeguard/analyze', { method: 'POST', body: fd });
      } else {
        response = await fetch('/api/writeguard/analyze', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ text, mode: selectedMode }),
        });
      }

      const data = await response.json();
      if (!response.ok) {
        showError(data.error || 'Analysis failed — please try again.');
        return;
      }
      renderResults(data);
      // Show rewrite button after successful analysis
      document.getElementById('wg-rewrite-btn').style.display = 'block';
      // Run style match against selected template (if any)
      runStyleMatchIfActive();
    } catch (err) {
      showError('Network error: ' + err.message);
    } finally {
      setLoading(false);
    }
  };

  // ── Render results ─────────────────────────────────────────────────
  function renderResults(data) {
    const score = typeof data.overall_score === 'number' ? data.overall_score : 0;
    const passed = data.passed;

    // Gauge
    const gaugeEl = document.getElementById('wg-overall');
    gaugeEl.textContent = score.toFixed(1);
    gaugeEl.className = 'wg-gauge-score ' + scoreClass(score);

    // Badge
    const badgeEl = document.getElementById('wg-badge');
    if (passed) {
      badgeEl.textContent = 'PASSED';
      badgeEl.className = 'wg-badge wg-badge-passed';
    } else {
      badgeEl.textContent = 'NEEDS REVIEW';
      badgeEl.className = 'wg-badge wg-badge-review';
    }

    // Content mode badge
    const modeBadgeEl = document.getElementById('wg-mode-badge');
    if (modeBadgeEl) {
      const modeLabel = data.content_mode_label || '';
      if (modeLabel && data.content_mode !== 'default') {
        modeBadgeEl.textContent = modeLabel;
        modeBadgeEl.style.display = 'inline-block';
      } else {
        modeBadgeEl.style.display = 'none';
      }
    }

    // Hide empty state
    document.getElementById('wg-empty').style.display = 'none';

    // Dimension bars
    const dimsSection = document.getElementById('wg-dims-section');
    const dimsEl = document.getElementById('wg-dims');
    dimsSection.style.display = 'block';
    dimsEl.innerHTML = '';

    const dims = data.dimensions || {};
    Object.entries(dims).forEach(([key, dim]) => {
      const s = typeof dim.score === 'number' ? dim.score : 0;
      const unavail = dim.status === 'unavailable';
      const suppressed = dim.suppressed === true;
      const isMode = key === 'content_mode';
      const row = document.createElement('div');
      row.className = 'wg-dim-row';
      row.innerHTML = `
        <span class="wg-dim-name" style="${isMode ? 'color:#a29bfe;font-weight:700;' : ''}">${escHtml(dim.label)}</span>
        <div class="wg-dim-bar-wrap">
          <div class="wg-dim-bar ${suppressed ? '' : unavail ? '' : barClass(s)}"
               style="width:${suppressed || unavail ? 0 : s}%;${suppressed ? 'background:rgba(255,255,255,0.08);' : ''}${isMode ? 'background:#6c5ce7;' : ''}"></div>
        </div>
        ${suppressed
          ? '<span class="wg-dim-unavail" style="color:#6c5ce7;font-style:italic;">n/a (mode)</span>'
          : unavail
            ? '<span class="wg-dim-unavail">unavailable</span>'
            : `<span class="wg-dim-score ${scoreClass(s)}">${s.toFixed(0)}</span>`}
      `;
      dimsEl.appendChild(row);
    });

    // Findings
    const findings = data.findings || [];
    const findingsSection = document.getElementById('wg-findings-section');
    const findingsList = document.getElementById('wg-findings-list');
    const findingCount = document.getElementById('wg-finding-count');

    if (findings.length > 0) {
      findingsSection.style.display = 'block';
      findingCount.textContent = '(' + findings.length + ')';
      findingsList.innerHTML = '';
      findings.forEach(function (f) {
        const sev = (f.severity || 'medium').toLowerCase();
        const msg = f.message || f.description || '';
        const sug = f.suggestion || '';
        const dim = f.dimension || '';
        const item = document.createElement('div');
        item.className = 'wg-finding';
        item.innerHTML = `
          <span class="wg-sev sev-${escHtml(sev)}">${escHtml(sev)}</span>
          <div class="wg-finding-body">
            <div>${escHtml(msg)}</div>
            ${sug ? `<div style="color:var(--text-muted,#888);font-size:0.75rem;margin-top:0.2rem;">${escHtml(sug)}</div>` : ''}
            ${dim ? `<div class="wg-finding-dim">${escHtml(dim)}</div>` : ''}
          </div>
        `;
        findingsList.appendChild(item);
      });
    } else {
      findingsSection.style.display = 'none';
    }

    // Recommendations
    const recs = data.recommendations || [];
    const recsEl = document.getElementById('wg-recs');
    const recsList = document.getElementById('wg-recs-list');
    if (recs.length > 0) {
      recsEl.style.display = 'block';
      recsList.innerHTML = recs.map(r => `<li>${escHtml(r)}</li>`).join('');
    } else {
      recsEl.style.display = 'none';
    }

    // Portion marking
    renderPortionMarking(data.portion_marking || {});
  }

  // ── Portion marking state ───────────────────────────────────────────
  let _lastPortionMarking = {};
  let _selectedLevel = 'U';
  let _paraLevels = [];  // per-paragraph level selections
  const PM_LEVELS = [
    { key: 'U',       label: '(U)',       mark: '(U)',       banner: 'UNCLASSIFIED',       rank: 0 },
    { key: 'CUI',     label: '(CUI)',     mark: '(CUI)',     banner: 'CUI // SP-CTI',      rank: 1 },
    { key: 'C',       label: '(C)',       mark: '(C)',       banner: 'CONFIDENTIAL',        rank: 2 },
    { key: 'S',       label: '(S)',       mark: '(S)',       banner: 'SECRET',              rank: 3 },
    { key: 'TS',      label: '(TS)',      mark: '(TS)',      banner: 'TOP SECRET',          rank: 4 },
    { key: 'TS//SCI', label: '(TS//SCI)', mark: '(TS//SCI)', banner: 'TOP SECRET // SCI',  rank: 5 },
  ];
  const PM_DISSEM = ['', 'NOFORN', 'FEDCON', 'FED ONLY', 'NOCON', 'REL TO'];

  // ── Portion marking renderer ───────────────────────────────────────
  function renderPortionMarking(pm) {
    _lastPortionMarking = pm;  // Store for apply button

    const section       = document.getElementById('pm-section');
    const bannerEl      = document.getElementById('pm-banner-preview');
    const statsEl       = document.getElementById('pm-stats');
    const violationsEl  = document.getElementById('pm-violations');
    const desigWrap     = document.getElementById('pm-desig-wrap');
    const desigEl       = document.getElementById('pm-desig');
    const applyBtn      = document.getElementById('pm-apply-btn');
    const previewEl     = document.getElementById('pm-preview');

    // Always show section after analysis
    section.style.display = 'block';
    applyBtn.style.display = 'block';
    previewEl.style.display = 'none';

    // Render level selector buttons
    const levelBtnsEl = document.getElementById('pm-level-btns');
    levelBtnsEl.innerHTML = PM_LEVELS.map(function(lv) {
      const isActive = lv.key === _selectedLevel;
      return `<button class="pm-level-btn ${isActive ? 'active' : ''}"
                data-level="${escHtml(lv.key)}"
                onclick="selectPmLevel('${escHtml(lv.key)}')"
                title="Mark paragraphs as ${escHtml(lv.label)}">${escHtml(lv.label)}</button>`;
    }).join('');

    // Banner CSS class
    const levelKey = (pm.highest_level || _selectedLevel)
      .replace(/\//g, '').replace(/\s/g, '');
    const bannerClassMap = {
      'U': 'pm-banner-U',
      'FOUO': 'pm-banner-CUI',
      'CUI': 'pm-banner-CUI',
      'C': 'pm-banner-C',
      'S': 'pm-banner-S',
      'TS': 'pm-banner-TS',
      'TSSCI': 'pm-banner-TSSCI',
    };
    const selectedLvObj = PM_LEVELS.find(l => l.key === _selectedLevel) || PM_LEVELS[0];
    const bannerCls = bannerClassMap[_selectedLevel.replace(/\//g, '').replace(/\s/g, '')] || 'pm-banner-U';
    const banner = selectedLvObj.banner;

    // Render header and footer banner strip — clickable
    bannerEl.innerHTML = `
      <div class="pm-banner ${bannerCls}" role="button" tabindex="0"
           aria-label="Click to apply portion marks"
           onclick="applyPortionMarks()"
           title="Click to apply portion marks">${escHtml(banner)}</div>
      <div class="pm-banner ${bannerCls}" role="button" tabindex="0"
           aria-label="Click to apply portion marks"
           onclick="applyPortionMarks()"
           title="Click to apply portion marks">${escHtml(banner)}</div>
    `;

    // Build per-paragraph editor
    const text = textarea.value.trim();
    let cleanText = text;
    PM_LEVELS.forEach(function (lv) {
      cleanText = cleanText.replace(new RegExp('^' + lv.banner.replace(/[.*+?^${}()|[\]\\\/]/g, '\\$&') + '\\s*\\n?', 'gm'), '');
    });
    const paragraphs = cleanText.split(/\n\s*\n/).filter(p => p.trim());

    if (paragraphs.length > 0) {
      _paraLevels = paragraphs.map(function () { return _selectedLevel; });
      const paraEditorEl = document.getElementById('pm-para-editor');
      const paraListEl = document.getElementById('pm-para-list');
      paraEditorEl.style.display = 'block';
      const opts = PM_LEVELS.map(function (lv) {
        return `<option value="${escHtml(lv.key)}">${escHtml(lv.label)}</option>`;
      }).join('');
      paraListEl.innerHTML = paragraphs.map(function (para, i) {
        para = para.trim();
        // Detect existing mark
        const existMatch = para.match(/^\s*\(([A-Z\/]+)\)\s/);
        const detected = existMatch ? existMatch[1] : _selectedLevel;
        _paraLevels[i] = detected;
        const preview = para.replace(/^\s*\([A-Z\/]+\)\s/, '').substring(0, 120);
        return `<div class="pm-para-row">
          <span class="pm-para-num">${i + 1}.</span>
          <select class="pm-para-select" onchange="setParaLevel(${i}, this.value)"
                  title="Set classification for paragraph ${i + 1}">
            ${PM_LEVELS.map(function (lv) {
              const sel = lv.key === detected ? ' selected' : '';
              return '<option value="' + escHtml(lv.key) + '"' + sel + '>' + escHtml(lv.label) + '</option>';
            }).join('')}
          </select>
          <div class="pm-para-text">${escHtml(preview)}${para.length > 120 ? '...' : ''}</div>
        </div>`;
      }).join('');
    }

    // Stats row
    if (pm.has_marks) {
      statsEl.innerHTML = `
        <div class="pm-stat">Paragraphs: <strong>${pm.total_paragraphs || 0}</strong></div>
        <div class="pm-stat">Marked: <strong>${pm.marked_count || 0}</strong></div>
        <div class="pm-stat">Unmarked: <strong style="color:${(pm.unmarked_count||0) > 0 ? '#e53e3e' : '#00c864'}">${pm.unmarked_count || 0}</strong></div>
        <div class="pm-stat">Highest: <strong>${escHtml(pm.highest_level || 'U')}</strong></div>
      `;
    } else {
      statsEl.innerHTML = '<span class="pm-na-msg">Set per-paragraph levels above, then click "Apply Portion Marks"</span>';
    }

    // Violations
    const violations = pm.violations || [];
    if (violations.length === 0) {
      violationsEl.innerHTML = pm.has_marks
        ? '<div class="pm-ok-msg"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>All paragraphs correctly marked — no violations</div>'
        : '';
    } else {
      violationsEl.innerHTML = violations.map(function(v) {
        const sev = (v.severity || 'medium').toLowerCase();
        return `<div class="pm-violation">
          <span class="wg-sev sev-${escHtml(sev)}">${escHtml(sev)}</span>
          <div class="pm-violation-body">
            <div>${escHtml(v.message || '')}</div>
            <div class="pm-violation-rule">${escHtml(v.rule || '')}</div>
          </div>
        </div>`;
      }).join('');
    }

    // Designation block
    if (pm.designation_block) {
      desigWrap.style.display = 'block';
      desigEl.textContent = pm.designation_block;
    } else {
      desigWrap.style.display = 'none';
    }
  }

  // ── Helper: get rank for a level key ────────────────────────────────
  function _levelRank(key) {
    const lv = PM_LEVELS.find(l => l.key === key);
    return lv ? lv.rank : -1;  // custom marks get -1 (treated as unknown)
  }

  // ── Helper: derive high-water-mark banner from all paragraph levels ─
  function _deriveHighestBanner() {
    let maxRank = 0;
    _paraLevels.forEach(function (lvKey) {
      const r = _levelRank(lvKey);
      if (r > maxRank) maxRank = r;
    });
    return PM_LEVELS.find(l => l.rank === maxRank) || PM_LEVELS[0];
  }

  // ── Helper: banner color/class from level key ─────────────────────
  function _bannerInfo(key) {
    const clsKey = key.replace(/\//g, '').replace(/\s/g, '');
    const classMap = {
      'U': 'pm-banner-U', 'CUI': 'pm-banner-CUI', 'C': 'pm-banner-C',
      'S': 'pm-banner-S', 'TS': 'pm-banner-TS', 'TSSCI': 'pm-banner-TSSCI',
    };
    const colorMap = {
      'U': '#00c864', 'CUI': '#4a9eff', 'C': '#0096ff',
      'S': '#ff6432', 'TS': '#ffa500', 'TSSCI': '#e53e3e',
    };
    const markColorMap = {
      'U': '', 'CUI': 'pm-mark-cui', 'C': 'pm-mark-cui',
      'S': 'pm-mark-s', 'TS': 'pm-mark-ts', 'TSSCI': 'pm-mark-ts',
    };
    return {
      cls: classMap[clsKey] || 'pm-banner-U',
      color: colorMap[clsKey] || '#00c864',
      markCls: markColorMap[clsKey] || '',
    };
  }

  // ── Update banners to reflect high-water mark ─────────────────────
  function _updateBanners() {
    const highest = _deriveHighestBanner();
    const info = _bannerInfo(highest.key);
    const bannerEl = document.getElementById('pm-banner-preview');
    bannerEl.innerHTML = `
      <div class="pm-banner ${info.cls}" role="button" tabindex="0"
           onclick="applyPortionMarks()" title="Click to apply portion marks">${escHtml(highest.banner)}</div>
      <div class="pm-banner ${info.cls}" role="button" tabindex="0"
           onclick="applyPortionMarks()" title="Click to apply portion marks">${escHtml(highest.banner)}</div>
    `;
  }

  // ── Select default classification level (apply-all) ────────────────
  window.selectPmLevel = function (level) {
    _selectedLevel = level;
    // Update button active states
    document.querySelectorAll('#pm-level-btns .pm-level-btn').forEach(function (btn) {
      btn.classList.toggle('active', btn.getAttribute('data-level') === level);
    });
    // Set all per-paragraph dropdowns to this level
    _paraLevels = _paraLevels.map(function () { return level; });
    document.querySelectorAll('.pm-para-select').forEach(function (sel) {
      sel.value = level;
    });
    _updateBanners();
  };

  // ── Set individual paragraph level ─────────────────────────────────
  window.setParaLevel = function (index, level) {
    _paraLevels[index] = level;
    _updateBanners();
  };

  // ── Add custom portion mark ────────────────────────────────────────
  // ── Style Template (WG 10d) ──────────────────────────────────────
  let _currentProfileId = '';

  async function loadProfiles() {
    try {
      const resp = await fetch('/api/writeguard/profiles');
      const data = await resp.json();
      const sel = document.getElementById('wg-profile-select');
      const existing = sel.value;
      sel.innerHTML = '<option value="">— None (skip style matching) —</option>';
      (data.profiles || []).forEach(p => {
        const opt = document.createElement('option');
        opt.value = p.id;
        opt.textContent = `${p.name} (${p.source_word_count}w, ${p.confidence})`;
        sel.appendChild(opt);
      });
      if (existing) sel.value = existing;
      updateProfileInfo();
    } catch (err) {
      console.error('loadProfiles failed:', err);
    }
  }

  function updateProfileInfo() {
    const sel = document.getElementById('wg-profile-select');
    const info = document.getElementById('wg-profile-info');
    const delBtn = document.getElementById('wg-profile-delete-btn');
    _currentProfileId = sel.value;
    if (_currentProfileId) {
      info.textContent = 'Style matching active — analysis will score against this template.';
      delBtn.style.display = 'block';
    } else {
      info.textContent = '';
      delBtn.style.display = 'none';
    }
  }

  window.openTemplateUploadModal = function () {
    document.getElementById('wg-template-modal').style.display = 'flex';
    document.getElementById('wg-template-text').focus();
  };

  window.closeTemplateUploadModal = function () {
    document.getElementById('wg-template-modal').style.display = 'none';
    document.getElementById('wg-template-text').value = '';
    document.getElementById('wg-template-name').value = '';
    document.getElementById('wg-template-type').value = '';
  };

  window.saveTemplate = async function () {
    const text = document.getElementById('wg-template-text').value.trim();
    const name = document.getElementById('wg-template-name').value.trim();
    const contentType = document.getElementById('wg-template-type').value;

    if (!text || !name) {
      alert('Template name and sample text are required.');
      return;
    }
    if (text.split(/\s+/).length < 100) {
      alert('Minimum 100 words required (1,500+ recommended for reliable profile).');
      return;
    }

    try {
      const resp = await fetch('/api/writeguard/profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text, name, content_type: contentType }),
      });
      const data = await resp.json();
      if (!resp.ok || data.error) {
        alert(data.error || 'Save failed');
        return;
      }
      closeTemplateUploadModal();
      await loadProfiles();
      document.getElementById('wg-profile-select').value = data.id;
      updateProfileInfo();
    } catch (err) {
      alert('Network error: ' + err.message);
    }
  };

  window.deleteSelectedProfile = async function () {
    if (!_currentProfileId) return;
    if (!confirm('Delete this style template?')) return;
    try {
      await fetch(`/api/writeguard/profiles/${_currentProfileId}`, { method: 'DELETE' });
      await loadProfiles();
      document.getElementById('wg-profile-select').value = '';
      updateProfileInfo();
    } catch (err) {
      alert('Delete failed: ' + err.message);
    }
  };

  // Live word count for template textarea
  document.addEventListener('DOMContentLoaded', function () {
    const ta = document.getElementById('wg-template-text');
    const counter = document.getElementById('wg-template-word-count');
    if (ta && counter) {
      ta.addEventListener('input', function () {
        const words = this.value.trim().split(/\s+/).filter(w => w).length;
        const color = words >= 1500 ? '#00c864' : (words >= 500 ? '#ffa500' : '#e53e3e');
        counter.innerHTML = `<span style="color:${color}">${words} words</span> — ${words >= 1500 ? 'high confidence' : words >= 800 ? 'medium confidence' : words >= 100 ? 'low confidence' : 'below minimum'}`;
      });
    }
    // Profile select listener
    const sel = document.getElementById('wg-profile-select');
    if (sel) sel.addEventListener('change', updateProfileInfo);
    // Load profiles on page load
    loadProfiles();
  });

  // After analysis, if profile selected, fetch style match and show it
  async function runStyleMatchIfActive() {
    if (!_currentProfileId) return;
    const text = textarea.value.trim();
    if (!text) return;
    try {
      const resp = await fetch('/api/writeguard/style-match', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text, profile_id: _currentProfileId }),
      });
      const data = await resp.json();
      if (!resp.ok || data.error) return;
      renderStyleMatch(data);
    } catch (err) {
      console.error('style-match failed:', err);
    }
  }

  function renderStyleMatch(data) {
    // Add Style Match as a new dimension row
    const dimsEl = document.getElementById('wg-dims');
    if (!dimsEl) return;
    // Remove old style-match row if present
    const old = document.getElementById('wg-style-match-row');
    if (old) old.remove();

    const score = data.style_match_score || 0;
    const cls = scoreClass(score);
    const row = document.createElement('div');
    row.id = 'wg-style-match-row';
    row.className = 'wg-dim-row';
    row.style.borderTop = '1px dashed #444';
    row.style.paddingTop = '0.4rem';
    row.style.marginTop = '0.4rem';
    row.innerHTML = `
      <span class="wg-dim-name" style="color:#6c5ce7;">Style Match</span>
      <div class="wg-dim-bar-wrap">
        <div class="wg-dim-bar ${barClass(score)}" style="width:${score}%;background:#6c5ce7;"></div>
      </div>
      <span class="wg-dim-score ${cls}">${Math.round(score)}</span>
    `;
    dimsEl.appendChild(row);

    // Render instructions as a new findings panel
    const instructions = data.instructions || [];
    if (instructions.length === 0) return;

    // Add / update style instructions panel
    let panel = document.getElementById('wg-style-instructions');
    if (!panel) {
      panel = document.createElement('div');
      panel.id = 'wg-style-instructions';
      panel.style.cssText = 'margin-top:1rem;background:rgba(108,92,231,0.07);border-left:3px solid #6c5ce7;border-radius:4px;padding:0.75rem;';
      const recsEl = document.getElementById('wg-recs');
      recsEl.parentNode.insertBefore(panel, recsEl.nextSibling);
    }
    panel.innerHTML = `
      <div style="font-size:0.8rem;font-weight:700;color:#6c5ce7;margin-bottom:0.4rem;">
        Style Match Instructions (${instructions.length})
      </div>
      <div style="font-size:0.72rem;color:#888;margin-bottom:0.3rem;">
        Match target: <strong>${escHtml(data.profile_name || 'template')}</strong>
      </div>
      <ul style="margin:0;padding-left:1.1rem;">
        ${instructions.map(i => `<li style="font-size:0.78rem;color:var(--text-primary,#e0e0e0);margin-bottom:0.25rem;">${escHtml(i)}</li>`).join('')}
      </ul>
    `;
  }

  // ── Auto-detect classification (DoDM 5200.01) ────────────────────
  window.runAutoDetectClassification = async function () {
    const text = textarea.value.trim();
    if (!text) {
      showError('Enter text first, then auto-detect classification.');
      return;
    }

    const btn = document.getElementById('pm-auto-detect-btn');
    const origLabel = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = 'Scanning...';

    try {
      const resp = await fetch('/api/writeguard/classify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text }),
      });
      const data = await resp.json();
      if (!resp.ok || data.error) {
        showError(data.error || 'Classification detection failed');
        return;
      }
      renderAutoDetectResults(data);
    } catch (err) {
      showError('Network error: ' + err.message);
    } finally {
      btn.disabled = false;
      btn.innerHTML = origLabel;
    }
  };

  function renderAutoDetectResults(data) {
    const resultsEl = document.getElementById('pm-autodetect-results');
    const statsEl = document.getElementById('pm-indicator-stats');
    const warnEl = document.getElementById('pm-review-warning');
    const compEl = document.getElementById('pm-compilation-warning');
    const listEl = document.getElementById('pm-indicator-list');
    resultsEl.style.display = 'block';

    // Stats
    const conf = data.confidence_summary || { HIGH: 0, MEDIUM: 0, LOW: 0 };
    statsEl.innerHTML = `
      <div class="pm-stat" style="background:rgba(0,200,100,0.08);">HIGH: <strong style="color:#00c864">${conf.HIGH}</strong></div>
      <div class="pm-stat" style="background:rgba(255,165,0,0.08);">MED: <strong style="color:#ffa500">${conf.MEDIUM}</strong></div>
      <div class="pm-stat" style="background:rgba(229,62,62,0.08);">LOW: <strong style="color:#e53e3e">${conf.LOW}</strong></div>
      <div class="pm-stat">Banner: <strong>${escHtml(data.banner || 'UNCLASSIFIED')}</strong></div>
    `;

    // Human review warning
    if (data.human_review_required) {
      warnEl.style.display = 'block';
      warnEl.innerHTML = '<strong>Human review required</strong> — LOW confidence matches or classified content detected. Do not trust auto-detection alone.';
    } else {
      warnEl.style.display = 'none';
    }

    // Compilation warning
    if (data.compilation_warning) {
      compEl.style.display = 'block';
      const reasons = (data.compilation_details?.reasons || []).join(' ');
      compEl.innerHTML = `<strong>Compilation risk:</strong> ${escHtml(reasons)}`;
    } else {
      compEl.style.display = 'none';
    }

    // Indicator list
    const allInd = data.all_indicators || [];
    if (allInd.length === 0) {
      listEl.innerHTML = '<div style="padding:0.4rem;color:#888;">No classification indicators detected — text appears UNCLASSIFIED.</div>';
    } else {
      listEl.innerHTML = allInd.slice(0, 50).map(ind => {
        const confColor = ind.confidence === 'HIGH' ? '#00c864' : (ind.confidence === 'MEDIUM' ? '#ffa500' : '#e53e3e');
        return `<div style="padding:0.3rem 0.4rem;border-bottom:1px solid #222;">
          <span style="color:${confColor};font-weight:600;font-size:0.68rem;">[${escHtml(ind.confidence)}]</span>
          <span style="color:#ccc;"> Para ${(ind.paragraph_index ?? 0) + 1}:</span>
          <span style="color:#4a9eff;">${escHtml(ind.category)}</span>
          → <strong>${escHtml(ind.suggested_level || 'review')}</strong>
          <div style="font-size:0.7rem;color:#888;margin-top:0.15rem;">${escHtml(ind.match || '')}</div>
        </div>`;
      }).join('');
    }

    // Pre-fill per-paragraph dropdowns with suggested marks + update default level
    if (data.paragraphs && data.paragraphs.length) {
      // Set the highest level as default selected
      const levels = data.paragraphs.map(p => p.level || 'U');
      const rankMap = {U:0, CUI:1, C:2, S:3, TS:4, 'TS//SCI':5};
      let highest = 'U';
      levels.forEach(l => { if ((rankMap[l]||0) > (rankMap[highest]||0)) highest = l; });

      // Update per-paragraph levels array
      _paraLevels = levels;

      // Update dropdowns in the editor panel (if already rendered)
      document.querySelectorAll('.pm-para-select').forEach((sel, i) => {
        if (i < levels.length) {
          // Ensure option exists; if custom mark detected, add it
          if (!Array.from(sel.options).some(o => o.value === levels[i])) {
            const opt = document.createElement('option');
            opt.value = levels[i];
            opt.textContent = '(' + levels[i] + ')';
            sel.appendChild(opt);
          }
          sel.value = levels[i];
        }
      });

      // Update banner to reflect highest
      _selectedLevel = highest;
      _updateBanners();

      // Highlight the level button
      document.querySelectorAll('#pm-level-btns .pm-level-btn').forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('data-level') === highest);
      });
    }
  }

  window.addCustomMark = function () {
    const input = document.getElementById('pm-custom-input');
    const val = input.value.trim().toUpperCase();
    if (!val) return;
    // Check if already exists
    if (PM_LEVELS.find(l => l.key === val)) {
      input.value = '';
      return;
    }
    // Add to PM_LEVELS
    PM_LEVELS.push({
      key: val,
      label: '(' + val + ')',
      mark: '(' + val + ')',
      banner: val,
      rank: PM_LEVELS.length,  // higher than TS//SCI
    });
    input.value = '';
    // Re-render level buttons
    const levelBtnsEl = document.getElementById('pm-level-btns');
    const newBtn = document.createElement('button');
    newBtn.className = 'pm-level-btn';
    newBtn.setAttribute('data-level', val);
    newBtn.onclick = function () { selectPmLevel(val); };
    newBtn.title = 'Mark paragraphs as (' + val + ')';
    newBtn.textContent = '(' + val + ')';
    newBtn.style.borderColor = '#c0c';
    newBtn.style.color = '#c0c';
    levelBtnsEl.appendChild(newBtn);
    // Add to all dropdowns
    document.querySelectorAll('.pm-para-select').forEach(function (sel) {
      const opt = document.createElement('option');
      opt.value = val;
      opt.textContent = '(' + val + ')';
      sel.appendChild(opt);
    });
  };

  // ── Apply portion marks ────────────────────────────────────────────
  window.applyPortionMarks = function () {
    const previewEl = document.getElementById('pm-preview');
    const text = textarea.value.trim();

    if (!text) {
      previewEl.innerHTML = '<span style="color:#888;">No text to mark.</span>';
      previewEl.style.display = 'block';
      return;
    }

    // Strip existing banners
    let cleanText = text;
    PM_LEVELS.forEach(function (lv) {
      cleanText = cleanText.replace(new RegExp('^' + lv.banner.replace(/[.*+?^${}()|[\]\\\/]/g, '\\$&') + '\\s*\\n?', 'gm'), '');
    });
    const paragraphs = cleanText.split(/\n\s*\n/).filter(p => p.trim());

    // Derive high-water-mark banner from per-paragraph levels
    const highest = _deriveHighestBanner();
    const bannerText = highest.banner;
    const bannerInfo = _bannerInfo(highest.key);

    // Build preview
    let html = '';
    html += `<div style="text-align:center;font-weight:800;font-size:0.78rem;letter-spacing:0.12em;margin-bottom:1rem;color:${bannerInfo.color};">${escHtml(bannerText)}</div>`;

    const markedLines = [bannerText, ''];
    const levelCounts = {};

    paragraphs.forEach(function (para, i) {
      para = para.trim();
      if (!para) return;

      // Get this paragraph's level
      const lvKey = _paraLevels[i] || _selectedLevel;
      const lvObj = PM_LEVELS.find(l => l.key === lvKey) || PM_LEVELS[0];
      const mark = lvObj.mark;
      const info = _bannerInfo(lvKey);

      levelCounts[lvKey] = (levelCounts[lvKey] || 0) + 1;

      // Strip existing portion mark from text
      const cleanPara = para.replace(/^\s*\([A-Z\/]+\)\s/, '');

      html += `<p style="margin:0 0 0.8rem;"><span class="pm-mark ${info.markCls}">${escHtml(mark)}</span> ${escHtml(cleanPara)}</p>`;
      markedLines.push(mark + ' ' + cleanPara);
      markedLines.push('');
    });

    html += `<div style="text-align:center;font-weight:800;font-size:0.78rem;letter-spacing:0.12em;margin-top:1rem;color:${bannerInfo.color};">${escHtml(bannerText)}</div>`;
    markedLines.push(bannerText);

    previewEl.innerHTML = html;
    previewEl.style.display = 'block';

    // Update textarea
    textarea.value = markedLines.join('\n');
    updateMeta();

    // Update banners
    _updateBanners();

    // Update stats
    const statsEl = document.getElementById('pm-stats');
    const totalParas = paragraphs.length;
    const levelSummary = Object.entries(levelCounts).map(function (e) {
      return '<div class="pm-stat">(' + escHtml(e[0]) + '): <strong>' + e[1] + '</strong></div>';
    }).join('');
    statsEl.innerHTML = `
      <div class="pm-stat">Paragraphs: <strong>${totalParas}</strong></div>
      <div class="pm-stat">All marked: <strong style="color:#00c864">Yes</strong></div>
      <div class="pm-stat">Banner: <strong>${escHtml(highest.key)}</strong></div>
      ${levelSummary}
    `;

    // Show export buttons
    document.getElementById('pm-export-wrap').style.display = 'flex';
  };

  // ── Export functions ───────────────────────────────────────────────
  window.exportMarkedText = function (format) {
    const text = textarea.value;
    if (!text.trim()) return;

    if (format === 'txt') {
      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'writeguard-marked.txt';
      a.click();
      URL.revokeObjectURL(url);
    } else if (format === 'clipboard') {
      navigator.clipboard.writeText(text).then(function () {
        const btn = document.querySelector('[data-export="clipboard"]');
        const orig = btn.textContent;
        btn.textContent = 'Copied!';
        setTimeout(function () { btn.textContent = orig; }, 1500);
      });
    } else if (format === 'md') {
      // Wrap in markdown with frontmatter
      const lvObj = PM_LEVELS.find(l => l.key === _selectedLevel) || PM_LEVELS[0];
      const md = `---\nclassification: ${lvObj.banner}\nportion_marked: true\ngenerated_by: ICDEV WriteGuard\ndate: ${new Date().toISOString().slice(0,10)}\n---\n\n${text}`;
      const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'writeguard-marked.md';
      a.click();
      URL.revokeObjectURL(url);
    }
  };

  // ── Rewrite ────────────────────────────────────────────────────────
  window.runRewrite = async function () {
    const text = textarea.value.trim();
    if (!text) return;

    const rwBtn = document.getElementById('wg-rewrite-btn');
    const rwText = document.getElementById('wg-rewrite-text');
    const rwSpinner = document.getElementById('wg-rewrite-spinner');
    rwBtn.disabled = true;
    rwText.style.display = 'none';
    rwSpinner.style.display = 'block';

    try {
      const resp = await fetch('/api/writeguard/rewrite', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text }),
      });
      const data = await resp.json();
      if (!resp.ok || data.error) {
        showError(data.error || 'Rewrite failed');
        return;
      }

      // Show result
      const resultEl = document.getElementById('wg-rewrite-result');
      const outputEl = document.getElementById('wg-rewrite-output');
      const deltaEl = document.getElementById('wg-rewrite-delta');
      const changesEl = document.getElementById('wg-rewrite-changes');

      outputEl.value = data.rewritten_text;
      resultEl.style.display = 'block';
      // Update preview if visible
      const previewEl = document.getElementById('wg-rewrite-preview');
      if (previewEl && previewEl.style.display === 'block') {
        previewEl.innerHTML = renderMarkdown(data.rewritten_text);
      }

      const delta = data.score_improvement || 0;
      const deltaColor = delta > 0 ? '#00c864' : (delta < 0 ? '#e53e3e' : '#888');
      deltaEl.innerHTML = `Score: ${data.original_score?.toFixed(1)} → ${data.rewritten_score?.toFixed(1)} <span style="color:${deltaColor}">(${delta > 0 ? '+' : ''}${delta.toFixed(1)})</span>`;

      const changeCount = data.change_count || 0;
      changesEl.textContent = changeCount > 0
        ? `${changeCount} fix${changeCount > 1 ? 'es' : ''} applied`
        : 'No deterministic fixes needed';

    } catch (err) {
      showError('Rewrite error: ' + err.message);
    } finally {
      rwBtn.disabled = false;
      rwText.style.display = 'inline';
      rwSpinner.style.display = 'none';
    }
  };

  window.acceptRewrite = function () {
    const output = document.getElementById('wg-rewrite-output');
    textarea.value = output.value;
    document.getElementById('wg-rewrite-result').style.display = 'none';
    updateMeta();
  };

  // ── Helpers ────────────────────────────────────────────────────────
  function scoreClass(s) {
    if (s >= 75) return 'score-good';
    if (s >= 50) return 'score-warn';
    return 'score-bad';
  }
  function barClass(s) {
    if (s >= 75) return 'bar-good';
    if (s >= 50) return 'bar-warn';
    return 'bar-bad';
  }
  function escHtml(str) {
    return String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }
  function setLoading(on) {
    btn.disabled = on;
    btnText.style.display = on ? 'none' : 'inline';
    spinner.style.display = on ? 'block' : 'none';
  }
  function showError(msg) {
    errorEl.textContent = msg;
    errorEl.style.display = 'block';
  }
  function hideError() {
    errorEl.style.display = 'none';
  }

  // ── Word Limit ─────────────────────────────────────────────────────

  window.toggleWordLimit = function () {
    const toggle = document.getElementById('wl-toggle');
    const panel  = document.getElementById('wl-panel');
    toggle.classList.toggle('open');
    panel.classList.toggle('open');
  };

  window.checkWordLimits = async function () {
    const text = textarea.value;
    if (!text.trim()) {
      alert('Paste some text first, then configure your word limits.');
      return;
    }
    const limitsYaml = document.getElementById('wl-yaml').value;
    const btn2       = document.getElementById('wl-btn');
    const checking   = document.getElementById('wl-checking');
    btn2.disabled = true;
    checking.style.display = 'inline';

    try {
      const resp = await fetch('/api/writeguard/word-limits', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text, limits_yaml: limitsYaml }),
      });
      const data = await resp.json();
      if (!resp.ok) {
        alert('Error: ' + (data.error || 'unknown'));
        return;
      }
      renderWordLimitResults(data);
    } catch (err) {
      alert('Network error: ' + err.message);
    } finally {
      btn2.disabled = false;
      checking.style.display = 'none';
    }
  };

  function renderWordLimitResults(data) {
    const resultsEl   = document.getElementById('wl-results');
    const listEl      = document.getElementById('wl-section-list');
    const violEl      = document.getElementById('wl-violation-banner');
    const passEl      = document.getElementById('wl-pass-banner');
    const badgeEl     = document.getElementById('wl-badge');

    resultsEl.style.display = 'block';
    listEl.innerHTML = '';

    const sections = data.sections || [];
    sections.forEach(function (sec) {
      const hasLimit = sec.limit !== null && sec.limit !== undefined;
      const pct      = hasLimit ? Math.min(sec.pct, 100) : 30;
      const barCls   = !hasLimit ? 'wl-bar-none'
                     : sec.status === 'over'  ? 'wl-bar-over'
                     : sec.status === 'warn'  ? 'wl-bar-warn'
                     :                          'wl-bar-ok';
      const countTxt = hasLimit
        ? escHtml(sec.word_count) + ' / ' + escHtml(sec.limit) + ' words'
        : escHtml(sec.word_count) + ' words';

      const row = document.createElement('div');
      row.className = 'wl-section-row';
      row.innerHTML = `
        <div class="wl-section-meta">
          <span class="wl-section-name" title="${escHtml(sec.name)}">${escHtml(sec.name)}</span>
          <span class="wl-section-count">${countTxt}</span>
        </div>
        <div class="wl-bar-wrap">
          <div class="wl-bar ${barCls}" style="width:${pct}%"></div>
        </div>
      `;
      listEl.appendChild(row);
    });

    // Total row
    const totalRow = document.createElement('div');
    totalRow.className = 'wl-section-row wl-total-row';
    const hasTotal = data.total_limit !== null && data.total_limit !== undefined;
    const totalPct = hasTotal ? Math.min(data.total_pct, 100) : 30;
    const totalBarCls = !hasTotal ? 'wl-bar-none'
                      : data.total_status === 'over' ? 'wl-bar-over'
                      : data.total_status === 'warn' ? 'wl-bar-warn'
                      :                                 'wl-bar-ok';
    const totalTxt = hasTotal
      ? escHtml(data.total_words) + ' / ' + escHtml(data.total_limit) + ' words'
      : escHtml(data.total_words) + ' words total';
    totalRow.innerHTML = `
      <div class="wl-section-meta">
        <span class="wl-section-name">Total</span>
        <span class="wl-section-count">${totalTxt}</span>
      </div>
      <div class="wl-bar-wrap">
        <div class="wl-bar ${totalBarCls}" style="width:${totalPct}%"></div>
      </div>
    `;
    listEl.appendChild(totalRow);

    // Violations / pass banner
    const violations = data.violations || [];
    if (violations.length > 0) {
      const msgs = violations.map(function (v) {
        return escHtml(v.name) + ': ' + v.word_count + ' words (' + v.excess + ' over limit of ' + v.limit + ')';
      });
      violEl.innerHTML = '<strong>Over limit:</strong> ' + msgs.join(' &bull; ');
      violEl.style.display = 'block';
      passEl.style.display = 'none';
      badgeEl.textContent = violations.length + ' over';
      badgeEl.style.background = 'rgba(229,62,62,0.15)';
      badgeEl.style.color = '#e53e3e';
      badgeEl.style.border = '1px solid rgba(229,62,62,0.4)';
      badgeEl.style.display = 'inline';
    } else if (sections.some(function (s) { return s.limit !== null; }) || hasTotal) {
      passEl.textContent = 'All sections within word limits.';
      passEl.style.display = 'block';
      violEl.style.display = 'none';
      badgeEl.textContent = 'within limits';
      badgeEl.style.background = 'rgba(0,200,100,0.1)';
      badgeEl.style.color = '#00c864';
      badgeEl.style.border = '1px solid rgba(0,200,100,0.3)';
      badgeEl.style.display = 'inline';
    } else {
      violEl.style.display = 'none';
      passEl.style.display = 'none';
      badgeEl.style.display = 'none';
    }
  }
})();
</script>
{% endblock %}