/* Reference: original drawer, with crossed-out sections removed entirely. */
#drawer{inset:0 auto 0 0;margin:0;height:100dvh;max-height:100dvh;width:min(440px,70vw);min-width:0;max-width:none;border:0;border-radius:0;padding:24px 32px 40px;background:#fff;box-shadow:6px 0 24px #0000000a;overflow-y:auto;overscroll-behavior:contain;color:#191919;scrollbar-width:thin}
#drawer::backdrop{background:rgb(0 0 0 / 59%)}
#drawer button{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:0;border:0;background:transparent;border-radius:6px;font-size:16px;font-weight:400;color:inherit}
#drawer button:hover{background:#fafaf3}
#drawer button:focus-visible{outline:2px solid #bbb98e;outline-offset:4px}
.drawer-tools{height:64px;display:flex;align-items:flex-start;justify-content:flex-end;gap:22px;margin-bottom:20px}
#drawer .drawer-icon{width:36px;height:36px;flex:none}
.drawer-icon span{display:block;width:30px;height:30px;background-repeat:no-repeat;background-size:contain;background-position:center}
.search-symbol{background-image:url('../assets/navigation/search.webp')}
.settings-symbol{background-image:url('../assets/navigation/settings.png');opacity:.55}
.drawer-month{height:32px;display:flex;align-items:center;position:relative;margin-bottom:18px;color:#999}
#drawer #menuCalendar{font-size:18px;color:#999;justify-content:flex-start}
#calendarMonth{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px;pointer-events:none;border:0;padding:0}
.month-arrows{margin-left:auto;display:flex;gap:12px}
#drawer .month-arrows button{width:24px;height:28px;font-size:24px;color:#b4b4aa;line-height:1}
#drawer #calendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 6px;min-width:0;margin:0;text-align:center}
#drawer #calendarGrid .calendar-day{display:flex;align-items:center;justify-content:center;justify-self:center;width:40px;height:40px;border-radius:50%;background:#faf9eb;color:#bbbbae;font-family:SimSun,serif;font-size:15px}
#drawer #calendarGrid .calendar-day.has-mood{background:transparent}
#drawer #calendarGrid .calendar-day img{width:43px;height:43px;object-fit:contain}
#drawer #calendarGrid .calendar-day[aria-pressed=true]{outline:1px solid #c7c49a;outline-offset:3px}
.drawer-boxes{margin-top:42px}
.drawer-boxes h2{margin:0 0 22px;font-weight:400}
#drawer #menuBoxes{color:#a4a4a4;font-size:18px}
#drawer #boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
#drawer .animal-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:12px;padding:3px 0 8px;border-radius:8px}
#drawer .animal-box img{width:100%;aspect-ratio:1.38;object-fit:contain;display:block}
#drawer .animal-box span{font-size:17px;line-height:1.4}
#drawer .animal-box[data-state=empty] img{filter:none}
@media(max-width:600px){
 #drawer{padding:24px 20px 32px}
 .drawer-tools{gap:18px;height:54px;margin-bottom:18px}
 #drawer #calendarGrid{gap:14px 2px}
 #drawer #calendarGrid .calendar-day{width:clamp(23px,6.1vw,35px);height:clamp(23px,6.1vw,35px);font-size:13px}
 #drawer #calendarGrid .calendar-day img{width:clamp(25px,6.7vw,38px);height:clamp(25px,6.7vw,38px)}
 #drawer #boxes{gap:22px 16px}
 #drawer .animal-box span{font-size:15px}
}

/* One portrait layout for every viewport. These rules also override the older
   wide editor and timeline styles; no separate desktop/mobile page is used. */
:root{--app-width:480px;background:#f6f5ef}
html{min-height:100%;overflow-x:clip}
body{width:100%;max-width:var(--app-width);min-height:100vh;min-height:100dvh;margin:0 auto;overflow:visible;background:white}
header{height:auto;min-height:76px;padding:14px 12px;gap:12px;flex-wrap:wrap}
.brand{font-size:17px;flex:0 0 auto}
#title{width:0;min-width:0;flex:1 1 130px;font-size:16px}
.actions{width:100%;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;white-space:normal}
.actions button{min-width:0;min-height:42px;padding:9px 5px}
.actions #save{grid-column:1/-1}
#editor{display:flex;flex-direction:column;height:auto;min-width:0}
#papers{width:100%;padding:12px;border-right:0;border-bottom:1px solid #dedfd6;max-height:210px;overflow:auto}
#papers h2{margin:0 0 10px}
#animalFilter{margin-bottom:12px}
#templateList{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.template{min-width:0}
.template img{height:95px}
main{width:100%;min-width:0}
.canvas-toolbar{height:auto;min-height:48px;padding:8px 10px;gap:6px;flex-wrap:wrap}
.canvas-toolbar>span{min-width:0}
.canvas-toolbar>span:last-child{display:flex;align-items:center;flex-wrap:wrap}
.canvas-toolbar button{min-height:36px;padding:5px 8px}
#stage{flex:none;width:100%;height:58vh;height:58dvh;min-height:260px;padding:16px 10px;overflow:auto;overscroll-behavior:contain}
#paperSized{margin:0 auto}
#formatBar{justify-content:flex-start;padding:10px 8px;gap:6px}
#formatBar button,#formatBar select{min-height:38px;max-width:100%}
footer{flex-wrap:wrap;padding:10px 12px;overflow-wrap:anywhere}
#saveInfo{padding:12px}
#timeline{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;padding-bottom:110px}
.home-top{min-height:0;padding:20px 16px;position:sticky}
#week{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#week .calendar-day{width:100%;height:auto;min-height:44px;aspect-ratio:1;padding:2px;font-size:12px}
#week .calendar-day img{max-width:100%;width:32px;height:32px}
#historyHeading{font-size:17px}
.history-controls{width:auto;margin:16px 12px;gap:8px}
#search{width:0;min-width:0;flex:1 1 125px;font-size:16px}
#homeNotice{flex-basis:100%}
#workList{width:100%;padding:8px 12px}
.timeline-row{grid-template-columns:68px minmax(0,1fr);gap:12px;padding-bottom:18px}
.date-rail{padding:10px 6px 0 0;font-size:10px;line-height:21px;margin-bottom:-18px;white-space:nowrap}
.date-rail:after{top:38px}
.work-card{min-width:0;min-height:154px;padding:18px 16px;border-radius:12px}
.summary{font-size:16px;line-height:1.65;margin-right:32px!important}
.summary-photos{gap:6px;margin-top:12px}
.summary-photos img{flex:0 1 calc((100% - 12px)/3);width:calc((100% - 12px)/3);min-width:0;height:auto;aspect-ratio:1;object-fit:cover}
.card-decoration{width:48px!important;right:8px;bottom:10px}
#newDiary{right:max(16px,calc((100vw - var(--app-width))/2 + 16px));bottom:max(20px,env(safe-area-inset-bottom));width:64px;height:64px;font-size:40px}
dialog{min-width:0;width:calc(100% - 24px);max-width:456px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:20px 16px;overflow:auto;overflow-wrap:anywhere}
dialog button,dialog input,dialog select{max-width:100%}
.dialog-actions,#messageButtons{flex-wrap:wrap}
#paperDialog,#settingsDialog{width:calc(100% - 24px);max-width:456px}
#collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#collections button{min-width:0;white-space:normal;overflow-wrap:anywhere}
#collectionPapers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#collectionPapers button{min-width:0;padding:8px}
#collectionPapers img{width:100%;max-width:120px;height:140px}
#moodList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#moodList button{min-width:0}
#moodList img{max-width:100%;margin:auto}
#drawer{left:max(0px,calc((100vw - var(--app-width))/2));width:min(384px,85vw);padding:22px 18px 32px}
.drawer-tools{gap:18px;height:54px;margin-bottom:18px}
#drawer #calendarGrid{gap:14px 3px}
#drawer #calendarGrid .calendar-day{width:100%;height:auto;aspect-ratio:1;max-width:40px;font-size:13px}
#drawer #calendarGrid .calendar-day img{width:100%;height:100%;max-width:40px;max-height:40px}
#drawer #boxes{gap:22px 16px}
#drawer .animal-box span{font-size:15px}