app.js

// app.js
// Client-side APCA + WCAG 2.x contrast checker with suggestion support.

let APCAcontrast = null;
let APCA_sRGBtoY = null;

// Try to dynamically import APCA. If it fails, we still run the rest.
(async function init() {
  try {
    const mod = await import("https://cdn.jsdelivr.net/npm/apca-w3@0.1.9/+esm");
    APCAcontrast = mod.APCAcontrast;
    // helper to convert sRGB (0-255) to the Y value expected by APCAcontrast
    APCA_sRGBtoY = mod.sRGBtoY || null;
  } catch (e) {
    console.warn("APCA module could not be loaded. APCA results will be n/a.", e);
  }
  setupContrastTool();
})();

// Ensure random helpers are available globally for event handlers
// Simple HSL -> HEX converter (expects h in degrees 0-360, s and l in percent 0-100)
function hslToHex(h, s, l) {
  s = s / 100;
  l = l / 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const hh = (h % 360) / 60;
  const x = c * (1 - Math.abs((hh % 2) - 1));
  let r1 = 0, g1 = 0, b1 = 0;
  if (0 <= hh && hh < 1) { r1 = c; g1 = x; b1 = 0; }
  else if (1 <= hh && hh < 2) { r1 = x; g1 = c; b1 = 0; }
  else if (2 <= hh && hh < 3) { r1 = 0; g1 = c; b1 = x; }
  else if (3 <= hh && hh < 4) { r1 = 0; g1 = x; b1 = c; }
  else if (4 <= hh && hh < 5) { r1 = x; g1 = 0; b1 = c; }
  else { r1 = c; g1 = 0; b1 = x; }
  const m = l - c / 2;
  const r = Math.round((r1 + m) * 255);
  const g = Math.round((g1 + m) * 255);
  const b = Math.round((b1 + m) * 255);
  const toHex = (n) => n.toString(16).padStart(2, '0').toUpperCase();
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

function randomHex() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  const toHex = (n) => n.toString(16).padStart(2, '0').toUpperCase();
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

function randomLightHex() {
  const h = Math.floor(Math.random() * 360);
  const s = Math.floor(Math.random() * 30) + 50; // 50-80%
  const l = Math.floor(Math.random() * 15) + 70; // 70-85%
  return hslToHex(h, s, l);
}

function randomDarkHex() {
  const h = Math.floor(Math.random() * 360);
  const s = Math.floor(Math.random() * 40) + 40; // 40-80%
  const l = Math.floor(Math.random() * 20) + 8;  // 8-28%
  return hslToHex(h, s, l);
}

function hashCode(str) {
  let h = 0;
  for (let i = 0; i < str.length; i++) {
    h = ((h << 5) - h) + str.charCodeAt(i);
    h |= 0;
  }
  return h;
}

function setupContrastTool() {
  // ---------- DOM references ----------

  const page = document.getElementById("main");

  const fgText = document.getElementById("fgText");
  const fgPicker = document.getElementById("fgPicker");
  const bgText = document.getElementById("bgText");
  const bgPicker = document.getElementById("bgPicker");
  const thirdText = document.getElementById("thirdText");
  const thirdPicker = document.getElementById("thirdPicker");
  const enableThird = document.getElementById("enableThird");
  const thirdContainer = document.getElementById("thirdContainer");

  const wcagThresholdSelect = document.getElementById("wcagThreshold");
  const apcaThresholdSelect = document.getElementById("apcaThreshold");

  const previewBase = document.getElementById("previewBase");
  const previewThird = document.getElementById("previewThird");
  const previewThirdCard = document.getElementById("previewThirdCard");

  const demoHeadingBase = document.getElementById("demoHeadingBase");
  const demoLinkBase = document.getElementById("demoLinkBase");
  const demoButtonBase = document.querySelector("#demoButtonBase");

  const demoHeadingThird = document.getElementById("demoHeadingThird");
  const demoLinkThird = document.getElementById("demoLinkThird");
  const demoButtonThird = document.querySelector("#demoButtonThird");

  const simToggles = Array.from(document.querySelectorAll(".sim-toggle"));

  // Initialize simulation toggle visual state from aria-pressed attributes
  simToggles.forEach(b => {
    const pressed = b.getAttribute('aria-pressed') === 'true';
    if (pressed) {
      b.classList.add('sim-toggle-active');
      b.classList.remove('btn-secondary');
      b.classList.add('btn-primary');
    } else {
      b.classList.remove('sim-toggle-active');
      b.classList.remove('btn-primary');
      b.classList.add('btn-secondary');
    }
  });

  const errorBox = document.getElementById("errorBox");
  const resultsBody = document.getElementById("resultsBody");
  const focusSummary = document.getElementById("focusSummary");
  const focusText = document.getElementById("focusText");

  const suggestSection = document.getElementById("suggestSection");
  const fgSuggestions = document.getElementById("fgSuggestions");
  const bgSuggestions = document.getElementById("bgSuggestions");
  const thirdSuggestionBlock = document.getElementById("thirdSuggestionBlock");
  const thirdSuggestions = document.getElementById("thirdSuggestions");
  const suggestionStatus = document.getElementById("suggestionStatus");

  const liveRegion = document.getElementById("liveRegion");

  const themeToggleBtn = document.getElementById("theme-toggle");
  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
  let userHasThemeOverride = false;

  // Read colors from URL params on load (e.g., ?fg=%23B53636&bg=%234e4c18&third=%23663399)
  function readColorsFromURL() {
    try {
      const params = new URLSearchParams(window.location.search);
      const fgParam = params.get('fg');
      const bgParam = params.get('bg');
      const thirdParam = params.get('third');
      if (fgParam) {
        try { const p = parseCssColor(fgParam); fgText.value = fgText.value || p.hex; fgPicker.value = p.hex; } catch {}
      }
      if (bgParam) {
        try { const p = parseCssColor(bgParam); bgText.value = bgText.value || p.hex; bgPicker.value = p.hex; } catch {}
      }
      if (thirdParam) {
        try { const p = parseCssColor(thirdParam); thirdText.value = thirdText.value || p.hex; thirdPicker.value = p.hex; enableThird.checked = true; thirdContainer.classList.remove('hidden'); } catch {}
      }
    } catch (e) {
      // ignore
    }
  }

  function updateURLWithColors(fgHex, bgHex, thirdHex) {
    try {
      const params = new URLSearchParams(window.location.search);
      if (fgHex) params.set('fg', fgHex);
      else params.delete('fg');
      if (bgHex) params.set('bg', bgHex);
      else params.delete('bg');
      if (thirdHex) params.set('third', thirdHex);
      else params.delete('third');
      const newUrl = window.location.pathname + '?' + params.toString();
      history.replaceState(null, '', newUrl);
    } catch (e) {}
  }

  function applyTheme(theme) {
    const root = document.documentElement;
    if (theme === "light" || theme === "dark") {
      root.dataset.theme = theme;
    } else {
      delete root.dataset.theme;
    }
    if (themeToggleBtn) {
      if (theme === "dark" || (theme === "system" && prefersDarkScheme.matches)) {
        themeToggleBtn.setAttribute("aria-label", "Switch to light mode");
      } else {
        themeToggleBtn.setAttribute("aria-label", "Switch to dark mode");
      }
    }
    try {
      if (theme === "light" || theme === "dark") {
        localStorage.setItem("contrastToolTheme", theme);
      } else {
        localStorage.removeItem("contrastToolTheme");
      }
    } catch {}
  }

// Hidden element used to let the browser parse CSS color strings.
  const parserElement = document.createElement("span");
  parserElement.style.display = "none";
  document.body.appendChild(parserElement);

  // Determine initial theme: use stored user preference, or fall back to system preference
  const systemTheme = prefersDarkScheme.matches ? "dark" : "light";
  let initialTheme = systemTheme;
  try {
    const stored = localStorage.getItem("contrastToolTheme");
    if (stored === "light" || stored === "dark") {
      initialTheme = stored;
      userHasThemeOverride = true;
    }
  } catch {}
  applyTheme(initialTheme);

  // ---------- Helpers ----------

  function clamp(value, min, max) {
    return Math.min(max, Math.max(min, value));
  }

  // Compute a nearby focus color meeting 3:1 with foreground and reasonable contrast with background
  function computeClosestFocus(fgRgb, bgRgb) {
    const fgHsl = rgbToHsl(fgRgb);
    const bgHsl = rgbToHsl(bgRgb);
    const baseCandidates = [ {h: fgHsl.h, s: fgHsl.s}, {h: bgHsl.h, s: bgHsl.s} ];
    const results = [];

    for (const base of baseCandidates) {
      for (let d = 0; d <= 100; d += 2) {
        const l = clamp(fgHsl.l + d / 100, 0.02, 0.98);
        const candRgb = hslToRgb({ h: base.h, s: base.s, l });
        const ratioToFg = wcagContrast(candRgb, fgRgb);
        const ratioToBg = wcagContrast(candRgb, bgRgb);
        if (ratioToFg >= 3.0 && (ratioToBg >= 3.0 || ratioToBg >= 2.5)) {
          results.push({ hex: rgbToHex(candRgb), rgb: candRgb, delta: Math.abs(l - fgHsl.l) });
          break;
        }
      }
      for (let d = 2; d <= 100; d += 2) {
        const l = clamp(fgHsl.l - d / 100, 0.02, 0.98);
        const candRgb = hslToRgb({ h: base.h, s: base.s, l });
        const ratioToFg = wcagContrast(candRgb, fgRgb);
        const ratioToBg = wcagContrast(candRgb, bgRgb);
        if (ratioToFg >= 3.0 && (ratioToBg >= 3.0 || ratioToBg >= 2.5)) {
          results.push({ hex: rgbToHex(candRgb), rgb: candRgb, delta: Math.abs(l - fgHsl.l) });
          break;
        }
      }
    }

    if (!results.length) return null;
    results.sort((a, b) => a.delta - b.delta);
    return results[0];
  }

  function toHex(n) {
    return n.toString(16).padStart(2, "0").toUpperCase();
  }

  function rgbToHex({ r, g, b }) {
    return "#" + toHex(r) + toHex(g) + toHex(b);
  }

  function parseCssColor(colorString) {
    parserElement.style.color = "";
    parserElement.style.color = colorString.trim();

    const computed = getComputedStyle(parserElement).color;
    const nums = computed.match(/[\d.]+/g);
    if (!nums || nums.length < 3) {
      throw new Error(`Could not parse color: "${colorString}"`);
    }
    const r = clamp(Math.round(Number(nums[0])), 0, 255);
    const g = clamp(Math.round(Number(nums[1])), 0, 255);
    const b = clamp(Math.round(Number(nums[2])), 0, 255);
    return { r, g, b, hex: rgbToHex({ r, g, b }) };
  }

  function relativeLuminance({ r, g, b }) {
    function channel(c) {
      const cs = c / 255;
      return cs <= 0.04045 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
    }
    const R = channel(r);
    const G = channel(g);
    const B = channel(b);
    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
  }

  function wcagContrast(c1, c2) {
    const L1 = relativeLuminance(c1);
    const L2 = relativeLuminance(c2);
    const lighter = Math.max(L1, L2);
    const darker = Math.min(L1, L2);
    return (lighter + 0.05) / (darker + 0.05);
  }

  function apcaLc(textRgb, backgroundRgb) {
    if (!APCAcontrast || !APCA_sRGBtoY) return NaN;
    try {
      const tY = APCA_sRGBtoY([textRgb.r, textRgb.g, textRgb.b]);
      const bY = APCA_sRGBtoY([backgroundRgb.r, backgroundRgb.g, backgroundRgb.b]);
      return APCAcontrast(tY, bY);
    } catch (e) {
      return NaN;
    }
  }

  function rgbToHsl({ r, g, b }) {
    const R = r / 255;
    const G = g / 255;
    const B = b / 255;
    const max = Math.max(R, G, B);
    const min = Math.min(R, G, B);
    let h, s;
    const l = (max + min) / 2;

    if (max === min) {
      h = 0;
      s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case R:
          h = (G - B) / d + (G < B ? 6 : 0);
          break;
        case G:
          h = (B - R) / d + 2;
          break;
        default:
          h = (R - G) / d + 4;
          break;
      }
      h /= 6;
    }

    return { h, s, l };
  }

  function hue2rgb(p, q, t) {
    if (t < 0) t += 1;
    if (t > 1) t -= 1;
    if (t < 1 / 6) return p + (q - p) * 6 * t;
    if (t < 1 / 2) return q;
    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
    return p;
  }

  function hslToRgb({ h, s, l }) {
    let r, g, b;

    if (s === 0) {
      r = g = b = l;
    } else {
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1 / 3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1 / 3);
    }

    return {
      r: Math.round(r * 255),
      g: Math.round(g * 255),
      b: Math.round(b * 255),
    };
  }

  function foregroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l) {
    const wcagDiff = Math.abs(ratio - wcagThreshold);
    let apcaDiff = 0;
    if (!Number.isNaN(lc)) {
      apcaDiff = Math.abs(Math.abs(lc) - apcaThreshold);
    }
    const deltaL = Math.abs(l - baseL);
    return wcagDiff + apcaDiff + deltaL * 0.5;
  }

  function backgroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l, deltaH, deltaS) {
    const wcagDiff = Math.abs(ratio - wcagThreshold);
    let apcaDiff = 0;
    if (!Number.isNaN(lc)) {
      apcaDiff = Math.abs(Math.abs(lc) - apcaThreshold);
    }
    const deltaL = Math.abs(l - baseL);
    return wcagDiff + apcaDiff + deltaL * 0.5 + deltaH + deltaS;
  }

  function focusCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l) {
    const wcagDiff = Math.abs(ratio - wcagThreshold);
    let apcaDiff = 0;
    if (!Number.isNaN(lc)) {
      apcaDiff = Math.abs(Math.abs(lc) - apcaThreshold);
    }
    const deltaL = Math.abs(l - baseL);
    return wcagDiff + apcaDiff + deltaL * 0.5;
  }

  /**
   * Foreground palette: keep hue/saturation, vary lightness.
   * candidate is treated as TEXT against fixed background.
   * Only returns candidates that pass BOTH WCAG and APCA thresholds.
   */
  function findForegroundPalette(baseTextRgb, bgRgb, wcagThreshold, apcaThreshold, count) {
    const baseHsl = rgbToHsl(baseTextRgb);
    const { h, s, l: baseL } = baseHsl;

    const candidates = [];

    // Try keeping hue/sat constant, varying lightness
    for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
      const candidateRgb = hslToRgb({ h, s, l });

      const ratio = wcagContrast(candidateRgb, bgRgb);
      const lc = apcaLc(candidateRgb, bgRgb); // text = candidate
      const wcagPass = ratio >= wcagThreshold;
      const apcaPass = !Number.isNaN(lc) && Math.abs(lc) >= apcaThreshold;

      if (!wcagPass || !apcaPass) continue;

      const score = foregroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l);

      candidates.push({
        rgb: candidateRgb,
        hex: rgbToHex(candidateRgb),
        ratio,
        lc,
        score,
      });
    }

    // If we don't have enough candidates, try modest saturation adjustments
    if (candidates.length < count) {
      for (const sAdj of [0.9, 0.8, 1.1]) {
        const adjustedS = clamp(s * sAdj, 0, 1);
        for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
          const candidateRgb = hslToRgb({ h, s: adjustedS, l });
          const ratio = wcagContrast(candidateRgb, bgRgb);
          const lc = apcaLc(candidateRgb, bgRgb);
          const wcagPass = ratio >= wcagThreshold;
          const apcaPass = !Number.isNaN(lc) && Math.abs(lc) >= apcaThreshold;

          if (!wcagPass || !apcaPass) continue;

          const score = foregroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l);
          candidates.push({ rgb: candidateRgb, hex: rgbToHex(candidateRgb), ratio, lc, score });
        }
      }
    }

    if (!candidates.length) return [];

    candidates.sort((a, b) => a.score - b.score);
    return candidates.slice(0, count);
  }

  /**
   * Background palette: try multiple passes to stay close to base hue/sat,
   * but relax saturation and hue slightly if needed. Score prefers
   * combinations that are near thresholds for both WCAG and APCA.
   * Strict mode: only WCAG+APCA combinations are accepted.
   */
  function findBackgroundPalette(baseBgRgb, fgRgb, wcagThreshold, apcaThreshold, count) {
    const baseHsl = rgbToHsl(baseBgRgb);
    const { h: baseH, s: baseS, l: baseL } = baseHsl;

    const candidates = [];

    function tryPass(hueOffsets, satScales) {
      for (const hOff of hueOffsets) {
        const h = ((baseH + hOff) % 1 + 1) % 1;
        for (const sScale of satScales) {
          const s = clamp(baseS * sScale, 0, 1);
          
          for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
            const candidateRgb = hslToRgb({ h, s, l });

            const ratio = wcagContrast(fgRgb, candidateRgb);
            const lc = apcaLc(fgRgb, candidateRgb); // text = fg, bg = candidate
            const wcagPass = ratio >= wcagThreshold;
            const apcaPass = !Number.isNaN(lc) && Math.abs(lc) >= apcaThreshold;
            
            if (!wcagPass || !apcaPass) continue;

            const deltaH = Math.abs(hOff);
            const deltaS = Math.abs(s - baseS);
            const score = backgroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l, deltaH, deltaS);

            candidates.push({
              rgb: candidateRgb,
              hex: rgbToHex(candidateRgb),
              ratio,
              lc,
              score,
            });

            if (candidates.length >= count * 10) return; // Early exit if we have enough
          }
        }
      }
    }

    // Pass 1: Tight search around base color
    tryPass([0], [1, 0.95, 0.9]);

    // Pass 2: Same hue, broader saturation range
    if (candidates.length < count) {
      tryPass([0], [1, 0.9, 0.8, 0.7, 0.6]);
    }

    // Pass 3: Small hue shifts
    if (candidates.length < count) {
      tryPass([0.03, -0.03, 0.06, -0.06, 0.09, -0.09], [1, 0.9, 0.8]);
    }

    // Pass 4: Broader hue exploration
    if (candidates.length < count) {
      tryPass([0.12, -0.12, 0.15, -0.15], [1, 0.9, 0.8, 0.7]);
    }

    // Pass 5: Wide hue exploration with full saturation range
    if (candidates.length < count) {
      tryPass([0.2, -0.2, 0.25, -0.25], [1, 0.8, 0.6, 0.4]);
    }

    // Pass 6: Extreme hue shifts (almost opposite)
    if (candidates.length < count) {
      tryPass([0.35, -0.35, 0.4, -0.4], [1, 0.7, 0.5]);
    }

    // Pass 7: Very broad search across full range if still not enough
    if (candidates.length < count) {
      for (let h = 0; h <= 1; h += 0.1) {
        for (let s of [1, 0.8, 0.6, 0.4]) {
          for (let l = 0.02; l <= 0.98; l += 0.05) {
            const candidateRgb = hslToRgb({ h, s, l });
            const ratio = wcagContrast(fgRgb, candidateRgb);
            const lc = apcaLc(fgRgb, candidateRgb);
            const wcagPass = ratio >= wcagThreshold;
            const apcaPass = !Number.isNaN(lc) && Math.abs(lc) >= apcaThreshold;
            
            if (!wcagPass || !apcaPass) continue;

            const score = backgroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l, Math.abs(h - baseH), Math.abs(s - baseS));
            
            candidates.push({ rgb: candidateRgb, hex: rgbToHex(candidateRgb), ratio, lc, score });
          }
        }
      }
    }

    if (!candidates.length) {
      return [];
    }

    candidates.sort((a, b) => a.score - b.score);

    // Enforce minimum lightness spacing so backgrounds are perceptibly different.
    const picked = [];
    const minDeltaL = 0.08;

    for (const c of candidates) {
      if (picked.length === 0) {
        picked.push(c);
      } else {
        const tooClose = picked.some(p => {
          const dl = Math.abs((rgbToHsl(p.rgb).l) - (rgbToHsl(c.rgb).l));
          return dl < minDeltaL;
        });
        if (!tooClose) picked.push(c);
      }
      if (picked.length >= count) break;
    }

    return picked.slice(0, count);
  }

  /**
   * Third/focus palette: treat candidate as FOCUS color, evaluated against background
   * and extra constraints (e.g., 3:1 vs foreground). Score prefers near-threshold
   * combinations that minimally change lightness.
   * Strict mode: only WCAG+APCA combinations are accepted.
   */
  function findFocusPalette(baseFocusRgb, bgRgb, wcagThreshold, apcaThreshold, count, extraCheck) {
    const baseHsl = rgbToHsl(baseFocusRgb);
    const { h, s, l: baseL } = baseHsl;

    const candidates = [];

    // First try: keep hue/saturation, vary lightness
    for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
      const candidateRgb = hslToRgb({ h, s, l });

      const ratioBg = wcagContrast(candidateRgb, bgRgb);
      const lcBg = apcaLc(candidateRgb, bgRgb);
      const wcagPass = ratioBg >= wcagThreshold;
      const apcaPass = !Number.isNaN(lcBg) && Math.abs(lcBg) >= apcaThreshold;

      if (!wcagPass || !apcaPass) continue;
      if (extraCheck && !extraCheck(candidateRgb)) continue;

      const score = focusCandidateScore(baseL, ratioBg, lcBg, wcagThreshold, apcaThreshold, l);

      candidates.push({
        rgb: candidateRgb,
        hex: rgbToHex(candidateRgb),
        ratio: ratioBg,
        lc: lcBg,
        score,
        l,
      });
    }

    // Second try: if not enough, also try saturation adjustments
    if (candidates.length < count) {
      for (const sAdj of [0.9, 0.8, 1.1]) {
        const adjustedS = clamp(s * sAdj, 0, 1);
        for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
          const candidateRgb = hslToRgb({ h, s: adjustedS, l });
          const ratioBg = wcagContrast(candidateRgb, bgRgb);
          const lcBg = apcaLc(candidateRgb, bgRgb);
          const wcagPass = ratioBg >= wcagThreshold;
          const apcaPass = !Number.isNaN(lcBg) && Math.abs(lcBg) >= apcaThreshold;

          if (!wcagPass || !apcaPass) continue;
          if (extraCheck && !extraCheck(candidateRgb)) continue;

          const score = focusCandidateScore(baseL, ratioBg, lcBg, wcagThreshold, apcaThreshold, l);
          candidates.push({ rgb: candidateRgb, hex: rgbToHex(candidateRgb), ratio: ratioBg, lc: lcBg, score, l });
        }
      }
    }

    if (!candidates.length) return [];

    candidates.sort((a, b) => a.score - b.score);

    // Similar spacing for focus colors so the focus ring options are distinct.
    const picked = [];
    const minDeltaL = 0.08;

    for (const c of candidates) {
      if (picked.length === 0) {
        picked.push(c);
      } else {
        const tooClose = picked.some(p => Math.abs(p.l - c.l) < minDeltaL);
        if (!tooClose) picked.push(c);
      }
      if (picked.length >= count) break;
    }

    return picked.slice(0, count);
  }

  function formatRatio(value) {
    if (!isFinite(value)) return "n/a";
    return value.toFixed(2) + ":1";
  }

  function formatLc(value) {
    if (!isFinite(value)) return "n/a";
    const sign = value > 0 ? "+" : "";
    return sign + value.toFixed(1);
  }

  // label: string, ratio: number, wcagPass: bool, lc: number, apcaPass: bool
  // leftColor/rightColor: optional { display: string, hex: string }
  function addResultRow(label, ratio, wcagPass, lc, apcaPass, leftColor, rightColor) {
    const tr = document.createElement("tr");

    const tdLabel = document.createElement("td");
    if (label instanceof Node) {
      tdLabel.appendChild(label);
    } else {
      tdLabel.textContent = label;
    }
    tdLabel.setAttribute('data-label', 'Pair');

    // color cell shows small swatches and the original CSS string values for quick copy
    const tdColors = document.createElement('td');
    tdColors.className = 'result-colors';
    tdColors.setAttribute('data-label', 'Colors');
    tdColors.className = 'result-colors';
    function makeColorBlock(info, title) {
      const wrap = document.createElement('div');
      wrap.className = 'result-color-wrap';
      if (!info) return wrap;
      const sw = document.createElement('span');
      sw.className = 'result-swatch';
      sw.style.backgroundColor = info.hex || info.display;
      sw.setAttribute('title', (title ? title + ': ' : '') + (info.display || info.hex));
      const txt = document.createElement('code');
      txt.className = 'result-color-text';
      txt.textContent = info.display || info.hex || '';
      wrap.appendChild(sw);
      wrap.appendChild(txt);
      return wrap;
    }
    // left (text) and right (background/focus) stacked
    tdColors.appendChild(makeColorBlock(leftColor, 'Left'));
    tdColors.appendChild(makeColorBlock(rightColor, 'Right'));

    const tdRatio = document.createElement("td");
    tdRatio.textContent = formatRatio(ratio);
    tdRatio.setAttribute('data-label', 'WCAG ratio');

    const tdWcag = document.createElement("td");
    tdWcag.setAttribute('data-label', 'WCAG status');
    const wcagSpan = document.createElement("span");
    wcagSpan.className =
      "status-badge " + (wcagPass ? "status-pass" : "status-fail");
    wcagSpan.textContent = wcagPass ? "Pass" : "Fail";
    tdWcag.appendChild(wcagSpan);

    const tdLc = document.createElement("td");
    tdLc.textContent = formatLc(lc);
    tdLc.setAttribute('data-label', 'APCA Lc');

    const tdApca = document.createElement("td");
    tdApca.setAttribute('data-label', 'APCA status');
    const apcaSpan = document.createElement("span");
    apcaSpan.className =
      "status-badge " + (apcaPass ? "status-pass" : "status-fail");
    apcaSpan.textContent = apcaPass ? "Pass" : "Fail";
    tdApca.appendChild(apcaSpan);

    tr.appendChild(tdLabel);
    tr.appendChild(tdColors);
    tr.appendChild(tdRatio);
    tr.appendChild(tdWcag);
    tr.appendChild(tdLc);
    tr.appendChild(tdApca);

    resultsBody.appendChild(tr);
  }


  function applyPreviewColors(container, heading, link, button, fgHex, bgHex) {
    if (!container) return;

    container.style.color = fgHex;
    container.style.backgroundColor = bgHex;
    try {
      container.style.setProperty('--preview-fg', fgHex);
      container.style.setProperty('--preview-bg', bgHex);
    } catch (e) {}

    if (heading) heading.style.color = fgHex;
    if (link) {
      link.style.color = fgHex;
      link.style.textDecorationColor = fgHex;
    }
    if (button) {
      button.style.backgroundColor = fgHex;
      button.style.color = bgHex;
      button.style.borderColor = fgHex;
      button.style.boxShadow = "none";
    }
  }

  // --- Local persistence (localStorage fallback) ---
  const PALETTE_KEY = 'contrastplus.savedPalette';

  function loadSavedPalette() {
    try {
      const raw = localStorage.getItem(PALETTE_KEY);
      if (!raw) return [];
      const parsed = JSON.parse(raw);
      if (Array.isArray(parsed)) return parsed;
    } catch (e) {
      console.warn('Failed to read saved palette', e);
    }
    return [];
  }

  function savePaletteToStorage(paletteArray) {
    try {
      localStorage.setItem(PALETTE_KEY, JSON.stringify(paletteArray));
    } catch (e) {
      console.warn('Failed to save palette', e);
    }
  }

  function addSavedColor(value) {
    const palette = loadSavedPalette();
    palette.unshift({ id: crypto.randomUUID(), value });
    savePaletteToStorage(palette.slice(0, 50)); // keep last 50
    renderSavedPalette();
  }

  function deleteSavedColor(id) {
    let palette = loadSavedPalette();
    palette = palette.filter(p => p.id !== id);
    savePaletteToStorage(palette);
    renderSavedPalette();
  }

  function renderSavedPalette() {
    const container = document.getElementById('paletteContainer');
    const count = document.getElementById('paletteCount');
    container.innerHTML = '';
    const palette = loadSavedPalette();
    count.textContent = String(palette.length);
    if (!palette.length) {
      const p = document.createElement('p');
      p.id = 'palettePlaceholder';
      p.className = 'small italic';
      p.textContent = 'No saved colors yet. Use the Save buttons near color inputs.';
      container.appendChild(p);
      return;
    }

    palette.forEach((item, idx) => {
      const row = document.createElement('div');
      row.className = 'palette-item';
      // (no inline icon in the saved-palette list; preview icons render in the Preview section)

      const sw = document.createElement('div');
      sw.className = 'palette-swatch';
      sw.style.width = '28px';
      sw.style.height = '28px';
      sw.style.borderRadius = '6px';
      sw.style.backgroundColor = item.value;
      sw.title = item.value;

      const meta = document.createElement('div');
      meta.className = 'palette-meta';
      const val = document.createElement('div');
      val.className = 'palette-value';
      val.textContent = item.value;

      const actions = document.createElement('div');
      actions.className = 'palette-actions';
      const loadBtn = document.createElement('button');
      loadBtn.type = 'button';
      loadBtn.textContent = 'Load as FG';
      loadBtn.addEventListener('click', () => { fgText.value = item.value; fgPicker.value = parseCssColor(item.value).hex; updateAll(); });
      const loadBgBtn = document.createElement('button');
      loadBgBtn.type = 'button';
      loadBgBtn.textContent = 'Load as BG';
      loadBgBtn.addEventListener('click', () => { bgText.value = item.value; bgPicker.value = parseCssColor(item.value).hex; updateAll(); });
      const loadFocusBtn = document.createElement('button');
      loadFocusBtn.type = 'button';
      loadFocusBtn.textContent = 'Load as focus';
      loadFocusBtn.addEventListener('click', () => { thirdText.value = item.value; thirdPicker.value = parseCssColor(item.value).hex; enableThird.checked = true; thirdContainer.classList.remove('hidden'); updateAll(); });
      const delBtn = document.createElement('button');
      delBtn.type = 'button';
      delBtn.textContent = 'Delete';
      delBtn.addEventListener('click', () => { if (item.id) { deleteSavedColor(item.id); } renderSavedPalette(); try { updateBarChart([fgText.value || fgPicker.value, bgText.value || bgPicker.value, (document.getElementById('enableThird') && document.getElementById('enableThird').checked) ? (thirdText.value || thirdPicker.value) : null]); } catch(e){} });

      actions.appendChild(loadBtn);
      actions.appendChild(loadBgBtn);
      actions.appendChild(loadFocusBtn);
      actions.appendChild(delBtn);

      meta.appendChild(val);

      row.appendChild(sw);
      row.appendChild(meta);
      row.appendChild(actions);
      container.appendChild(row);
    });

    // Render preview icons into both preview panels using sequential selection rules
    try {
      const baseIcons = document.getElementById('previewSavedIconsBase');
      const thirdIcons = document.getElementById('previewSavedIconsThird');
      if (baseIcons) baseIcons.innerHTML = '';
      if (thirdIcons) thirdIcons.innerHTML = '';

      // Helper: build a sequential list of colors from saved palette
      const buildSequentialList = (savedArr, bgHex, focusHex, minCount = 4) => {
        const seen = new Set();
        const out = [];
        const normalizedBg = bgHex ? String(bgHex).toLowerCase() : null;

        // include focus first for third preview if provided
        if (focusHex) {
          const fh = String(focusHex);
          if (fh && fh.toLowerCase() !== normalizedBg) {
            out.push(fh);
            seen.add(fh.toLowerCase());
          }
        }

        // then include saved colors in their stored order, skipping any equal to BG
        for (const s of savedArr) {
          const val = String(s.value || '');
          if (!val) continue;
          const low = val.toLowerCase();
          if (normalizedBg && low === normalizedBg) continue;
          if (seen.has(low)) continue;
          out.push(val);
          seen.add(low);
        }

        // if fewer than minCount, add deterministic random-ish fillers (not random order)
        let fillerIndex = 0;
        while (out.length < minCount) {
          // alternate dark and light to maintain variety
          const hex = (fillerIndex % 2 === 0) ? randomDarkHex() : randomLightHex();
          fillerIndex += 1;
          const low = hex.toLowerCase();
          if (normalizedBg && low === normalizedBg) continue;
          if (seen.has(low)) continue;
          out.push(hex);
          seen.add(low);
        }

        return out;
      };

      // current bg and focus values from inputs (best-effort)
      let bgHex = null;
      let focusHex = null;
      try { bgHex = document.getElementById('bgPicker').value; } catch (e) {}
      try { if (document.getElementById('enableThird') && document.getElementById('enableThird').checked) focusHex = document.getElementById('thirdPicker').value; } catch (e) {}

      const seqBase = buildSequentialList(palette, bgHex, null, 4);
      const seqThird = buildSequentialList(palette, bgHex, focusHex, 4);

      const makeBig = (color, containerEl) => {
        const link = document.createElement('a');
        link.href = '#';
        link.className = 'saved-icon-link svg-link';
        link.title = color + ' — click: FG, shift+click: BG, alt+click: Focus';
        link.addEventListener('click', (e) => {
          e.preventDefault();
          const val = color;
          try { updateSVG(val); } catch (err) {}
          if (e.shiftKey) {
            bgText.value = val; bgPicker.value = parseCssColor(val).hex; updateAll();
          } else if (e.altKey) {
            thirdText.value = val; thirdPicker.value = parseCssColor(val).hex; enableThird.checked = true; thirdContainer.classList.remove('hidden'); updateAll();
          } else {
            fgText.value = val; fgPicker.value = parseCssColor(val).hex; updateAll();
          }
        });
        const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svgEl.setAttribute('viewBox', '0 0 24 24');
        svgEl.setAttribute('width', '56');
        svgEl.setAttribute('height', '56');
        svgEl.setAttribute('aria-hidden', 'true');
        const pick = SVG_PATHS[Math.abs(hashCode(color)) % SVG_PATHS.length] || SVG_PATHS[0];
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pick.path);
        path.setAttribute('fill', color);
        svgEl.appendChild(path);
        link.appendChild(svgEl);
        containerEl.appendChild(link);
      };

      if (baseIcons) seqBase.forEach(c => makeBig(c, baseIcons));
      if (thirdIcons) seqThird.forEach(c => makeBig(c, thirdIcons));
    } catch (e) {
      // non-fatal
    }
    // ensure bar chart reflects the current colors after re-rendering palette
    try { updateBarChart([fgText.value || fgPicker.value, bgText.value || bgPicker.value, (document.getElementById('enableThird') && document.getElementById('enableThird').checked) ? (thirdText.value || thirdPicker.value) : null]); } catch (e) {}
  }

  // --- Harmony generator (no LLM) ---
  function generateHarmony(fgRgb) {
    // Create 5 colors rotating hue and varying lightness
    const hsl = rgbToHsl(fgRgb);
    const baseH = hsl.h;
    const baseS = Math.max(0.25, hsl.s);
    const baseL = hsl.l;
    const palette = [];
    const offsets = [0, 0.08, -0.08, 0.16, -0.16];
    const lightness = [baseL, clamp(baseL + 0.12, 0.05, 0.95), clamp(baseL - 0.12, 0.05, 0.95), clamp(baseL + 0.22, 0.05, 0.95), clamp(baseL - 0.22, 0.05, 0.95)];
    for (let i = 0; i < 5; i++) {
      const h = ((baseH + offsets[i]) % 1 + 1) % 1;
      const s = clamp(baseS * (1 - i * 0.05), 0.15, 1);
      const l = lightness[i];
      const rgb = hslToRgb({ h, s, l });
      palette.push({ hex: rgbToHex(rgb), name: `Harmonized ${i + 1}` });
    }
    return palette;
  }

  function renderHarmonyOutput(palette) {
    const out = document.getElementById('harmonyOutput');
    out.innerHTML = '';
    palette.forEach(c => {
      const card = document.createElement('div');
      card.className = 'harmony-swatch';
      const box = document.createElement('div');
      box.className = 'harmony-box';
      box.style.backgroundColor = c.hex;
      box.title = `${c.name} — ${c.hex}`;
      // clicking the swatch loads to foreground; small controls allow load to BG
      box.addEventListener('click', () => {
        fgText.value = c.hex;
        fgPicker.value = c.hex;
        updateAll();
      });
      const label = document.createElement('div');
      label.className = 'harmony-label';
      label.textContent = `${c.name} · ${c.hex}`;
      const controls = document.createElement('div');
      controls.className = 'harmony-controls-inline';
      const loadFg = document.createElement('button');
      loadFg.type = 'button';
      loadFg.textContent = 'Use FG';
      loadFg.addEventListener('click', () => {
        fgText.value = c.hex;
        fgPicker.value = c.hex;
        updateAll();
      });
      const loadBg = document.createElement('button');
      loadBg.type = 'button';
      loadBg.textContent = 'Use BG';
      loadBg.addEventListener('click', () => {
        bgText.value = c.hex;
        bgPicker.value = c.hex;
        updateAll();
      });
      controls.appendChild(loadFg);
      controls.appendChild(loadBg);
      card.appendChild(box);
      card.appendChild(label);
      card.appendChild(controls);
      out.appendChild(card);
    });
  }

  // --- Tonal scale generator ---
  // Lightness stops inspired by Tailwind / enterprise design systems
  const TONAL_STOPS = [
    { name: '50',  l: 0.95 },
    { name: '100', l: 0.90 },
    { name: '200', l: 0.80 },
    { name: '300', l: 0.70 },
    { name: '400', l: 0.60 },
    { name: '500', l: 0.50 },
    { name: '600', l: 0.40 },
    { name: '700', l: 0.30 },
    { name: '800', l: 0.20 },
    { name: '900', l: 0.10 },
    { name: '950', l: 0.05 },
  ];

  function generateTonalScale(fgRgb) {
    const hsl = rgbToHsl(fgRgb);
    return TONAL_STOPS.map(stop => {
      // Clamp saturation to at least 10% so the scale retains visible hue (avoids near-gray tones)
      const s = clamp(hsl.s, 0.10, 1);
      const rgb = hslToRgb({ h: hsl.h, s, l: stop.l });
      return { name: stop.name, hex: rgbToHex(rgb), rgb };
    });
  }

  /**
   * Blend a tonal hex color with a tint hex using CSS color-mix().
   * Returns a CSS string. Falls back to the original hex if color-mix not supported.
   */
  function applyCohesiveTint(baseHex, tintHex, intensity) {
    if (!intensity || intensity <= 0) return baseHex;
    const tintPct = Math.round(clamp(intensity, 0, 100));
    const basePct = 100 - tintPct;
    return `color-mix(in oklch, ${tintHex} ${tintPct}%, ${baseHex} ${basePct}%)`;
  }

  /**
   * Resolve a CSS color string to an RGB object, using the existing parseCssColor when possible.
   * For color-mix() strings the browser may return oklch from getComputedStyle; the canvas
   * approach reliably converts any CSS color to sRGB bytes.
   */
  function resolveColorString(cssColor) {
    // Fast path: parseCssColor handles hex, rgb, hsl, named colors
    if (!cssColor.startsWith('color-mix')) {
      try { return parseCssColor(cssColor); } catch (e) { /* fall through */ }
    }
    // Canvas approach: draw a 1×1 pixel and read back the sRGB bytes.
    // This works for color-mix(), oklch(), and any CSS color the browser supports.
    try {
      const canvas = document.createElement('canvas');
      canvas.width = 1;
      canvas.height = 1;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = cssColor;
      ctx.fillRect(0, 0, 1, 1);
      const d = ctx.getImageData(0, 0, 1, 1).data;
      const r = d[0], g = d[1], b = d[2];
      return { r, g, b, hex: rgbToHex({ r, g, b }) };
    } catch (e) { /* fall through */ }
    // Last resort: extract the base hex from `color-mix(in ..., <tint> X%, <base> Y%)` as a fallback
    // when canvas is unavailable (e.g. inside a worker or strict sandbox).
    const fallbackMatch = cssColor.match(/,\s*(#[0-9a-fA-F]{3,8})\s*\d*%\s*\)$/);
    if (fallbackMatch) return parseCssColor(fallbackMatch[1]);
    return parseCssColor(cssColor);
  }

  let _lastTonalScale = null; // cache for matrix refresh

  function renderTonalOutput(scale, bgRgb, tintHex, tintIntensity) {
    const out = document.getElementById('tonalOutput');
    if (!out) return;
    out.innerHTML = '';
    _lastTonalScale = scale;

    scale.forEach(c => {
      const displayColor = applyCohesiveTint(c.hex, tintHex, tintIntensity);
      const card = document.createElement('div');
      card.className = 'tonal-swatch';

      const box = document.createElement('div');
      box.className = 'tonal-box';
      box.style.backgroundColor = displayColor;
      box.title = `${c.name} — ${c.hex}`;

      const label = document.createElement('div');
      label.className = 'tonal-label';
      label.textContent = c.name;

      const hex = document.createElement('div');
      hex.className = 'tonal-hex';
      hex.textContent = c.hex;

      const controls = document.createElement('div');
      controls.className = 'tonal-controls-inline';

      const loadFg = document.createElement('button');
      loadFg.type = 'button';
      loadFg.textContent = 'Use FG';
      loadFg.addEventListener('click', () => {
        fgText.value = c.hex;
        fgPicker.value = c.hex;
        updateAll();
      });
      const loadBg = document.createElement('button');
      loadBg.type = 'button';
      loadBg.textContent = 'Use BG';
      loadBg.addEventListener('click', () => {
        bgText.value = c.hex;
        bgPicker.value = c.hex;
        updateAll();
      });
      controls.appendChild(loadFg);
      controls.appendChild(loadBg);

      card.appendChild(box);
      card.appendChild(label);
      card.appendChild(hex);
      card.appendChild(controls);
      out.appendChild(card);
    });

    // Always refresh the matrix after rendering swatches
    renderContrastMatrix(scale, bgRgb, tintHex, tintIntensity);
  }

  function renderContrastMatrix(scale, bgRgb, tintHex, tintIntensity) {
    const wrap = document.getElementById('contrast-matrix-output');
    if (!wrap) return;
    wrap.innerHTML = '';

    if (!scale || !scale.length || !bgRgb) {
      wrap.textContent = 'Generate the tonal scale first.';
      return;
    }

    const wcagThresholdEl = document.getElementById('wcagThreshold');
    const apcaThresholdEl = document.getElementById('apcaThreshold');
    const wcagThr = Number(wcagThresholdEl && wcagThresholdEl.value) || 4.5;
    const apcaThr = Number(apcaThresholdEl && apcaThresholdEl.value) || 60;

    const table = document.createElement('table');
    table.className = 'contrast-matrix-table';
    table.setAttribute('aria-label', 'Accessible contrast matrix: tonal colors vs background');

    const thead = document.createElement('thead');
    const headRow = document.createElement('tr');
    ['Stop', 'Color', 'WCAG Ratio', 'WCAG', 'APCA Lc', 'APCA', 'Use'].forEach(text => {
      const th = document.createElement('th');
      th.scope = 'col';
      th.textContent = text;
      headRow.appendChild(th);
    });
    thead.appendChild(headRow);
    table.appendChild(thead);

    const tbody = document.createElement('tbody');

    scale.forEach(c => {
      const displayColor = applyCohesiveTint(c.hex, tintHex, tintIntensity);
      let textRgb;
      try {
        textRgb = resolveColorString(displayColor);
      } catch (e) {
        textRgb = c.rgb;
      }

      const ratio = wcagContrast(textRgb, bgRgb);
      const lc = apcaLc(textRgb, bgRgb);
      const wcagPass = ratio >= wcagThr;
      const apcaPass = !Number.isNaN(lc) && Math.abs(lc) >= apcaThr;

      const row = document.createElement('tr');

      // Stop name
      const stopTd = document.createElement('td');
      stopTd.textContent = c.name;
      row.appendChild(stopTd);

      // Color swatch + hex
      const swatchTd = document.createElement('td');
      const sw = document.createElement('span');
      sw.className = 'matrix-swatch';
      sw.style.backgroundColor = displayColor;
      sw.setAttribute('aria-hidden', 'true');
      const hexSpan = document.createElement('span');
      hexSpan.className = 'matrix-hex';
      hexSpan.textContent = c.hex;
      swatchTd.appendChild(sw);
      swatchTd.appendChild(hexSpan);
      row.appendChild(swatchTd);

      // WCAG ratio value
      const wcagRatioTd = document.createElement('td');
      wcagRatioTd.textContent = ratio.toFixed(2) + ':1';
      row.appendChild(wcagRatioTd);

      // WCAG pass/fail
      const wcagTd = document.createElement('td');
      wcagTd.textContent = wcagPass ? 'Pass' : 'Fail';
      wcagTd.className = wcagPass ? 'matrix-pass' : 'matrix-fail';
      row.appendChild(wcagTd);

      // APCA Lc value
      const apcaLcTd = document.createElement('td');
      apcaLcTd.textContent = Number.isNaN(lc) ? 'n/a' : (Math.round(lc * 10) / 10).toString();
      row.appendChild(apcaLcTd);

      // APCA pass/fail
      const apcaTd = document.createElement('td');
      apcaTd.textContent = Number.isNaN(lc) ? 'n/a' : (apcaPass ? 'Pass' : 'Fail');
      apcaTd.className = Number.isNaN(lc) ? '' : (apcaPass ? 'matrix-pass' : 'matrix-fail');
      row.appendChild(apcaTd);

      // Use buttons
      const useTd = document.createElement('td');
      const useFg = document.createElement('button');
      useFg.type = 'button';
      useFg.className = 'matrix-use-btn';
      useFg.textContent = 'FG';
      useFg.setAttribute('aria-label', `Use ${c.hex} as foreground`);
      useFg.addEventListener('click', () => {
        fgText.value = c.hex;
        fgPicker.value = c.hex;
        updateAll();
      });
      const useBg = document.createElement('button');
      useBg.type = 'button';
      useBg.className = 'matrix-use-btn';
      useBg.textContent = 'BG';
      useBg.setAttribute('aria-label', `Use ${c.hex} as background`);
      useBg.addEventListener('click', () => {
        bgText.value = c.hex;
        bgPicker.value = c.hex;
        updateAll();
      });
      useTd.appendChild(useFg);
      useTd.appendChild(useBg);
      row.appendChild(useTd);

      tbody.appendChild(row);
    });

    table.appendChild(tbody);
    wrap.appendChild(table);

    // Summary counts
    const passWcag = scale.filter(c => {
      try {
        const rgb = resolveColorString(applyCohesiveTint(c.hex, tintHex, tintIntensity));
        return wcagContrast(rgb, bgRgb) >= wcagThr;
      } catch (e) { return false; }
    }).length;
    const passApca = scale.filter(c => {
      try {
        const rgb = resolveColorString(applyCohesiveTint(c.hex, tintHex, tintIntensity));
        const lc = apcaLc(rgb, bgRgb);
        return !Number.isNaN(lc) && Math.abs(lc) >= apcaThr;
      } catch (e) { return false; }
    }).length;

    const summary = document.createElement('p');
    summary.className = 'small matrix-summary';
    summary.textContent = `${passWcag} of ${scale.length} stops pass WCAG ${wcagThr}:1 and ${passApca} of ${scale.length} pass APCA |Lc| \u2265 ${apcaThr} vs current background.`;
    wrap.appendChild(summary);
  }

  // --- Small dynamic visuals: bar chart + random SVG ---
  function updateBarChart(colors) {
    // Build entries once and render into both containers using sequential saved colors
    const saved = loadSavedPalette();
    const fgHex = (colors && colors[0]) || null;
    const bgHex = (colors && colors[1]) || null;
    const focusHex = (colors && colors[2]) || null;
    const entries = [];

    if (fgHex) entries.push({ label: 'Foreground', color: fgHex });
    if (focusHex) entries.push({ label: 'Focus', color: focusHex });

    // Helper to normalize hex/string
    const norm = (v) => (v ? String(v).toLowerCase() : '');

    // Add saved colors sequentially, skipping any equal to BG and duplicates
    const normalizedBg = norm(bgHex);
    const added = new Set(entries.map(e => norm(e.color)));

    for (const s of saved) {
      const val = String(s.value || '');
      const low = norm(val);
      if (!val) continue;
      if (normalizedBg && low === normalizedBg) continue; // never include BG color
      if (added.has(low)) continue;
      entries.push({ label: s.label || 'Saved', color: val });
      added.add(low);
    }

    // If fewer than 4 entries, add deterministic filler colors (dark/light alternation)
    let fillerIdx = 0;
    while (entries.length < 4) {
      const hex = (fillerIdx % 2 === 0) ? randomDarkHex() : randomLightHex();
      fillerIdx += 1;
      const low = norm(hex);
      if (normalizedBg && low === normalizedBg) continue;
      if (added.has(low)) continue;
      entries.push({ label: 'Generated', color: hex });
      added.add(low);
    }

    function renderBars(container, highlightFocus) {
      if (!container) return;
      container.innerHTML = '';
      // deterministic heights based on index so both charts align
      const baseCount = entries.length || 1;
      entries.forEach((entry, i) => {
        // produce evenly spaced heights between 48% and 92%
        const min = 48, max = 92;
        const value = Math.round(min + ((max - min) * (i / Math.max(1, baseCount - 1))));
        const bar = document.createElement('div');
        bar.className = 'bar-chart-bar';
        // If the container is aria-hidden, ensure the bar is not keyboard-focusable.
        const containerHidden = container && container.getAttribute && container.getAttribute('aria-hidden') === 'true';
        bar.tabIndex = containerHidden ? -1 : 0;
        bar.setAttribute('role', 'img');
        // determine display color; if this is the focus entry and a focus color was passed, use it
        const isFocusEntry = entry.label && String(entry.label).toLowerCase().includes('focus');
        const displayColor = (isFocusEntry && focusHex) ? focusHex : entry.color;
        bar.dataset.color = displayColor;
        bar.dataset.label = entry.label;
        bar.style.height = `${value}%`;
        bar.style.backgroundColor = displayColor;

        const pct = document.createElement('div');
        pct.className = 'bar-chart-label';
        // show only the resolved color value (hex or css) as requested
        pct.textContent = displayColor;
        // expose the color value as the accessible label for copy/automation
        bar.setAttribute('aria-label', `${displayColor}`);
        bar.appendChild(pct);     

        // add hidden code box to show on hover/focus
        const code = document.createElement('div');
        code.className = 'bar-code';
        const codeId = `bar-code-${i}-${Math.abs(hashCode(entry.color))}`;
        code.id = codeId;
        code.textContent = displayColor;
        bar.appendChild(code);
        bar.setAttribute('aria-describedby', codeId);

        bar.addEventListener('mouseenter', () => { bar.classList.add('bar-hover'); bar.title = displayColor; });
        bar.addEventListener('mouseleave', () => bar.classList.remove('bar-hover'));
        bar.addEventListener('focus', () => bar.classList.add('bar-hover'));
        bar.addEventListener('blur', () => bar.classList.remove('bar-hover'));

        bar.addEventListener('click', (e) => {
          if (e.shiftKey) {
            bgText.value = entry.color; bgPicker.value = parseCssColor(entry.color).hex;
          } else if (e.altKey) {
            thirdText.value = entry.color; thirdPicker.value = parseCssColor(entry.color).hex; enableThird.checked = true; document.getElementById('thirdContainer').classList.remove('hidden');
          } else {
            fgText.value = entry.color; fgPicker.value = parseCssColor(entry.color).hex;
          }
          updateAll();
        });

        if (highlightFocus && entry.label.toLowerCase().includes('focus')) {
          bar.classList.add('bar-focus-highlight');
        }

        container.appendChild(bar);
      });
    }

    renderBars(document.getElementById('barChartContainer'), false);
    renderBars(document.getElementById('barChartContainerThird'), true);
  }

  const SVG_PATHS = [
    { id: 'sun', name: 'Sun', path: 'M12 2a1 1 0 011 1v2a1 1 0 11-2 0V3a1 1 0 011-1zm0 17a1 1 0 011 1v2a1 1 0 11-2 0v-2a1 1 0 011-1zm6.36-12.72a1 1 0 01.707-.293h.001a1 1 0 01.707 1.707l-1.414 1.414a1 1 0 01-1.414-1.414l1.414-1.414zM4.93 19.071a1 1 0 01-.707.293h-.001a1 1 0 01-.707-1.707l1.414-1.414a1 1 0 011.414 1.414l-1.414 1.414zM22 12a1 1 0 01-1 1h-2a1 1 0 110-2h2a1 1 0 011 1zm-19 0a1 1 0 011-1h2a1 1 0 110 2H3a1 1 0 01-1-1zm16.485-6.636a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 011.414-1.414l1.414 1.414a1 1 0 010 1.414zM4.93 4.93a1 1 0 011.414 0l1.414 1.414a1 1 0 01-1.414 1.414L4.93 6.344a1 1 0 010-1.414zM12 15a3 3 0 100-6 3 3 0 000 6z' },
    { id: 'star', name: 'Star', path: 'M12 2l2.4 7.2h7.6l-6.1 4.5 2.3 7.2L12 17.5l-6.2 4.4 2.3-7.2-6.1-4.5h7.6z' },
    { id: 'heart', name: 'Heart', path: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' },
    { id: 'plus', name: 'Plus', path: 'M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z' },
    { id: 'circle', name: 'Circle', path: 'M12 2a10 10 0 100 20 10 10 0 000-20z' },
    { id: 'triangle', name: 'Triangle', path: 'M12 4l8 14H4z' },
    { id: 'w3c', name: 'W3C', path: 'M3 3h18v3H3z M3 8h18v13H3z' },
    { id: 'access', name: 'Accessibility', path: 'M12 2a3 3 0 100 6 3 3 0 000-6zm-1 9h2l2 7h-2l-1-4-1 4H9l2-7z' }
  ];

  function updateSVG(color) {
    const container = document.getElementById('svgContainer');
    if (!container) return;
    container.innerHTML = '';

    const iconFiles = ['heart.svg','plus.svg','circle.svg','triangle.svg','w3c.svg','accessibility.svg'];
    const pickFile = iconFiles[Math.floor(Math.random() * iconFiles.length)];
    const url = `icons/${pickFile}`;

    // Try to fetch and inline the SVG (so we can set fill). If that fails, fallback to inline path.
    fetch(url).then(r => {
      if (!r.ok) throw new Error('fetch failed');
      return r.text();
    }).then(text => {
      // parse SVG text and inject color
      const parser = new DOMParser();
      const doc = parser.parseFromString(text, 'image/svg+xml');
      const svg = doc.querySelector('svg');
      if (!svg) throw new Error('invalid svg');
      // remove width/height so it scales
      svg.removeAttribute('width');
      svg.removeAttribute('height');
      // set viewBox if missing
      if (!svg.getAttribute('viewBox')) svg.setAttribute('viewBox', '0 0 24 24');
      // set fill on paths/shape elements
      Array.from(svg.querySelectorAll('path, circle, rect, polygon')).forEach(el => el.setAttribute('fill', color));
      svg.setAttribute('width', '100%');
      svg.setAttribute('height', '100%');
      svg.setAttribute('role', 'img');
      svg.setAttribute('aria-label', pickFile.replace('.svg',''));
      container.appendChild(document.importNode(svg, true));
      container.title = pickFile.replace('.svg','') + ' — ' + color;
    }).catch(() => {
      const pick = SVG_PATHS[Math.floor(Math.random() * SVG_PATHS.length)];
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('viewBox', '0 0 24 24');
      svg.setAttribute('width', '100%');
      svg.setAttribute('height', '100%');
      const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      p.setAttribute('d', pick.path);
      p.setAttribute('fill', color);
      svg.appendChild(p);
      svg.setAttribute('role', 'img');
      svg.setAttribute('aria-label', pick.name ? pick.name + ' icon' : 'icon');
      container.appendChild(svg);
      container.title = (pick.name ? pick.name + ' — ' : '') + color;
    });

    // clicking svg link applies color as focus (handler uses event delegation via link)
    const link = document.getElementById('svgContainerLink');
    if (link) {
      link.addEventListener('click', (ev) => {
        ev.preventDefault();
        const thirdEnabled = document.getElementById('enableThird');
        if (thirdEnabled && !thirdEnabled.checked) {
          thirdEnabled.checked = true;
          document.getElementById('thirdContainer').classList.remove('hidden');
        }
        const hex = String(color || '#000');
        document.getElementById('thirdText').value = hex;
        document.getElementById('thirdPicker').value = parseCssColor(hex).hex;
        updateAll();
      });
    }
  }
  
  
  function updateSVGThird(color) {
    const container = document.getElementById('svgContainerThird');
    if (!container) return;
    container.innerHTML = '';
    const path = SVG_PATHS[Math.floor(Math.random() * SVG_PATHS.length)];
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('width', '100%');
    svg.setAttribute('height', '100%');
    svg.setAttribute('fill', color);
    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    p.setAttribute('d', path.path);
    svg.appendChild(p);
    container.appendChild(svg);
  }

  function applyFocusPreviewColors(container, heading, link, button, fgHex, bgHex, thirdHex) {
    if (!container) return;

    container.style.backgroundColor = bgHex;
    container.style.color = fgHex;
    try {
      container.style.setProperty('--preview-fg', fgHex);
      container.style.setProperty('--preview-bg', bgHex);
      container.style.setProperty('--preview-focus', thirdHex);
    } catch (e) {}

    if (heading) heading.style.color = fgHex;

    if (link) {
      link.style.color = fgHex;
      link.style.textDecorationColor = thirdHex;
      link.style.textDecorationThickness = "3px";
    }

    if (button) {
      button.style.backgroundColor = fgHex;
      button.style.color = bgHex;
      button.style.borderColor = thirdHex;
      button.style.boxShadow = "0 0 0 3px " + thirdHex;
    }
  }

  // ---------- Main update ----------

  function updateAll() {
    errorBox.classList.add("hidden");
    errorBox.textContent = "";
    resultsBody.innerHTML = "";
    focusSummary.classList.add("hidden");
    focusText.textContent = "";
    suggestionStatus.textContent = "";
    fgSuggestions.innerHTML = "";
    bgSuggestions.innerHTML = "";
    thirdSuggestions.innerHTML = "";
    suggestSection.classList.add("hidden");
    thirdSuggestionBlock.classList.add("hidden");
    liveRegion.textContent = "";

    const wcagThreshold = Number(wcagThresholdSelect.value) || 4.5;
    const apcaThreshold = Number(apcaThresholdSelect.value) || 60;
    const thirdEnabled = enableThird.checked;

    let fg, bg, third;

    try {
      fg = parseCssColor(fgText.value);
      bg = parseCssColor(bgText.value);
      fgPicker.value = fg.hex;
      bgPicker.value = bg.hex;

      if (thirdEnabled && thirdText.value.trim()) {
        third = parseCssColor(thirdText.value);
        thirdPicker.value = third.hex;
      }
      
    } catch (err) {
      errorBox.textContent = err.message;
      errorBox.classList.remove("hidden");
      liveRegion.textContent = "Error: " + err.message;
      return;
    }

    applyPreviewColors(previewBase, demoHeadingBase, demoLinkBase, demoButtonBase, fg.hex, bg.hex);

    if (thirdEnabled && third) {
      previewThirdCard.classList.remove("hidden");
      applyFocusPreviewColors(previewThird, demoHeadingThird, demoLinkThird, demoButtonThird, fg.hex, bg.hex, third.hex);
      // apply global focus color variable
      try { document.documentElement.style.setProperty('--focus-color', third.hex); } catch (e) {}
    } else {
      previewThirdCard.classList.add("hidden");
      // reset to default focus color when not enabled by removing any inline override
      try { document.documentElement.style.removeProperty('--focus-color'); } catch (e) {}
    }

    // sync URL so colors are shareable
    try { updateURLWithColors(fg.hex, bg.hex, thirdEnabled && third ? third.hex : null); } catch (e) {}

    let liveSummary = [];

    const baseRatio = wcagContrast(fg, bg);
    const baseLc = apcaLc(fg, bg);
    const baseWcagPass = baseRatio >= wcagThreshold;
    const baseApcaPass = !Number.isNaN(baseLc) ? Math.abs(baseLc) >= apcaThreshold : true;
    const fgBgAbbr = document.createElement("abbr");
    fgBgAbbr.title = "Foreground and background";
    fgBgAbbr.textContent = "FG & BG";
    addResultRow(fgBgAbbr, baseRatio, baseWcagPass, baseLc, baseApcaPass,
      { display: fgText.value || fg.hex, hex: fg.hex }, { display: bgText.value || bg.hex, hex: bg.hex });

    liveSummary.push(
      `Foreground and background: WCAG ratio ${formatRatio(baseRatio)} ` +
        (baseWcagPass ? "passes" : "fails") +
        `, APCA Lc ${formatLc(baseLc)} ` +
        (baseApcaPass ? "passes." : "fails.")
    );

    let anyFailure = !baseWcagPass || !baseApcaPass;
    let thirdWcagPassBg = true;
    let thirdApcaPassBg = true;
    let focusPass = true;
    let fgThirdRatio = NaN;
    let fgThirdLc = NaN;

    if (thirdEnabled && third) {
      const thirdRatioBg = wcagContrast(third, bg);
      const thirdLcBg = apcaLc(third, bg);
      thirdWcagPassBg = thirdRatioBg >= wcagThreshold;
      thirdApcaPassBg = !Number.isNaN(thirdLcBg) ? Math.abs(thirdLcBg) >= apcaThreshold : true;
      addResultRow("Focus and background", thirdRatioBg, thirdWcagPassBg, thirdLcBg, thirdApcaPassBg,
        { display: thirdText.value || third.hex, hex: third.hex }, { display: bgText.value || bg.hex, hex: bg.hex });

      fgThirdRatio = wcagContrast(fg, third);
      focusPass = fgThirdRatio >= 3.0;
      fgThirdLc = apcaLc(fg, third);
      addResultRow("Foreground and focus (focus delta)", fgThirdRatio, focusPass, fgThirdLc, true,
        { display: fgText.value || fg.hex, hex: fg.hex }, { display: thirdText.value || third.hex, hex: third.hex });

      focusSummary.classList.remove("hidden");
      if (focusPass) {
        focusText.textContent =
          `Focus appearance requirement of 3:1 between unfocused and focused state is satisfied: contrast is ${formatRatio(fgThirdRatio)}.`;
      } else {
        focusText.textContent =
          `Focus appearance requirement of 3:1 between unfocused and focused state is not satisfied: contrast is ${formatRatio(fgThirdRatio)}.`;
      }

      liveSummary.push(
        `Third color on background: WCAG ratio ${formatRatio(thirdRatioBg)} ` +
          (thirdWcagPassBg ? "passes" : "fails") +
          `, APCA Lc ${formatLc(thirdLcBg)} ` +
          (thirdApcaPassBg ? "passes." : "fails.")
      );
      liveSummary.push(
        `Focus contrast between foreground and third color is ${formatRatio(
          fgThirdRatio
        )}, which ${focusPass ? "meets" : "does not meet"} the 3 to 1 requirement.`
      );

      if (!thirdWcagPassBg || !thirdApcaPassBg || !focusPass) {
        anyFailure = true;
      }
    }

    if (anyFailure) {
      suggestSection.classList.remove("hidden");
      const parts = [];

      if (!baseWcagPass || !baseApcaPass) {
        const fgPalette = findForegroundPalette(fg, bg, wcagThreshold, apcaThreshold, 5);
        const bgPalette = findBackgroundPalette(bg, fg, wcagThreshold, apcaThreshold, 5);


      // Diagnostic message: if no nearby foreground colors were found, explain why
      if (!fgPalette.length) {
        const fgMsg = "The foreground color needs to be adjusted to meet the APCA Lc target. No nearby lightness adjustments alone can satisfy both WCAG and APCA requirements.";
        parts.push(fgMsg);
        const fgStatusEl = document.getElementById('fgSuggestionStatus');
        if (fgStatusEl) fgStatusEl.textContent = fgMsg;
      } else {
        fgPalette.forEach(sug => {
          const swatch = document.createElement("div");
          swatch.className = "swatch";

          const colorBox = document.createElement("div");
          colorBox.className = "swatch-color";
          colorBox.style.backgroundColor = sug.hex;

          const label = document.createElement("div");
          label.className = "swatch-label";
          label.textContent = `${sug.hex} · ${formatRatio(sug.ratio)} · APCA ${formatLc(sug.lc)}`;

          const btn = document.createElement("button");
          btn.type = "button";
          btn.textContent = "Use as foreground";
          btn.addEventListener("click", () => {
            fgText.value = sug.hex;
            fgPicker.value = sug.hex;
            updateAll();
          });

          swatch.appendChild(colorBox);
          swatch.appendChild(label);
          swatch.appendChild(btn);
          fgSuggestions.appendChild(swatch);
        });

        // parts.push(`Suggested ${fgPalette.length} foreground alternatives that stay close in hue and saturation and near the chosen thresholds.`);
      }


        if (!bgPalette.length) {
          const bgMsg = "The foreground color needs to be adjusted to meet the APCA Lc target. No nearby background adjustments can satisfy both WCAG and APCA requirements against the current foreground.";
          parts.push(bgMsg);
          const bgStatusEl = document.getElementById('bgSuggestionStatus');
          // if (bgStatusEl) bgStatusEl.textContent = bgMsg;
        } else {
          bgPalette.forEach(sug => {
            const swatch = document.createElement("div");
            swatch.className = "swatch";

            const colorBox = document.createElement("div");
            colorBox.className = "swatch-color";
            colorBox.style.backgroundColor = sug.hex;

            const label = document.createElement("div");
            label.className = "swatch-label";
            label.textContent = `${sug.hex} · ${formatRatio(sug.ratio)} · APCA ${formatLc(sug.lc)}`;

            const btn = document.createElement("button");
            btn.type = "button";
            btn.textContent = "Use as background";
            btn.addEventListener("click", () => {
              bgText.value = sug.hex;
              bgPicker.value = sug.hex;
              updateAll();
            });

            swatch.appendChild(colorBox);
            swatch.appendChild(label);
            swatch.appendChild(btn);
            bgSuggestions.appendChild(swatch);
          });

          parts.push(`Suggested ${bgPalette.length} background alternatives that stay visually close while aligning better with WCAG and APCA thresholds.`);
        }
      }

      if (thirdEnabled && third && (!thirdWcagPassBg || !focusPass)) {
        thirdSuggestionBlock.classList.remove("hidden");

        const thirdPalette = findFocusPalette(
          third,
          bg,
          wcagThreshold,
          apcaThreshold,
          5,
          candidateRgb => wcagContrast(candidateRgb, fg) >= 3.0
        );

        if (thirdPalette.length) {
          thirdPalette.forEach(sug => {
            const swatch = document.createElement("div");
            swatch.className = "swatch";

            const colorBox = document.createElement("div");
            colorBox.className = "swatch-color";
            colorBox.style.backgroundColor = sug.hex;

            const label = document.createElement("div");
            label.className = "swatch-label";
            label.textContent =
              `${sug.hex} · ${formatRatio(sug.ratio)} · APCA ${formatLc(sug.lc)}`;

            const btn = document.createElement("button");
            btn.type = "button";
            btn.textContent = "Use as focus color";
            btn.addEventListener("click", () => {
              thirdText.value = sug.hex;
              thirdPicker.value = sug.hex;
              updateAll();
            });

            swatch.appendChild(colorBox);
            swatch.appendChild(label);
            swatch.appendChild(btn);
            thirdSuggestions.appendChild(swatch);
          });

          parts.push(`Suggested ${thirdPalette.length} focus color alternatives that pass thresholds, meet the 3 to 1 focus requirement, and stay close to the original focus color.`);
        } else {
          parts.push("The focus color needs to be adjusted to meet the APCA Lc target. No nearby lightness adjustments alone can satisfy both WCAG and APCA requirements with the 3 to 1 focus constraint.");
        }
        // If focus still fails, suggest a computed focus color
        if (!thirdPalette.length || !focusPass) {
          const focusSuggestion = computeClosestFocus(fg, bg);
          if (focusSuggestion) {
            const swatch = document.createElement('div');
            swatch.className = 'swatch';
            const colorBox = document.createElement('div');
            colorBox.className = 'swatch-color';
            colorBox.style.backgroundColor = focusSuggestion.hex;
            const label = document.createElement('div');
            label.className = 'swatch-label';
            label.textContent = `${focusSuggestion.hex} · Suggested focus color (minimal change)`;
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.textContent = 'Use as focus color';
            btn.addEventListener('click', () => {
              thirdText.value = focusSuggestion.hex;
              thirdPicker.value = focusSuggestion.hex;
              enableThird.checked = true;
              thirdContainer.classList.remove('hidden');
              updateAll();
            });
            swatch.appendChild(colorBox);
            swatch.appendChild(label);
            swatch.appendChild(btn);
            thirdSuggestions.appendChild(swatch);
            parts.push('Suggested a nearby focus color optimized for the 3:1 focus requirement.');
          }
        }
      }

      suggestionStatus.textContent = parts.join(" ");
      // Only show the suggestions panel if at least one suggestion swatch was rendered
      const hasSuggestionSwatches = (
        fgSuggestions.children.length > 0 ||
        bgSuggestions.children.length > 0 ||
        thirdSuggestions.children.length > 0
      );
      if (!hasSuggestionSwatches) {
        suggestSection.classList.add("hidden");
      } else {
        suggestSection.classList.remove("hidden");
        liveSummary.push(suggestionStatus.textContent);
      }
    }

    // Update visuals
    try {
      const vizColors = [fg.hex, bg.hex];
      // always render unified bar charts; provide focus color when enabled
      if (thirdEnabled && third) {
        updateBarChart([fg.hex, bg.hex, third.hex]);
        updateSVG(fg.hex);
        updateSVGThird(third.hex);
      } else {
        updateBarChart([fg.hex, bg.hex]);
        updateSVG(fg.hex);
        // clear third visuals
        const c3 = document.getElementById('barChartContainerThird');
        if (c3) c3.innerHTML = '';
        const s3 = document.getElementById('svgContainerThird');
        if (s3) s3.innerHTML = '';
      }
    } catch (e) {
      // non-fatal
    }

    // render saved palette
    renderSavedPalette();

    liveRegion.textContent = liveSummary.join(" ");
  }

  // ---------- Event wiring ----------

  function syncTextFromPicker(picker, textInput) {
    textInput.value = picker.value;
  }

  function nudgeLightness(hex, deltaPercent) {
    try {
      const rgb = parseCssColor(hex);
      const hsl = rgbToHsl(rgb);
      let l = hsl.l * 100;
      l = clamp(l + deltaPercent, 0, 100);
      const newHex = hslToHex(hsl.h * 360, hsl.s * 100, l);
      return newHex;
    } catch (e) {
      return hex;
    }
  }

  function syncPickerFromText(textInput, picker) {
    try {
      const parsed = parseCssColor(textInput.value);
      picker.value = parsed.hex;
    } catch {
      // Ignore until user enters a valid color.
    }
  }

  function attachColorInputEvents(picker, textInput) {
    if (!picker) return;
    picker.addEventListener("input", () => {
      syncTextFromPicker(picker, textInput);
      updateAll();
    });
    picker.addEventListener("change", () => {
      syncTextFromPicker(picker, textInput);
      updateAll();
    });
  }

  attachColorInputEvents(fgPicker, fgText);
  attachColorInputEvents(bgPicker, bgText);
  attachColorInputEvents(thirdPicker, thirdText);

  fgText.addEventListener("input", () => {
    syncPickerFromText(fgText, fgPicker);
    updateAll();
  });
  bgText.addEventListener("input", () => {
    syncPickerFromText(bgText, bgPicker);
    updateAll();
  });
  thirdText.addEventListener("input", () => {
    syncPickerFromText(thirdText, thirdPicker);
    updateAll();
  });

  enableThird.addEventListener("change", () => {
    if (enableThird.checked) {
      thirdContainer.classList.remove("hidden");
    } else {
      thirdContainer.classList.add("hidden");
    }
    updateAll();
  });

  wcagThresholdSelect.addEventListener("change", updateAll);
  apcaThresholdSelect.addEventListener("change", updateAll);

  simToggles.forEach(btn => {
    btn.addEventListener("click", () => {
      const mode = btn.dataset.sim || "normal";
      page.dataset.sim = mode;
      simToggles.forEach(b => {
        b.classList.remove("sim-toggle-active");
        b.setAttribute('aria-pressed', 'false');
        // swap to secondary style
        b.classList.remove('btn-primary');
        b.classList.add('btn-secondary');
      });
      btn.classList.add("sim-toggle-active");
      btn.setAttribute('aria-pressed', 'true');
      btn.classList.remove('btn-secondary');
      btn.classList.add('btn-primary');
      liveRegion.textContent = `Preview simulation set to ${mode}.`;
    });
  });



  // Toggle preview buttons behavior (demo toggles).
  // Attach explicit handlers to each .btn-toggle so clicks and keyboard
  // activation reliably toggle `aria-pressed` and a visual class.
  const previewToggles = Array.from(document.querySelectorAll('.btn-toggle'));
  previewToggles.forEach(btn => {
    // Ensure initial state
    if (!btn.hasAttribute('aria-pressed')) btn.setAttribute('aria-pressed', 'false');
    btn.classList.toggle('btn-toggle-active', btn.getAttribute('aria-pressed') === 'true');

    btn.addEventListener('click', (e) => {
      const pressed = btn.getAttribute('aria-pressed') === 'true';
      btn.setAttribute('aria-pressed', pressed ? 'false' : 'true');
      btn.classList.toggle('btn-toggle-active', !pressed);
    });

    // Support keyboard activation (Space or Enter)
    btn.addEventListener('keydown', (e) => {
      if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
        e.preventDefault();
        btn.click();
      }
    });
  });

  if (themeToggleBtn) {
    themeToggleBtn.addEventListener("click", () => {
      const currentIsDark =
        document.documentElement.dataset.theme === "dark" ||
        (!document.documentElement.dataset.theme && prefersDarkScheme.matches);
      const newTheme = currentIsDark ? "light" : "dark";
      userHasThemeOverride = true;
      applyTheme(newTheme);
      liveRegion.textContent = `Theme set to ${newTheme}.`;
    });
  }

  // Listen for OS-level theme changes (only when the user has not set an override)
  prefersDarkScheme.addEventListener("change", (e) => {
    if (!userHasThemeOverride) {
      applyTheme(e.matches ? "dark" : "light");
    }
  });

  // Wire small save buttons (if present)
  const saveFgBtn = document.getElementById('saveFg');
  const saveBgBtn = document.getElementById('saveBg');
  const saveThirdBtn = document.getElementById('saveThird');
  const swapColorsBtn = document.getElementById('swapColors');
  const harmonyButton = document.getElementById('harmonyButton');

  if (saveFgBtn) saveFgBtn.addEventListener('click', () => addSavedColor(fgText.value.trim() || fgPicker.value));
  if (saveBgBtn) saveBgBtn.addEventListener('click', () => addSavedColor(bgText.value.trim() || bgPicker.value));
  if (saveThirdBtn) saveThirdBtn.addEventListener('click', () => addSavedColor(thirdText.value.trim() || thirdPicker.value));
  if (swapColorsBtn) swapColorsBtn.addEventListener('click', () => {
    const fgVal = fgText.value;
    const fgHex = fgPicker.value;
    fgText.value = bgText.value;
    fgPicker.value = bgPicker.value;
    bgText.value = fgVal;
    bgPicker.value = fgHex;
    updateAll();
  });
  const findBestFocusBtn = document.getElementById('findBestFocus');
  let focusSuggestionAttempt = 0;
  let _lastFgForSuggestion = null;
  let _lastBgForSuggestion = null;
  if (findBestFocusBtn) findBestFocusBtn.addEventListener('click', () => {
    try {
      const fg = parseCssColor(fgText.value);
      const bg = parseCssColor(bgText.value);
      // Reset attempts if FG/BG changed
      const currentFg = fgText.value || fg.hex;
      const currentBg = bgText.value || bg.hex;
      if (_lastFgForSuggestion !== currentFg || _lastBgForSuggestion !== currentBg) {
        focusSuggestionAttempt = 0;
        _lastFgForSuggestion = currentFg;
        _lastBgForSuggestion = currentBg;
      }

      // Try to find multiple candidate focus colors
      const wcagThreshold = Number(wcagThresholdSelect.value) || 3.0;
      const apcaThreshold = Number(apcaThresholdSelect.value) || 60;

      // Use existing algorithm to search around FG and BG hues
      const candidates = [];
      try {
        const fpal = findFocusPalette(fg, bg, wcagThreshold, apcaThreshold, 8, candidateRgb => wcagContrast(candidateRgb, fg) >= 3.0);
        fpal.forEach(c => candidates.push({ hex: c.hex, score: c.score, ratio: c.ratio, lc: c.lc }));
      } catch (e) {}

      // If none found, try computeClosestFocus for a fallback
      if (!candidates.length) {
        const best = computeClosestFocus(fg, bg);
        if (best && best.hex) candidates.push({ hex: best.hex, score: 0, ratio: wcagContrast(parseCssColor(best.hex), bg), lc: apcaLc(parseCssColor(best.hex), bg) });
      }

      // Score candidates with APCA-aware metric (prefer small deviation from 3:1 and APCA closeness)
      const scored = candidates.map(c => {
        let wcagDiff = Math.abs((c.ratio || 0) - 3.0);
        let apcaDiff = Number.isNaN(c.lc) ? 0 : Math.abs(Math.abs(c.lc) - apcaThreshold);
        return Object.assign({}, c, { combined: wcagDiff + apcaDiff * 0.02 });
      });

      scored.sort((a, b) => a.combined - b.combined);

      const container = document.getElementById('focusCandidates');
      container.innerHTML = '';
      if (!scored.length) {
        container.textContent = 'No focus candidates found.';
        return;
      }

      // Show only one suggestion and cycle through candidates on repeated clicks
      const selectedIndex = focusSuggestionAttempt % Math.max(1, scored.length);
      const selected = scored[selectedIndex];
      focusSuggestionAttempt += 1;
      if (selected) {
        // apply it immediately
        thirdText.value = selected.hex;
        thirdPicker.value = parseCssColor(selected.hex).hex;
        enableThird.checked = true;
        thirdContainer.classList.remove('hidden');
        updateAll();

        // show a single confirmation card
        const c = selected;
        const card = document.createElement('div');
        card.className = 'focus-candidate';
        const sw = document.createElement('span');
        sw.className = 'result-swatch';
        sw.style.backgroundColor = c.hex;
        const meta = document.createElement('div');
        meta.className = 'focus-candidate-meta';
        const title = document.createElement('div');
        title.textContent = `${c.hex} · ${formatRatio(c.ratio || 0)} · APCA ${formatLc(c.lc)}`;
        const note = document.createElement('div');
        note.className = 'small muted';
        note.textContent = 'Applied — click Suggestion again for a different option.';
        meta.appendChild(title);
        meta.appendChild(note);
        card.appendChild(sw);
        card.appendChild(meta);
        container.appendChild(card);
      } else {
        container.textContent = 'No focus candidates found.';
      }

    } catch (e) {
      liveRegion.textContent = 'Could not compute focus color: invalid FG/BG.';
    }
  });
  if (harmonyButton) harmonyButton.addEventListener('click', () => {
    try {
      const fg = parseCssColor(fgText.value);
      const palette = generateHarmony(fg);
      renderHarmonyOutput(palette);
    } catch (e) {
      liveRegion.textContent = 'Could not generate harmony: invalid foreground color.';
    }
  });

  // --- Tonal scale + contrast matrix handlers ---
  const tonalButton = document.getElementById('tonalButton');
  const tintColorInput = document.getElementById('tintColor');
  const tintIntensityInput = document.getElementById('tintIntensity');
  const tintIntensityDisplay = document.getElementById('tintIntensityDisplay');

  function getTintSettings() {
    return {
      tintHex: (tintColorInput && tintColorInput.value) || '#6366f1',
      tintIntensity: tintIntensityInput ? Number(tintIntensityInput.value) : 0,
    };
  }

  function triggerTonalGeneration() {
    try {
      const fg = parseCssColor(fgText.value);
      const bg = parseCssColor(bgText.value);
      const { tintHex, tintIntensity } = getTintSettings();
      const scale = generateTonalScale(fg);
      renderTonalOutput(scale, bg, tintHex, tintIntensity);
    } catch (e) {
      liveRegion.textContent = 'Could not generate tonal scale: invalid foreground color.';
    }
  }

  if (tonalButton) tonalButton.addEventListener('click', triggerTonalGeneration);

  if (tintIntensityInput) {
    tintIntensityInput.addEventListener('input', () => {
      if (tintIntensityDisplay) tintIntensityDisplay.textContent = tintIntensityInput.value + '%';
      if (_lastTonalScale) {
        try {
          const bg = parseCssColor(bgText.value);
          const { tintHex, tintIntensity } = getTintSettings();
          renderTonalOutput(_lastTonalScale, bg, tintHex, tintIntensity);
        } catch (e) { /* non-fatal */ }
      }
    });
  }

  if (tintColorInput) {
    tintColorInput.addEventListener('input', () => {
      if (_lastTonalScale) {
        try {
          const bg = parseCssColor(bgText.value);
          const { tintHex, tintIntensity } = getTintSettings();
          renderTonalOutput(_lastTonalScale, bg, tintHex, tintIntensity);
        } catch (e) { /* non-fatal */ }
      }
    });
  }

  // Render saved palette once at startup
  renderSavedPalette();

  // wire Clear All / Copy Palette (in-case elements exist in HTML)
  const clearBtn = document.getElementById('clearPalette');
  if (clearBtn) clearBtn.addEventListener('click', () => { localStorage.removeItem(PALETTE_KEY); renderSavedPalette(); try { updateBarChart([fgText.value || fgPicker.value, bgText.value || bgPicker.value, (document.getElementById('enableThird') && document.getElementById('enableThird').checked) ? (thirdText.value || thirdPicker.value) : null]); } catch(e){} });
  const copyBtn = document.getElementById('copyPalette');
  if (copyBtn) copyBtn.addEventListener('click', async () => {
    const palette = loadSavedPalette();
    if (!palette || !palette.length) { alert('No saved colors to export'); return; }
    // Build CSV with header: id,hex
    const rows = ['id,hex'];
    for (const p of palette) {
      // escape any double quotes
      const id = String(p.id || '').replace(/"/g, '""');
      const hex = String(p.value || '').replace(/"/g, '""');
      rows.push(`"${id}","${hex}"`);
    }
    const csv = rows.join('\n');
    // Try copying to clipboard
    try {
      await navigator.clipboard.writeText(csv);
    } catch (e) {
      // ignore copy failure, will still trigger download
    }
    // Trigger file download
    try {
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'palette.csv';
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
      alert('Palette exported as CSV (copied to clipboard if supported)');
    } catch (e) {
      alert('Export failed: ' + e);
    }
  });

  // Random button handlers (local scope)
  document.addEventListener('click', (ev) => {
    const t = ev.target;
    if (!t) return;
    const id = t.id || '';
    if (id === 'randomFgDark') {
      const hex = randomDarkHex();
      fgText.value = hex; fgPicker.value = hex; updateAll();
    } else if (id === 'randomFgLight') {
      const hex = randomLightHex();
      fgText.value = hex; fgPicker.value = hex; updateAll();
    } else if (id === 'randomBgDark') {
      const hex = randomDarkHex();
      bgText.value = hex; bgPicker.value = hex; updateAll();
    } else if (id === 'randomBgLight') {
      const hex = randomLightHex();
      bgText.value = hex; bgPicker.value = hex; updateAll();
    } else if (id === 'randomThird') {
      const hex = randomHex();
      thirdText.value = hex; thirdPicker.value = hex;
      if (enableThird && !enableThird.checked) { enableThird.checked = true; thirdContainer.classList.remove('hidden'); }
      updateAll();
    } else if (id === 'randomThirdDark') {
      const hex = randomDarkHex();
      thirdText.value = hex; thirdPicker.value = hex;
      if (enableThird && !enableThird.checked) { enableThird.checked = true; thirdContainer.classList.remove('hidden'); }
      updateAll();
    } else if (id === 'randomThirdLight') {
      const hex = randomLightHex();
      thirdText.value = hex; thirdPicker.value = hex;
      if (enableThird && !enableThird.checked) { enableThird.checked = true; thirdContainer.classList.remove('hidden'); }
      updateAll();
    } else if (id === 'fgLighter') {
      const h = nudgeLightness(fgText.value || fgPicker.value, -6);
      fgText.value = h; fgPicker.value = parseCssColor(h).hex; updateAll();
    } else if (id === 'fgDarker') {
      const h = nudgeLightness(fgText.value || fgPicker.value, 6);
      fgText.value = h; fgPicker.value = parseCssColor(h).hex; updateAll();
    } else if (id === 'bgLighter') {
      const h = nudgeLightness(bgText.value || bgPicker.value, -6);
      bgText.value = h; bgPicker.value = parseCssColor(h).hex; updateAll();
    } else if (id === 'bgDarker') {
      const h = nudgeLightness(bgText.value || bgPicker.value, 6);
      bgText.value = h; bgPicker.value = parseCssColor(h).hex; updateAll();
    } else if (id === 'thirdLighter') {
      const h = nudgeLightness(thirdText.value || thirdPicker.value, -6);
      thirdText.value = h; thirdPicker.value = parseCssColor(h).hex; updateAll();
    } else if (id === 'thirdDarker') {
      const h = nudgeLightness(thirdText.value || thirdPicker.value, 6);
      thirdText.value = h; thirdPicker.value = parseCssColor(h).hex; updateAll();
    }
  });

  // read URL params first (if present) then initial render
  try { readColorsFromURL(); } catch (e) {}
  updateAll();
}

// (removed duplicate global random helpers; random helpers live inside setup)





// === Palette overrides: two-stage search (strict both-thresholds, then WCAG-only) ===

function findForegroundPalette(baseTextRgb, bgRgb, wcagThreshold, apcaThreshold, count) {
  const baseHsl = rgbToHsl(baseTextRgb);
  const baseL = baseHsl.l;
  const strict = [];
  const relaxed = [];

  function consider(hOff, sScale) {
    const h = ((baseHsl.h + hOff) % 1 + 1) % 1;
    const s = clamp(baseHsl.s * sScale, 0, 1);
    for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
      const candidateRgb = hslToRgb({ h, s, l });
      const ratio = wcagContrast(candidateRgb, bgRgb);
      const lc = apcaLc(candidateRgb, bgRgb);
      if (ratio >= wcagThreshold) {
        const passesApca = !Number.isNaN(lc) && Math.abs(lc) >= apcaThreshold;
        const score = foregroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l);
        const entry = { rgb: candidateRgb, hex: rgbToHex(candidateRgb), ratio, lc, score, l };
        if (passesApca) strict.push(entry);
        else relaxed.push(entry);
      }
    }
  }

  // Same hue, similar saturation
  consider(0, 1);
  [0.9, 0.8, 1.1].forEach(s => consider(0, s));
  // Small hue shifts around original
  [0.03, -0.03, 0.06, -0.06].forEach(hOff => {
    [1, 0.9].forEach(s => consider(hOff, s));
  });

  function pickSpaced(source) {
    source.sort((a, b) => a.score - b.score);
    const picked = [];
    const minDeltaL = 0.10; // ensure more obvious differences
    for (const c of source) {
      if (picked.length === 0) {
        picked.push(c);
      } else {
        const tooClose = picked.some(p => Math.abs(p.l - c.l) < minDeltaL);
        if (!tooClose) picked.push(c);
      }
      if (picked.length >= count) break;
    }
    if (picked.length < count) {
      for (const c of source) {
        if (picked.includes(c)) continue;
        picked.push(c);
        if (picked.length >= count) break;
      }
    }
    return picked.slice(0, count);
  }

  if (strict.length) {
    return pickSpaced(strict);
  }
  return pickSpaced(relaxed);
}

function findBackgroundPalette(baseBgRgb, fgRgb, wcagThreshold, apcaThreshold, count) {
  const baseHsl = rgbToHsl(baseBgRgb);
  const baseL = baseHsl.l;
  const strict = [];
  const relaxed = [];

  function consider(hOff, sScale) {
    const h = ((baseHsl.h + hOff) % 1 + 1) % 1;
    const s = clamp(baseHsl.s * sScale, 0, 1);
    for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
      const candidateRgb = hslToRgb({ h, s, l });
      const ratio = wcagContrast(fgRgb, candidateRgb);
      const lc = apcaLc(fgRgb, candidateRgb);
      if (ratio >= wcagThreshold) {
        const passesApca = !Number.isNaN(lc) && Math.abs(lc) >= apcaThreshold;
        const deltaH = Math.abs(hOff);
        const deltaS = Math.abs(s - baseHsl.s);
        const score = backgroundCandidateScore(baseL, ratio, lc, wcagThreshold, apcaThreshold, l, deltaH, deltaS);
        const entry = { rgb: candidateRgb, hex: rgbToHex(candidateRgb), ratio, lc, score };
        if (passesApca) strict.push(entry);
        else relaxed.push(entry);
      }
    }
  }

  consider(0, 1);
  [0.9, 0.8, 0.7].forEach(s => consider(0, s));
  [0.03, -0.03, 0.06, -0.06, 0.09, -0.09].forEach(hOff => {
    [1, 0.9].forEach(s => consider(hOff, s));
  });

  function pickSpaced(source) {
    source.sort((a, b) => a.score - b.score);
    const picked = [];
    const minDeltaL = 0.10;
    for (const c of source) {
      const l = rgbToHsl(c.rgb).l;
      if (picked.length === 0) {
        picked.push({ ...c, l });
      } else {
        const tooClose = picked.some(p => Math.abs(p.l - l) < minDeltaL);
        if (!tooClose) picked.push({ ...c, l });
      }
      if (picked.length >= count) break;
    }
    if (picked.length < count) {
      for (const c of source) {
        if (picked.some(p => p.rgb === c.rgb)) continue;
        const l = rgbToHsl(c.rgb).l;
        picked.push({ ...c, l });
        if (picked.length >= count) break;
      }
    }
    return picked.slice(0, count);
  }

  if (strict.length) {
    return pickSpaced(strict);
  }
  return pickSpaced(relaxed);
}

function findFocusPalette(baseFocusRgb, bgRgb, wcagThreshold, apcaThreshold, count, extraCheck) {
  const baseHsl = rgbToHsl(baseFocusRgb);
  const baseL = baseHsl.l;
  const strict = [];
  const relaxed = [];

  for (let l = 0.02; l <= 0.98 + 1e-9; l += 0.02) {
    const candidateRgb = hslToRgb({ h: baseHsl.h, s: baseHsl.s, l });
    const ratioBg = wcagContrast(candidateRgb, bgRgb);
    const lcBg = apcaLc(candidateRgb, bgRgb);
    if (ratioBg >= wcagThreshold) {
      if (extraCheck && !extraCheck(candidateRgb)) continue;
      const passesApca = !Number.isNaN(lcBg) && Math.abs(lcBg) >= apcaThreshold;
      const score = focusCandidateScore(baseL, ratioBg, lcBg, wcagThreshold, apcaThreshold, l);
      const entry = { rgb: candidateRgb, hex: rgbToHex(candidateRgb), ratio: ratioBg, lc: lcBg, score, l };
      if (passesApca) strict.push(entry);
      else relaxed.push(entry);
    }
  }

  function pickSpaced(source) {
    source.sort((a, b) => a.score - b.score);
    const picked = [];
    const minDeltaL = 0.10;
    for (const c of source) {
      if (picked.length === 0) {
        picked.push(c);
      } else {
        const tooClose = picked.some(p => Math.abs(p.l - c.l) < minDeltaL);
        if (!tooClose) picked.push(c);
      }
      if (picked.length >= count) break;
    }
    if (picked.length < count) {
      for (const c of source) {
        if (picked.includes(c)) continue;
        picked.push(c);
        if (picked.length >= count) break;
      }
    }
    return picked.slice(0, count);
  }

  if (strict.length) {
    return pickSpaced(strict);
  }
  return pickSpaced(relaxed);
}