.staff-roster-open{display:block;width:100%;padding:14px 18px;margin:12px 0;border:1px solid #c2d4c9;border-radius:14px;background:#f4f8f5;color:#174d35;font:600 15px system-ui;text-align:left}.staff-roster-dialog{width:min(90vw,520px);max-height:85vh;overflow:auto;border:0;border-radius:22px;padding:24px;background:#f6f8f5;color:#173c2e;font-family:system-ui}.staff-roster-dialog::backdrop{background:#102a24aa}.staff-roster-dialog button,.staff-roster-dialog input{padding:10px 16px;border:1px solid #d0dcd3;border-radius:10px;background:white;color:#174d35}.staff-roster-controls{margin-bottom:18px}.staff-roster-day{display:grid;gap:7px;background:white;border:1px solid #e0e7e1;border-left:3px solid #b29a62;padding:15px;border-radius:12px;margin:10px 0}.staff-roster-day strong{color:#7d6839}.staff-roster-day small{color:#65756d}

/* The header never scrolls away, including with 31 roster days on iOS PWA. */
.staff-roster-dialog{box-sizing:border-box;width:min(calc(100vw - 24px),560px);max-width:560px;height:min(86vh,760px);height:min(86dvh,760px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:hidden;padding:0;margin:auto}
.staff-roster-dialog[open]{display:flex;flex-direction:column}
.staff-roster-dialog:not([open]){display:none}
.staff-roster-header{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:14px 16px;background:#f6f8f5;border-bottom:1px solid #dbe4dc}
.staff-roster-header h2{flex:1;min-width:0;font-size:17px;line-height:1.4;margin:0}
.staff-roster-dialog .staff-roster-back,.staff-roster-dialog .staff-roster-close{flex:0 0 auto;min-height:44px;padding:8px 10px;font:600 14px system-ui;cursor:pointer}
.staff-roster-dialog .staff-roster-close{font-size:26px;width:44px}
.staff-roster-dialog .staff-roster-controls{flex:0 0 auto;margin:0;padding:14px 18px}
.staff-roster-dialog .staff-roster-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 18px 18px}
.staff-roster-dialog button:focus-visible{outline:3px solid #bca465;outline-offset:2px}
@media(max-width:360px){.staff-roster-header{gap:6px;padding:10px}.staff-roster-header h2{font-size:15px}.staff-roster-dialog .staff-roster-back{font-size:12px;padding:8px}}