/* =========================================================================
   Vacaturewizard: paginamodus + stappen Omschrijving en Publicatie.
   Ontwerp: Claude Design "Test Wizard Vacature" (wizard.css paginamodus en
   vacature-publicatie.css, 9 september 2026), 1-op-1 overgenomen en op de
   klassen van static/modules/wizard.js gezet (.wiz-btn i.p.v. .btn-*-sm).
   Laadt na style.css; alles is gescoped op .wiz-page, .vacv2-wiz (wizard),
   .vacv2 (werkplek) of .vacv2-panel (zijpaneel).
   ========================================================================= */

/* ── Paginamodus: kalm document, rail links, inhoud als vel, vaste voet ── */
.wiz-overlay.wiz-page { display: block; padding: 0; background: #F7F5F2; backdrop-filter: none; -webkit-backdrop-filter: none; overflow-y: auto; animation: none; }
.wiz.wiz--page { display: grid; grid-template-columns: 200px minmax(0,1fr); grid-template-areas: "back back" "head head" "steps body"; column-gap: 56px; align-content: start; width: 100%; max-width: 1080px; margin: 0 auto; height: auto; max-height: none; min-height: 100vh; overflow: visible; border-radius: 0; box-shadow: none; background: transparent; animation: none; padding: 24px 40px 0; }
.wiz__back { grid-area: back; justify-self: start; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 8px 0; min-height: 36px; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; color: var(--fg-tertiary); }
.wiz__back:hover { color: var(--fg-primary); }
.wiz__back::before { content: ''; width: 15px; height: 15px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%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='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat; }
.wiz--page .wiz__head { grid-area: head; padding: 2px 0 26px; border-bottom: none; gap: 16px; align-items: flex-end; }
.wiz--page .wiz__head-icon, .wiz--page .wiz__close { display: none; }
.wiz--page .wiz__head-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.wiz--page .wiz__head-sub { font-size: 13.5px; margin-top: 3px; }
.wiz--page .wiz__autosave { align-self: flex-end; margin-bottom: 5px; }
.wiz--page .wiz__steps { grid-area: steps; position: sticky; top: 24px; align-self: start; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-bottom: none; background: none; }
.wiz--page .wiz-step { gap: 12px; padding: 4px 0; }
.wiz--page .wiz-step__num { width: 22px; height: 22px; font-size: 11px; border: none; background: var(--white); box-shadow: inset 0 0 0 1px rgba(26,26,26,0.12), 0 1px 2px rgba(26,26,26,0.05); }
.wiz--page .wiz-step--done .wiz-step__num { background: var(--fg-primary); box-shadow: 0 1px 2px rgba(26,26,26,0.12); color: var(--white); }
.wiz--page .wiz-step--active .wiz-step__num { background: var(--white); color: var(--koper); box-shadow: inset 0 0 0 1.5px var(--koper), 0 1px 3px rgba(26,26,26,0.08); }
.wiz--page .wiz-step--clickable:hover .wiz-step__num { box-shadow: inset 0 0 0 1px rgba(217,123,61,0.6), 0 1px 3px rgba(26,26,26,0.08); }
.wiz--page .wiz-step__label { flex-direction: row; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.wiz--page .wiz-step__label-main { font-size: 13.5px; }
.wiz--page .wiz-step__label-opt { margin-left: auto; }
.wiz--page .wiz-step__line { flex: none; width: 1.5px; height: 14px; min-width: 0; margin: 0 0 0 10.5px; }
.wiz--page .wiz__body { grid-area: body; overflow: visible; background: none; border: none; flex: none; }
.wiz--page .wiz__screen { padding: 4px 0 130px; animation-duration: 260ms; }
.wiz--page .wiz__screen-head { margin-bottom: 30px; }
.wiz--page .wiz__screen-title { font-size: 24px; font-weight: 600; letter-spacing: -.022em; }
.wiz--page .wiz__screen-sub { font-size: 13.5px; }
.wiz--page .wiz-grid, .wiz--page .wiz__screen-head, .wiz--page .wiz-review { max-width: 680px; }
.wiz--page .wiz-grid { gap: 26px 28px; }
.wiz--page .wiz-field__label { font-size: 12.5px; color: var(--fg-tertiary); }
.wiz--page .wiz-field input, .wiz--page .wiz-field select { border: none; border-bottom: 1.5px solid var(--border-strong); border-radius: 0; background: transparent; padding: 8px 2px; font-size: 15px; }
.wiz--page .wiz-field input:focus, .wiz--page .wiz-field select:focus { border-color: var(--koper); box-shadow: none; }
.wiz--page .wiz-field select { background-position: right 2px center; padding-right: 22px; }
.wiz--page .wiz-field textarea { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.wiz--page .wiz-field textarea:focus { border-color: var(--koper); box-shadow: 0 0 0 3px rgba(217,123,61,.1); }
.wiz--page .wiz-field--ai input, .wiz--page .wiz-field--ai select { background: linear-gradient(rgba(217,123,61,0.05), rgba(217,123,61,0.05)); border-color: rgba(217,123,61,0.5); }
/* Intro: rustig vel in plaats van gestippelde dropzone */
.wiz--page .wiz-intro { text-align: left; max-width: 680px; margin: 0; padding-top: 0; }
.wiz--page .wiz-intro__eyebrow { background: none; padding: 0; margin-bottom: 8px; letter-spacing: .06em; }
.wiz--page .wiz-intro__sub { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.018em; color: var(--fg-primary); line-height: 1.25; }
.wiz--page .wiz-drop { margin-top: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 14px 36px -20px rgba(26,26,26,.1); }
.wiz--page .wiz-drop--drag { border-color: var(--koper); box-shadow: 0 0 0 4px rgba(217,123,61,.1); }
/* Chips en knoppen: pilvorm, inkt als primair; zachte witte pillen */
.wiz--page .wiz-chip { border: none; border-radius: 999px; min-height: 36px; padding: 8px 15px; background: rgba(255,255,255,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(26,26,26,0.055), 0 1px 2px rgba(26,26,26,0.06), 0 4px 12px -6px rgba(26,26,26,0.14); }
.wiz--page .wiz-chip:hover { background: rgba(255,255,255,0.95); color: var(--fg-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(26,26,26,0.09), 0 2px 4px rgba(26,26,26,0.07), 0 6px 16px -6px rgba(26,26,26,0.18); }
.wiz--page .wiz-chip--active { background: var(--fg-primary); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1px 2px rgba(26,26,26,0.14), 0 4px 12px -5px rgba(26,26,26,0.3); }
.wiz--page button:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }
.wiz--page .wiz__foot-hint kbd { background: var(--white); }
/* Vaste voet over de volle breedte */
.wiz--page .wiz__foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(247,245,242,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 14px max(40px, calc((100vw - 1080px) / 2 + 40px)); }
.wiz--page .wiz__foot .wiz-btn { border-radius: 999px; padding: 10px 20px; min-height: 40px; font-weight: 500; }
.wiz--page .wiz__foot .wiz-btn--primary { background: var(--fg-primary); border-color: var(--fg-primary); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(26,26,26,0.16), 0 6px 16px -6px rgba(26,26,26,0.35); }
.wiz--page .wiz__foot .wiz-btn--primary:hover:not(:disabled) { background: #000; transform: none; }
.wiz--page .wiz__foot .wiz-btn--ghost { border: none; background: rgba(255,255,255,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(26,26,26,0.055), 0 1px 2px rgba(26,26,26,0.06), 0 4px 12px -6px rgba(26,26,26,0.14); }
.wiz--page .wiz__foot .wiz-btn--ghost:hover { background: rgba(255,255,255,0.95); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(26,26,26,0.09), 0 2px 4px rgba(26,26,26,0.07), 0 6px 16px -6px rgba(26,26,26,0.18); }
/* Controleren in paginamodus: vlakken weg, hairlines */
.wiz--page .wiz-review__card { border: none; border-radius: 0; border-top: 1px solid var(--border-strong); background: none; overflow: visible; margin-bottom: 0; }
.wiz--page .wiz-review__card:last-of-type { border-bottom: 1px solid var(--border-strong); }
.wiz--page .wiz-review__card-head { padding: 12px 0 4px; background: none; border-bottom: none; }
.wiz--page .wiz-review__card-icon { display: none; }
.wiz--page .wiz-review__rows { gap: 0; background: none; grid-template-columns: 1fr 1fr; padding-bottom: 14px; }
.wiz--page .wiz-review__row { background: none; padding: 7px 16px 7px 0; }
.wiz--page .wiz-review__empty { background: none; text-align: left; padding: 4px 0 16px; }
.wiz--page .wiz-review__edit { border: none; background: none; }
.wiz--page .wiz-review__edit:hover { background: var(--koper-subtle); }
.vacv2-review__sub { display: block; font: 400 12.5px/1.5 var(--font-body); color: #8A8680; margin-top: 6px; }
.wiz--page .wiz-review__row-value { white-space: pre-line; }
.wiz--page .wiz-extract__sub a { color: var(--koper); }
@media (max-width: 860px) { .wiz--page .wiz__head-title { font-size: 22px; } }
/* Sluitbevestiging en eindscherm */
.wiz-confirm { position: fixed; inset: 0; z-index: 320; background: rgba(26,26,26,.28); display: flex; align-items: center; justify-content: center; padding: 20px; }
.wiz-confirm__box { background: #fff; border-radius: 14px; padding: 22px 24px; max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.18); font-family: var(--font-body); }
.wiz-confirm__box b { display: block; font: 600 16px/1.3 var(--font-display); color: var(--fg-primary); margin-bottom: 6px; }
.wiz-confirm__box p { margin: 0 0 18px; font: 400 13.5px/1.55 var(--font-body); color: var(--fg-secondary); }
.wiz-confirm__acts { display: flex; justify-content: flex-end; gap: 8px; }
.wiz-confirm__acts .wiz-btn { border-radius: 999px; }
.wiz-confirm__acts .wiz-btn--primary { background: var(--fg-primary); }
.wiz-done__points { list-style: none; margin: 18px auto 0; padding: 0; max-width: 440px; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.wiz-done__points li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: 1px solid var(--border); font: 400 13px/1.45 var(--font-body); color: var(--fg-secondary); }
.wiz-done__points li:first-child { border-top: none; }
.wiz-done__points li b { font-weight: 600; color: var(--fg-primary); }
.vacv2-orb--concept { background: #FFF4E8 !important; color: #B5612E !important; }
.vacv2-done__btn { margin-top: 18px; border-radius: 999px; background: var(--fg-primary); }
.wiz-dup__acts { margin-left: auto; display: flex; gap: 14px; flex-shrink: 0; }
.wiz-dup__acts .wiz-dup__link { margin-left: 0; }
@media (max-width: 860px) {
  .wiz.wiz--page { grid-template-columns: minmax(0,1fr); grid-template-areas: "back" "head" "steps" "body"; column-gap: 0; padding: 14px 18px 0; }
  .wiz--page .wiz__steps { position: static; flex-direction: row; align-items: center; overflow-x: auto; padding-bottom: 12px; }
  .wiz--page .wiz-step__line { width: auto; height: 1.5px; flex: none; min-width: 12px; margin: 0 8px; }
  .wiz--page .wiz-step__label-opt { display: none; }
  .wiz--page .wiz__foot { padding: 12px 18px; }
}
@media (max-width: 700px) { .wiz--page .wiz__foot-hint { display: none; } }

/* ── Tokens en basiscomponenten van de vacaturestappen (.vacv2-wiz) ────── */
.vacv2-wiz, .vacv2 { --ui: var(--font-body); --cbg: #F7F5F2; --cink: #1A1A1A; --cfg2: #555555; --cfg3: #8A8680; --cmut: #B0ACA5; --cline: #E7E4DF; --cline2: #D9D5CE; --cacc: #B5612E; --cgrijs: #F3F4F6; --vred: #B91C1C; --vredbg: #FEF2F2; --vyel: #B45309; --vyelbg: #FFFBEB; --vgroen: #059669; --vgroenbg: #ECFDF5; --vblauw: #1E40AF; --vblauwbg: #EFF6FF; --vai: #7C3AED; --vaibg: #F5F3FF; font-family: var(--ui); color: var(--cink); }
.vacv2-wiz *, .vacv2 *, .vacv2-panel * { box-sizing: border-box; }
.vacv2-wiz p, .vacv2-wiz h3, .vacv2 p, .vacv2 h3 { margin: 0; }
.vacv2-wiz .cdv2-lbl, .vacv2 .cdv2-lbl, .vacv2-panel .cdv2-lbl { font: 600 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cmut); margin: 0; }
.vacv2-wiz .cdv2-btn, .vacv2 .cdv2-btn, .vacv2-panel .cdv2-btn { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--ui); padding: 8px 15px; border-radius: 8px; border: 1px solid var(--cline2); background: #fff; color: var(--cfg2); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.vacv2-wiz .cdv2-btn:hover, .vacv2 .cdv2-btn:hover { border-color: #D4D4D8; }
.vacv2-wiz .cdv2-btn.pri, .vacv2 .cdv2-btn.pri { background: #1A1A1A; border: none; color: #fff; border-radius: 999px; min-height: 38px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(26,26,26,.16), 0 6px 16px -6px rgba(26,26,26,.35); }
.vacv2-wiz .cdv2-btn.pri:hover, .vacv2 .cdv2-btn.pri:hover { background: #000; }
.vacv2-wiz .cdv2-btn:disabled, .vacv2 .cdv2-btn:disabled { opacity: .45; cursor: default; }
.vacv2-wiz .cdv2-link, .vacv2 .cdv2-link, .vacv2-panel .cdv2-link { font: 500 13px var(--ui); color: var(--cacc); cursor: pointer; background: none; border: none; padding: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.vacv2-wiz .cdv2-link:hover, .vacv2 .cdv2-link:hover { text-decoration: underline; }
.vacv2-chipst { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--ui, var(--font-body)); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.vacv2-chipst .d { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.vacv2-chipst.gr { background: #ECFDF5; color: #059669; }
.vacv2-chipst.or { background: #FFF3E6; color: #C2410C; }
.vacv2-chipst.re { background: #FEF2F2; color: #B91C1C; }
.vacv2-chipst.gy { background: #F3F4F6; color: #8A8680; }
.vacv2-chipst.bl { background: #EFF6FF; color: #1E40AF; }
.vacv2-switch { display: inline-flex; align-items: center; gap: 10px; white-space: normal; cursor: pointer; font: 500 13.5px var(--ui); color: var(--cink); min-height: 44px; }
.vacv2-switch i { width: 36px; height: 20px; border-radius: 99px; background: #D4D4D8; position: relative; transition: background .15s; flex-shrink: 0; }
.vacv2-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.vacv2-switch.on i { background: var(--vgroen); }
.vacv2-switch.on i::after { left: 18px; }
.vacv2-switch.dis { opacity: .5; cursor: default; }
.vacv2-aitag { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--ui); letter-spacing: .04em; color: #B5612E; background: #FBF1E9; border-radius: 4px; padding: 2px 6px; vertical-align: 2px; }
.vacv2-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font: 400 13px/1.55 var(--ui); margin-bottom: 14px; }
.vacv2-notice.re { background: var(--vredbg); border: 1px solid #FBD5D5; color: var(--vred); }
.vacv2-notice.ye { background: var(--vyelbg); border: 1px solid #FDE68A; color: var(--vyel); }
.vacv2-notice b { font-weight: 600; }
.vacv2-steps { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 18px; }
.vacv2-step { display: flex; gap: 12px; align-items: center; font: 500 13.5px var(--ui); color: var(--cfg3); }
.vacv2-step i { width: 22px; height: 22px; border-radius: 99px; border: 1.5px dashed var(--cline2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-style: normal; }
.vacv2-step.on { color: var(--cink); }
.vacv2-step.on i { border: 1.5px solid #D97B3D; position: relative; }
.vacv2-step.on i::after { content: ''; width: 8px; height: 8px; border-radius: 99px; background: #D97B3D; animation: vacv2Pulse 1.4s ease-in-out infinite; }
.vacv2-step.ok { color: var(--cink); }
.vacv2-step.ok i { border: none; background: var(--vgroenbg); color: var(--vgroen); }
@keyframes vacv2Pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.vacv2-chip { font: 500 12.5px var(--ui); padding: 7px 14px; border-radius: 999px; border: none; color: #4A4742; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(26,26,26,.055), 0 1px 2px rgba(26,26,26,.06), 0 4px 12px -6px rgba(26,26,26,.14); }
.vacv2-chip:hover { background: rgba(255,255,255,.95); color: #1A1A1A; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(26,26,26,.09), 0 2px 4px rgba(26,26,26,.07), 0 6px 16px -6px rgba(26,26,26,.18); }
.vacv2-rules { margin-top: 10px; }
.vacv2-rules summary { font: 500 13px var(--ui); color: var(--cfg3); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.vacv2-rules summary::-webkit-details-marker { display: none; }
.vacv2-rules summary svg { transition: transform .15s; }
.vacv2-rules[open] summary svg { transform: rotate(90deg); }
.vacv2-rules ol { margin: 8px 0 0; padding-left: 20px; font: 400 13px/1.65 var(--ui); color: var(--cfg2); }
.vacv2-rules li { break-inside: avoid; padding-right: 6px; }
.vacv2-rules li b { font-weight: 500; color: var(--cink); }
.vacv2-rules li em { font-style: normal; color: var(--vred); font-size: 11.5px; margin-left: 4px; }

/* ── Stap Omschrijving: het document ─────────────────────────────────── */
.vacv2-wiz-aibar { display: flex; align-items: center; gap: 12px; padding: 2px 0; margin-bottom: 12px; font: 400 13px var(--ui); color: var(--cfg3); }
.vacv2-wiz-aibar .sp { flex: 1; }
.vacv2-wiz-aibar .cdv2-link { color: #B5612E; font-weight: 500; }
.vacv2-doc { background: #fff; border: 1px solid #E7E4DF; border-radius: 14px; padding: 4px 28px 16px; font: 400 14.5px/1.75 var(--ui); color: var(--cink); max-width: 720px; box-shadow: 0 1px 2px rgba(26,26,26,.03), 0 12px 32px -20px rgba(26,26,26,.09); }
.vacv2-doc__sec { padding: 18px 0 6px; position: relative; }
.vacv2-doc__sec + .vacv2-doc__sec, .vacv2-doc > div + div .vacv2-doc__sec { border-top: 1px solid var(--cline); }
.vacv2-doc__sec.is-target h2 { color: var(--cacc); }
.vacv2-doc__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vacv2-doc__hd h2 { font: 600 15.5px/1.35 var(--ui); margin: 0; letter-spacing: -.01em; }
.vacv2-doc__hd h2.dim { color: var(--cfg3); }
.vacv2-doc__hd .req { font: 500 12px var(--ui); color: var(--vred); }
.vacv2-doc__body { outline: none; min-height: 1.75em; border-radius: 6px; margin: 0 -10px; padding: 2px 10px; transition: background .12s; }
.vacv2-doc__body:focus { background: #FCFCFB; }
.vacv2-doc__body p { margin: 0 0 6px; }
.vacv2-doc__body p:last-child { margin: 0; }
.vacv2-doc__body ul { margin: 0; padding-left: 22px; }
.vacv2-doc__body li { margin: 2px 0; }
.vacv2-doc__sec .ph { color: var(--cmut); font-size: 14.5px; cursor: text; margin: 0 -10px; padding: 2px 10px; border-radius: 6px; }
.vacv2-doc__sec .ph:hover { background: #FCFCFB; }
.vacv2-doc__sec.block .ph { color: var(--cfg3); }
.vacv2-doc__ai { position: relative; }
.vacv2-doc__ai .vacv2-doc__body, .vacv2-doc__ai .ph { box-shadow: inset 3px 0 0 rgba(217,123,61,.45); border-radius: 0; }
.vacv2-doc__aitag { position: absolute; right: 0; top: 18px; display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--ui); letter-spacing: .03em; color: #B5612E; background: #FBF1E9; border: none; border-radius: 4px; padding: 3px 6px; cursor: pointer; z-index: 1; }
.vacv2-doc__aitag em { display: none; font-style: normal; margin-left: 2px; }
.vacv2-doc__aitag:hover em { display: inline; }
.vacv2-wiz-help { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E7E4DF; max-width: 720px; }
.vacv2-wiz-help__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.vacv2-wiz-help__row .sp { flex: 1; }
.vacv2-wiz-help__lnk { background: none; border: none; padding: 6px 0; font: 500 13px var(--ui); color: var(--cfg3); cursor: pointer; min-height: 32px; }
.vacv2-wiz-help__lnk:hover, .vacv2-wiz-help__lnk.on { color: var(--cink); }
.vacv2-wiz-toon { font: 500 12.5px var(--ui); color: var(--cfg2); border: none; border-radius: 99px; padding: 0 10px; min-height: 36px; outline: none; cursor: pointer; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(26,26,26,.055), 0 1px 2px rgba(26,26,26,.06), 0 4px 12px -6px rgba(26,26,26,.14); }
.vacv2-wiz-toon:focus { box-shadow: inset 0 0 0 1.5px var(--cacc); }
.vacv2-paste { margin-top: 10px; border: 1px solid #E7E4DF; border-radius: 14px; padding: 12px; background: #fff; box-shadow: 0 1px 2px rgba(26,26,26,.03); }
.vacv2-paste textarea { width: 100%; min-height: 110px; font: 400 13.5px/1.55 var(--ui); border: none; background: none; outline: none; resize: vertical; color: var(--cink); }
.vacv2-paste__ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vacv2-wiz-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cline); max-width: 720px; }
.vacv2-wiz-foot .vacv2-rules { margin: 0; }
.vacv2-wiz-score__ft { font: 400 12px var(--ui); color: var(--cfg3); padding: 8px 0 6px; margin: 0; }

/* ── Stap Publicatie ──────────────────────────────────────────────────── */
.vacv2-wiz-stand { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 16px; max-width: 720px; }
.vacv2-wiz-stand .sp { flex: 1; }
.vacv2-wiz-card { max-width: 720px; margin-bottom: 20px; }
.vacv2-wiz-switches { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid var(--cline2); padding-bottom: 10px; margin-bottom: 16px; }
.vacv2-wiz-fields { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 14px; }
.vacv2-wiz-fields [data-field="slug"] { grid-column: 1/-1; }
.vacv2-wiz-field label { display: flex; justify-content: space-between; font: 500 12px var(--ui); color: var(--cfg3); margin-bottom: 4px; }
.vacv2-wiz-field input, .vacv2-wiz-fields select { width: 100%; font: 400 13.5px/1.55 var(--ui); color: var(--cink); border: none; border-bottom: 1.5px solid var(--cline2); border-radius: 0; background: transparent; padding: 8px 2px; min-height: 38px; outline: none; }
.vacv2-wiz-field input:focus, .vacv2-wiz-fields select:focus { border-color: var(--cacc); box-shadow: none; }
.vacv2-wiz-field .hint { font: 400 12px var(--ui); color: var(--cmut); margin-top: 4px; }
.vacv2-wiz-field .hint.re { color: var(--vred); }
.vacv2-wiz-fields .vacv2-ed__row { display: flex; align-items: center; gap: 0; border: none; border-bottom: 1.5px solid var(--cline2); border-radius: 0; background: transparent; min-height: 36px; }
.vacv2-wiz-fields .vacv2-ed__row .pref { font: 400 13px var(--ui); color: var(--cfg3); padding-left: 0; white-space: nowrap; }
.vacv2-wiz-fields .vacv2-ed__row input { border: none; border-radius: 0; min-height: 34px; padding-left: 2px; }
.vacv2-wiz-fields .vacv2-ed__row:focus-within { border-color: var(--cacc); }
.vacv2-clist { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin-bottom: 8px; }
.vacv2-check { border-top: 1px solid var(--cline2); padding: 0; }
.vacv2-check:last-child { border-bottom: 1px solid var(--cline2); }
.vacv2-check__hd { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.vacv2-check__hd b { font: 500 13.5px var(--ui); min-width: 0; }
.vacv2-check__sum { margin-left: auto; font: 400 12.5px var(--ui); color: var(--cmut); white-space: nowrap; }
.vacv2-check__chev { color: var(--cmut); display: inline-flex; transition: transform .15s; }
.vacv2-check__bd { padding: 2px 0 8px 20px; }
.vacv2-check__bd .vacv2-li:first-child { border-top: none; }
.vacv2-tick { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; background: var(--cline2); }
.vacv2-tick.re { background: var(--vred); }
.vacv2-li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--cline); font: 400 12.5px/1.45 var(--ui); color: var(--cfg3); }
.vacv2-li b { font-weight: 500; color: var(--cink); text-align: right; white-space: nowrap; }
.vacv2-li .m { color: var(--cmut); font-weight: 400; }
.vacv2-li button { font: 400 12.5px var(--ui); color: var(--cfg3); background: none; border: none; padding: 0; cursor: pointer; text-align: right; min-height: 24px; white-space: nowrap; }
.vacv2-li button:hover { color: var(--cink); text-decoration: underline; }
.vacv2-li button:not(.ye):not(.gy) { color: var(--cink); font-weight: 500; }
.vacv2-li button:not(.ye):not(.gy)::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--vred); margin-right: 7px; vertical-align: 1px; }
.vacv2-wiz-lbl { margin: 18px 0 8px; max-width: 720px; }
.vacv2-ch { max-width: 720px; }
.vacv2-ch__row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--cline2); min-height: 52px; flex-wrap: nowrap; }
.vacv2-ch__row:last-child { border-bottom: 1px solid var(--cline2); }
.vacv2-ch__row .t { flex: 1; min-width: 0; font: 500 13.5px var(--ui); }
.vacv2-ch__row .t p { font: 400 12.5px var(--ui); color: var(--cfg3); margin-top: 2px; }
.vacv2-ch .vacv2-switch { min-height: 36px; }
@media (max-width: 1000px) { .vacv2-wiz-fields { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px) { .vacv2-wiz-fields { grid-template-columns: 1fr; } .vacv2-wiz-stand { flex-wrap: wrap; } .vacv2-wiz-switches { flex-direction: column; gap: 12px; } .vacv2-doc { padding: 4px 16px 12px; } .vacv2-wiz-fields [data-field="slug"] input { min-width: 0; } }

/* ── Zijpaneel: zo toont blynckr.nl deze vacature ──────────────────────── */
.vacv2-panel { --ui: var(--font-body); --cmut: #B0ACA5; --cline: #ECECEE; --vred: #B91C1C; --vredbg: #FEF2F2; --vyel: #B45309; --vyelbg: #FFFBEB; font-family: var(--ui); color: #1A1A1A; }
.vacv2-panel__sec { margin-bottom: 22px; }
.vacv2-panel__sec > .cdv2-lbl { margin-bottom: 8px; }
.vacv2-site { background: #F7F7F6; border: 1px solid var(--cline); border-radius: 12px; padding: 14px; }
.vacv2-site__card { background: #fff; border: 1px solid var(--cline); border-radius: 10px; padding: 14px 16px; }
.vacv2-site__card h3 { font: 600 16px/1.3 var(--font-display); color: #17384F; margin: 0; }
.vacv2-site__card .by { font: 400 12.5px var(--ui); color: #4E5A64; margin-top: 2px; }
.vacv2-site__card .sal { font: 600 13.5px var(--ui); color: #17384F; margin-top: 4px; }
.vacv2-site__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vacv2-site__tags span { font: 500 11.5px var(--ui); color: #4E5A64; background: #F2F3F4; border-radius: 6px; padding: 3px 8px; }
.vacv2-site__page { background: #fff; border: 1px solid var(--cline); border-radius: 10px; padding: 16px; margin-top: 10px; }
.vacv2-site__page h2 { font: 700 20px/1.25 var(--font-display); color: #17384F; letter-spacing: -.01em; margin: 0; }
.vacv2-site__page .by { font: 400 12.5px var(--ui); color: #4E5A64; margin-top: 4px; }
.vacv2-site__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0; padding: 10px 12px; background: #F7F7F6; border-radius: 8px; }
.vacv2-site__facts div { font: 400 12.5px var(--ui); color: #4E5A64; }
.vacv2-site__facts b { display: block; font-weight: 600; color: #22303B; font-size: 12.5px; }
.vacv2-site__page h4 { font: 600 13.5px var(--ui); color: #22303B; margin: 12px 0 4px; }
.vacv2-site__page p, .vacv2-site__page li { font: 400 13px/1.6 var(--ui); color: #4E5A64; margin: 0; }
.vacv2-site__page ul { margin: 0; padding-left: 18px; }
.vacv2-site__miss { display: flex; align-items: center; gap: 8px; font: 400 12.5px var(--ui); color: var(--vred); background: var(--vredbg); border-radius: 6px; padding: 6px 10px; margin: 8px 0; }
.vacv2-site__miss.ye { color: var(--vyel); background: var(--vyelbg); }
.vacv2-site__url { font: 400 12px var(--ui); color: var(--cmut); margin-bottom: 8px; word-break: break-all; }
.vacv2-site__cta { margin-top: 14px; padding: 10px 12px; background: #17384F; color: #fff; border-radius: 8px; font: 600 13px var(--ui); text-align: center; }
.vacv2-panel .vacv2-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font: 400 13px/1.55 var(--ui); margin-top: 6px; }
.vacv2-panel .vacv2-notice.re { background: var(--vredbg); border: 1px solid #FBD5D5; color: var(--vred); }

/* ── Vacature-werkplek: tabs Vacaturetekst en Publiceren ────────────────────
   Zelfde bouwstenen als de wizard, maar vlak: geen kaarten met een eigen rand,
   alleen hairlines. Ontwerp: "Test Werkplek Vacature" (v4 en v6). */
.vacv2-tekst { max-width: 840px; }
.vacv2-pub { max-width: 880px; }
.vacv2-bar { display: flex; align-items: center; gap: 18px; font: 400 13px var(--ui); color: var(--cfg3); min-height: 36px; margin-bottom: 14px; flex-wrap: wrap; }
.vacv2-bar .sp { flex: 1; }
.vacv2-bar__st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vacv2-tekst .vacv2-bar { background: none; border: none; padding: 0 0 10px; margin-bottom: 0; }
.vacv2-doc__intro { font: 400 13px/1.6 var(--ui); color: var(--cfg3); margin: 0; padding: 2px 0 10px; }
.vacv2-doc__intro .cdv2-link { font-size: 13px; }
.vacv2-doc__ft { font: 400 12px/1.55 var(--ui); color: var(--cmut); margin: 14px 0 0; max-width: 62ch; }
.vacv2 .vacv2-doc { background: none; border: none; padding: 0; }
.vacv2 .vacv2-doc__body.ro { cursor: default; color: var(--cfg2); }

.vacv2-strip { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 2px; border-bottom: 1px solid var(--cline); margin-bottom: 0; }
.vacv2-strip__l { display: flex; gap: 12px; align-items: center; min-width: 0; flex-wrap: wrap; }
.vacv2-strip__l b { font: 600 15px var(--ui); }
.vacv2-strip__l p { font: 400 13px var(--ui); color: var(--cfg3); }
.vacv2-strip__r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vacv2-strip__url { font-size: 13px; color: var(--cacc); text-decoration: none; }
.vacv2-strip__url:hover { text-decoration: underline; }

.vacv2 .vacv2-clist { gap: 0; background: none; }
.vacv2 .vacv2-check { background: none; border: none; border-radius: 0; border-top: 1px solid var(--cline); padding: 0 2px; }
.vacv2 .vacv2-check:last-child { border-bottom: 1px solid var(--cline); }
.vacv2 .vacv2-check__hd { min-height: 46px; }
.vacv2 .vacv2-check__hd b { font-weight: 500; }
.vacv2 .vacv2-check__sum { color: var(--cmut); }
.vacv2 .vacv2-li button { color: var(--cfg3); font-weight: 400; }
.vacv2 .vacv2-li button:hover { color: var(--cink); }
.vacv2-sechd { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 10px; min-height: 20px; }

.vacv2-kv { background: #F7F7F6; border-radius: 10px; padding: 4px 12px; font: 400 12.5px/1.6 var(--ui); }
.vacv2-kv div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #ECECEE; }
.vacv2-kv div:last-child { border: none; }
.vacv2-kv span { width: 150px; flex-shrink: 0; color: var(--cfg3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.vacv2-kv b { font-weight: 500; color: var(--cink); min-width: 0; word-break: break-word; }
.vacv2-kv b.miss { color: var(--vred); font-weight: 400; }
.vacv2-panel .vacv2-li__st { font-weight: 400; color: var(--cfg3); white-space: nowrap; }
.vacv2-panel .vacv2-li__st.ok { color: var(--vgroen); }
.vacv2-panel .vacv2-li .is-block { color: var(--vred); }
.vacv2-panel .vacv2-li .is-want { color: var(--vyel); }
.vacv2-site__url .mis { color: var(--vred); }

/* ── Inklappen van een controlekaart ───────────────────────────────────────
   De kaart rendert zijn rijen altijd; dichtklappen is een CSS-toestand. Zonder
   deze regel draaide alleen het chevron en bleef alles openstaan. */
.vacv2-check.is-closed .vacv2-check__bd { display: none; }

/* ── Werkplek: breedtes gelijktrekken ──────────────────────────────────────
   De max-widths hierboven komen uit de smallere wizardkolom. In de werkplek is
   de kolom breder, en dan liepen de balk, het document, de kaarten en de
   kanalenlijst elk tot een andere rechterrand. */
.vacv2-tekst .vacv2-doc { max-width: none; }
.vacv2-pub .vacv2-clist { max-width: none; }
#vwPanel_kanalen #vacChannelsList { max-width: 880px; }
#vwPanel_kanalen .vacv2-sechd { max-width: 880px; }

/* Een leeg blok is één lege regel; laat zien waar de cursor staat. De tweede
   selector is nodig omdat client-workspace.css de focusring in de werkplek
   onderdrukt zodra de laatste handeling met de muis was (body.ws-pointer). Dat
   klopt voor gewone knoppen, maar niet voor een sprong naar een leeg blok: daar
   is de cursor het enige wat je vertelt waar je terechtkwam. */
.vacv2-doc__body:focus,
body.ws-pointer .clw-root .vacv2-doc__body:focus { outline: 2px solid rgba(217, 123, 61, .38); outline-offset: 5px; border-radius: 4px; }
.vacv2-doc__body:focus, .vacv2-doc__sec.is-target .vacv2-doc__body { min-height: 1.75em; }
.vacv2-doc__ft { max-width: 78ch; }

/* ── Werkplek, tab Gegevens: leesbare rijen die je per stuk openklapt ───────
   Het klassieke formulier staat eronder in de kluis en levert de echte velden;
   een rij leent er een bij het bewerken. Ontwerp: "Test Werkplek Vacature". */
.vacv2-kluis { display: none; }
.vacv2-gegevens { max-width: 840px; }
.vacv2-gegevens .cdv2-dsec { background: #fff; border: 1px solid var(--cline); border-radius: 12px; padding: 2px 0; margin-bottom: 28px; }
.vacv2-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cdv2-tag { display: inline-flex; font: 500 12px var(--ui); padding: 3px 9px; border-radius: 6px; background: var(--cgrijs); color: var(--cfg2); }

.vacv2-drow { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--cline); cursor: pointer; position: relative; min-height: 44px; }
.vacv2-drow:last-child { border-bottom: none; }
.vacv2-drow:hover { background: #FCFCFB; }
.vacv2-drow.ro { cursor: default; }
.vacv2-drow .l { width: 210px; flex-shrink: 0; font: 400 13px var(--ui); color: var(--cfg3); }
.vacv2-drow .v { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 13.5px var(--ui); color: var(--cink); }
.vacv2-drow .v .empty { color: var(--cmut); font-weight: 400; }
.vacv2-drow .pen { color: var(--cmut); opacity: 0; display: inline-flex; transition: opacity .12s; }
.vacv2-drow:hover .pen, .vacv2-drow:focus-visible .pen { opacity: 1; }
.vacv2-drow.is-edit { background: var(--cbg); cursor: default; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.vacv2-drow.is-edit .l { padding-top: 6px; }
.vacv2-drow.is-block .l::before, .vacv2-drow.is-warn .l::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 99px; margin-right: 8px; vertical-align: 1px; background: var(--vred); }
.vacv2-drow.is-warn .l::before { background: #E5B53B; }
.vacv2-drow.is-block { box-shadow: inset 3px 0 0 var(--vred); }
.vacv2-drow.is-warn { box-shadow: inset 3px 0 0 #E5B53B; }
.vacv2-reason { font: 400 12px var(--ui); color: var(--vred); display: block; width: 100%; }
.vacv2-drow.is-warn .vacv2-reason { color: var(--vyel); }
.vacv2-hint { font: 400 12px var(--ui); color: var(--cmut); display: block; width: 100%; }

.vacv2-ed { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vacv2-ed__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vacv2-ed input, .vacv2-ed select, .vacv2-ed textarea { font: 500 13.5px var(--ui); color: var(--cink); background: #fff; border: 1px solid var(--cline2); border-radius: 8px; padding: 8px 10px; outline: none; min-height: 36px; min-width: 0; }
.vacv2-ed input:focus, .vacv2-ed select:focus, .vacv2-ed textarea:focus { border-color: var(--cacc); box-shadow: 0 0 0 3px rgba(217,123,61,.12); }
.vacv2-ed textarea { width: 100%; resize: vertical; line-height: 1.55; font-weight: 400; }
.vacv2-ed input[type=number] { width: 120px; }
.vacv2-ed input[type=text], .vacv2-ed input[type=url] { flex: 1; min-width: 160px; }
.vacv2-ed .pref { font: 400 13px var(--ui); color: var(--cfg3); }
.vacv2-ed__acts { display: flex; gap: 8px; align-items: center; }
.vacv2-ed__hint { font: 400 12px var(--ui); color: var(--cmut); }
.vacv2-ed .form-group { margin: 0; flex: 1; min-width: 200px; }
.vacv2-ed label { font: 400 12px var(--ui); color: var(--cfg3); }

.vacv2-webstand { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--cline); flex-wrap: wrap; }
.vacv2-secrow { display: flex; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--cline); align-items: flex-start; }
.vacv2-secrow:last-child { border-bottom: none; }
.vacv2-secrow .l { width: 210px; flex-shrink: 0; font: 400 13px var(--ui); color: var(--cfg3); padding-top: 2px; }
.vacv2-secrow .b { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vacv2-secrow .b p { flex: 1; min-width: 200px; margin: 0; font: 400 13.5px/1.5 var(--ui); color: var(--cink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vacv2-secrow .b .empty { color: var(--cmut); font-size: 13.5px; flex: 1; }
.vacv2-secrow .st { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; font: 400 12px var(--ui); color: var(--cmut); }
.vacv2-secrow.is-block .l::before, .vacv2-secrow.is-warn .l::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 99px; margin-right: 8px; vertical-align: 1px; background: var(--vred); }
.vacv2-secrow.is-warn .l::before { background: #E5B53B; }

.vacv2-fold { background: #fff; border: 1px solid var(--cline); border-radius: 12px; }
.vacv2-fold__hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; min-height: 44px; font: 500 13.5px var(--ui); }
.vacv2-fold__hd:hover { background: #FCFCFB; }
.vacv2-fold__chev { color: var(--cmut); display: inline-flex; transition: transform .15s; }
.vacv2-fold.is-open .vacv2-fold__chev { transform: rotate(90deg); }
.vacv2-fold__bd { padding: 4px 16px 16px; border-top: 1px solid var(--cline); }
@media (max-width: 700px) {
  .vacv2-drow { flex-wrap: wrap; gap: 4px 14px; }
  .vacv2-drow .l, .vacv2-secrow .l { width: 100%; }
  .vacv2-secrow { flex-wrap: wrap; }
}
.vacv2-gegevens__ft { display: flex; justify-content: flex-end; margin: 18px 0 8px; }

/* ── Composer als enige ingang ─────────────────────────────────────────────
   De smart-zone levert nog de extractie en de voorstelweergave, maar het
   invoerveld ervan is vervangen door de composer. Alleen het voorstel komt in
   beeld. */
#vwSmartZone .smart-paste-zone,
#vwSmartZone .smart-paste-processing,
#clwSmartZone .smart-paste-zone,
#clwSmartZone .smart-paste-processing { display: none !important; }
.clw-composer.is-drag { outline: 2px dashed var(--koper); outline-offset: 3px; border-radius: 12px; }