:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#233c31;background:#f7f8f6;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
main{max-width:440px;margin:0 auto;padding:32px 22px 48px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
h1{font-size:24px;font-weight:650;letter-spacing:-.6px;margin:0}
h2{font-size:16px;font-weight:650;margin:0 0 14px}
button,input,select{font:inherit}
button{cursor:pointer;min-height:44px;border:1px solid #d8e0d7;border-radius:10px;padding:10px 14px;background:white;color:#214d3e}
button:disabled{opacity:.45;cursor:default}
.primary{width:100%;border:0;background:#214d3e;color:white;font-weight:600;padding:14px 16px}
.primary:hover:not(:disabled){background:#31624f}
.card{padding:22px;background:white;border:1px solid #e1e6de;border-radius:16px;margin-top:18px}
.control{padding:22px;background:white;border:1px solid #e1e6de;border-radius:16px}
.badge{display:block;font-size:12px;color:#8b7250;margin-bottom:18px}
.badge::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:middle}
.badge.ready{color:#627b67}
/* The entire shutter is one button; slats and handle are decorative. */
.operate{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:182px;min-height:182px;padding:20px 10px 28px;border:9px solid #c8d1c5;border-top-width:15px;border-bottom:5px solid #8d9c88;border-radius:10px 10px 4px 4px;color:#214d3e;background:repeating-linear-gradient(to bottom,#e7ece4 0px,#dfe6db 13px,#aebb9f 14px,#f6f8f2 16px);box-shadow:inset 0 4px 8px #31442d18,0 3px 0 #e6ebe1;cursor:pointer;transition:filter .15s,box-shadow .15s}
.operate:hover:not(:disabled){filter:brightness(1.035);box-shadow:inset 0 4px 8px #31442d18,0 3px 0 #d5dfcc}
.operate:active:not(:disabled){box-shadow:inset 0 4px 12px #31442d35,0 1px 0 #e6ebe1}
.shutter-label{position:relative;background:#214d3e;color:#fff;border:1px solid #173f30;border-radius:5px;padding:11px 13px;font-size:14px;font-weight:700;letter-spacing:.7px;line-height:1.4;box-shadow:0 2px 4px #233c3120;pointer-events:none}
.shutter-handle{position:absolute;left:50%;bottom:15px;width:38px;height:8px;border:2px solid #83927a;border-bottom-width:3px;border-radius:3px;transform:translateX(-50%);background:#c0ccb7;pointer-events:none}
.hint{font-size:11px;color:#7e897e;text-align:center;margin:12px 0 0}
.confirmation{margin-top:18px;border-top:1px solid #e7ece4;padding-top:16px}
.confirmation p{font-size:13px;margin:0 0 12px}
.button-row{display:flex;gap:8px}
.button-row button{flex:1;width:auto;font-size:13px}
.message{font-size:13px;line-height:1.6;border-radius:10px;padding:12px 14px;margin-bottom:16px;background:#e9f0e5;color:#3a5841;overflow-wrap:anywhere}
.message.error{color:#8c4837;background:#fff0e9}
form{margin-top:12px}
label{display:block;font-size:12px;font-weight:550;margin:14px 0 6px}
input,select{width:100%;min-height:44px;padding:10px 12px;font-size:16px;background:white;color:#233c31;border:1px solid #d5dfd1;border-radius:9px}
form>.primary{margin-top:18px}
.secondary{font-size:12px;margin-top:12px}
.small,.muted{font-size:11px;color:#7c877a;line-height:1.6}
.small{margin:12px 0 0}
summary{font-size:13px;cursor:pointer;min-height:36px;display:list-item;align-content:center}
.account-menu{position:relative;max-width:65%}
.account-menu>summary{display:block;font-size:12px;color:#657464;text-align:right;padding:8px 0;overflow-wrap:anywhere}
.account-menu>summary::after{content:" +";color:#9ba798}
.account-menu[open]>summary::after{content:" -"}
.account-popover{position:absolute;right:0;top:100%;z-index:2;width:190px;padding:10px;background:white;border:1px solid #dfe6da;border-radius:12px;box-shadow:0 8px 28px #233c3112}
.account-popover>span{display:block;padding:4px 8px 8px;overflow-wrap:anywhere}
.account-popover button{display:block;width:100%;text-align:left;border:0;font-size:12px;padding:10px 8px}
.account-popover button:hover{background:#f1f5ee}
.admin{margin-top:22px;border-top:1px solid #e0e6dc;padding-top:12px}
.admin>details>summary{font-size:12px;color:#788772}
.admin-content{padding-top:20px}
.subpanel{border-top:1px solid #e0e6dc;padding:10px 0;margin-top:12px}
.subpanel>summary{font-weight:550}
.resident{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e5eadd}
.resident-info{min-width:0;overflow-wrap:anywhere}
.resident strong,.resident span{display:block;font-size:12px}
.resident span{font-size:11px;color:#7b887a;margin-top:4px}
.resident button{font-size:11px;min-width:80px}
.activity-row{font-size:11px;display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e8ede3;padding:12px 0;overflow-wrap:anywhere}
.activity-row time{display:block;color:#7b887a;margin-top:3px}
.activity-row .result{font-weight:600}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ab8950;outline-offset:3px}
@media(max-width:360px){main{padding:24px 16px}.card,.control{padding:18px}}