:root{--ink:#102d55;--muted:#5f7899;--glass:rgba(245,249,255,.45);--line:rgba(255,255,255,.62);--shadow:rgba(48,80,145,.22);--blue:#407ee8;--pink:#ee91d5;--cyan:#64dfe2;--peach:#ffb789}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Nasalization","Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#dce8f2}body{overflow-x:hidden;background:radial-gradient(circle at 82% 18%,rgba(136,167,255,.72),transparent 31%),radial-gradient(circle at 75% 80%,rgba(255,150,181,.5),transparent 35%),linear-gradient(145deg,#edf4f8 0%,#cbdcf0 48%,#acc8ed 100%)}body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px}
.ambient{position:fixed;border-radius:50%;filter:blur(3px);opacity:.75;pointer-events:none}.ambient-a{width:44vw;height:44vw;right:-12vw;top:-10vw;background:radial-gradient(circle at 32% 70%,#7be4e7,transparent 25%),radial-gradient(circle at 62% 67%,#ffb5ce,transparent 34%),rgba(137,167,244,.5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 18px 50px rgba(50,75,130,.22)}.ambient-b{width:36vw;height:36vw;left:-17vw;bottom:-10vw;background:linear-gradient(130deg,rgba(255,255,255,.8),rgba(116,158,239,.4));box-shadow:inset -8px -10px 30px rgba(122,92,222,.25)}.ambient-c{width:42vw;height:34vw;right:-18vw;bottom:-14vw;background:radial-gradient(circle at 20% 20%,#ff9fbb,transparent 32%),#ffbd7b;opacity:.7}
.shell{position:relative;z-index:1;max-width:1040px;margin:auto;padding:44px 34px 60px}.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin:0 6px 32px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.7px;color:#42658d}.live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#62d8c5;box-shadow:0 0 0 5px rgba(98,216,197,.15)}h1{font-size:38px;line-height:1.02;margin:12px 0 0;font-weight:650;letter-spacing:-1.5px}h1 span{font-weight:300;color:#456a98}.clock{text-align:right}.clock strong{display:block;font-size:36px;font-weight:300;letter-spacing:-1px}.clock span{font-size:12px;color:var(--muted)}
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.tile{position:relative;min-height:218px;padding:24px;border:1px solid var(--line);border-radius:30px;background:var(--glass);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 20px 45px -25px var(--shadow);-webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%);transition:transform .28s ease,box-shadow .28s ease,opacity .2s,background-color .2s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}.tile:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.32),transparent 48%,rgba(238,145,213,.11));pointer-events:none;transition:background .18s}.tile.wide{grid-column:span 2}.tile:hover{transform:translateY(-3px);box-shadow:inset 0 1px 1px white,0 25px 55px -22px rgba(46,78,145,.38)}.tile.holding,.tile.dragging{background:rgba(87,112,166,.48);box-shadow:inset 0 1px 1px rgba(255,255,255,.62),0 28px 58px -18px rgba(35,57,111,.55)}.tile.holding:before,.tile.dragging:before{background:linear-gradient(145deg,rgba(93,129,203,.35),rgba(77,80,150,.28) 55%,rgba(225,113,197,.24))}.tile.dragging{opacity:.92;transform:scale(.97);z-index:10;cursor:grabbing;pointer-events:none}.tile.snap-left,.tile.snap-right{grid-column:span 2;min-height:300px}.tile.snap-left{grid-column-start:1}.tile.snap-right{grid-column-start:3}.tile-icon{display:flex;width:39px;height:39px;border:1px solid rgba(255,255,255,.65);border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.25);color:white;text-shadow:0 1px 8px #5487df;box-shadow:inset 0 0 18px rgba(255,255,255,.35)}.tile p{font-size:11px;margin:18px 0 8px;color:#456a92;text-transform:uppercase;letter-spacing:1.15px;font-weight:600}.tile>strong{display:block;font-size:30px;font-weight:450;letter-spacing:-.6px}.tile>strong small{font-size:13px}.tile>span{display:block;font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.15px}.forecast{display:flex;align-items:flex-end;gap:8px;height:35px;margin-top:16px}.forecast i{display:block;flex:1;border-radius:5px;background:linear-gradient(#81dbe7,#7f8ff0)}.forecast i:nth-child(1){height:38%}.forecast i:nth-child(2){height:65%}.forecast i:nth-child(3){height:85%}.forecast i:nth-child(4){height:55%}.forecast i:nth-child(5){height:72%}.bars{height:35px;display:flex;align-items:flex-end;gap:4px;margin-top:17px}.bars i{flex:1;border-radius:4px;background:linear-gradient(#f3a8d8,#7198ed)}.bars i:nth-child(odd){height:40%}.bars i:nth-child(2){height:68%}.bars i:nth-child(4){height:82%}.bars i:nth-child(6){height:55%}.bars i:nth-child(8){height:74%}
button{font:inherit}.pill{border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.32);color:#345b89;border-radius:18px;padding:7px 12px;margin-top:17px;font-size:11px}.pill.primary{color:white;background:linear-gradient(120deg,rgba(76,126,230,.82),rgba(211,121,214,.7))}.scene-row{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.scene{flex:1;min-width:0;border:0;background:transparent;color:#5d7699;padding:8px 2px}.scene b{display:flex;width:44px;height:44px;margin:0 auto 7px;border-radius:16px;align-items:center;justify-content:center;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.55);font-size:18px;color:white}.scene span{font-size:10px}.scene.active b{background:linear-gradient(145deg,#6695ed,#a987e5);box-shadow:0 9px 20px rgba(91,105,205,.28)}.switch{position:absolute;right:23px;bottom:22px;width:49px;height:27px;border:0;border-radius:20px;background:rgba(92,116,150,.25);padding:3px}.switch i{display:block;width:21px;height:21px;border-radius:50%;background:white;transition:transform .2s}.switch.on{background:linear-gradient(90deg,#5a92e8,#a479df)}.switch.on i{transform:translateX(22px)}.event{display:flex;align-items:center;margin-top:15px;font-size:11px}.event time{width:44px;color:#577294}.event>i{height:33px;width:3px;border-radius:3px;margin-right:10px}.event i.blue{background:#6999ed}.event i.pink{background:#e98fcf}.event b,.event small{display:block}.event small{color:#7489a4;margin-top:3px}.agenda{min-height:180px}video,#motion-canvas{display:none}
.calendar-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.calendar-date{display:flex;align-items:center;gap:10px}.calendar-date>b{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:13px;background:#fff;color:#1a73e8;box-shadow:0 5px 16px rgba(60,64,67,.14);font-size:22px;font-weight:500}.calendar-date span,.calendar-date strong,.calendar-date small{display:block}.calendar-date strong{color:#3c4043;font-size:12px;font-weight:600;text-transform:capitalize}.calendar-date small{margin-top:2px;color:#80868b;font-size:9px;letter-spacing:.2px}.calendar-refresh{position:relative;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.38);color:#5f6368;font-size:22px}.calendar-refresh:active{background:rgba(26,115,232,.16);color:#1a73e8}.calendar-events{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px}.calendar-event{display:grid;grid-template-columns:43px 1fr;align-items:center;min-height:46px;padding:6px 9px 6px 0;border-radius:10px;background:rgba(255,255,255,.34);border-left:4px solid #1a73e8;font-size:10px}.calendar-event.red{border-left-color:#d93025}.calendar-event.green{border-left-color:#188038}.calendar-event.yellow{border-left-color:#f9ab00}.calendar-event time{padding-left:8px;color:#5f6368;font-weight:600}.calendar-event b,.calendar-event small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event b{color:#3c4043;font-size:11px;font-weight:600}.calendar-event small{margin-top:2px;color:#80868b;font-size:9px}.calendar-state{position:relative;z-index:1;margin-top:7px;color:#80868b;font-size:8px;letter-spacing:.2px}.calendar-state.connected{color:#188038}
.edge{position:fixed;z-index:20;top:42%;padding:12px 7px;background:rgba(255,255,255,.7);color:#617a9b;font-size:9px;letter-spacing:1px;opacity:0;transition:opacity .2s}.edge-left{left:0;border-radius:0 12px 12px 0}.edge-right{right:0;border-radius:12px 0 0 12px}body.is-dragging .edge{opacity:1}.toast{position:fixed;z-index:50;left:50%;bottom:24px;transform:translate(-50%,20px);padding:11px 18px;border-radius:18px;background:rgba(28,52,89,.82);color:white;font-size:12px;opacity:0;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}body.asleep .shell{opacity:.22;filter:blur(5px)}body.asleep:before{content:"Kom dichterbij";position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);font-size:25px;color:white;text-shadow:0 4px 22px #41659b}
.calendar-event:nth-child(n+3){display:none}.agenda.snap-left .calendar-event:nth-child(n+3),.agenda.snap-right .calendar-event:nth-child(n+3){display:grid}
@media(max-width:760px){.shell{padding:30px 18px 45px}.dashboard{grid-template-columns:repeat(2,1fr)}.tile.wide,.tile.snap-left,.tile.snap-right{grid-column:span 2;grid-column-start:auto}.topbar{align-items:flex-start}.clock strong{font-size:28px}h1{font-size:31px}.ambient-a{width:80vw;height:80vw}.scene-row{gap:2px}}
@media(max-width:430px){.tile{padding:20px;min-height:200px;border-radius:25px}.dashboard{gap:12px}.tile>strong{font-size:25px}.clock span{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(hover:none){.tile:hover{transform:none}}

/* iPad 3/4 Retina: 2048x1536 fysieke pixels = 1024x768 CSS-punten. */
.tile-icon{width:44px;height:44px}
button{min-height:44px}
.pill{border-radius:22px;padding:8px 14px;margin-top:12px}
.scene{min-width:44px}
.switch{width:54px;height:44px;border-radius:22px;padding:8px 5px}
.switch i{width:28px;height:28px}
.switch.on i{transform:translateX(16px)}
@media(min-width:900px) and (max-width:1100px) and (max-height:850px){
  body{min-height:100vh;overflow:hidden}
  .shell{max-width:none;height:100vh;padding:25px 28px 22px}
  .topbar{align-items:center;margin:0 6px 19px}
  .eyebrow{margin:0}h1{font-size:32px;margin-top:8px}.clock strong{font-size:32px}
  .dashboard{grid-template-columns:repeat(6,1fr);gap:14px}
  .tile{min-height:238px;padding:20px;border-radius:27px}
  .tile.wide{grid-column:span 2}
  .tile[data-id="lights"],.tile[data-id="presence"],.tile[data-id="agenda"]{grid-column:span 2}
  .tile[data-id="agenda"]{min-height:238px}
  .tile p{margin-top:13px}.forecast,.bars{margin-top:12px}
  .scene-row{gap:4px;margin-top:12px}.scene{padding-left:0;padding-right:0}
  .tile.snap-left{grid-column:1 / span 3;min-height:238px}
  .tile.snap-right{grid-column:4 / span 3;min-height:238px}
}

/* iOS standalone-webapp en veilige schermranden. */
html{width:100%;height:100%;background:#dce8f2}
body{width:100%;min-height:100%;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);-webkit-tap-highlight-color:transparent}
body.standalone{position:fixed;inset:0;overflow:hidden}
.install-tip{position:fixed;z-index:80;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));display:none;width:430px;max-width:calc(100% - 32px);min-height:64px;align-items:center;justify-content:space-between;gap:16px;padding:11px 11px 11px 18px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:rgba(239,246,255,.82);box-shadow:0 18px 45px rgba(42,71,124,.24);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);transform:translateX(-50%)}
.install-tip.show{display:flex}.install-tip span{font-size:12px;line-height:1.35;color:#5f7899}.install-tip b{display:block;color:#183c67;font-size:13px}.install-tip button{flex:0 0 44px;width:44px;border:0;border-radius:15px;background:rgba(255,255,255,.5);color:#527298;font-size:25px}
.rotate-tip{display:none}

/* Rasterfeedback en echte halve-schermweergave. */
body.is-dragging .tile:not(.dragging){outline:1px dashed rgba(69,106,152,.38);outline-offset:-5px}
@media(min-width:761px) and (orientation:landscape){
  .tile.snap-left,.tile.snap-right{position:fixed;z-index:25;top:132px;bottom:22px;width:calc(50vw - 35px);height:auto;min-height:0;grid-column:auto;transform:none!important}
  .tile.snap-left{left:28px}.tile.snap-right{right:28px;left:auto}
  body.snap-left-active .dashboard{margin-left:calc(50% + 7px)}
  body.snap-right-active .dashboard{margin-right:calc(50% + 7px)}
  body.snap-left-active .dashboard,body.snap-right-active .dashboard{height:calc(100vh - 154px);grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;overflow:hidden}
  body.snap-left-active .tile:not(.snap-left),body.snap-right-active .tile:not(.snap-right){grid-column:auto!important;min-height:0;padding:12px;border-radius:20px;overflow:hidden}
  body.snap-left-active .tile:not(.snap-left) .forecast,body.snap-right-active .tile:not(.snap-right) .forecast,
  body.snap-left-active .tile:not(.snap-left) .bars,body.snap-right-active .tile:not(.snap-right) .bars{display:none}
  body.snap-left-active .tile:not(.snap-left) .tile-icon,body.snap-right-active .tile:not(.snap-right) .tile-icon{width:34px;height:34px}
  body.snap-left-active .tile:not(.snap-left)>strong,body.snap-right-active .tile:not(.snap-right)>strong{font-size:21px}
  body.snap-left-active .tile:not(.snap-left) p,body.snap-right-active .tile:not(.snap-right) p{margin:7px 0 4px;font-size:9px}
  body.snap-left-active .scene-row,body.snap-right-active .scene-row{margin-top:3px}
  body.snap-left-active .scene b,body.snap-right-active .scene b{width:32px;height:32px;margin-bottom:2px}
}
@media(orientation:portrait){
  body{overflow:hidden}
  .shell,.edge,.toast,.install-tip{visibility:hidden}
  .rotate-tip{position:fixed;z-index:100;inset:0;display:flex;align-items:center;justify-content:center;gap:20px;padding:30px;background:radial-gradient(circle at 70% 30%,rgba(155,174,255,.78),transparent 36%),linear-gradient(145deg,#eaf2f7,#b9d0eb);color:#173b68;text-align:left}
  .rotate-tip b{font-size:64px;font-weight:300;color:#6c86d9}.rotate-tip span{font-size:24px;letter-spacing:.5px}.rotate-tip small{font-size:12px;font-weight:400;color:#5f7899;letter-spacing:.8px}
}

/* Zwarte ruststand: de camera blijft actief achter een volledig zwarte laag. */
body.asleep .shell{opacity:1;filter:none}
body.asleep:before{content:"";position:fixed;z-index:500;inset:0;left:0;top:0;transform:none;background:#000;color:transparent;text-shadow:none}

/* Twee tegels mogen samen het volledige dashboard vullen. */
body.dual-snap-active .dashboard{margin-left:0!important;margin-right:0!important;overflow:visible!important}
body.dual-snap-active .dashboard>.tile:not(.snap-left):not(.snap-right):not(.snap-top):not(.snap-bottom){display:none}
body.dual-snap-active .tile.snap-left,body.dual-snap-active .tile.snap-right,body.dual-snap-active .tile.snap-top,body.dual-snap-active .tile.snap-bottom{min-height:0!important}

/* Google-achtige verticale feed voor portret. */
@media(orientation:portrait){
  body{overflow-y:auto}
  .shell,.edge,.toast,.install-tip{visibility:visible}
  .rotate-tip{display:none!important}
  .shell{height:auto;min-height:100vh;padding:22px 18px 32px}
  .topbar{align-items:center;margin:0 4px 17px}
  .eyebrow{font-size:9px}h1{margin-top:6px;font-size:27px;line-height:1.05}.clock strong{font-size:29px}.clock span{font-size:10px}
  .dashboard{display:grid;height:auto;grid-template-columns:1fr;grid-template-rows:none;gap:14px;margin:0;overflow:visible}
  .tile,.tile.wide,.tile[data-id="lights"],.tile[data-id="presence"],.tile[data-id="agenda"]{grid-column:1;min-height:205px;padding:21px;border-radius:27px}
  .tile.agenda{min-height:238px}
  .tile.snap-top,.tile.snap-bottom{position:fixed;z-index:25;left:18px;right:18px;width:auto;height:calc((100vh - 146px)/2);min-height:0;grid-column:auto;transform:none!important;overflow:hidden}
  .tile.snap-top{top:118px}.tile.snap-bottom{bottom:18px}
  body.snap-top-active:not(.dual-snap-active) .dashboard{height:calc((100vh - 146px)/2);margin-top:calc((100vh - 146px)/2 + 10px);overflow-y:auto}
  body.snap-bottom-active:not(.dual-snap-active) .dashboard{height:calc((100vh - 146px)/2);overflow-y:auto}
  body.snap-top-active:not(.dual-snap-active) .dashboard>.tile:not(.snap-top),body.snap-bottom-active:not(.dual-snap-active) .dashboard>.tile:not(.snap-bottom){min-height:180px}
  .agenda.snap-top .calendar-event:nth-child(n+3),.agenda.snap-bottom .calendar-event:nth-child(n+3){display:grid}
  .edge{left:50%;right:auto;top:auto;transform:translateX(-50%);padding:7px 14px;font-size:0}
  .edge-left{top:0;border-radius:0 0 12px 12px}.edge-right{bottom:0;border-radius:12px 12px 0 0}
  .edge-left:after{content:"BOVEN";font-size:9px}.edge-right:after{content:"ONDER";font-size:9px}
}