/* A quiet paper surface for messages written to a future self. */
.future-page{max-width:860px;margin:0 auto;padding-bottom:40px}.future-page .intro{margin-bottom:24px}.future-page .intro h1{letter-spacing:.02em}.future-page .intro .subtitle{max-width:32em}.future-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.future-section{margin-top:34px}.future-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:2px}.future-section-head h2{font-size:18px;font-weight:400}.future-section-head small{font-size:11px;color:var(--muted)}.future-empty{padding:28px 6px;color:var(--muted);font-size:13px}.future-list{display:grid;gap:0}.future-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;transition:background .18s ease,border-color .18s ease}.future-card:hover{background:color-mix(in srgb,var(--paper) 55%,transparent)}.future-card:focus-within{outline:2px solid var(--accent);outline-offset:4px}.future-card-main{display:block;min-width:0;text-align:left}.future-card-main strong{display:block;font:18px/1.55 var(--serif);font-weight:400;overflow-wrap:anywhere}.future-card-main small{display:block;color:var(--muted);font-size:11px;line-height:1.8}.future-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}.future-card-meta span{font-size:10px;color:var(--muted)}.future-card-meta .future-status{color:var(--accent)}.future-card-media{display:flex;align-items:center;gap:6px;min-width:56px;justify-content:flex-end}.future-card-thumb{width:54px;height:54px;object-fit:cover;border:1px solid var(--line);border-radius:3px}.future-card-audio{font-size:11px;color:var(--green);border:1px solid #cbd1bf;padding:6px 8px;border-radius:3px;white-space:nowrap}.future-card-arrow{font-size:22px;color:var(--muted);font-weight:300;margin-left:8px}.future-card.is-due{border-left:2px solid var(--accent);padding-left:14px}.future-card.is-opened strong{color:var(--muted)}.future-today-strip{margin:0 0 28px;padding:17px 18px;background:var(--tint);border:1px solid #dfd1c0;border-radius:5px}.future-today-strip p{font-size:13px;margin:0 0 8px}.future-today-strip a{font-size:12px;color:var(--accent)}
.future-detail{max-width:680px;margin:0 auto;padding-bottom:48px}.future-detail-head{display:flex;align-items:start;justify-content:space-between;gap:18px;margin:24px 0 28px}.future-detail-head h1{font-size:30px;line-height:1.5;font-weight:400;overflow-wrap:anywhere}.future-detail-head small{display:block;color:var(--muted);font-size:11px;line-height:1.8;margin-top:8px}.future-detail-head .future-detail-menu{display:flex;gap:12px;flex-shrink:0}.future-detail-menu button{font-size:12px;color:var(--muted);padding:6px 0;min-height:40px}.future-locked,.future-open-stage,.future-opened{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:30px 28px}.future-locked{text-align:center;min-height:300px;display:grid;place-content:center;gap:12px}.future-locked-mark{width:48px;height:60px;border:1px solid #c9c1b4;margin:0 auto 6px;position:relative;border-radius:2px;background:#f5f1e8}.future-locked-mark:before{content:"";position:absolute;inset:8px;border:1px solid #d3cabb}.future-locked-mark:after{content:"";position:absolute;left:11px;right:11px;top:28px;border-top:1px solid #c2b7a8;transform:rotate(-28deg)}.future-locked h2,.future-open-stage h2{font-size:19px;font-weight:400;margin:0}.future-locked p,.future-open-stage p{font-size:12px;color:var(--muted);margin:0}.future-open-stage{text-align:center;min-height:330px;display:grid;place-content:center;gap:12px;position:relative;overflow:hidden}.future-open-stage:before{content:"";position:absolute;inset:18px;border:1px solid #e3ddd2;pointer-events:none}.future-open-stage .future-open-card{position:relative;z-index:1;background:#f7f3ea;border:1px solid #cfc5b7;padding:28px 26px;min-width:min(360px,100%);box-shadow:0 10px 24px rgba(58,48,38,.07)}.future-open-stage .future-open-card:before{content:"";display:block;width:34px;border-top:1px solid var(--accent);margin:0 auto 16px}.future-open-stage .future-open-card h2{margin-bottom:10px}.future-open-stage.is-opening .future-open-card{animation:future-unseal .82s cubic-bezier(.22,.7,.2,1) both}.future-open-stage.is-opening .future-open-card>*{animation:future-reveal .62s ease .2s both}.future-open-stage.is-opening{animation:future-stage .9s ease both}.future-opened{padding:28px}.future-time-row{display:flex;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:22px}.future-time-row span{font-size:11px;color:var(--muted)}.future-time-row b{display:block;font-weight:400;color:var(--ink);font-size:13px;margin-top:3px}.future-body{font:17px/2 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 24px}.future-image{display:block;max-width:100%;max-height:640px;width:auto;height:auto;margin:18px auto 24px;border:1px solid var(--line);border-radius:3px;background:#f5f1e8}.future-audio-player{width:100%;margin:18px 0 25px;accent-color:var(--accent)}.future-reflection{border-top:1px solid var(--line);padding-top:18px}.future-reflection h2{font-size:16px;font-weight:400;margin:0 0 10px}.future-reflection textarea{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0 12px;min-height:90px;font:15px/1.9 var(--serif)}.future-reflection textarea:focus{outline:none;border-bottom-color:var(--accent)}.future-form{display:grid;gap:15px}.future-form label{font-size:12px;color:var(--muted)}.future-form input[type=text],.future-form input[type=datetime-local],.future-form textarea{margin-top:7px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0 12px;font:15px/1.9 var(--serif)}.future-form input:focus,.future-form textarea:focus{outline:none;border-bottom-color:var(--accent)}.future-form textarea{min-height:142px}.future-form-note{font-size:11px;color:var(--muted);line-height:1.8;margin:0}.future-media{border-top:1px solid var(--line);padding-top:13px}.future-media-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.future-media-actions button{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;min-height:44px;padding:6px 0}.future-media-actions svg{width:18px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.future-media-actions .is-recording{color:#985448}.future-media-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;margin-top:10px}.future-media-preview[hidden]{display:none}.future-image-preview{width:86px;height:86px;object-fit:cover;border:1px solid var(--line);border-radius:3px}.future-media-preview audio{width:min(360px,100%);height:38px}.future-media-remove{font-size:11px;color:var(--muted);min-height:40px;padding:6px}.future-form-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:5px}.future-form-actions .future-cancel{color:var(--muted);font-size:13px}.future-form-actions .primary{margin-left:auto}.future-edit-note{border-top:1px solid var(--line);padding-top:14px}.future-edit-note p{font-size:11px;color:var(--muted);margin:0}.future-nav{color:var(--accent)!important}.future-composer-dialog{max-width:600px}
@keyframes future-unseal{0%{opacity:0;transform:translateY(14px) scale(.96)}55%{opacity:1;transform:translateY(-2px) scale(1.01)}100%{transform:none}}@keyframes future-reveal{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}@keyframes future-stage{0%{background:var(--paper)}100%{background:var(--paper)}}
@media(prefers-reduced-motion:reduce){.future-card,.future-open-stage,.future-open-stage.is-opening .future-open-card,.future-open-stage.is-opening .future-open-card>*{animation:none!important;transition:none!important}}
@media(max-width:620px){.future-page{padding-inline:0}.future-page .intro{align-items:start;flex-direction:column;gap:18px}.future-card{grid-template-columns:minmax(0,1fr) auto;padding:16px 0}.future-card-main strong{font-size:16px}.future-card-arrow{font-size:20px}.future-detail{padding-inline:0}.future-detail-head{margin:14px 0 22px;gap:10px}.future-detail-head h1{font-size:26px}.future-locked,.future-open-stage,.future-opened{padding:24px 18px}.future-open-stage{min-height:calc(100dvh - 250px);max-height:650px}.future-open-stage .future-open-card{min-width:0;width:100%;padding:24px 18px}.future-opened{border-inline:0;border-radius:0;padding-inline:4px}.future-image{max-height:72dvh}.future-form-actions{position:sticky;bottom:0;background:var(--paper);padding:12px 0 calc(5px + env(safe-area-inset-bottom,0px));margin-top:3px}.future-media-actions{gap:16px}}

/* One writing surface, a separate attachment row, and a date-led seal. */
.future-today-entry{margin:0 0 28px;border-block:1px solid var(--line)}
.future-entry-link{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;font-size:18px}
.future-entry-link small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.future-entry-link>span:last-child{font-size:24px;color:var(--accent)}
.future-entry-due{display:grid;gap:8px;padding-bottom:16px}
.future-entry-due a{display:flex;justify-content:space-between;gap:14px;min-height:40px;align-items:center;font-size:14px;color:var(--accent);overflow-wrap:anywhere}
.future-compose-date{margin:0 0 6px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.future-compose-date time{color:var(--ink);margin-left:8px}
.future-form label{font-size:14px}
.future-form input[type=text],.future-form input[type=datetime-local],.future-form textarea{font-size:16px}
.future-form textarea{min-height:170px}
.future-form .record-voice-bar{justify-content:flex-end;margin-top:3px}
.future-form .record-voice-button{font-size:13px;min-height:36px}
.future-form .record-voice-status:empty{display:none}
.future-attachment-label{font-size:12px;color:var(--muted);margin:0 0 4px}
.future-media-actions{gap:26px}.future-media-actions button{font-size:14px}
.future-form-note,.future-card-main small,.future-card-meta span,.future-detail-head small,.future-time-row span{font-size:12px}
.future-form-actions .primary{font-size:15px;min-height:48px}
.future-open-stage .future-open-card .primary{margin-top:24px;min-width:130px}
.future-locked .future-unlock-date{font-size:18px;color:var(--ink);line-height:1.7}
.future-locked.is-sealing .future-locked-mark{animation:future-seal .68s cubic-bezier(.22,.7,.2,1) both}
.future-locked.is-sealing h2,.future-locked.is-sealing p{animation:future-reveal .35s ease .25s both}
.future-open-stage.is-opening .future-open-card{animation:future-open-paper .65s cubic-bezier(.22,.7,.2,1) both}
.future-open-stage.is-opening .future-open-card>*{animation:future-ink-fade .5s ease both}
@keyframes future-seal{0%{transform:translateY(-12px) rotate(-5deg) scale(1.14);opacity:.4}60%{transform:translateY(1px) rotate(0) scale(.98);opacity:1}100%{transform:none}}
@keyframes future-open-paper{0%{transform:scale(1);opacity:1}55%{transform:translateY(-8px) scale(1.025);opacity:1}100%{transform:translateY(-16px) scale(1.05);opacity:0}}
@keyframes future-ink-fade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.future-locked.is-sealing .future-locked-mark,.future-locked.is-sealing h2,.future-locked.is-sealing p,.future-open-stage.is-opening .future-open-card,.future-open-stage.is-opening .future-open-card>*{animation:none!important}}
@media(max-width:620px){.future-form textarea{min-height:150px}.future-form-actions{gap:10px}.future-form-actions .primary{padding-inline:14px}.future-entry-link{font-size:17px}.future-entry-link small{font-size:12px}.future-actions .primary{font-size:15px}}
.future-media-preview{grid-template-columns:minmax(0,1fr)}
.future-attachment-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.future-attachment-preview audio{min-width:0;flex:1}
.future-attachment-preview .future-media-remove{font-size:12px;flex:none}
/* The editor owns the only scrolling surface while it is open. */
html:has(#dialog[open] #future-form),body:has(#dialog[open] #future-form){overflow:hidden}
#dialog:has(#future-form){max-height:calc(var(--record-viewport-height,100dvh) - 32px);overflow-y:auto;overscroll-behavior:contain}
#dialog:has(#future-form) .dialog-body{overflow:visible}
#dialog:has(#future-form) .dialog-head{position:sticky;top:0;z-index:2;background:var(--paper);padding-bottom:12px}