.uxcover{position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}.uxcover[hidden]{display:none}.uxcard{width:min(560px,100%);max-height:85dvh;overflow:auto;box-sizing:border-box}.uxcard h2{margin-top:0}.uxcard label{display:grid;gap:6px;margin:12px 0}.uxcard input,.uxcard select{font:inherit;max-width:100%;box-sizing:border-box;padding:9px}.uxcard .uxcheck{display:flex;gap:10px;align-items:center}.uxcard button{margin:5px;max-width:100%}.uxmembers{display:grid;gap:8px;max-height:45dvh;overflow:auto}.uxmember{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:12px;text-align:left;overflow-wrap:anywhere}.uxmember span{font-size:13px;color:var(--mut)}.uxsave{font-size:12px;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center}.uxsave button{font:inherit}.uxsmallstatus{max-width:230px;flex:0 1 230px}.uxexplain{font-size:12px;color:var(--mut);line-height:1.5}.uxmodes{display:flex;justify-content:center;gap:8px;margin:5px auto}.uxmodes[hidden]{display:none}.uxmodes button{font:inherit;padding:7px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg)}.uxmodes button[aria-pressed=true]{outline:2px solid var(--pc)}[data-ux-cell]:focus-visible{outline:3px solid var(--pc);outline-offset:-3px;z-index:3}.uxpeople{display:block;margin:4px 8px 8px auto;font:inherit;font-size:12px;max-width:calc(100% - 16px)}.uxcharts summary{padding:12px;cursor:pointer}.uxsummary{white-space:normal;overflow-wrap:anywhere}.uxpractice{min-height:52px;min-width:160px}.uxcard li{line-height:1.5;margin:8px 0}.hhomeviews b,.sviews button,.daypeer b{overflow-wrap:anywhere}.daypeer b{display:inline!important}.hhomeviews>*{min-width:0}.hwrap,.hsection,.dayitem{min-width:0}.daypeer{flex-wrap:wrap}.uxmember b{white-space:normal}
@media(max-width:600px){.uxsmallstatus{display:none}.uxmodes{width:100%}.uxsummary{font-size:11px}.uxpeople{padding:6px 10px}.hdrow .dname{min-width:0}.uxcard{padding:18px}.sviews{flex-wrap:wrap}}

.uxsmallstatus.storage-warning{display:block!important;color:var(--fg)}
#grid,#grid .c,#mgrid,#mgrid .mc,#hexsvg,#hexsvg svg,#mpal,#mpal .pb{touch-action:pinch-zoom!important}
.uxcharts .soverheroes{max-height:55dvh;overflow:auto}.uxcharts .sh2{max-height:70dvh;overflow:auto}.uxcharts .sweek{min-width:600px}.uxsave span{overflow-wrap:anywhere}
.htop{flex-wrap:wrap}.htop>div{min-width:0}.daypeer>span{max-width:100%;min-width:0}.daypeer b{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uxsummary{min-width:0}.sviews button{max-width:100%}
@media(max-width:600px){.dayitem .hdrow{display:flex;flex-wrap:wrap;gap:7px}.hdrow .dname{flex:1 1 80px}.hdrow .dstate{margin-left:auto;flex:0 1 auto}.hdrow .daypeer{order:5;flex:1 1 100%;width:auto;margin-left:0!important;justify-content:flex-start}.daypeer>span{width:auto!important;max-width:100%;white-space:normal}.daypeer b{max-width:210px}.htop .hactions{margin-left:auto}.hdrow .dpending b{display:inline!important;font-size:11px}.hdrow .dpending{gap:4px;flex-wrap:wrap}.hdrow .uxsummary{font-size:12px}}
.scontrols,.sper{flex-wrap:wrap;min-width:0;max-width:100%;box-sizing:border-box}.sper button{min-width:0}.stop>div{min-width:0}.stop h2{overflow-wrap:anywhere}.uxcharts{min-width:0;max-width:100%}.uxcharts .sh2{box-sizing:border-box}

.daypeer b{min-width:0}[data-ux-clue]:focus-visible,[data-ux-line]:focus-visible{outline:3px solid var(--pc);outline-offset:-2px}

/* Groepsdetails blijven een aparte knop, in dezelfde compacte puzzelregel. */
.dayitem:has(>.uxpeople){position:relative}.dayitem:has(>.uxpeople) .hdrow>.daypeer{visibility:hidden}.uxpeople{position:absolute;right:218px;top:25px;transform:translateY(-50%);width:126px;margin:0;padding:5px 6px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);box-shadow:none;font-size:11px;line-height:1.4}.uxcard button.uxmember{background:var(--card);color:var(--fg);box-shadow:none;margin:0;width:100%}.uxcard button.uxmember:hover{background:color-mix(in srgb,var(--pc) 8%,var(--card))}
@media(min-width:601px) and (max-width:1100px){.uxpeople{right:190px;width:112px}}
@media(max-width:600px){.dayitem:has(>.uxpeople) .hdrow>.daypeer{display:none!important}.uxpeople{position:static;transform:none;width:auto;max-width:calc(100% - 12px);margin:0 6px 6px auto;padding:4px 9px}}
.hdrow .uxsummary{font-size:11px;line-height:1.4;white-space:nowrap}


/* UX-dialogs volgen dezelfde korte motion als de rest van de app. */
.uxcover:not([hidden]){animation:gpCoverIn var(--motion-ui,210ms) var(--motion-ease,cubic-bezier(.2,.7,.3,1)) both}
.uxcover:not([hidden])>.uxcard{animation:gpDialogIn var(--motion-ui,210ms) var(--motion-ease,cubic-bezier(.2,.7,.3,1)) both}
@media(prefers-reduced-motion:reduce){.uxcover:not([hidden]),.uxcover:not([hidden])>.uxcard{animation:none!important}}