/* Smallest usable Photo → Send / Receive UX study, 2026-11-06.
   Visual choices are provisional, NOT a Little Wonders approved brand system.
   The sample received photo is deliberately synthetic and labeled as such. */
.app.minimal-photo-only .mode-switch,
.app.minimal-photo-only .side-items,
.app.minimal-photo-only .back-card,
.app.minimal-photo-only .mode-tools,
.app.minimal-photo-only #help-button {display:none!important}
.app.minimal-photo-only:not(.is-editing) .creation-actions{display:none}
.app.minimal-photo-only.is-editing .creation-actions{justify-content:flex-end}
.app.minimal-photo-only .brand{font-weight:500;letter-spacing:-.065em}
.app.minimal-photo-only .topbar{z-index:20}
.app.minimal-photo-only .creation-card{background:#fffefd;border-color:#ebe7e1}
.app.minimal-photo-only .photo-area{background:#e9e6df}
.app.minimal-photo-only .send-hint{font-size:11px;letter-spacing:.015em;color:#8c857a}
.app.minimal-photo-only .prototype-note{letter-spacing:.055em;color:#b3aaa0}

/* Arrival invitation, an independent local demo: no fake mailbox UI. */
.receive-notice{
 position:absolute;z-index:12;
 top:109px;right:22px;left:22px;min-height:62px;
 padding:10px 14px;display:grid;grid-template-columns:1fr auto;
 grid-template-rows:auto auto;align-items:center;column-gap:8px;row-gap:4px;
 text-align:left;border:1px solid #e9e4dc;border-radius:13px;
 background:rgba(255,254,251,.94);box-shadow:0 5px 18px #493e2e0b;
 color:#4f4a43;transition:background .25s,transform .25s;
 -webkit-tap-highlight-color:transparent;
}
.receive-notice:active{transform:translateY(1px);background:#f8f6f1}
.receive-notice-kicker{grid-column:1;grid-row:1;letter-spacing:.16em;font:9px/1.15 -apple-system,BlinkMacSystemFont,sans-serif;color:#a49988}
.receive-notice-title{grid-column:1;grid-row:2;font:italic 15px/1.24 Georgia,serif}
.receive-notice-action{grid-column:2;grid-row:1 / 3;font:12px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;color:#615c54;padding:7px}
.receive-notice-action span{font-size:17px;vertical-align:-1px;padding-left:3px}
.app:not(.minimal-photo-only) .receive-notice{display:none!important}
.app.is-mini-sent .receive-notice{opacity:.35;pointer-events:none}

/* The creator's card flies away; an honest, self-dismissed line takes
   exactly that card's visual location. Neither it nor the gesture implies
   server acceptance or real delivery. */
.send-feedback{
 position:absolute;z-index:8;left:50%;top:48%;width:290px;max-width:90%;
 min-height:175px;padding:35px 17px;text-align:center;
 transform:translate(-50%,-50%);display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:16px;
 animation:lw-send-copy-in 600ms cubic-bezier(.2,.7,.2,1) both;
 pointer-events:none;
}
.send-feedback-title{font:italic 23px/1.35 Georgia,"Times New Roman",serif;letter-spacing:-.026em;color:#49453f;margin:0;max-width:245px}
.send-feedback-detail{font:10.5px/1.65 -apple-system,BlinkMacSystemFont,sans-serif;color:#979087;margin:0;max-width:210px}
.app.is-mini-sent .card-shell{visibility:hidden!important}
.app.is-mini-sent .send-hint{visibility:hidden}
@keyframes lw-send-copy-in{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* Direct arrival experience, without a fake reading inbox. */
.receive-stage{
 position:absolute;inset:0;z-index:29;overflow:hidden;
 background:radial-gradient(ellipse at 48% 40%,#fffefd 8%,#f8f6f2 75%,#f2efea 100%);
}
.receive-close{
 position:absolute;z-index:5;top:52px;right:26px;
 min-height:44px;padding:9px 7px;border:0;background:transparent;
 color:#6d655b;font:12px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;
 -webkit-tap-highlight-color:transparent;
}
.receive-close span{font-size:21px;vertical-align:-2px;margin-left:6px}
.receive-headline{
 position:absolute;top:120px;left:0;right:0;
 text-align:center;font:italic 17px/1.38 Georgia,serif;color:#9e9589;
}
.receive-paper{
 --receive-scale:1;
 position:absolute;z-index:2;top:54%;left:50%;
 width:290px;height:374px;margin:-187px 0 0 -145px;
 padding:13px 13px 19px;background:#fffefa;
 border:1px solid #ebe6de;display:flex;flex-direction:column;
 box-shadow:0 25px 65px #4e42352a,0 3px 8px #41372c16;
 transform:rotate(-1.5deg) scale(var(--receive-scale));
 opacity:0;pointer-events:auto;
}
.receive-stage.is-open .receive-paper{
 animation:lw-note-arrival 1120ms cubic-bezier(.22,.77,.18,1) both;
}
.receive-image{
 position:relative;flex:0 0 auto;width:262px;height:268px;overflow:hidden;
 background:radial-gradient(circle at 79% 34%,#f7dfb0 0,#e5c99f 15%,transparent 42%),
            linear-gradient(132deg,#acb9b5 0%,#d9d3c0 44%,#899d95 78%,#c5b79d);
 box-shadow:inset 0 0 0 1px #c7bcb144;
}
.receive-image:after{
 content:"";position:absolute;inset:0;opacity:.22;
 background:linear-gradient(93deg,transparent 46%,#fff5 47%,#fff5 49%,transparent 50%),
            linear-gradient(0deg,transparent 51%,#fff8 52%,#fff8 54%,transparent 55%);
}
.receive-light{position:absolute;left:15%;top:-18%;width:55%;height:140%;
 transform:rotate(21deg);filter:blur(17px);background:#f9e8c86e}
.receive-caption{
 font:italic 15px/1.32 Georgia,serif;color:#545049;
 padding:5px 10px 0;text-align:center;margin:auto 0;
}
.receive-disclaimer{
 position:absolute;z-index:3;left:12px;right:12px;bottom:28px;
 text-align:center;color:#a9a095;font-size:9px;letter-spacing:.095em;
}
@keyframes lw-note-arrival{
 0%{opacity:0;transform:translate3d(100vw,-27vh,0) rotate(13deg) scale(calc(var(--receive-scale) * .74));box-shadow:0 5px 12px #4e423510}
 16%{opacity:1}
 80%{transform:translate3d(-3px,2px,0) rotate(-2.3deg) scale(calc(var(--receive-scale) * 1.012))}
 100%{opacity:1;transform:translate3d(0,0,0) rotate(-1.5deg) scale(var(--receive-scale))}
}
@media(max-width:899px){
 .receive-close{top:calc(29px + env(safe-area-inset-top))}
 .receive-headline{top:calc(103px + env(safe-area-inset-top))}
 .receive-notice{top:calc(100px + env(safe-area-inset-top))}
}
@media(max-height:680px){
 .receive-notice{top:calc(68px + env(safe-area-inset-top));min-height:55px}
 .receive-headline{display:none}
 .receive-paper{--receive-scale:.86;top:52%}
 .receive-disclaimer{bottom:calc(8px + env(safe-area-inset-bottom))}
 .receive-close{top:calc(14px + env(safe-area-inset-top))}
 .app.minimal-photo-only .topbar{top:calc(15px + env(safe-area-inset-top))}
}
@media(max-height:560px){
 .receive-paper{--receive-scale:.78;top:51%}
 .receive-notice{top:calc(57px + env(safe-area-inset-top));padding:7px 12px;min-height:50px}
 .receive-notice-title{font-size:14px}
 .receive-disclaimer{font-size:8px}
 .app.minimal-photo-only .send-hint{top:calc(42% + 203px)}
}
@media(prefers-reduced-motion:reduce){
 .receive-stage.is-open .receive-paper{animation:none;opacity:1;transform:rotate(0) scale(var(--receive-scale))}
 .send-feedback{animation:none}
}