/* A wish starts with the guest's words. The photograph is an optional keepsake. */
#postcard-dialog.wish-card-dialog { --postcard-red:#bc3936; --postcard-paper:#fffaf2; --wish-ink:#4c2927; --wish-muted:#806864; --wish-line:#e5d1c7; --wish-pink:#f7cec9; width:min(100%,570px); max-width:100%; height:100svh; max-height:100svh; margin:auto; padding:22px 25px max(26px,env(safe-area-inset-bottom)); border:0; background:var(--postcard-paper); color:var(--wish-ink); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--wish-line) var(--postcard-paper); }
#postcard-dialog.wish-card-dialog::backdrop { background:#381818b8; backdrop-filter:blur(4px); }
#postcard-dialog.wish-card-dialog[open] { animation:postcard-workshop-in .26s ease-out both; }
#postcard-dialog.wish-card-dialog .postcard-header { display:flex; align-items:center; justify-content:space-between; gap:12px; font:11px/1.6 var(--sans); letter-spacing:.04em; color:var(--wish-muted); }
#postcard-dialog.wish-card-dialog .postcard-header>button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; margin:-8px -9px -4px 0; padding:0; font:28px/1 var(--sans); color:var(--wish-ink); }
#postcard-dialog.wish-card-dialog #postcard-title { margin:21px 0 11px; color:var(--wish-ink); font:600 clamp(27px,6.8vw,34px)/1.4 var(--serif); letter-spacing:.02em; }
#postcard-dialog.wish-card-dialog #postcard-title:focus { outline:none; }
#postcard-dialog.wish-card-dialog .postcard-help { margin:0 0 24px; max-width:34em; font:13px/1.9 var(--sans); color:var(--wish-muted); }
#postcard-dialog.wish-card-dialog .postcard-stage { width:100%; margin:0; }
#postcard-dialog.wish-card-dialog .postcard-card { position:relative; height:auto; transform:none; }
#postcard-dialog.wish-card-dialog .postcard-face { position:relative; inset:auto; background:#fffdf8; border:1px solid var(--wish-line); box-shadow:0 3px 0 #eddfd4; transform:none; }
#postcard-dialog.wish-card-dialog .postcard-face[aria-hidden=true] { display:none; }
#postcard-dialog.wish-card-dialog .postcard-front { padding:9px 9px 0; animation:wish-paper-in .22s ease-out; }
#postcard-dialog.wish-card-dialog .postcard-photo-frame { position:relative; height:min(56svh,430px); overflow:hidden; background:#f3e8df; }
#postcard-dialog.wish-card-dialog #postcard-photo { width:100%; height:100%; object-fit:contain; }
#postcard-dialog.wish-card-dialog .postcard-photo-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; background:#f3e8df; color:var(--wish-muted); font:13px/1.8 var(--sans); }
#postcard-dialog.wish-card-dialog #postcard-photo-retry { min-height:44px; padding:0 13px; color:var(--postcard-red); border-bottom:1px solid var(--wish-line); font:13px var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-front-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:42px; padding:8px 5px; font:11px/1.5 var(--sans); }
#postcard-dialog.wish-card-dialog #postcard-photo-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#postcard-dialog.wish-card-dialog .postcard-back { padding:21px 19px 23px; background:#fffdf8; animation:wish-paper-in .22s ease-out; }
#postcard-dialog.wish-card-dialog #postcard-form label { display:block; color:var(--wish-ink); font:500 13px/1.7 var(--sans); }
#postcard-dialog.wish-card-dialog #postcard-message { display:block; width:100%; height:141px; resize:vertical; margin:7px 0 0; border:0; border-top:1px solid var(--wish-line); border-bottom:1px solid var(--wish-line); border-radius:0; padding:8px 1px; background:repeating-linear-gradient(transparent 0,transparent 30px,#eadbd233 30px,#eadbd233 31px); color:var(--wish-ink); font:16px/31px var(--sans); -webkit-appearance:none; }
#postcard-dialog.wish-card-dialog #postcard-message::placeholder,#postcard-dialog.wish-card-dialog #postcard-name::placeholder { color:#a08b82; font-size:13px; }
#postcard-dialog.wish-card-dialog .postcard-message-meta { display:flex; justify-content:flex-end; gap:8px; margin-top:7px; color:var(--wish-muted); font:10px/1.7 var(--sans); }
#postcard-dialog.wish-card-dialog #postcard-count { white-space:nowrap; }
#postcard-dialog.wish-card-dialog #postcard-form .postcard-name-label { margin-top:20px; }
#postcard-dialog.wish-card-dialog #postcard-name { display:block; width:100%; height:42px; margin-top:2px; padding:5px 0; border:0; border-radius:0; border-bottom:1px solid var(--wish-line); color:var(--wish-ink); background:transparent; font:16px/1.5 var(--sans); -webkit-appearance:none; }
#postcard-dialog.wish-card-dialog button:focus-visible,#postcard-dialog.wish-card-dialog #postcard-message:focus-visible,#postcard-dialog.wish-card-dialog #postcard-name:focus-visible { outline:2px solid var(--postcard-red); outline-offset:4px; }
#postcard-dialog.wish-card-dialog .postcard-saved-content { padding-top:0; overflow-wrap:anywhere; }
#postcard-dialog.wish-card-dialog #postcard-saved-message { white-space:pre-wrap; color:var(--wish-ink); font:16px/1.95 var(--serif); min-height:110px; }
#postcard-dialog.wish-card-dialog .postcard-saved-signature { margin-top:18px; padding:0 85px 20px 0; color:var(--wish-muted); font:13px/1.8 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-saved-signature strong { color:var(--wish-ink); font-weight:500; }
#postcard-dialog.wish-card-dialog .postcard-legacy-note { margin:0 0 12px; color:var(--wish-muted); font:10px/1.7 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-stamp { position:absolute; right:18px; bottom:19px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:71px; height:71px; border:1px solid var(--postcard-red); outline:1px solid var(--postcard-red); outline-offset:-5px; border-radius:50%; color:var(--postcard-red); background:transparent; transform:rotate(11deg); pointer-events:none; opacity:0; }
#postcard-dialog.wish-card-dialog .postcard-stamp>span { font:10px/1.6 var(--serif); letter-spacing:1px; }
#postcard-dialog.wish-card-dialog .postcard-stamp>b { font:19px/1.3 var(--sans); font-weight:500; }
#postcard-dialog.wish-card-dialog .postcard-stamp>small { font:8px/1.5 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-card[data-saved=true] .postcard-stamp { opacity:.85; }
#postcard-dialog.wish-card-dialog .postcard-card.is-stamping .postcard-stamp { animation:postcard-stamp-in .6s cubic-bezier(.2,.8,.3,1) both; }
#postcard-dialog.wish-card-dialog .postcard-error { margin:14px 0 0; color:var(--postcard-red); font:13px/1.8 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-error:empty { margin:0; }
#postcard-dialog.wish-card-dialog .postcard-photo-choice { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:8px; color:var(--wish-muted); font:10px/1.7 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-photo-choice>button { min-height:44px; padding:0 3px; color:var(--wish-muted); font:11px/1.7 var(--sans); text-decoration:underline; text-underline-offset:4px; }
#postcard-dialog.wish-card-dialog .postcard-actions { display:flex; align-items:stretch; gap:9px; margin:12px 0 0; width:100%; }
#postcard-dialog.wish-card-dialog .postcard-actions button { min-height:51px; padding:11px 13px; font:13px/1.6 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-primary,#postcard-dialog.wish-card-dialog #postcard-replace { flex:1; display:flex; justify-content:center; align-items:center; gap:12px; border:1px solid var(--postcard-red); background:var(--postcard-red); color:#fffaf2; font-weight:500; transition:transform .16s,background .16s; }
#postcard-dialog.wish-card-dialog .postcard-primary>span { font:20px/1 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-secondary { flex:0 0 auto; border:1px solid var(--wish-line); color:var(--wish-ink); background:transparent; }
#postcard-dialog.wish-card-dialog .postcard-primary:hover,#postcard-dialog.wish-card-dialog #postcard-replace:hover { color:#fffaf2; border-color:#9b2f2d; background:#9b2f2d; }
#postcard-dialog.wish-card-dialog .postcard-primary:active { transform:translateY(2px); }
#postcard-dialog.wish-card-dialog .postcard-primary:disabled { opacity:.5; }
#postcard-dialog.wish-card-dialog .postcard-done { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:47px; margin:10px 0 0; color:var(--wish-muted); font:13px/1.6 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-conflict { margin:16px 0 0; padding:15px; border:1px solid #dc9b94; background:#f7cec929; color:var(--wish-ink); font:13px/1.8 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-conflict>div { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#postcard-dialog.wish-card-dialog .postcard-conflict button { min-height:44px; padding:8px 12px; border:1px solid var(--wish-line); font:12px var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-local-note { margin:21px 0 0; color:var(--wish-muted); font:10px/1.8 var(--sans); text-align:center; }
#postcard-dialog.wish-card-dialog .postcard-fortune { margin-top:22px; color:var(--wish-ink); border-color:var(--wish-line); }
#postcard-dialog.wish-card-dialog .postcard-fortune .gift-seal { color:var(--postcard-red); background:var(--wish-pink); border-color:#dc9b94; }
#postcard-dialog.wish-card-dialog .postcard-fortune small { color:var(--wish-muted); }
#postcard-dialog.wish-card-dialog .postcard-picker-back { min-height:44px; margin:-5px 0 12px; color:var(--postcard-red); font:12px/1.7 var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 12px; }
#postcard-dialog.wish-card-dialog .postcard-photo-option { position:relative; min-width:0; padding:4px 4px 9px; border:1px solid var(--wish-line); color:var(--wish-ink); background:#fffdf8; text-align:left; box-shadow:0 2px 0 #eddfd4; transition:transform .2s; }
#postcard-dialog.wish-card-dialog .postcard-photo-option img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
#postcard-dialog.wish-card-dialog .postcard-photo-option>span { display:block; margin:8px 3px 0; font:10px/1.5 var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#postcard-dialog.wish-card-dialog .postcard-photo-option:after { content:"↗"; position:absolute; top:8px; right:8px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#fffaf2eb; color:var(--postcard-red); font:14px var(--sans); }
#postcard-dialog.wish-card-dialog .postcard-photo-option[aria-current=true] { border-color:var(--postcard-red); }
#postcard-dialog.wish-card-dialog .postcard-photo-option[aria-current=true]:after { content:"✓"; background:var(--wish-pink); color:var(--postcard-red); }
#postcard-dialog.wish-card-dialog .postcard-photo-option:hover { transform:translateY(-2px); }
#postcard-dialog.wish-card-dialog .postcard-all { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; margin-top:17px; border-top:1px solid var(--wish-line); color:var(--wish-ink); font:12px/1.7 var(--sans); }
@keyframes postcard-workshop-in { from { opacity:.6; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes wish-paper-in { from { opacity:.4; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes postcard-stamp-in { from { opacity:0; transform:scale(1.8) rotate(-5deg); } 65% { opacity:.85; transform:scale(.95) rotate(12deg); } to { opacity:.85; transform:scale(1) rotate(11deg); } }
@media (min-width:650px) { #postcard-dialog.wish-card-dialog { height:auto; max-height:94svh; padding:26px 33px 28px; } #postcard-dialog.wish-card-dialog .postcard-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:360px) { #postcard-dialog.wish-card-dialog { padding:19px 19px 24px; } #postcard-dialog.wish-card-dialog .postcard-back { padding:18px 14px 20px; } #postcard-dialog.wish-card-dialog .postcard-grid { gap:13px 8px; } #postcard-dialog.wish-card-dialog .postcard-actions { gap:8px; } #postcard-dialog.wish-card-dialog .postcard-actions button { padding:11px 10px; font-size:12px; } }
@media (prefers-reduced-motion:reduce) { #postcard-dialog.wish-card-dialog[open],#postcard-dialog.wish-card-dialog .postcard-face,#postcard-dialog.wish-card-dialog .postcard-card.is-stamping .postcard-stamp { animation:none; } #postcard-dialog.wish-card-dialog .postcard-photo-option,#postcard-dialog.wish-card-dialog .postcard-primary { transition:none; } }

#postcard-dialog.wish-card-dialog .postcard-rsvp { margin-top:16px; color:var(--postcard-red); text-decoration:underline; text-underline-offset:5px; }
#postcard-dialog.wish-card-dialog .postcard-help:empty { display:none; }
#postcard-dialog.wish-card-dialog #postcard-write-actions { margin-top:3px; }