:root { color-scheme: light; font-family: "Segoe UI", system-ui, sans-serif; color: #173e39; background: #f4f6f3; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #12453e; color: white; display: flex; align-items: center; justify-content: space-between; padding: 1rem max(1rem,calc((100vw - 32rem)/2)); }
header span { font-size: .8rem; letter-spacing: .1em; }
main { max-width: 34rem; padding: 1rem; margin: auto; }
h1 { font-size: 1.45rem; margin: .45rem 0; }
h2 { font-size: 1.2rem; }
button,input { font: inherit; }
button { min-height: 2.8rem; background: #116955; color: white; border: 0; border-radius: .4rem; font-weight: 600; padding: .6rem .9rem; cursor: pointer; }
button:disabled { background: #cfd7d1; color: #506158; cursor: default; }
.movement { display: flex; gap: .5rem; }
.movement button { flex: 1; }
#departure,button[value=no] { background: white; border: 1px solid #879d91; color: #255448; }
ul { list-style: none; padding: 0; }
#people { background: white; border-radius: .5rem; overflow: hidden; }
#people label { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .5rem .8rem; border-bottom: 1px solid #e3e8e2; }
#people li[data-movement=arrival] { background: #e1f4e8; color: #184b2e; }
#people li[data-movement=departure] { background: #e2eefc; color: #1e3e66; }
#people .worker-name { min-width: 0; overflow-wrap: anywhere; }
#plans { font-size: .9rem; }
#people .plan-status { display: block; width: fit-content; margin-top: .2rem; font-size: .85rem; line-height: 1.35; }
#people .plan-status.in-effect { color: #543409; background: #ffedb9; border-radius: .2rem; padding: .12rem .3rem; }
#people .movement-status { margin-inline-start: auto; flex-shrink: 0; font-size: .8rem; }
#people input { flex-shrink: 0; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: #116955; }
#pair label { display: grid; gap: .3rem; margin: 1rem 0; }
#pair input { width: 100%; min-height: 2.8rem; padding: .4rem; border: 1px solid #99aaa0; border-radius: .35rem; }
#status { white-space: pre-line; }
dialog { width: min(26rem,90vw); max-height: 75vh; border: 1px solid #bdcac0; border-radius: .6rem; padding: 1.2rem; }
dialog::backdrop { background: #132b2366; }
#names { max-height: 40vh; overflow: auto; line-height: 1.65; }