/* =====================================================================
   GoodWe Support Flowchart — design system
   Presentation only: the wizard engine (goodwe_support_flowchart.html)
   renders the same markup as before; everything visual lives here.
   Sections: 1 tokens · 2 base · 3 app bar · 4 components ·
   5 identification pages · 6 workspace · 7 flowchart · 8 manual tab ·
   9 motion · 10 responsive · 11 print
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand: refined GoodWe red, used for primary actions and the current step only */
  --brand:#c8102e; --brand-strong:#a50d26; --brand-soft:#fdf1f2; --brand-line:#f3c6cd; --brand-ring:rgba(200,16,46,.18);
  /* warm neutrals */
  --bg:#f6f4f1; --surface:#fff; --surface-2:#fbfaf8; --surface-3:#f2efeb; --line:#e8e4de; --line-strong:#d8d2ca;
  --ink:#24211d; --text:#2b2824; --text-2:#55504a; --muted:#7a736b;
  /* semantic colours: meaning, never decoration */
  --success:#1d7a4c; --success-soft:#ebf6f0; --success-line:#bfe2cd;
  --warning:#9a5a06; --warning-soft:#fdf5e8; --warning-line:#f2d6a6;
  --danger:#b42318; --danger-soft:#fdeeec; --danger-line:#f4c7c1;
  --info:#1f5fad; --info-soft:#eef4fb; --info-line:#c7dbf2;
  /* legacy aliases (used by older inline markup) */
  --blue:var(--info); --blue-soft:var(--info-soft); --blue-dark:var(--ink); --green:var(--success); --green-soft:var(--success-soft);
  --orange:var(--warning); --orange-soft:var(--warning-soft); --red:var(--danger); --red-soft:var(--danger-soft); --purple:var(--text-2); --purple-soft:var(--surface-3);
  --card:var(--surface);
  /* shape, depth, type */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --radius:var(--r);
  --shadow-1:0 1px 2px rgba(36,33,29,.05);
  --shadow-2:0 1px 2px rgba(36,33,29,.04),0 4px 14px rgba(36,33,29,.06);
  --shadow-3:0 2px 4px rgba(36,33,29,.05),0 10px 28px rgba(36,33,29,.10);
  --shadow:var(--shadow-2);
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --fast:140ms; --base:200ms;
  /* icons (24px, 2px stroke), drawn with mask-image in currentColor */
  --i-scan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M8 8v8M12 8v8M16 8v8'/%3E%3C/svg%3E");
  --i-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3Ccircle cx='17.5' cy='16.5' r='3'/%3E%3Cpath d='m20 19 2 2'/%3E%3C/svg%3E");
  --i-power:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.77.04'/%3E%3C/svg%3E");
  --i-zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  --i-chip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E");
  --i-wifi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01'/%3E%3C/svg%3E");
  --i-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
  --i-battery:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2'/%3E%3Cpath d='M22 11v2M6 11v2M10 11v2'/%3E%3C/svg%3E");
  --i-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  --i-network:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8'/%3E%3C/svg%3E");
  --i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  --i-settings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-9M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E");
  --i-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  --i-clipboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --i-flow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M6.5 10v4a3 3 0 0 0 3 3H14'/%3E%3C/svg%3E");
  --i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:650;letter-spacing:-.01em}
h1{margin:0;font-size:17px;line-height:1.2}
h2{margin:0 0 8px;font-size:20px;line-height:1.25}
h3{margin:0 0 8px;font-size:15px;line-height:1.3}
h4{margin:0 0 6px;font-size:13px;color:var(--text-2)}
p{margin:0 0 10px;line-height:1.5}
a{color:var(--info)}
ul,ol{margin:6px 0 0;padding-left:20px}
li{margin:0 0 5px;line-height:1.45}
strong{font-weight:650}
.small{color:var(--muted);font-size:13px;line-height:1.45}
.muted{color:var(--muted);font-weight:400}
.mono{font-family:var(--mono);font-variant-ligatures:none}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brand-soft);color:var(--ink)}
main{max-width:1640px;margin:0 auto;padding:16px 20px 40px}
.layout{display:block}
.legacy-controls,.side{display:none!important} /* the old sidebar only feeds the engine */
.icon{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* ---------- 3. App bar ---------- */
.appbar{position:relative;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}
.appbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand)}
.appbar-inner{max-width:1640px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:34px;height:34px;flex:none;border-radius:9px;background:var(--brand);display:grid;place-items:center;box-shadow:0 1px 2px rgba(165,13,38,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.brand-mark::before{content:"";width:18px;height:18px;background:#fff;-webkit-mask:var(--i-zap) center/contain no-repeat;mask:var(--i-zap) center/contain no-repeat}
.brand-text{display:grid;gap:1px;min-width:0}
.brand-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.header-rma{text-decoration:none}
.header-rma::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;order:2}


/* ---------- 4. Components ---------- */
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;user-select:none;box-shadow:var(--shadow-1);transition:background-color var(--fast) ease,border-color var(--fast) ease,color var(--fast) ease,box-shadow var(--fast) ease,transform var(--fast) ease}
.btn:hover{background:var(--surface-2);border-color:var(--muted);text-decoration:none}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(165,13,38,.3)}
.btn.primary:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.small-btn{min-height:28px;padding:4px 10px;font-size:12px;border-radius:7px}
/* back buttons get an arrow */
#backToScenariosBtn,#backToSerialBtn,.btn[data-action="back-to-identify"],.btn[data-action="identify-another"]{color:var(--text-2)}
#backToScenariosBtn::before,#backToSerialBtn::before,.btn[data-action="back-to-identify"]::before,.btn[data-action="identify-another"]::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--i-back) center/contain no-repeat;mask:var(--i-back) center/contain no-repeat}
/* links to the manuals and external documents */
a.btn[href*="handleiding"]::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--i-book) center/contain no-repeat;mask:var(--i-book) center/contain no-repeat}
a.btn[href^="goodwe_support_flowchart.html"]::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--i-flow) center/contain no-repeat;mask:var(--i-flow) center/contain no-repeat}
a.btn[target="_blank"]::after{content:"";width:12px;height:12px;flex:none;opacity:.6;background:currentColor;-webkit-mask:var(--i-external) center/contain no-repeat;mask:var(--i-external) center/contain no-repeat}

.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.between{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}

/* inputs */
label{display:block;font-weight:650;font-size:13px;margin:0 0 6px}
select,input{width:100%;min-height:38px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);outline:none;transition:border-color var(--fast) ease,box-shadow var(--fast) ease}
input::placeholder{color:#a49c93}
select:hover,input:hover{border-color:var(--muted)}
select:focus,input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
input[type="search"]{padding-left:36px;background:var(--surface) no-repeat 12px center/16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a736b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}

/* chips: neutral context labels (model, type, phase, category, chosen answer) */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;margin:2px 4px 2px 0;border:1px solid var(--line);border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:12px;font-weight:600;line-height:1.6}
.pill.blue,.pill.green,.pill.orange,.pill.purple{background:var(--surface-3);border-color:var(--line);color:var(--text-2)}
.tag{display:inline-block;padding:1px 7px;border-radius:var(--r-xs);font-size:11px;font-weight:650;border:1px solid var(--line);background:var(--surface-3);color:var(--text-2);vertical-align:middle}
.tag.green{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.tag.orange{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.tag.red{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.tag.blue{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.tag.purple{background:var(--surface-3);color:var(--text-2)}

/* segmented tabs (Flowchart / Handleiding, code categories) */
.tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;margin:0 0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-3)}
.tab{border:0;background:transparent;color:var(--text-2);border-radius:8px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color var(--fast) ease,color var(--fast) ease,box-shadow var(--fast) ease}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.tab.active,.serial-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(36,33,29,.08),0 0 0 1px var(--line)}

/* panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:18px}
#app{min-height:320px}
#app:has(.ws),#app:has(.start-screen){background:transparent;border:0;box-shadow:none;padding:0}
.mini{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:12px 14px;margin-bottom:12px}
.mini>:last-child{margin-bottom:0}
.mini h3{font-size:14px}
.mini a,.outcome-box a,.guide-links a{color:var(--info);font-weight:600;text-decoration:none}
.mini a:hover,.outcome-box a:hover,.guide-links a:hover{text-decoration:underline}
.mini a.btn,.outcome-box a.btn{text-decoration:none}
.mini a.btn.primary,.outcome-box a.btn.primary{color:#fff}
.mini a.btn:not(.primary),.outcome-box a.btn:not(.primary){color:var(--ink)}
/* semantic panels */
.warning{background:var(--warning-soft);border-color:var(--warning-line);color:#5c3a0b}
.error{background:var(--danger-soft);border-color:var(--danger-line);color:#7a1d15}
.mini.warning,.mini.error,.start-panel.warning{padding-left:44px}
.mini.warning::before,.mini.error::before,.start-panel.warning::before{content:"";position:absolute;left:15px;top:14px;width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.mini.warning::before,.start-panel.warning::before{color:var(--warning)}
.mini.error::before{color:var(--danger)}
.warning h3,.error h3,.error h2{color:inherit}
.section{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.two>.mini,.three>.mini{margin-bottom:0}

/* tables and key/value data */
.kv{display:grid;grid-template-columns:minmax(118px,48%) 1fr;gap:0;margin:0;font-size:13px}
.kv dt,.kv dd{padding:5px 0;border-top:1px solid var(--surface-3)}
.kv dt:first-of-type,.kv dd:first-of-type{border-top:0}
.kv dt{color:var(--muted);font-size:12.5px;padding-right:8px;overflow-wrap:break-word;hyphens:auto}
.kv dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.kv dd .mono{font-size:12.5px;letter-spacing:.03em;background:var(--surface-3);border-radius:5px;padding:1px 5px}
.kv-note{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;border-top:1px solid var(--surface-3);padding:5px 0}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:0}
.spec-table th{color:var(--muted);font-weight:400;width:56%;padding-right:10px}
.spec-table td{font-weight:600;color:var(--ink)}
.spec-list{margin:0;padding-left:14px}
.spec-list li{margin:0 0 1px;line-height:1.35}
.prov-table{width:100%;border-collapse:collapse;font-size:13px}
.prov-table th,.prov-table td{text-align:left;vertical-align:top;border-top:1px solid var(--line);padding:7px 6px}
.prov-table th{width:32%;color:var(--text-2)}

/* loading state (shown until the engine renders) */
.app-loading{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.app-loading h2{font-size:15px;margin:0}
.app-loading p{margin:2px 0 0}
.spinner{width:22px;height:22px;flex:none;border-radius:50%;border:2.5px solid var(--brand-soft);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 5. Identification pages (choice, serial, manual selection) ---------- */
.start-screen{display:grid;gap:14px;max-width:1080px;margin:8px auto 0}
.start-screen.manual-page{max-width:1280px}
.start-panel{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:22px 24px;box-shadow:var(--shadow-2)}
.start-panel>.between h2,.start-panel>h2{font-size:22px;margin-bottom:4px}
.start-panel.warning{box-shadow:none}
.id-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.id-card{position:relative;display:grid;grid-template-columns:44px 1fr 20px;grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;align-items:start;text-align:left;font:inherit;color:inherit;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:20px;cursor:pointer;transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease),background-color var(--base) var(--ease),transform var(--base) var(--ease)}
.id-card::before{content:"";grid-row:1/3;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)}
.id-card::after{content:"";grid-column:3;grid-row:1;align-self:center;width:18px;height:18px;background:var(--muted);-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;transition:transform var(--base) var(--ease),background-color var(--base) ease}
.id-card strong{grid-column:2;font-family:var(--font-display);font-size:17px;font-weight:650;color:var(--ink)}
.id-card span{grid-column:2/4;color:var(--text-2);line-height:1.5;font-size:13.5px}
.id-card:hover{border-color:var(--brand-line);background:var(--surface);box-shadow:var(--shadow-3);transform:translateY(-1px)}
.id-card:hover::after{transform:translateX(3px);background:var(--brand)}
/* icon tiles: the tile is ::before, the icon is drawn on strong::before */
.id-card[data-action="choose-serial"]{--tile:var(--i-scan)}
.id-card[data-action="choose-manual"]{--tile:var(--i-list)}
.id-card>strong::before{content:"";position:absolute;left:31px;top:31px;width:22px;height:22px;background:var(--brand);-webkit-mask:var(--tile) center/contain no-repeat;mask:var(--tile) center/contain no-repeat}

.serial-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:16px}
.serial-form input{flex:1 1 300px;min-height:54px;font-family:var(--mono);font-size:22px;letter-spacing:.14em;padding:12px 16px;text-transform:uppercase;font-variant-ligatures:none}
.serial-form .btn{min-height:54px;font-size:14px;padding:12px 20px}
.serial-count{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.serial-count.bad{color:var(--danger)}
.serial-count.good{color:var(--success)}
.serial-count.good::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.serial-tabs{margin:14px 0 12px}
.serial-panel{display:none}
.serial-panel.active{display:block}
#manualSearch{margin-top:14px;max-width:520px}
.manual-empty{margin:10px 2px 0}

/* choice cards: codes, series, problems */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:10px}
.choice-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:72px;text-align:left;font:inherit;color:var(--text-2);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 12px;cursor:pointer;transition:border-color var(--fast) ease,box-shadow var(--fast) ease,background-color var(--fast) ease,transform var(--fast) ease}
.choice-btn:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.choice-btn:active{transform:none;box-shadow:none}
.choice-btn.selected{border-color:var(--ink);background:var(--surface-2)}
.choice-btn strong{display:block;color:var(--ink);font-size:14px;font-weight:650;line-height:1.3}
.choice-btn span{display:block;font-size:12px;line-height:1.35;color:var(--muted)}
.choice-btn.serial-code strong{font-family:var(--mono);font-size:15px;letter-spacing:.04em}
.choice-btn .model-tag{display:inline;font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--text-2)}
.serial-note{display:inline-flex!important;margin-top:4px;padding:2px 7px;border-radius:var(--r-xs);background:var(--warning-soft);border:1px solid var(--warning-line);color:var(--warning)!important;font-size:11px!important;font-weight:650;line-height:1.35}

/* ---------- 6. Workspace (identity · centre · product) ---------- */
.ws{display:grid;grid-template-columns:minmax(0,24fr) minmax(0,52fr) minmax(0,24fr);gap:14px;align-items:start}
.ws-col,.ws-center{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);min-width:0}
.ws-col{padding:14px 16px}
.ws-center{padding:18px 20px 20px;min-height:320px}
.ws-side{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.ws-side::-webkit-scrollbar{width:8px}
.ws-side::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid var(--surface)}
/* side panel section titles: quiet eyebrow labels */
.ws-side .ws-title{display:flex;align-items:center;gap:6px;margin:2px 0 8px;font-family:var(--font);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ws-sub{margin:12px 0 4px;font-family:var(--font);font-size:12px;font-weight:650;color:var(--text-2)}
.ws-sep{border:0;border-top:1px solid var(--line);margin:14px -16px}
.ws-side ul:not(.doc-list):not(.fw-list):not(.ov-notes):not(.spec-list){margin:2px 0 6px;padding-left:16px;font-size:12.5px;color:var(--text-2)}
.ws-side ul li{margin-bottom:1px}
.ws-side .small{font-size:12.5px}
.ov-notes{margin:10px 0 0;padding:8px 10px 8px 28px;border:1px solid var(--warning-line);border-radius:var(--r-sm);background:var(--warning-soft);color:#5c3a0b}
.ov-notes li{font-size:12.5px;margin-bottom:2px}
.pick{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-strong)}
.pick .small strong{color:var(--text-2);font-weight:650}
.pick-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pick-btn{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;padding:4px 9px;font:inherit;font-size:12px;font-weight:650;color:var(--ink);cursor:pointer;transition:border-color var(--fast) ease,background-color var(--fast) ease,box-shadow var(--fast) ease}
.pick-btn span{font-weight:400;color:var(--muted)}
.pick-btn:hover{border-color:var(--muted);background:var(--surface-2)}
.pick-btn.selected{border-color:var(--ink);background:var(--ink);color:#fff}
.pick-btn.selected span{color:rgba(255,255,255,.75)}
.prod{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;font-size:13px}
.prod strong{color:var(--ink)}
.prod-img{width:72px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:4px}
.doc-list,.fw-list{list-style:none;margin:0;padding:0;font-size:13px}
.doc-list li,.fw-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;padding:6px 0;margin:0;border-top:1px solid var(--surface-3)}
.doc-list li:first-child,.fw-list li:first-child{border-top:0}
.doc-list a,.fw-list a{display:inline-flex;align-items:center;gap:5px;color:var(--info);font-weight:600;text-decoration:none}
.doc-list a:hover,.fw-list a:hover{text-decoration:underline}
.doc-list a[target="_blank"]::after,.fw-list a[target="_blank"]::after{content:"";width:11px;height:11px;flex:none;opacity:.55;background:currentColor;-webkit-mask:var(--i-external) center/contain no-repeat;mask:var(--i-external) center/contain no-repeat}
.doc-list li>span:first-child{color:var(--text-2)}
.fw-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;margin:6px 0}
.fw-row>strong{min-width:64px;font-size:12px;color:var(--text-2)}
.fw-row .small{flex-basis:100%;padding-left:72px;margin-top:-2px}
.fw-list{margin:2px 0 8px;padding-left:10px;border-left:2px solid var(--line)}
.ws-side .small.muted a{color:var(--info);font-weight:600;text-decoration:none}

/* centre: headings and the problem cards */
.ws-center>.between{margin-bottom:12px!important;align-items:flex-start}
.ws-center>.between h2.ws-title{margin:0!important;font-size:20px}
.ws-center>.between h2:not(.ws-title){font-size:22px;margin-bottom:6px}
.ws-center>.between>div>.pill:first-of-type{background:var(--ink);border-color:var(--ink);color:#fff}
.ws-center>.small{margin:-4px 0 4px}
.ws-center>.small strong{color:var(--ink)}
/* scenario intro: guidance in a quiet info panel */
.ws-center>.between+.mini{background:var(--info-soft);border-color:var(--info-line);color:#1d3b63;padding-left:42px}
.ws-center>.between+.mini::before{content:"";position:absolute;left:14px;top:13px;width:17px;height:17px;background:var(--info);-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.scenario-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px;align-items:stretch;margin-top:12px}
/* Problem cards: every card in a row is as tall as the tallest (grid stretch); content starts at the top, nothing is clipped */
.choice-btn.scenario-choice{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-self:stretch;gap:4px;min-height:0;padding:14px 16px 14px;overflow:visible;border-radius:var(--r)}
.choice-btn.scenario-choice::before{content:"";width:34px;height:34px;margin-bottom:6px;border-radius:10px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--fast) ease,box-shadow var(--fast) ease}
.choice-btn.scenario-choice::after{content:"";position:absolute;left:16px;top:14px;width:34px;height:34px;background:var(--text-2);-webkit-mask:var(--sc-icon,var(--i-flow)) center/18px no-repeat;mask:var(--sc-icon,var(--i-flow)) center/18px no-repeat;transition:background-color var(--fast) ease}
.choice-btn.scenario-choice strong{margin:0;font-size:14.5px;font-weight:650;line-height:1.35;overflow-wrap:break-word}
.choice-btn.scenario-choice span{font-size:12.5px;line-height:1.35;overflow-wrap:break-word}
.choice-btn.scenario-choice:hover{border-color:var(--brand-line);box-shadow:var(--shadow-3)}
.choice-btn.scenario-choice:hover::before{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)}
.choice-btn.scenario-choice:hover::after{background:var(--brand)}
[data-scenario="PV_NO_START"]{--sc-icon:var(--i-power)}
[data-scenario="HYBRID_NO_START"]{--sc-icon:var(--i-power)}
[data-scenario="GRID_ISO_DC_RELAY_WAITING"]{--sc-icon:var(--i-zap)}
[data-scenario="FIRMWARE"]{--sc-icon:var(--i-chip)}
[data-scenario="MONITORING"]{--sc-icon:var(--i-wifi)}
[data-scenario="EXPORT_LIMIT"]{--sc-icon:var(--i-gauge)}
[data-scenario="BATTERY_BACKUP_METER_COMPACT"]{--sc-icon:var(--i-battery)}
[data-scenario="BATTERY_FUNCTIONS"]{--sc-icon:var(--i-sliders)}
[data-scenario="HOME_ASSISTANT"]{--sc-icon:var(--i-network)}
[data-scenario="WL2_INTERNET"]{--sc-icon:var(--i-wifi)}
[data-scenario="WL2_LED"]{--sc-icon:var(--i-info)}
[data-scenario="WL2_RELOAD"]{--sc-icon:var(--i-power)}
[data-scenario="WL2_BLUETOOTH"]{--sc-icon:var(--i-phone)}
[data-scenario="SEMS_OWNER"]{--sc-icon:var(--i-phone)}
[data-scenario="OMVORMER_OPTIONS"]{--sc-icon:var(--i-settings)}

/* ---------- 7. Flowchart: a vertical timeline of typed step cards ---------- */
/* question  = neutral card; current question = brand accent; answered = compact, ink number
   outcome   = info panel; cause found = success; "Kom je er niet uit?" = warning; escalation = danger accent */
.flowbox{position:relative;display:grid;gap:10px;margin-top:4px;padding-left:44px}
.flowbox::before{content:"";position:absolute;left:15px;top:20px;bottom:22px;width:2px;border-radius:2px;background:linear-gradient(var(--line-strong),var(--line-strong)) no-repeat;opacity:.9}
.node{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px;transition:border-color var(--base) ease,box-shadow var(--base) ease,background-color var(--base) ease}
.node-title{display:flex;gap:10px;align-items:flex-start}
.node-title strong{display:block;color:var(--ink);font-size:14.5px;font-weight:650;line-height:1.4}
.node-title p.small{margin:3px 0 0}
.num{width:32px;height:32px;min-width:32px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--text-2);border:1.5px solid var(--line-strong);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color var(--base) ease,border-color var(--base) ease,color var(--base) ease,box-shadow var(--base) ease}
.flowbox>.node .num{position:absolute;left:-45px;top:9px;box-shadow:0 0 0 4px var(--surface)}
.flowbox>.node .node-title{gap:0}
/* answered question */
.node.active:has(.answer-grid){background:var(--surface)}
.node.active:has(.answer-grid) .num{background:var(--ink);border-color:var(--ink);color:#fff}
/* current question: the one waiting for an answer */
.node:not(.active){border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-ring),var(--shadow-2)}
.node:not(.active) .num{background:var(--brand);border-color:var(--brand);color:#fff}
.flowbox>.node:not(.active) .num{box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--brand-ring)}
.node:not(.active) .node-title>div:not(.num)::before{content:"Huidige vraag";display:block;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand)}
.step-ref{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin:6px 0 0;padding:4px 9px;border-radius:var(--r-sm);background:var(--surface-3);font-size:12.5px;color:var(--text-2)}
.step-ref strong{display:inline;color:var(--ink);font-size:13px}

/* answer options: radio-like buttons */
.answer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;margin-top:10px}
.answer{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px 8px 36px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;line-height:1.35;text-align:left;cursor:pointer;transition:border-color var(--fast) ease,background-color var(--fast) ease,box-shadow var(--fast) ease,color var(--fast) ease,opacity var(--fast) ease}
.answer::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);transition:border-color var(--fast) ease,background-color var(--fast) ease,box-shadow var(--fast) ease}
.answer:hover{border-color:var(--ink);background:var(--surface-2)}
.answer:hover::before{border-color:var(--ink)}
.answer.selected{border-color:var(--ink);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--ink)}
.answer.selected::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--surface)}
/* once answered, the other options step back (still clickable to change the answer) */
.answer-grid:has(.answer.selected) .answer:not(.selected){color:var(--muted);border-color:var(--line);background:var(--surface)}
.answer-grid:has(.answer.selected) .answer:not(.selected)::before{border-color:var(--line)}
.answer-grid:has(.answer.selected) .answer:not(.selected):hover{color:var(--ink);border-color:var(--ink)}

/* outcome panels */
.outcome-box{position:relative;border:1px solid var(--info-line);border-radius:var(--r);background:var(--info-soft);padding:11px 14px;color:#1d3b63}
.outcome-box p{margin:6px 0 0}
.outcome-box>p:first-of-type{margin-top:4px}
.outcome-box h3{margin:0 0 2px;color:inherit}
.outcome-box ul{margin-top:6px}
.flowbox>.outcome-box{margin:0}
.flowbox>.outcome-box::before{content:"";position:absolute;left:-34px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--info);box-shadow:0 0 0 3px var(--surface)}
.outcome-box p>strong:first-child{color:var(--info)}
.outcome-box .row{margin-top:10px!important}
/* cause or next action found (terminal answer) */
.outcome-box[style]{border:1px solid var(--success-line)!important;background:var(--success-soft)!important;color:#174d33;padding:14px 16px 14px 48px}
.outcome-box[style]::after{content:"";position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:50%;background:var(--success)}
.outcome-box[style] h3{color:var(--success);font-size:15px}
.outcome-box[style] h3::before{content:"";position:absolute;left:19px;top:19px;width:12px;height:12px;background:#fff;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat;z-index:1}
.flowbox>.outcome-box[style]::before{background:var(--success)}
/* "Kom je er niet uit?" and follow-up routes */
.outcome-box.warning{border-color:var(--warning-line);background:var(--warning-soft);color:#5c3a0b}
.flowbox>.outcome-box.warning::before{background:var(--warning)}
.outcome-box.warning .section{border-top-color:var(--warning-line)}
.node.active:has(+.outcome-box.warning) .num{background:var(--warning-soft);border-color:var(--warning);color:var(--warning)}
/* escalation: what to collect before passing the case on */
.outcome-box:not(.warning):not([style]):has(>h3){border-color:var(--line);background:var(--surface-2);color:var(--text)}
.outcome-box:not(.warning):not([style]):has(>h3) h3{color:var(--ink)}
.flowbox>.outcome-box:not(.warning):not([style]):has(>h3)::before{background:var(--danger)}
.node.active:not(:has(.answer-grid)):not(:has(+.outcome-box.warning)) .num{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.outcome-box:not(.warning):not([style]):has(>h3) ul{list-style:none;padding-left:0}
.outcome-box:not(.warning):not([style]):has(>h3) li{position:relative;padding-left:24px}
.outcome-box:not(.warning):not([style]):has(>h3) li::before{content:"";position:absolute;left:2px;top:3px;width:12px;height:12px;border:1.5px solid var(--line-strong);border-radius:3px;background:var(--surface)}
.outcome-box .pill.purple{margin:6px 0 2px}
/* end-of-flow sections (practical actions, safe order) */
.two>.mini:nth-child(2){background:var(--warning-soft);border-color:var(--warning-line);color:#5c3a0b}
.section>.node{margin-bottom:10px}

/* ---------- 8. Manual tab ---------- */
.guide-list{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none;counter-reset:none}
.guide-list li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:8px 12px;margin:0;line-height:1.45}
.guide-list li>strong:first-child{flex:none;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;border-radius:6px;background:var(--surface-3);color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
.guide-links{display:grid;gap:6px;margin-top:8px}
.guide-links a{display:inline-flex;align-items:center;gap:6px}
.guide-links a::after{content:"";width:11px;height:11px;opacity:.55;background:currentColor;-webkit-mask:var(--i-external) center/contain no-repeat;mask:var(--i-external) center/contain no-repeat}

/* legacy list styles (hidden controls, search results) */
.model-list,.search-results{display:grid;gap:8px;max-height:260px;overflow:auto}
.model-item,.hit{padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.field{margin-bottom:14px}

/* intro video */
.intro-hero{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#1a1714;color:#fff;opacity:1;transform:translateY(0);transition:opacity 260ms ease,transform 260ms ease}
.intro-hero.is-hidden{display:none}
.intro-hero.is-leaving{opacity:0;transform:translateY(-6px);pointer-events:none}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,23,20,.15) 40%,rgba(26,23,20,.55))}
.intro-continue{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);min-width:190px;min-height:46px;border:0;background:var(--brand);color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.28);padding:12px 26px;border-radius:999px;font-size:15px}
.intro-continue::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat}
.intro-continue:hover{background:var(--brand-strong);border:0}
.intro-continue:active{transform:translateX(-50%) translateY(1px)}

/* product photo card (kept for older markup) */
.model-photo-variants{margin-top:10px}
.model-photo-variants strong{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}

/* ---------- 9. Motion (fast, restrained; off for reduced motion) ---------- */
header,main{transition:opacity 180ms ease,transform 180ms ease}
body.page-leaving main{opacity:.6;transform:translateY(4px)}
#app{transform-origin:top center;transition:opacity 120ms ease,transform 120ms ease}
#app.view-exit{opacity:.55;transform:translateY(3px)}
#app.view-enter{animation:appViewIn 200ms var(--ease) both}
#app.animate-content .tabs,#app.animate-content .start-panel,#app.animate-content .ws-center>*,#app.animate-content .ws-col{animation:contentIn 240ms var(--ease) both}
#app.animate-content .ws-col:last-child{animation-delay:30ms}
#app.animate-content .ws-center>*:nth-child(2){animation-delay:15ms}
#app.animate-content .ws-center>*:nth-child(3){animation-delay:30ms}
#app.animate-content .ws-center>*:nth-child(n+4){animation-delay:45ms}
/* steps added by an answer slide in; the rest of the page stays still */
.is-entering{animation:stepIn 260ms var(--ease) both}
.is-entering.enter-d1{animation-delay:40ms}.is-entering.enter-d2{animation-delay:80ms}.is-entering.enter-d3{animation-delay:120ms}.is-entering.enter-d4{animation-delay:160ms}
.answer.selected{animation:answerPick 220ms var(--ease)}
@keyframes appViewIn{from{opacity:.75;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes contentIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes answerPick{0%{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 0 rgba(36,33,29,.18)}100%{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 6px rgba(36,33,29,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .spinner{animation:spin 1.6s linear infinite!important}
  #app,#app.view-exit,body.page-leaving main{transform:none!important}
}

/* ---------- 10. Responsive ---------- */
@media (max-width:1280px){
  .ws{grid-template-columns:minmax(0,27fr) minmax(0,46fr) minmax(0,27fr)}
}
@media (max-width:1100px){
  .ws{grid-template-columns:1fr}
  .ws-side{position:static;max-height:none;overflow:visible}
}
@media (max-width:980px){
  .two,.three{grid-template-columns:1fr}
}
@media (max-width:720px){
  main{padding:12px 12px 32px}
  .appbar-inner{padding:10px 12px}
  .brand-eyebrow{display:none}
  .header-rma{min-height:30px;padding:5px 10px;font-size:12px}
  .start-panel{padding:16px}
  .start-panel>.between h2,.start-panel>h2{font-size:19px}
  .id-choice{grid-template-columns:1fr}
  .serial-form input{font-size:18px;letter-spacing:.1em}
  .serial-form .btn{flex:1 1 100%}
  .ws-center{padding:14px}
  .ws-center>.between h2:not(.ws-title){font-size:19px}
  .flowbox{padding-left:34px}
  .flowbox::before{left:11px}
  .num{width:26px;height:26px;min-width:26px;font-size:12px}
  .flowbox>.node .num{left:-35px;top:10px}
  .flowbox>.outcome-box::before{left:-28px}
  .answer-grid{grid-template-columns:1fr}
  .choice-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .prov-table th,.prov-table td{display:block;width:auto}
}

/* ---------- 10b. Step guidance and handoff (Relay Check Failure flow) ---------- */
.step-guide{display:grid;gap:8px;margin-top:10px}
.step-label{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.step-ask{border-left:3px solid var(--info);background:var(--info-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 12px;color:#1d3b63}
.step-ask .step-label{color:var(--info)}
.step-ask p{margin:0;font-size:14.5px;line-height:1.5}
.step-info{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:8px 12px}
.step-info ul{margin:0;padding-left:18px}
.step-info li{margin:2px 0}
.step-info.step-model{border-color:var(--warning-line);background:var(--warning-soft);color:#5c3a0b}
.step-info.step-model .step-label{color:var(--warning)}
.step-field{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.step-field input{width:110px;flex:0 0 auto}
.step-field input.step-field-wide{width:min(100%,300px)}
.branch-copy{margin-top:12px}
.branch-copy .row{margin:0;align-items:center}
.step-verdict{margin:0;font-size:13px;color:var(--text-2)}
.step-verdict:empty{display:none}
.step-verdict strong{color:var(--danger)}
.step-link{margin:0;align-items:center}
.handoff{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);padding:12px 14px}
.handoff h3{margin:0 0 4px;font-size:15px}
.handoff-model{margin:0 0 10px;font-size:13.5px;color:var(--text-2)}
.handoff-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin-bottom:12px}
.handoff-field{display:block;min-width:0}
.handoff-field.wide{grid-column:1/-1}
.handoff-field>span{display:block;margin-bottom:3px;font-size:12px;font-weight:650;color:var(--text-2)}
.handoff textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);resize:vertical}
.handoff textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.handoff-more{margin-bottom:12px}
.handoff-more summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--text-2);margin-bottom:8px}
.handoff-decision{border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-sm);padding:10px 12px;background:var(--surface-2)}
.handoff-decision h4{margin:0 0 4px;font-size:14.5px;color:var(--ink)}
.handoff-decision p{margin:4px 0}
.handoff-decision ul{margin:2px 0 6px;padding-left:18px}
.handoff-decision .row{align-items:center;margin-top:8px}
.handoff-decision.escalate{border-color:var(--success-line);border-left-color:var(--success);background:var(--success-soft)}
.handoff-decision.request,.handoff-decision.more{border-color:var(--warning-line);border-left-color:var(--warning);background:var(--warning-soft)}
.handoff-text{margin-top:8px;font-family:var(--mono);font-size:12.5px!important}

/* ---------- 10c. PV On-Grid omvormer+ Off-Grid oplossing (scenario.islandCheck) ---------- */
.ws-center>.between+.mini.scenario-notice{background:var(--warning-soft);border-color:var(--warning-line);color:#5c3a0b;padding-left:44px}
.ws-center>.between+.mini.scenario-notice::before{left:15px;top:14px;width:18px;height:18px;background:var(--warning);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.ws-center>.between+.scenario-notice+.mini{background:var(--info-soft);border-color:var(--info-line);color:#1d3b63;padding-left:42px}
.ws-center>.between+.scenario-notice+.mini::before{content:"";position:absolute;left:14px;top:13px;width:17px;height:17px;background:var(--info);-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.node.island-serial-node:not(.active) .num{background:var(--surface);border-color:var(--line-strong);color:var(--ink);box-shadow:none}
.node.island-serial-node:not(.active) .node-title>div:not(.num)::before{content:none}
.step-help{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.step-field input.island-serial{width:min(100%,230px);font-family:var(--mono);letter-spacing:.04em}
.island-lookup:empty{display:none}
.island-lookup .serial-count{margin-top:0}
.island-lookup .answer-grid{margin-top:8px}
.island-match{margin-top:8px}
.island-info{background:var(--info-soft);border-color:var(--info-line);color:#1d3b63}
.island-status{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:0}
.island-status li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;padding:7px 0;border-top:1px solid var(--surface-3);font-size:13.5px}
.island-status li:first-child{border-top:0}
.island-label{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.island-st{font-weight:650;white-space:nowrap;font-size:12.5px;border-radius:999px;padding:2px 9px;border:1px solid var(--line)}
.island-st.yes{background:var(--success-soft);border-color:var(--success-line);color:var(--success)}
.island-st.no{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.island-st.unknown{background:var(--surface-2);color:var(--text-2)}
.island-line{margin:0 0 10px}
.island-reminder{margin-bottom:6px}
@media (max-width:560px){.island-status li{grid-template-columns:30px 1fr}.island-st{grid-column:2;justify-self:start;white-space:normal}}

/* ---------- 11. Print ---------- */
@media print{
  header,.side,.tabs,.notice,.no-print,.intro-hero{display:none!important}
  body{background:#fff}
  main{padding:0}
  .ws{grid-template-columns:1fr}
  .ws-col,.ws-center,.card{border:0;box-shadow:none}
  .ws-side{position:static;max-height:none;overflow:visible}
  #app{min-height:0;transition:none!important;animation:none!important;transform:none!important}
  .node,.outcome-box{break-inside:avoid}
}

/* local integration advice banner (scenario HOME_ASSISTANT) */
.local-advice{background:var(--info-soft);border:1px solid var(--info-line);border-radius:12px;padding:14px 16px;margin:0 0 14px;color:#1d3b63}
.local-advice h3{margin:0 0 8px;font-size:15px}
.local-advice .kv{margin:0 0 8px}
.local-points{margin:8px 0;padding-left:20px}
.local-points li{margin:6px 0}
.local-points p{margin:2px 0}
.local-points ul{margin:2px 0 0;padding-left:18px}
.local-compat{margin-top:8px;font-size:13px}
.local-compat summary{cursor:pointer;font-weight:600}

/* scenario video (WiFi/LAN 2.0) */
.scenario-video{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface-2,#fff)}
.scenario-video summary{cursor:pointer;font-weight:600;font-size:14px}
.scenario-video video{display:block;width:100%;max-height:420px;margin-top:8px;border-radius:8px;background:#000}

/* cross-references to GoodWe sources (data/crossref.js): extra documents, component guides, videos, photos */
.doc-more{margin-top:8px;font-size:13px}
.doc-more>summary{cursor:pointer;font-weight:600;color:var(--text-2)}
.doc-more .scenario-video{margin:8px 0 0}
.doc-variant{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:12px;font-weight:600}
.doc-note{flex-basis:100%}
.prod-extra{margin-top:10px;font-size:13px}
.prod-extra-set{margin:6px 0 0}
.prod-extra-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prod-extra-row img{width:100%;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:3px}
.prod-extra-set figcaption{margin-top:2px;color:var(--text-2)}
.step-more{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.step-more>summary{cursor:pointer;font-weight:600}
.step-more ul{margin:6px 0 0 18px;padding:0}

/* check code in the identified-inverter panel and the header links */
.appbar-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kv .check-val{font-variant-numeric:tabular-nums}
.copy-icon{display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-left:8px;padding:0;border:0;border-radius:4px;background:var(--muted);cursor:pointer;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center/contain no-repeat}
.copy-icon:hover,.copy-icon:focus-visible{background:var(--ink)}
.copy-icon.copied{background:var(--success)}
.copy-icon.copy-failed{background:var(--danger)}

/* component names in the compatibility panel that link to the Product Catalog */
.catalog-links a.catalog-link{color:var(--info);font-weight:600;text-decoration:none}
.catalog-links a.catalog-link:hover{text-decoration:underline}