:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#202b32;background:#eef2f4;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #cbd4d8;border-radius:8px;background:#fff;color:#24343a;padding:9px 12px}button:hover{background:#e7eff1}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #3b8190;outline-offset:2px}.primary{background:#145b68;color:#fff;border-color:#145b68}.primary:hover{background:#0a4753}.danger{color:#a43832}.small{font-size:.875rem}.muted{color:#587078}.error{color:#ad302b;background:#ffe9e6;padding:10px;border-radius:8px}.notice{color:#175b51;background:#e3f5f0;padding:10px;border-radius:8px}h1,h2,h3,p{margin-top:0}h1{font-size:1.45rem}h2{font-size:1.08rem}label{display:block;font-size:.9rem;font-weight:600;margin:0 0 12px}input,select{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #bac8ce;border-radius:8px;background:#fff;color:#24343a}input[type=color]{height:42px;padding:4px}.install,.login{max-width:480px;margin:8vh auto;background:#fff;border-radius:16px;padding:32px;box-shadow:0 12px 40px #20353c16}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;background:#fff;border-bottom:1px solid #d7e0e3}.top h1{margin:0}.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.shell{max-width:1550px;margin:auto;padding:16px}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}.card{background:#fff;border:1px solid #d5dfe2;border-radius:14px;padding:18px}.board-list{display:grid;gap:8px}.board-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px;border-radius:10px;border:1px solid #d7e2e5;background:#f8fbfc}.board-row strong{display:block}.board-row small{color:#667d84}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr) 250px;gap:14px;align-items:start}.panel{background:#fff;border:1px solid #d5dfe2;border-radius:14px;padding:14px;min-width:0}.toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:10px}.tabs{display:flex;flex-wrap:wrap;gap:5px}.tabs button{padding:7px 9px;font-size:.85rem}.tabs .active{color:#fff;background:#145b68;border-color:#145b68}.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0 17px}.tile{min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;background:#f8fbfa;border-color:#d6e0dc;font-size:.78rem;overflow-wrap:anywhere;text-align:center}.tile .glyph{font-size:1.8rem;line-height:1.1}.palette{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 15px}.swatch{width:30px;height:30px;padding:0;border:2px solid white;border-radius:50%;outline:1px solid #a9b7b8}.swatch.selected{outline:3px solid #145b68}.stage{display:flex;align-items:center;justify-content:center;min-height:620px;padding:20px;border-radius:15px;background:radial-gradient(circle at 40% 12%,#cda87e,#9b7451)}.board{position:relative;width:100%;max-width:920px;aspect-ratio:1.36;border:9px solid #b88958;border-radius:50%;overflow:hidden;touch-action:none;background:repeating-linear-gradient(3deg,#ead3af 0px,#e6c79b 13px,#e9cca4 23px,#e2bc8e 31px);box-shadow:inset 0 0 45px #8d663522,0 18px 35px #50351f50}.piece{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:3px;min-width:46px;cursor:grab;touch-action:none;user-select:none}.piece.selected .object{outline:3px solid #126579;outline-offset:3px}.object{display:flex;align-items:center;justify-content:center;position:relative;width:48px;height:48px;font-size:2rem;filter:drop-shadow(2px 4px 3px #62411c69)}.piece.theme .object,.piece.symbol .object{border-radius:10px;background:#f8e7c8d9;border:2px solid #cfa771}.piece.theme .object{border-radius:6px}.name{max-width:120px;padding:3px 7px;border:1px solid #d8c9b0;border-radius:6px;background:#fffaf0ee;font-size:.75rem;text-align:center;overflow-wrap:anywhere}.doll{position:relative;width:44px;height:56px;display:inline-block;filter:drop-shadow(2px 4px 3px #52372066)}.doll:before{content:"";position:absolute;z-index:2;left:10px;top:0;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 25% 20%,#fbe5c0,#d5a773 70%,#8c5d35)}.doll:after{content:"";position:absolute;left:5px;top:19px;width:34px;height:36px;border-radius:15px 15px 7px 7px;background:linear-gradient(90deg,#ac774b,#e8bd8b 35%,#b98550)}.doll .tint{position:absolute;z-index:3;left:6px;top:23px;width:32px;height:30px;opacity:.58;mix-blend-mode:multiply;border-radius:13px 13px 7px 7px}.doll .direction{position:absolute;z-index:4;left:17px;top:1px;font-size:.85rem;color:#4f3422;transform-origin:5px 23px}.ropes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}.ropes path{fill:none;stroke-linecap:round;pointer-events:stroke;cursor:move;filter:drop-shadow(.3px .4px .5px #4d321f88)}.handle{position:absolute;z-index:4;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:#136578;transform:translate(-50%,-50%);touch-action:none;cursor:grab}.handle.mid{background:#dc7941}.hint{font-size:.86rem;line-height:1.5;color:#557078;margin:10px 0}.snap{display:flex;gap:5px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #e6ebed;font-size:.86rem}.snap span{overflow-wrap:anywhere}.section{border-top:1px solid #e2e9eb;margin-top:18px;padding-top:16px}.status{font-size:.84rem;color:#607b81}.responsive-note{display:none}@media(max-width:1100px){.workspace{grid-template-columns:230px minmax(0,1fr)}.right{grid-column:1/-1}.stage{min-height:450px}}@media(max-width:700px){.top{padding:12px;align-items:flex-start;flex-direction:column}.shell{padding:9px}.dashboard,.workspace{display:flex;flex-direction:column}.panel,.center{width:100%}.stage{min-height:340px;padding:8px}.board{border-width:5px}.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.tile{min-height:70px}.install,.login{margin:20px 12px;padding:20px}}
.piece.bus .object{width:130px;height:72px}.emotion-bus{width:126px;height:69px;border:3px solid #91683d;border-radius:16px 25px 9px 9px;background:linear-gradient(125deg,#e7c491,#bb8c5d);box-shadow:inset 0 3px 8px #fff9,2px 4px 4px #56371b55;position:relative;padding:6px 8px}.bus-seats{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,24px);gap:1px 5px}.bus-seat{font-size:25px;line-height:22px;text-align:center;color:var(--seat-color);text-shadow:0 1px 2px #0008;background:#674b2d42;border-radius:50%;height:23px}.bus-wheels{position:absolute;bottom:-12px;left:13px;font-size:16px;color:#674628;white-space:pre}.piece.bus .name{margin-top:7px}.bus-choice{min-height:44px}@media (pointer:coarse){button{min-height:44px}.swatch{width:44px;height:44px}.handle{width:28px;height:28px}.tabs button{min-height:44px}}
@media(max-width:1100px){.workspace{display:flex;flex-direction:column}.workspace>.panel,.workspace>.center{width:100%}.workspace>.panel:first-child{order:1}.workspace>.center{order:2}.workspace>.right{order:3}.catalog{grid-template-columns:repeat(5,minmax(0,1fr))}.stage{min-height:0}.board{width:min(100%,920px)}}
@media(max-width:700px){.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.piece.bus .object{transform:scale(.75)}.piece.bus{min-width:100px}}
/* Poppetjes: het hoofd heeft zichtbare ogen; de figuur schaalt per rol. */
.piece.person .doll .eyes{position:absolute;z-index:5;top:10px;left:15px;width:4px;height:4px;border-radius:50%;background:#34281e;box-shadow:10px 0 #34281e}
.piece.person.size-baby .object{transform:scale(.65)}
.piece.person.size-child .object{transform:scale(.82)}
.piece.person.size-adult .object{transform:scale(1)}
.piece.person.size-parent .object{transform:scale(1.16)}
.piece.person.size-grandparent .object{transform:scale(1.36)}
.piece.person{min-width:62px;min-height:70px}
/* Herkenbare figuren in de keuzelijst en op het tafelblad. */
.tile .glyph{height:47px;display:flex;align-items:center;justify-content:center}
.catalog-doll{display:flex;width:44px;height:47px;align-items:center;justify-content:center}
.catalog-doll .doll{transform:scale(.7);transform-origin:center center;flex:none}
.catalog-doll.size-baby .doll{transform:scale(.45)}
.catalog-doll.size-child .doll{transform:scale(.57)}
.catalog-doll.size-parent .doll{transform:scale(.8)}
.catalog-doll.size-grandparent .doll{transform:scale(.9)}
.catalog-doll .doll .tint{background:#967fc0;opacity:.85}
.catalog-doll.role-oma .doll .tint,.catalog-doll.role-moeder .doll .tint{background:#b95e7d}
.catalog-doll.role-opa .doll .tint,.catalog-doll.role-vader .doll .tint{background:#4f86ab}
.catalog-doll.role-kind .doll .tint{background:#e4aa45}
.catalog-doll.role-baby .doll .tint{background:#9acdbd}
.doll .hair{position:absolute;z-index:4;top:-2px;left:9px;width:26px;height:12px;border-radius:15px 15px 4px 4px;background:#684936}
.role-oma .doll .hair,.role-opa .doll .hair{background:#f0f0e9;box-shadow:0 0 0 1px #9b9b95}
.role-moeder .doll .hair{height:17px;width:30px;left:7px;border-radius:13px 13px 4px 4px;background:#634134}
.role-baby .doll .hair{width:10px;left:17px;height:5px;background:#bb946a}
.role-kind .doll .hair{height:9px;background:#95623f}
.role-opa .doll .hair{height:6px}
.doll .eyes{top:12px!important}
.piece.person .look-arrow{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6;color:#216a75;text-shadow:0 1px 2px #fff,0 2px 3px #fff;font-size:17px}
.piece.person .look-arrow span{position:absolute;left:-8px;top:-47px;width:16px;text-align:center}
/* De figuur blijft rechtop; alleen de pijl geeft de kijkrichting aan. */
.piece.person.facing-away .eyes{display:none}
.piece.person.size-parent .name{margin-top:14px}
.piece.person.size-grandparent .name{margin-top:26px}
.role-moeder .doll .hair{height:8px;top:-2px}
.piece.person .doll .eyes,.catalog-doll .doll .eyes{top:14px!important}
.emotion-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-family:Arial,sans-serif;font-size:27px;line-height:1;font-weight:700}
.piece.symbol.emotion-symbol .object{border-radius:50%;border:2px solid #ffffffa0;font-family:Arial,sans-serif;font-size:32px;font-weight:700}
[hidden]{display:none!important}.view-tabs{max-width:1550px;margin:14px auto 0;padding:0 16px;display:flex;gap:8px}.view-tabs button{font-weight:700;min-height:46px}.view-tabs .active{background:#145b68;border-color:#145b68;color:#fff}.house-layout{max-width:1550px}.house-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 25px;background:#fff;border-radius:15px;margin-bottom:14px}.house-header h2{font-size:1.5rem;margin-bottom:5px}.house-header p{margin:0;color:#536c72}.house-tag{background:#e7f0ed;color:#145b68;border-radius:30px;padding:10px 16px;white-space:nowrap}.house-columns{display:grid;grid-template-columns:245px minmax(0,1fr) 270px;gap:15px;align-items:start}.house-scene{padding:20px;background:#e8ddcd;border:1px solid #c6ae92;border-radius:18px;box-shadow:0 8px 25px #2a2a2a15}.house-roof{clip-path:polygon(50% 0,100% 100%,0 100%);height:100px;background:#a87c64;color:#fff;text-align:center;padding-top:58px;font-size:1.25rem;font-weight:700}.house-rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;background:#9e806a;border-radius:0 0 12px 12px}.house-room{min-height:124px;background:#fff9ed;border:2px solid #d8c9ac;border-radius:8px;padding:12px;cursor:pointer;touch-action:manipulation}.house-room:hover{border-color:#2c8490}.house-room h3{font-size:.99rem;margin-bottom:12px}.room-werk,.room-waarden,.room-competenties,.room-gezondheid{grid-column:1/-1}.room-werk{background:#e4ebf3}.room-waarden{background:#f6e8d8}.room-competenties{background:#e9e4f1}.room-gezondheid{background:#e2eddf}.room-omgeving{background:#f5eecf}.room-onderstroom{background:#e0e9ed}.house-picker,.house-people{display:flex;flex-wrap:wrap;gap:7px}.house-picker{margin:16px 0}.house-peg{display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:100%;overflow-wrap:anywhere;background:white}.house-peg.active{border:2px solid #176d79;background:#e9f5f3}.peg-dot{display:inline-block;flex:none;width:17px;height:23px;border-radius:50% 50% 35% 35%;box-shadow:inset 0 -4px 4px #0002}.question-room{color:#62767b;font-weight:700}.question-text{font-size:1.2rem;line-height:1.4;padding:16px;background:#f5f1e6;border-left:4px solid #bf9670;border-radius:8px}.house-question button{min-height:44px}@media(max-width:1100px){.house-columns{grid-template-columns:1fr}.house-header{flex-wrap:wrap}}@media(max-width:600px){.house-rooms{grid-template-columns:1fr}.house-room{grid-column:1!important;min-height:110px}.house-roof{height:75px;padding-top:44px}.house-header{padding:15px}.view-tabs{padding:0 9px}.view-tabs button{flex:1}}
/* Formule Werk: dezelfde blauwe, rode en lichte visuele taal als de hoofdsite. */
:root{font-family:Arial,Helvetica,sans-serif;color:#19344e;background:#f5f6fb;--fw-blue:#4774b9;--fw-deep:#28558f;--fw-red:#b72d35;--fw-pale:#e8eef8}
.top{background:#fff;border-bottom:3px solid var(--fw-blue);padding:18px 24px}.top h1{color:var(--fw-blue);font-size:1.5rem;letter-spacing:.01em}.top h1:before{content:'●  ●';color:var(--fw-red);font-size:.8em;letter-spacing:-.24em;margin-right:13px;text-shadow:-11px 0 var(--fw-blue)}
h1,h2,h3{color:var(--fw-deep)}button{border-color:#c9d5e9;color:var(--fw-deep)}button:hover{background:var(--fw-pale)}button:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--fw-blue)}
.primary,.tabs .active,.view-tabs .active{background:var(--fw-blue);border-color:var(--fw-blue);color:#fff}.primary:hover{background:var(--fw-deep)}.danger{color:var(--fw-red)}.panel,.card,.house-header{border-color:#dce5f1;box-shadow:0 8px 25px #2347760b}.view-tabs{border-bottom:2px solid #d5e1f2;padding-bottom:8px}.view-tabs button{border-radius:8px 8px 0 0}.swatch.selected{outline-color:var(--fw-blue)}.hint{color:#506684}.name{border-color:#b8cae6}.piece.selected .object{outline-color:var(--fw-blue)}.handle{background:var(--fw-blue)}.handle.mid{background:var(--fw-red)}
.house-header{border-top:5px solid var(--fw-blue)}.house-tag{background:var(--fw-pale);color:var(--fw-deep)}.house-scene{background:#f7f8fc;border-color:#d9e4f4}.house-context{border:9px solid #aec5e7;border-radius:18px;background:#e9f0fa;padding:15px;box-shadow:inset 0 0 0 3px white}.context-heading{text-align:center;color:var(--fw-deep);font-size:1.05rem;font-weight:700;padding:5px 0 14px}.context-heading small{display:block;font-size:.75rem;font-weight:400}.house-building{max-width:580px;margin:auto;filter:drop-shadow(0 8px 10px #2b477b24)}.house-roof{background:var(--fw-blue)}.house-rooms{grid-template-columns:1fr;background:#6384b5}.house-room{grid-column:1!important;min-height:100px;border-color:#b7c7df;background:#fff}.house-room:hover{border-color:var(--fw-red)}.room-werk{border-left:6px solid #b72d35}.room-waarden{border-left:6px solid #6c87c9}.room-competenties{border-left:6px solid #497abb}.room-gezondheid{border-left:6px solid #80a2d8}.house-outside{margin:18px auto 0;max-width:580px}.room-omgeving{background:#fff;border:2px dashed var(--fw-red);min-height:100px}.room-omgeving h3{color:var(--fw-red)}.house-peg.active{border-color:var(--fw-blue);background:var(--fw-pale)}.question-text{background:#f1f5fb;border-left-color:var(--fw-red)}
@media(max-width:600px){.house-context{padding:8px;border-width:6px}.house-scene{padding:9px}.house-roof{height:85px;padding-top:49px}}
.house-ratings-layout{grid-template-columns:260px minmax(0,1fr) 295px}.house-explainer p{line-height:1.55;font-size:.9rem}.house-explainer h3:not(:first-child){margin-top:22px}.house-explainer a{color:var(--fw-blue)}.house-room{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;min-height:98px;padding:15px 18px}.house-room strong{font-size:1rem}.house-room.room-selected{border:3px solid var(--fw-blue);box-shadow:0 0 0 3px #fff}.house-rating{font-weight:700;color:var(--fw-blue);white-space:nowrap}.rating-prompt{font-size:1.15rem;font-weight:700;line-height:1.35;margin:14px 0}.rating-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.rating-button{min-width:0;min-height:47px;padding:6px;font-weight:700}.rating-button.chosen{background:var(--fw-blue);color:#fff;border-color:var(--fw-blue)}.house-question .question-text{font-size:1.05rem}.house-question .section{margin-top:24px}
@media(max-width:1100px){.house-ratings-layout{grid-template-columns:1fr}.house-explainer{order:3}.house-scene{order:1}.house-question{order:2}}
/* Alleen de gekozen score krijgt de betekenisvolle rood-groen-kleur. */
.room-werk,.room-waarden,.room-competenties,.room-gezondheid{border-left:6px solid var(--fw-blue)}.room-omgeving{border-color:var(--fw-blue)}.room-omgeving h3{color:var(--fw-deep)}.house-question .question-text{border-left-color:var(--fw-blue)}
.house-rating{display:inline-flex;align-items:center;justify-content:center;min-width:45px;height:45px;border-radius:50%;background:#e9eef6;color:var(--fw-deep);font-size:1.25rem;font-weight:800}.rating-button{border:2px solid transparent}.rating-button.chosen{outline:3px solid #1c314b;outline-offset:2px;border-color:#fff}.house-room.room-selected{border-color:var(--fw-blue)}
/* Ogen draaien om het midden van het hoofd; het lichaam blijft recht. */
.piece.person .doll .eyes{transform-origin:7px -2px}
/* Het ogenpaar blijft horizontaal, ook wanneer het gezicht opzij kijkt. */
.piece.person .doll .eyes{transform-origin:center center}
.custom-symbol{border-top:2px solid #e2e9f3;padding-top:14px;margin:14px 0}.custom-symbol h3{font-size:1rem;margin:0 0 12px}.custom-symbol input{min-height:44px}.custom-symbol button{min-height:44px;width:100%;background:var(--fw-blue);color:#fff}.custom-symbol button:hover{background:var(--fw-deep)}

.brand-link{display:block;flex:0 0 auto}.brand-link img{display:block;width:100%;height:auto}.brand-login{max-width:160px;margin:0 0 22px}.brand-header{width:190px}.top .actions{margin-left:auto}@media(max-width:700px){.brand-header{width:155px}.top .actions{margin-left:0}}
.coach-tabs{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 14px;margin-bottom:2px;scrollbar-width:thin}.coach-tabs button{flex:none;min-height:44px;padding:10px 16px;font-weight:700}.coach-tabs button.active{background:var(--fw-blue);color:#fff;border-color:var(--fw-blue)}.dashboard .board-row{flex-wrap:wrap;overflow-wrap:anywhere}
.stage{position:relative}.stage #exitFull{display:none}.stage:fullscreen,.stage.expanded{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;max-width:none;min-height:0;margin:0;border-radius:0;padding:12px;display:flex;align-items:center;justify-content:center}.stage:fullscreen #exitFull,.stage.expanded #exitFull{display:block;position:absolute;right:15px;top:15px;z-index:12}.stage:fullscreen .board,.stage.expanded .board{height:min(90vh,calc(94vw / 1.36));width:min(94vw,calc(90vh * 1.36));max-width:none;aspect-ratio:1.36}
@media print{ @page{size:A4 landscape;margin:10mm} body{background:white!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}body *{visibility:hidden!important}.stage,.stage #board,.stage #board *{visibility:visible!important}.stage{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:4mm!important;background:white!important;box-shadow:none!important}.stage #board{position:relative!important;width:258mm!important;height:185mm!important;max-width:none!important;aspect-ratio:auto!important;margin:auto!important;box-shadow:none!important}.stage #handles,.stage #exitFull,.stage .look-arrow{visibility:hidden!important}.piece.selected .object{outline:none!important}}
.confirm-overlay{position:fixed;inset:0;z-index:20000;background:#101e32a6;display:flex;align-items:center;justify-content:center;padding:16px}.confirm-card{background:#fff;border-radius:16px;width:min(100%,480px);max-height:95vh;overflow:auto;padding:24px;box-shadow:0 20px 80px #0005}.confirm-card .danger{border-color:#b72d35;color:#fff;background:#b72d35}.confirm-card .danger:disabled{opacity:.6}
