From 0d3efe4139807fcf4669f3cb5e97993ca7292b1b Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 16 Jun 2026 15:04:57 +0100
Subject: [PATCH] refactor: remove dev-only paint/SVG-filter modifier panel

The hidden modifier (gear button + mod-panel aside, paint swatches and
filter-variable sliders) flashed as unstyled content on slow loads
before CSS/JS hid it. Removed its markup, the initPaintPicker() wiring,
and all .mod-*/.paint-* styles plus the now-dead paint-green/white
variants. Hero keeps the default dark glossy paint. Bundle: CSS -3.3kB,
JS -8kB.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/App.vue    | 207 +------------------------------------------------
 src/styles.css | 155 ------------------------------------
 2 files changed, 1 insertion(+), 361 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4daea9d..e78a239 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -266,7 +266,6 @@
   <header class="site-header">
     <a class="logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Plan-B</a>
     <div class="header-right">
-      <button class="mod-open-btn" id="modOpenBtn" type="button" title="Open style modifier" aria-label="Open style modifier">⚙</button>
       <div id="region-indicator" style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:4px;white-space:nowrap;cursor:pointer;" @click="showRegionPicker" title="Click to change region"></div>
       <div class="lang-toggle">
         <button class="lang-btn active" @click="setLang('en')" id="btn-en">EN</button>
@@ -275,55 +274,6 @@
     </div>
   </header>
 
-  <aside class="mod-panel" id="modPanel">
-    <header class="mod-header">
-      <h3>Modifier <span class="mod-paint-label" id="modPaintLabel">Dark</span></h3>
-      <button class="mod-toggle" id="modCloseBtn" type="button" aria-label="Close modifier">×</button>
-    </header>
-    <div class="mod-body">
-      <fieldset class="mod-fieldset">
-        <legend>Paint</legend>
-        <div class="paint-picker" role="radiogroup" aria-label="Paint color" style="padding: 4px 0;">
-          <button class="paint-swatch swatch-dark active" data-paint="" title="Dark (default)" aria-label="Dark"></button>
-          <button class="paint-swatch swatch-green" data-paint="paint-green" title="Army green" aria-label="Army green"></button>
-          <button class="paint-swatch swatch-white" data-paint="paint-white" title="Glossy white" aria-label="Glossy white"></button>
-        </div>
-      </fieldset>
-      <fieldset class="mod-fieldset" data-paint-only="green,white">
-        <legend>Fill</legend>
-        <label class="mod-row"><span>color</span><input type="color" data-var="fill"/></label>
-      </fieldset>
-      <fieldset class="mod-fieldset">
-        <legend>Drop Shadow</legend>
-        <label class="mod-row"><span>dy</span><input type="range" min="0" max="20" step="0.5" data-var="dsDy"/><output></output></label>
-        <label class="mod-row"><span>blur</span><input type="range" min="0" max="10" step="0.1" data-var="dsBlur"/><output></output></label>
-        <label class="mod-row"><span>alpha</span><input type="range" min="0" max="1" step="0.01" data-var="dsSlope"/><output></output></label>
-      </fieldset>
-      <fieldset class="mod-fieldset">
-        <legend>Bump</legend>
-        <label class="mod-row"><span>stdDev</span><input type="range" min="0" max="3" step="0.1" data-var="bumpStd"/><output></output></label>
-      </fieldset>
-      <fieldset class="mod-fieldset">
-        <legend>Specular 1 (upper-left)</legend>
-        <label class="mod-row"><span>scale</span><input type="range" min="0" max="30" step="1" data-var="spec1Scale"/><output></output></label>
-        <label class="mod-row"><span>constant</span><input type="range" min="0" max="8" step="0.1" data-var="spec1Const"/><output></output></label>
-        <label class="mod-row"><span>exponent</span><input type="range" min="0" max="100" step="1" data-var="spec1Exp"/><output></output></label>
-        <label class="mod-row"><span>color</span><input type="color" data-var="spec1Color"/></label>
-      </fieldset>
-      <fieldset class="mod-fieldset">
-        <legend>Specular 2 (upper-right)</legend>
-        <label class="mod-row"><span>scale</span><input type="range" min="0" max="30" step="1" data-var="spec2Scale"/><output></output></label>
-        <label class="mod-row"><span>constant</span><input type="range" min="0" max="8" step="0.1" data-var="spec2Const"/><output></output></label>
-        <label class="mod-row"><span>exponent</span><input type="range" min="0" max="100" step="1" data-var="spec2Exp"/><output></output></label>
-        <label class="mod-row"><span>color</span><input type="color" data-var="spec2Color"/></label>
-      </fieldset>
-      <div class="mod-actions">
-        <button id="modCopy" type="button">Copy snippet</button>
-        <span class="mod-copy-status" id="modCopyStatus"></span>
-      </div>
-    </div>
-  </aside>
-
   <main class="app">
 
     <!-- Embossed "Plan B" page background — fixed full-viewport, sits
@@ -2265,160 +2215,6 @@ function initScenarioStrip() {
   }, { passive: true })
 }
 
-// ── Paint picker + modifier panel ──
-function initPaintPicker() {
-  const swatches = document.querySelectorAll('.paint-swatch')
-  if (!swatches.length) return
-
-  const FILTER_IDS = {
-    dark:  ['paintGloss', 'paintGlossHover'],
-    green: ['paintGloss', 'paintGlossHover'],
-    white: ['paintGlossWhite', 'paintGlossWhiteHover', 'paintGlossWhiteBtn']
-  }
-  const VARS = {
-    dsDy:        { sel: 'feOffset[result="dsOff"]',           attr: 'dy' },
-    dsBlur:      { sel: 'feGaussianBlur[result="dsBlur"]',    attr: 'stdDeviation' },
-    dsSlope:     { sel: 'feFuncA',                            attr: 'slope' },
-    bumpStd:     { sel: 'feGaussianBlur[result="bump"]',      attr: 'stdDeviation' },
-    spec1Scale:  { sel: 'feSpecularLighting[result="spec"]',  attr: 'surfaceScale' },
-    spec1Const:  { sel: 'feSpecularLighting[result="spec"]',  attr: 'specularConstant' },
-    spec1Exp:    { sel: 'feSpecularLighting[result="spec"]',  attr: 'specularExponent' },
-    spec1Color:  { sel: 'feSpecularLighting[result="spec"]',  attr: 'lighting-color' },
-    spec2Scale:  { sel: 'feSpecularLighting[result="spec2"]', attr: 'surfaceScale' },
-    spec2Const:  { sel: 'feSpecularLighting[result="spec2"]', attr: 'specularConstant' },
-    spec2Exp:    { sel: 'feSpecularLighting[result="spec2"]', attr: 'specularExponent' },
-    spec2Color:  { sel: 'feSpecularLighting[result="spec2"]', attr: 'lighting-color' },
-  }
-  const PAINT_LABEL = { dark: 'Dark', green: 'Army Green', white: 'Glossy White' }
-
-  function activePaint() {
-    if (document.body.classList.contains('paint-white')) return 'white'
-    if (document.body.classList.contains('paint-green')) return 'green'
-    return 'dark'
-  }
-  function primaryFilter() { return document.getElementById(FILTER_IDS[activePaint()][0]) }
-
-  function applyVar(name, value) {
-    const def = VARS[name]; if (!def) return
-    FILTER_IDS[activePaint()].forEach(id => {
-      const f = document.getElementById(id); if (!f) return
-      const el = f.querySelector(def.sel); if (el) el.setAttribute(def.attr, value)
-    })
-  }
-  function readActiveFill() {
-    if (activePaint() === 'dark') return null
-    const h1 = document.querySelector('.hero h1.paint-3d')
-    return h1 ? getComputedStyle(h1).backgroundColor : null
-  }
-  function rgbToHex(rgb) {
-    if (!rgb) return '#000000'
-    if (rgb.startsWith('#')) return rgb
-    const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
-    if (!m) return '#000000'
-    return '#' + [1,2,3].map(i => Number(m[i]).toString(16).padStart(2,'0')).join('')
-  }
-  function applyFill(hex) {
-    if (activePaint() === 'dark') return
-    const h1 = document.querySelector('.hero h1.paint-3d')
-    if (h1) h1.style.background = hex
-    document.body.style.setProperty('--mod-fill', hex)
-    if (!document.getElementById('modFillStyle')) {
-      const s = document.createElement('style')
-      s.id = 'modFillStyle'
-      s.textContent =
-        'body.paint-green .cta-btn::before, body.paint-white .cta-btn::before {' +
-        '  background: var(--mod-fill, inherit) !important;' +
-        '}'
-      document.head.appendChild(s)
-    }
-  }
-  function clearModifierOverrides() {
-    const h1 = document.querySelector('.hero h1.paint-3d')
-    if (h1) h1.style.background = ''
-    document.body.style.removeProperty('--mod-fill')
-  }
-  function readAll() {
-    const filter = primaryFilter(); if (!filter) return
-    Object.entries(VARS).forEach(([name, def]) => {
-      const input = document.querySelector('[data-var="' + name + '"]'); if (!input) return
-      const el = filter.querySelector(def.sel)
-      if (el) { const v = el.getAttribute(def.attr); if (v !== null) input.value = v }
-    })
-    const fillInput = document.querySelector('[data-var="fill"]')
-    if (fillInput) { const fill = readActiveFill(); if (fill) fillInput.value = rgbToHex(fill) }
-    document.querySelectorAll('.mod-row output').forEach(out => {
-      const input = out.previousElementSibling
-      if (input && input.type === 'range') out.textContent = input.value
-    })
-  }
-  function refreshSectionVisibility() {
-    const paint = activePaint()
-    document.querySelectorAll('.mod-fieldset[data-paint-only]').forEach(fs => {
-      const allowed = fs.dataset.paintOnly.split(',').map(s => s.trim())
-      if (allowed.includes(paint)) fs.removeAttribute('data-hide')
-      else fs.setAttribute('data-hide', 'true')
-    })
-    const label = document.getElementById('modPaintLabel')
-    if (label) label.textContent = PAINT_LABEL[paint]
-  }
-
-  swatches.forEach(btn => {
-    btn.addEventListener('click', () => {
-      document.body.classList.remove('paint-green', 'paint-white')
-      const paint = btn.dataset.paint
-      if (paint) document.body.classList.add(paint)
-      swatches.forEach(b => b.classList.remove('active'))
-      btn.classList.add('active')
-      clearModifierOverrides()
-      refreshSectionVisibility()
-      readAll()
-    })
-  })
-  document.querySelectorAll('[data-var]').forEach(input => {
-    input.addEventListener('input', () => {
-      const name = input.dataset.var
-      if (name === 'fill') applyFill(input.value)
-      else applyVar(name, input.value)
-      const out = input.nextElementSibling
-      if (out && out.tagName === 'OUTPUT') out.textContent = input.value
-    })
-  })
-
-  const openBtn = document.getElementById('modOpenBtn')
-  const closeBtn = document.getElementById('modCloseBtn')
-  if (openBtn) {
-    openBtn.addEventListener('click', () => { document.body.classList.toggle('mod-open') })
-  }
-  if (closeBtn) {
-    closeBtn.addEventListener('click', () => { document.body.classList.remove('mod-open') })
-  }
-
-  const copyBtn = document.getElementById('modCopy')
-  const copyStatus = document.getElementById('modCopyStatus')
-  if (copyBtn) {
-    copyBtn.addEventListener('click', () => {
-      const filter = primaryFilter(); if (!filter) return
-      const dump = { paint: activePaint(), filter: FILTER_IDS[activePaint()][0] }
-      Object.entries(VARS).forEach(([name, def]) => {
-        const el = filter.querySelector(def.sel)
-        if (el && el.hasAttribute(def.attr)) dump[name] = el.getAttribute(def.attr)
-      })
-      const fill = readActiveFill()
-      if (fill && activePaint() !== 'dark') dump.fill = rgbToHex(fill)
-      const text = JSON.stringify(dump, null, 2)
-      navigator.clipboard.writeText(text).then(() => {
-        if (copyStatus) {
-          copyStatus.textContent = 'Copied'
-          setTimeout(() => { copyStatus.textContent = '' }, 1500)
-        }
-      }).catch(() => { if (copyStatus) copyStatus.textContent = 'Copy failed' })
-    })
-  }
-
-  refreshSectionVisibility()
-  readAll()
-}
-
 // ══════════════════════════════════════
 // MOUNT
 // ══════════════════════════════════════
@@ -2514,8 +2310,7 @@ onMounted(async () => {
   window.addEventListener('hashchange', focusReportHash)
   focusReportHash()
 
-  // Wire up scenario strip + paint picker after DOM is mounted
+  // Wire up scenario strip after DOM is mounted
   initScenarioStrip()
-  initPaintPicker()
 })
 </script>
diff --git a/src/styles.css b/src/styles.css
index 729c15f..418230f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1562,79 +1562,6 @@ body.results-active .site-header::after {
 /* Country/region indicator hidden — not needed in this build. */
 #region-indicator { display: none !important; }
 
-/* ── Paint variants (ported from paint.html for in-page experimentation) ── */
-body.paint-green .hero h1.paint-3d {
-  background: #2a3010;
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-body.paint-green .cta-btn::before {
-  background: #2a3010;
-}
-body.paint-white .hero h1.paint-3d {
-  filter: url(#paintGlossWhite);
-  -webkit-filter: url(#paintGlossWhite);
-  background: #F0F0F0;
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-body.paint-white .cta-btn { color: #1A1A18; }
-body.paint-white .cta-btn:hover { color: #060604; }
-body.paint-white .cta-btn::before {
-  background: #F0F0F0;
-  filter: url(#paintGlossWhiteBtn);
-  -webkit-filter: url(#paintGlossWhiteBtn);
-}
-
-/* Header / quiz-progress-bar logos follow the active paint colour so
-   the small wordmark stays in sync with the hero as the user plays
-   with the modifier. Reads --mod-fill (set by the fill picker) and
-   falls back to the variant's default. White paint is intentionally
-   excluded — a near-white logo would vanish against the light
-   site-header background. */
-body.paint-green .logo,
-body.paint-green .qpb-logo {
-  color: var(--mod-fill, #2a3010);
-}
-
-/* Paint picker UI — top-right swatches */
-.paint-picker { display: flex; gap: 8px; align-items: center; }
-.paint-swatch {
-  width: 28px; height: 28px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  cursor: pointer;
-  padding: 0;
-  transition: transform 0.15s ease;
-}
-.paint-swatch:hover { transform: scale(1.08); }
-.paint-swatch.swatch-dark  { background: linear-gradient(180deg, #2a2a26, #060604); }
-.paint-swatch.swatch-green { background: #2a3010; }
-.paint-swatch.swatch-white { background: linear-gradient(180deg, #FFFFFF, #DDDDDD); }
-.paint-swatch.active {
-  outline: 2px solid var(--red);
-  outline-offset: 2px;
-}
-
-/* Modifier toggle ⚙ — wears the same white-paint look as the lang-toggle */
-/* Hidden for now — styles preserved so we can re-enable the modifier
-   panel later by removing this single rule. */
-.mod-open-btn { display: none !important; }
-.mod-open-btn {
-  background: #F0F0F0;
-  border: 1px solid rgba(0,0,0,0.06);
-  border-radius: 4px;
-  box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
-  width: 28px; height: 28px;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  padding: 0;
-  color: var(--text-dim);
-  transition: var(--trans);
-}
-.mod-open-btn:hover { color: var(--text); }
-
 /* Quiz progress bar — flex row with logo (left), progress (center), lang (right).
    Logo matches the site-header .logo: same 20px DM Serif Display. */
 .quiz-progress-bar { display: flex; align-items: center; gap: 16px; }
@@ -1689,88 +1616,6 @@ body.paint-green .qpb-logo {
 .q-opt:hover { border-color: rgba(0,0,0,0.12) !important; background: #F4F4F4 !important; }
 .q-opt.selected { border-color: var(--red) !important; }
 
-/* Modifier panel — hidden by default, opens when body has .mod-open */
-.mod-panel {
-  position: fixed;
-  top: 72px;
-  right: 12px;
-  width: 280px;
-  max-height: calc(100dvh - 84px);
-  overflow-y: auto;
-  background: rgba(255,255,255,0.96);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
-  z-index: 200;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  padding: 8px;
-  display: none;
-}
-body.mod-open .mod-panel { display: block; }
-.mod-header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 8px;
-}
-.mod-header h3 {
-  font-family: var(--font-display);
-  font-size: 14px; font-weight: 400; margin: 0;
-}
-.mod-paint-label {
-  font-family: var(--font-mono); font-size: 10px;
-  color: var(--red); letter-spacing: 0.1em;
-  text-transform: uppercase; margin-left: 8px;
-}
-.mod-toggle {
-  background: none; border: 1px solid var(--border); border-radius: 3px;
-  width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1;
-  padding: 0;
-}
-.mod-fieldset {
-  border: 1px solid var(--border); border-radius: 4px;
-  padding: 6px 8px; margin: 0 0 8px;
-}
-.mod-fieldset legend {
-  padding: 0 4px;
-  font-weight: 600; font-size: 10px;
-  letter-spacing: 0.05em; text-transform: uppercase;
-  color: var(--text-dim);
-}
-.mod-row {
-  display: grid;
-  grid-template-columns: 56px 1fr 38px;
-  gap: 6px; align-items: center; margin: 4px 0;
-}
-.mod-row > span:first-child {
-  font-size: 10px; color: var(--text-dim);
-}
-.mod-row input[type="range"] { width: 100%; }
-.mod-row input[type="color"] {
-  width: 100%; height: 22px; padding: 0;
-  border: 1px solid var(--border); border-radius: 3px;
-  grid-column: 2 / span 2;
-}
-.mod-row output {
-  font-size: 10px; text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-.mod-actions {
-  display: flex; align-items: center; gap: 8px;
-  padding-top: 8px; border-top: 1px solid var(--border);
-}
-.mod-actions button {
-  flex: 1; padding: 6px 12px;
-  background: var(--red); color: #fff;
-  border: none; border-radius: 3px; cursor: pointer;
-  font-family: var(--font-mono); font-size: 11px;
-  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
-}
-.mod-copy-status {
-  font-size: 10px; color: var(--green); white-space: nowrap;
-}
-.mod-fieldset[data-hide] { display: none; }
 .capture-label{font-family:var(--font-mono);font-size:10px;color:var(--red);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:12px;display:block;}
 .capture-title{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--white);margin-bottom:6px;}
 .capture-sub{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:20px;}