.app-modal:has(#diaryApp:not([hidden])){place-items:stretch;background:#fff}
.app-modal:has(#diaryApp:not([hidden])) .modal-panel{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:18px 28px;overflow:hidden;text-align:left}
.app-modal:has(#diaryApp:not([hidden])) .modal-close{position:absolute;left:24px;top:20px;z-index:30;margin:0}
.app-modal:has(#diaryApp:not([hidden])) #diaryApp{width:100%;height:calc(100dvh - 18px);padding:0 18px;max-width:920px;margin:0 auto}
.app-modal:has(#diaryApp:not([hidden])) .diary-header{padding-left:52px}
.diary-film{margin:0;padding-left:12px;padding-right:12px}
.diary-list{margin:0}.diary-entry{padding-left:6px;padding-right:6px}
.diary-media{margin:12px 0 0;gap:4px}.diary-media button{overflow:hidden;background:#f2f2f2}.diary-media img{width:100%;height:100%;object-fit:cover;display:block}
.diary-lightbox{position:fixed;inset:0;padding:64px 24px 24px;background:rgba(12,12,12,.96);z-index:200}.diary-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;margin:auto}.diary-lightbox>button{position:fixed;right:24px;top:20px}
.diary-composer{width:100vw;max-width:none}.diary-composer>header,.diary-composer>textarea,.diary-composer>.diary-attachment-status,.diary-composer>.diary-attachment-options{width:min(100%,860px);margin-left:auto;margin-right:auto}.diary-audio audio{width:100%;height:34px}
.diary-attachment-status{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;padding:10px 0;max-height:230px;overflow:auto}.diary-attachment-status:empty{display:none}.diary-photo-preview{position:relative;aspect-ratio:1/1;border:1px solid #e2e2e2;background:#f3f3f3;overflow:hidden}.diary-photo-preview img{width:100%;height:100%;object-fit:cover}.diary-photo-preview button{position:absolute;right:5px;top:5px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(20,20,20,.72);color:#fff}.diary-attachment-status>.diary-asset-chip{border:1px solid #dedede;border-radius:2px;padding:9px;font-size:9px;color:#555;display:flex;justify-content:space-between;align-items:center}.diary-asset-chip button{border:0;background:transparent;color:#777}
@media(max-width:600px){.app-modal:has(#diaryApp:not([hidden])) .modal-panel{padding:14px 14px}.app-modal:has(#diaryApp:not([hidden])) #diaryApp{padding:0 10px}.diary-composer{padding-left:18px;padding-right:18px}}

/* Journal fills the little-phone canvas, not the whole desktop screen. */
.app-modal:has(#diaryApp:not([hidden])){place-items:center;background:rgba(25,25,23,.12)}
.app-modal:has(#diaryApp:not([hidden])) .modal-panel{width:min(100%,430px);height:calc(100dvh - 36px);max-height:calc(100dvh - 36px);border-radius:38px;padding:18px;overflow:hidden}
.app-modal:has(#diaryApp:not([hidden])) #diaryApp{width:100%;height:calc(100% - 42px);padding:0 12px;max-width:none;margin:0}
.app-modal:has(#diaryApp:not([hidden])) .modal-close{position:relative;left:auto;top:auto;margin-bottom:4px}
.app-modal:has(#diaryApp:not([hidden])) .diary-header{padding-left:4px}
.diary-composer{width:min(100%,430px);height:calc(100dvh - 36px);top:18px;bottom:auto;border-radius:38px}
@media(max-width:430px){.app-modal:has(#diaryApp:not([hidden])) .modal-panel{height:100dvh;max-height:100dvh;border-radius:0}.diary-composer{top:0;height:100dvh;border-radius:0}}

/* Preserve every uploaded photo's natural aspect ratio. */
.diary-media,.diary-media.single{display:flex;flex-direction:column;gap:5px}
.diary-media button,.diary-media.single button{display:block;width:100%;height:auto;aspect-ratio:auto;line-height:0;background:#f3f3f3}
.diary-media img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.diary-composer textarea{height:118px}
.diary-attachment-status{display:block;max-height:calc(100dvh - 285px);overflow-y:auto;padding:8px 0}
.diary-photo-preview{position:relative;display:block;width:100%;height:auto;aspect-ratio:auto;margin:0 0 9px;border:1px solid #e1e1e1;background:#f5f5f5;overflow:visible}
.diary-photo-preview img{display:block;width:100%;height:auto;max-height:310px;object-fit:contain;background:#f5f5f5}
.diary-photo-preview figcaption{height:28px;padding:8px 10px;font-size:8px;letter-spacing:.12em;color:#777;background:#fff}
.diary-photo-preview>button{position:absolute;right:8px;top:8px;width:29px;height:29px;padding:0;border:1px solid rgba(20,20,20,.12);border-radius:50%;background:rgba(255,255,255,.92);color:#555;display:grid;place-items:center;z-index:3;box-shadow:0 2px 9px rgba(0,0,0,.08)}
.diary-photo-preview>button svg{display:none}.diary-photo-preview>button:before{content:"×";font:400 18px/1 ui-sans-serif,-apple-system,sans-serif}
.diary-entry-actions{height:38px;display:flex;align-items:center;border-top:1px solid #ededed;margin-top:12px}.diary-entry-actions button{border:0;background:transparent;color:#686868;display:flex;align-items:center;gap:6px;padding:7px 8px 7px 0;font-size:9px}.diary-entry-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35}
.diary-comments{border-top:1px solid #f0f0f0}.diary-comments>div{position:relative;padding:10px 28px 10px 0;border-bottom:1px solid #f3f3f3}.diary-comments p{margin:0;font-size:10px;line-height:1.55}.diary-comments small{display:block;margin-top:4px;font-size:7px;color:#aaa}.diary-comments>div>button{position:absolute;right:0;top:9px;border:0;background:transparent;color:#aaa;font-size:15px}
.diary-comment-box{position:relative;display:grid;grid-template-columns:1fr auto;gap:7px;padding:10px 0;border-top:1px solid #ededed}.diary-comment-box[hidden]{display:none}.diary-comment-box input{height:36px;border:1px solid #dedede;border-radius:18px;background:#fafafa;padding:0 13px;outline:0;font-size:10px}.diary-comment-box>button{height:34px;border:0;border-radius:17px;background:#242424;color:#fff;padding:0 13px;font-size:9px}.diary-mention-list{position:absolute;left:0;right:0;bottom:50px;z-index:12;padding:6px;background:#fff;border:1px solid #dedede;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.12)}.diary-mention-list[hidden]{display:none}.diary-mention-list button{display:flex;width:100%;height:34px;align-items:center;gap:8px;border:0;border-radius:6px;background:transparent;padding:0 9px;font-size:10px;text-align:left}.diary-mention-list button:hover{background:#f3f3f3}.diary-mention-list span{color:#888}

/* Month navigation and a quiet marker for the real current day. */
.diary-header{display:flex;align-items:center;gap:8px}
.diary-header>div{min-width:0;flex:1}
.diary-month-controls{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding:2px;border:1px solid #e8e8e8;border-radius:999px;background:#fafafa}
.diary-month-controls button{height:27px;border:0;background:transparent;color:#777;display:grid;place-items:center;padding:0;cursor:pointer}
.diary-month-controls button:first-child,.diary-month-controls button:nth-child(3){width:25px;border-radius:50%}
.diary-month-controls button:hover{background:#eee;color:#222}
.diary-month-controls svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#diaryPickMonth{min-width:72px;padding:0 5px;font:400 8px/1.1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.diary-film button.today strong{position:relative}
.diary-film button.today strong:after{content:"";position:absolute;left:50%;bottom:-8px;width:4px;height:4px;border-radius:50%;background:#262626;transform:translateX(-50%)}
.diary-film button.today.selected strong:after{background:#999}
@media(max-width:390px){#diaryPickMonth{min-width:58px;font-size:7px}.diary-month-controls button:first-child,.diary-month-controls button:nth-child(3){width:22px}}