/* Local to the invitation: the rest of the app keeps its existing design. */
#shareDialog{width:calc(100% - 20px);max-width:460px;max-height:88dvh;padding:18px 18px max(16px,env(safe-area-inset-bottom));background:#f8f9fb;border:0}
#shareDialog .modal-head{padding-bottom:8px;align-items:center}
#shareDialog .modal-head h2{font-size:19px;line-height:1.4;margin:0}
#shareDialog .close{width:40px;height:40px;flex:0 0 40px;background:#ebedf1;border:0;outline-offset:3px}
#shareDialog .dialog-scroll{max-height:none;padding:0;overflow-x:hidden;overflow-y:auto;min-height:0;scrollbar-width:thin}
#shareDialog .share-actions{padding-top:14px;border-top:0;gap:5px;background:#f8f9fb}
#shareDialog .share-actions .primary{min-height:50px}
#shareDialog .share-actions .secondary{min-height:42px}
#shareDialog .share-note{margin:10px 8px 8px;font-size:12px;line-height:1.6;color:#8e8e93;text-align:center}
.trip-collection{padding:0 0 6px;color:#1c1c1e}
.trip-folder{--tf-scale:.72;position:relative;width:244.8px;height:245px;margin:0 auto;isolation:isolate;--tf-hinge:0deg;--tf-lift:-18px;--tf-spread:0px;--tf-fan:0deg;--tf-stack:10px}
.tf-stage{position:absolute;width:340px;height:272px;left:0;top:45px;transform:scale(var(--tf-scale));transform-origin:0 0;pointer-events:none}
.tf-shadow{position:absolute;left:24px;right:24px;bottom:-4px;height:38px;border-radius:50%;background:#35496125;filter:blur(18px);transform:scaleX(.93)}
.tf-back{position:absolute;inset:0;background:linear-gradient(150deg,#c8d9e5,#a2b7c7);overflow:hidden}
.tf-cover{width:100%;height:100%;object-fit:cover;opacity:.76}
.tf-back-shine{position:absolute;inset:0;background:linear-gradient(135deg,#ffffff60,transparent 48%,#72899722);box-shadow:inset 0 0 0 1px #ffffff99}
.tf-files{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:22px}
.tf-photo{position:absolute;left:34px;top:96px;width:272px;height:184px;border-radius:17px;overflow:hidden;background:#e9f3fc;box-shadow:0 0 0 .6px #ffffffd9,0 8px 16px -8px #19293655;transform-origin:50% 100%;transform:translate(calc(var(--slot) * var(--tf-spread)),calc(var(--tf-lift) - var(--depth) * var(--tf-stack))) rotate(calc(var(--rest-angle) + var(--slot) * var(--tf-fan)));transition:transform .65s cubic-bezier(.22,.8,.26,1);transition-delay:calc(var(--depth) * 25ms)}
.tf-photo-image{width:100%;height:100%;object-fit:cover}
.tf-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0007,transparent 48%);pointer-events:none}
.tf-photo-name{position:absolute;left:16px;right:16px;top:13px;font-size:15px;line-height:1.45;font-weight:600;color:white;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px #0004}
.tf-photo-empty{background:linear-gradient(140deg,#eef5fa,#d7e6f1)}
.tf-photo-empty:after{display:none}
.tf-photo-empty .tf-photo-name{color:#4e6678;text-shadow:none}
.tf-paper-lines{position:absolute;left:18px;right:32px;top:60px;display:grid;gap:12px}
.tf-paper-lines i{height:5px;border-radius:4px;background:#91aabc33}
.tf-paper-lines i:nth-child(2){width:80%}.tf-paper-lines i:last-child{width:58%}
.tf-front{position:absolute;left:0;top:74px;width:340px;height:198px;z-index:3;transform-origin:50% 100%;transform:perspective(760px) rotateX(var(--tf-hinge));transition:transform .65s cubic-bezier(.22,.8,.26,1);background:linear-gradient(165deg,#f8fbfce8,#dae5ecee);box-shadow:inset 0 1px 2px white}
.tf-glass{position:absolute;inset:0;background:linear-gradient(150deg,#ffffff70 0%,#ffffff10 35%,#edf2f5aa 80%);box-shadow:inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #728c9e33}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tf-front{background:linear-gradient(180deg,#ffffff33 0%,#f7fafb99 48%,#eef3f6ed 100%);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}}
.tf-label{position:absolute;left:28px;bottom:28px;right:20px;display:flex;flex-direction:column;gap:9px;color:#1f303a;text-align:left}
.tf-label strong{font-size:29px;font-weight:650;line-height:1.2;letter-spacing:-.5px}
.tf-label span{font-size:18px;color:#4c6170;line-height:1.5;font-variant-numeric:tabular-nums}
.tf-toggle{position:absolute;inset:0;width:100%;height:100%;z-index:5;cursor:pointer;border:0;background:transparent;border-radius:24px;-webkit-tap-highlight-color:transparent}
.tf-toggle:focus-visible{outline:2px solid #6d91ac;outline-offset:3px}
.trip-folder[data-open=true]{--tf-hinge:-24deg;--tf-lift:-96px;--tf-spread:33px;--tf-fan:5deg;--tf-stack:15px}
.tf-open-label{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;min-height:44px;margin:0;background:none;color:#526a7a;font-size:13px}
.tf-open-label svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.tf-open-label[aria-expanded=true] svg{transform:rotate(180deg)}
.tf-origins{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;color:#636366;font-size:13px;line-height:1.6;margin:4px 6px 18px}
.tf-origins i{width:16px;height:3px;flex-shrink:0;background:#9aaeba;border-radius:3px}
.tf-origins time{flex-basis:100%;text-align:center;font-size:12px;color:#8e8e93;font-variant-numeric:tabular-nums}
.tf-details{background:white;border-radius:24px;padding:18px 16px;margin:0 2px 14px}
.tf-list-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 6px}
.tf-list-heading h3{font-size:16px;line-height:1.5;font-weight:600}.tf-list-heading>span{font-size:12px;color:#8e8e93}
.tf-list{list-style:none;margin:0;padding:0}
.tf-list li{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #f0f1f4}
.tf-list li:last-child{border-bottom:0;padding-bottom:4px}
.tf-list-number{flex:0 0 18px;font-size:11px;font-variant-numeric:tabular-nums;color:#9aa5ad;align-self:center}
.tf-list-photo,.tf-list-symbol{width:48px;height:48px;aspect-ratio:1;flex:0 0 48px;border-radius:12px;object-fit:cover;background:#e9f3fc}
.tf-list-symbol{display:grid;place-items:center;font-size:20px;font-weight:300;color:#9aafbf}
.tf-list li>div{min-width:0;flex:1}.tf-list strong{display:block;font-size:15px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.tf-list p{margin:4px 0 0;font-size:13px;color:#8e8e93;line-height:1.6;overflow-wrap:anywhere}
.tf-empty{font-size:14px;color:#8e8e93;padding:12px 0 2px}
.invite-print-preview{margin:0 2px 8px}
.invite-print-preview>summary{padding:10px 8px;min-height:44px;color:#636366;font-size:13px;text-align:center;cursor:pointer;list-style:none}
.invite-print-preview>summary::-webkit-details-marker{display:none}
.invite-print-preview>summary:after{content:' ＋';color:#9aa5ad}.invite-print-preview[open]>summary:after{content:' −'}
#shareDialog #shareCanvas{display:block;width:100%;height:auto;border-radius:18px;margin:8px 0 0;box-shadow:none}
#shareDialog .invitation-demo-label{font-size:11px;color:#8e8e93;margin:2px 0 8px;text-align:center}
@media(max-width:350px){.trip-folder{--tf-scale:.64;width:217.6px;height:224px}.tf-stage{top:40px}.tf-details{padding:16px 12px}.tf-list-number{display:none}}
@media(max-height:650px){#shareDialog{max-height:94dvh;margin-bottom:max(8px,env(safe-area-inset-bottom))}.trip-folder{--tf-scale:.60;width:204px;height:208px}.tf-stage{top:40px}}
@media(min-width:700px){#shareDialog{margin:auto;max-height:88dvh}.trip-folder{--tf-scale:.82;width:278.8px;height:275px}}
@media(prefers-reduced-motion:reduce){.trip-folder *{transition:none!important;animation:none!important}.tf-front{transform:none}.trip-folder[data-open=true]{--tf-lift:-68px;--tf-fan:0deg;--tf-spread:22px}}
#shareDialog,#shareDialog .share-actions{background:var(--surface-base,#f2f2f2)}
.tf-details{background:var(--surface-card,rgba(255,255,255,.62));box-shadow:none}
.tf-list li{border-bottom-color:var(--surface-rule,rgba(28,28,30,.07))}

/* Two compact preview tabs, with actions independent of the preview scroller */
#shareDialog .invite-view-tabs{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 16px;padding:4px;border-radius:99px;background:rgba(228,231,237,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#shareDialog .invite-view-tabs button{font-size:13px;font-weight:500;min-height:34px;padding:6px 16px;border-radius:99px;background:transparent;color:#838791;white-space:nowrap}
#shareDialog .invite-view-tabs button[aria-selected=true]{background:rgba(255,255,255,.95);color:#1c1c1e;box-shadow:0 1px 4px #25364808}
#shareDialog .share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px;align-items:center}
#shareDialog .share-actions .primary,#shareDialog .share-actions .secondary{min-height:48px;margin:0;width:100%;font-size:15px}
#shareDialog .share-actions:has(#saveAppointment[hidden]){grid-template-columns:1fr}
#shareDialog .invite-save-status{grid-column:1 / -1;margin:2px 4px 0;padding:0;color:#777d86;font-size:12px;line-height:1.6;text-align:center}
#shareDialog #saveAppointment:disabled{opacity:1;background:rgba(226,230,236,.7);color:#858b94;cursor:default}
#shareDialog .invite-print-preview{margin:0 2px 8px}
.tf-list-photo{border:var(--photo-edge);box-shadow:var(--photo-shadow)}

/* Rounded fallback also clips nested images when path clipping is composited. */
.tf-back,.tf-front{border-radius:22px;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.tf-back-shine,.tf-glass{border-radius:inherit}