/* Basis */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: werkbank per Indus-partner — profielvoorbeeld links als het "document", instelpaneel rechts als gereedschap; presentatiemodus toont alleen het profiel */
:root{
  --bg:#e9ecef; --surface:#ffffff; --card:#ffffff; --fg:#1d2226; --muted:#5f6871; --line:#d9dee3;
  --tool:#05326e; --tool-ink:#ffffff; --tool-soft:#e3e9f3;
  --chip:#e8e9eb; --chip:#e8e9eb; --link:#0b63b8; --btn:#0b63b8; --btn-ink:#ffffff; --ok:#1e7a4c; --warn:#a2560d;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-bg:#1d2226; --t-ink:#ffffff; --t-ok:#62c48f; --t-warn:#f0b06a; --danger:#b42318;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Space Grotesk","Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1114; --surface:#161a1f; --card:#1b1f24; --fg:#e7eaed; --muted:#9aa4ae; --line:#2b3238;
  --tool:#7fb7da; --tool-ink:#0e1114; --tool-soft:#1c2a33;
  --chip:#2f363d; --chip:#2f363d; --link:#71b7fb; --btn:#71b7fb; --btn-ink:#0e1114; --ok:#62c48f; --warn:#e3a35d; color-scheme:dark;
  --t-bg:#e7eaed; --t-ink:#0e1114; --t-ok:#1e7a4c; --t-warn:#a2560d; --danger:#f97066}}
:root[data-theme="dark"]{
  --bg:#0e1114; --surface:#161a1f; --card:#1b1f24; --fg:#e7eaed; --muted:#9aa4ae; --line:#2b3238;
  --tool:#7fb7da; --tool-ink:#0e1114; --tool-soft:#1c2a33;
  --chip:#2f363d; --chip:#2f363d; --link:#71b7fb; --btn:#71b7fb; --btn-ink:#0e1114; --ok:#62c48f; --warn:#e3a35d; color-scheme:dark;
  --t-bg:#e7eaed; --t-ink:#0e1114; --t-ok:#1e7a4c; --t-warn:#a2560d; --danger:#f97066}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font-ui)}
body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--tool);outline-offset:2px}

/* Topbalk */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:14px;border-bottom:1px solid var(--line);margin-bottom:20px}
/* smal scherm: de balk loopt over meerdere regels en zou te veel ruimte innemen, dus scrolt hij mee */
@media (max-width:700px){.top{position:static}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.brand{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:-.01em;margin-right:8px;display:flex;align-items:baseline;gap:10px}
.brand small{font-family:var(--font-ui);font-weight:500;font-size:12px;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.seg button{border:0;background:none;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--tool);color:var(--tool-ink)}
.tbtn{border:1px solid var(--tool);background:var(--tool);color:var(--tool-ink);padding:7px 16px;border-radius:999px;font-weight:600;font-size:13px;cursor:pointer}
.tbtn.ghost{background:transparent;color:var(--tool)}
.tbtn.quiet{border-color:var(--line);color:var(--muted)}
.tbtn.wide{width:100%;padding-block:10px;font-size:14px}
.tbtn:disabled{opacity:.45;cursor:default}
.push{margin-left:auto}
.savebox{display:flex;align-items:center;gap:10px}
.dnote{font-size:12px;font-weight:500;color:var(--warn);display:flex;align-items:center;gap:6px;white-space:nowrap}
.dnote::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* opgeslagen = rustige staat, geen grijze uitgeschakelde knop */
.tbtn.done:disabled{opacity:1;background:transparent;border-color:var(--line);color:var(--ok)}

/* drukgevoel en hover op alle knoppen; hover alleen met een muis */
.tbtn,.sbtn,.xbtn,.seg button,.bgs button,.bgs label,.toast button,.panel summary{transition:transform 140ms var(--ease-out),background-color 150ms ease,color 150ms ease,border-color 150ms ease}
:is(.tbtn,.sbtn,.xbtn,.seg button,.bgs button,.bgs label,.toast button):not(:disabled):active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .tbtn.ghost:not(:disabled):hover{background:var(--tool-soft)}
  .tbtn.quiet:not(:disabled):not(.armed):hover{color:var(--danger);border-color:currentColor;background:transparent}
  .tbtn:not(.ghost):not(:disabled):hover{filter:brightness(1.12)}
  .seg button[aria-pressed="false"]:hover{color:var(--fg)}
  .sbtn:not(:disabled):hover{border-style:solid}
  .xbtn:hover{color:var(--danger);border-color:currentColor}
  .panel summary:hover{background:var(--tool-soft)}
}

/* Werkbank */
.work{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;max-width:1280px;margin:0 auto}
.present .work{grid-template-columns:minmax(0,1fr)}
.present .panel{display:none}
@media (max-width:980px){.work{grid-template-columns:minmax(0,1fr)}}

/* Profielvoorbeeld */
.stage{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.stagebar{width:100%;max-width:780px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.stagehint{margin:0 auto 0 0;font-size:12px;color:var(--muted)}
.present .stagehint{visibility:hidden}
/* bewerkmodus: onderdelen in het voorbeeld zijn aanklikbaar en lichten op onder de muis */
body:not(.present) #mock [data-edit]{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  body:not(.present) #mock :is([data-edit],.scard,.fcard){outline:2px solid transparent;outline-offset:-2px;transition:outline-color 150ms ease}
  body:not(.present) #mock [data-edit]:hover:not(:has([data-edit]:hover)):not(:has(.scard:hover,.fcard:hover)),
  body:not(.present) #mock :is(.scard,.fcard):hover{outline-color:var(--tool)}
}
.frame{width:100%;max-width:780px;container-type:inline-size;container-name:mock;transition:max-width .25s ease}
.frame[data-device="mobile"]{max-width:390px}
@media (prefers-reduced-motion:reduce){.frame{transition:none}}
#mock{display:flex;flex-direction:column;gap:8px;background:var(--bg);padding:8px 0}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pcard .in{padding:16px 24px 20px}
.pcard h2{margin:0 0 10px;font-size:20px;font-weight:600;letter-spacing:-.005em}
.banner{position:relative;aspect-ratio:4/1;overflow:hidden;max-width:100%}
.banner img,.fimg img,.avatar img{position:absolute;max-width:none;display:block}
.fimg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 18px),linear-gradient(120deg,var(--acc),#031b3c)}
.present .ph span{display:none}
.headrow{display:flex;justify-content:space-between;gap:16px;padding:0 24px}
.avatar{position:relative;width:152px;height:152px;border-radius:50%;border:4px solid var(--card);margin-top:-104px;overflow:hidden;background:var(--card);flex:0 0 auto}
.avatar .ini{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;font-weight:600;color:#fff;background:var(--acc)}
.idt{padding:10px 24px 22px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px}
.idt h1{margin:0;font-size:24px;font-weight:600;line-height:1.25}
.hl{margin:4px 0 0;font-size:16px;line-height:1.4}
.loc{margin:8px 0 0;font-size:14px;color:var(--muted)}
.loc a,.lnk{color:var(--link);font-weight:600;text-decoration:none}
.conn{margin:6px 0 0;font-size:14px;color:var(--link);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{border-radius:999px;padding:6px 16px;font-weight:600;font-size:15px;border:1px solid var(--btn);background:transparent;color:var(--btn)}
.pill.fill{background:var(--btn);color:var(--btn-ink)}
.comp{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600;align-self:start;padding-top:2px}
.comp i{width:32px;height:32px;border-radius:4px;background:var(--acc);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-style:normal;font-size:13px}
.about{white-space:pre-wrap;font-size:14px;line-height:1.5;margin:0}
.about.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{border:0;background:none;padding:0;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;margin-top:2px}
.svc{font-size:14px;font-weight:600;line-height:1.55;margin:0}
.svct{font-size:14px;line-height:1.5;margin:8px 0 0;color:var(--muted);white-space:pre-wrap}
.frow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.fcard{flex:0 0 min(280px,80%);border:1px solid var(--line);border-radius:8px;overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
.fcard .ft{font-size:12px;color:var(--muted);padding:8px 12px 6px}
.fimg{position:relative;aspect-ratio:1200/627;overflow:hidden;max-width:100%}
.fcard .fb{padding:10px 12px 12px;min-width:0}
.fcard h3{margin:0;font-size:14px;font-weight:600;line-height:1.35}
.fcard p{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{font-size:14px;color:var(--muted);margin:0}
.smedia{position:relative;margin-bottom:14px}
.scard{flex:0 0 min(232px,72%);border:1px solid var(--line);border-radius:8px;overflow:hidden;scroll-snap-align:start;min-width:0}
.scard .fimg{aspect-ratio:16/10}
.scard .cap{font-size:14px;color:var(--muted);padding:10px 12px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snext{position:absolute;right:-6px;top:calc(50% - 34px);width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);display:grid;place-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip);border-radius:4px;padding:2px 8px;font-size:14px;font-weight:500}
.pill.gray{border-color:var(--fg);color:var(--fg);opacity:.85}
.foot{border-top:1px solid var(--line);text-align:center;padding:12px;font-size:15px;font-weight:600;color:var(--muted)}
@container mock (max-width:560px){
  .avatar{width:96px;height:96px;margin-top:-56px;border-width:3px}
  .avatar .ini{font-size:34px}
  .headrow,.pcard .in{padding-left:16px;padding-right:16px}
  .idt{grid-template-columns:minmax(0,1fr);padding:8px 16px 18px}
  .comp{display:none}
  .idt h1{font-size:20px}.hl{font-size:14px}
  .pill{font-size:14px;padding:5px 14px}
}

/* Instelpaneel: één sectie tegelijk open, downloaden staat altijd onderin */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0;position:sticky;
  top:calc(env(safe-area-inset-top,0px) + var(--top-h,64px) + 16px);max-height:calc(100dvh - var(--top-h,64px) - 32px);display:flex;flex-direction:column;overflow:hidden}
.secs{overflow:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
/* open sectiekop blijft bovenin staan; wat je erheen scrollt, komt er net onder */
.secs .sub,.secs .fld{scroll-margin-top:60px}
@media (max-width:980px){.panel{position:static;max-height:none}.secs{overflow:visible}
  .secs>details[open]>summary{top:calc(env(safe-area-inset-top,0px) + var(--top-h,64px))}
  .secs>details{scroll-margin-top:calc(var(--top-h,64px) + 12px)}
  .secs .sub,.secs .fld{scroll-margin-top:calc(var(--top-h,64px) + 60px)}}
.secs>details{border-bottom:1px solid var(--line)}
.secs>details:last-child{border-bottom:0}
.panel summary{cursor:pointer;padding:14px 18px;font-family:var(--font-head);font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;gap:10px}
.panel summary::-webkit-details-marker{display:none}
.secs>details>summary::after{content:"";width:7px;height:7px;flex:0 0 auto;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform 160ms var(--ease-out)}
.secs>details[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.secs>details[open]>summary{position:sticky;top:0;z-index:1;background:var(--surface)}
.panel summary small{font-family:var(--font-ui);font-weight:500;font-size:12px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel summary small.over{color:var(--warn)}
.pfoot{flex:none;border-top:1px solid var(--line);padding:12px 18px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.more-dl summary{padding:2px 0;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--tool);justify-content:center;gap:6px}
.more-dl summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 160ms var(--ease-out)}
.more-dl[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.more-dl .dl{margin-top:8px}
.more-dl .note{margin-top:8px;text-align:center}
@media (hover:hover) and (pointer:fine){.more-dl summary:hover{background:none;text-decoration:underline}}
/* na een klik in het voorbeeld: kort oplichten waar je terechtkomt */
@keyframes flash{from{background:var(--tool-soft);box-shadow:0 0 0 6px var(--tool-soft)}to{background:transparent;box-shadow:0 0 0 6px transparent}}
.flash{animation:flash 1.1s var(--ease-out);border-radius:8px}
.body{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>label,.lbl{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;display:flex;justify-content:space-between;gap:8px}
.cnt{font-weight:500;font-variant-numeric:tabular-nums}
.cnt.over{color:var(--warn)}
.panel input[type=text],.panel textarea,.panel select{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 10px;font-size:14px;min-width:0}
.panel textarea{resize:vertical;min-height:70px;line-height:1.45;field-sizing:content;max-height:420px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row>input[type=text]{flex:1 1 0}
.xbtn{border:1px solid var(--line);background:var(--card);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--muted);flex:0 0 auto}
.sbtn{border:1px dashed var(--tool);background:var(--tool-soft);color:var(--tool);border-radius:8px;padding:8px 12px;font-weight:600;font-size:13px;cursor:pointer;text-align:center}
.sbtn.solid{border-style:solid}
.sbtn:disabled{opacity:.45;cursor:default}
.upl{display:flex;gap:8px;flex-wrap:wrap}
.upl input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upl label{cursor:pointer}
.sliders{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;font-size:12px;color:var(--muted)}
.sliders input{width:100%;accent-color:var(--tool)}
.spec{font-size:12px;color:var(--muted);line-height:1.45;margin:0}
.spec b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.sub{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.sub .hd{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dl .wide{grid-column:1/-1}
.note{font-size:12px;color:var(--muted);margin:0;line-height:1.45}
.swatch{display:flex;align-items:center;gap:10px;font-size:13px}
.swatch input{width:42px;height:32px;border:1px solid var(--line);border-radius:6px;background:none;padding:2px;cursor:pointer}

/* Indus-aanvullingen */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pbar select{border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:7px 12px;font-weight:600;font-size:13px;max-width:220px}
.banner canvas{display:block;width:100%;height:100%}
.comp .lg{height:30px;width:auto;display:block}
.lg-d{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-l{display:none!important}:root:not([data-theme="light"]) .lg-d{display:block!important}}
:root[data-theme="dark"] .lg-l{display:none!important}
:root[data-theme="dark"] .lg-d{display:block!important}
.smedia{position:relative;margin-bottom:14px}
.scard{flex:0 0 min(232px,72%);border:1px solid var(--line);border-radius:8px;overflow:hidden;scroll-snap-align:start;min-width:0}
.scard .fimg{aspect-ratio:16/10}
.scard .cap{font-size:14px;color:var(--muted);padding:10px 12px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snext{position:absolute;right:-6px;top:calc(50% - 34px);width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);display:grid;place-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip);border-radius:4px;padding:2px 8px;font-size:14px;font-weight:500}
.pill.gray{border-color:var(--fg);color:var(--fg);opacity:.85}
.foot{border-top:1px solid var(--line);text-align:center;padding:12px;font-size:15px;font-weight:600;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);margin:0;line-height:1.45}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);cursor:pointer}
.chk input{width:16px;height:16px;margin:0;accent-color:var(--tool)}
.hint code{font-family:ui-monospace,Menlo,monospace;background:var(--tool-soft);color:var(--tool);padding:0 4px;border-radius:4px}
.bgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bgs button{border:2px solid transparent;border-radius:8px;padding:0;aspect-ratio:4/1;background-size:cover;background-position:center;cursor:pointer;background-color:#06102a;color:#fff;font-size:11px;font-weight:600;max-width:100%}
.bgs button[aria-pressed="true"]{border-color:var(--tool)}
.bgs label{border:1px dashed var(--tool);border-radius:8px;aspect-ratio:4/1;display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--tool);background:var(--tool-soft);cursor:pointer;text-align:center;padding:0 4px}
.armed{background:var(--warn)!important;border-color:var(--warn)!important;color:#fff!important}

/* meldingen: onderin het midden, komen kort omhoog en verdwijnen sneller dan ze komen */
.toast{position:fixed;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom,0px));margin:0 auto;width:max-content;max-width:min(560px,calc(100vw - 32px));z-index:20;
  display:flex;align-items:center;gap:6px;padding:8px 8px 8px 16px;border-radius:12px;background:var(--t-bg);color:var(--t-ink);font-size:13px;line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s}
.toast[data-show="false"]{opacity:0;transform:translateY(8px) scale(.98);visibility:hidden;pointer-events:none;
  transition:opacity 140ms ease,transform 140ms ease,visibility 0s 140ms}
.toast.ok::before,.toast.warn::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-right:4px;background:var(--t-ok)}
.toast.warn::before{background:var(--t-warn)}
.toast-msg{padding-right:6px}
.toast button{border:0;background:none;color:inherit;cursor:pointer;border-radius:8px;flex:0 0 auto}
.toast-act{font-weight:700;padding:6px 10px;text-decoration:underline;text-underline-offset:3px}
.toast-x{width:28px;height:28px;opacity:.6}
@media (hover:hover) and (pointer:fine){.toast button:hover{background:rgba(127,127,127,.2);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .toast,.toast[data-show="false"]{transform:none}
  .flash{animation-duration:.6s}
  .secs>details>summary::after,.more-dl summary::after{transition:none}
}