/* Trip page */
.trip{padding-top:28px;padding-bottom:56px}
.t-open .who{display:flex;gap:10px;align-items:center;color:var(--muted);font-weight:600;margin:0 0 10px}
.t-open .who a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fill,rgba(0,0,0,.05));color:inherit;text-decoration:none}
.t-open h1{font-family:Caveat,"Segoe Print","Bradley Hand",cursive;font-weight:700;font-size:clamp(48px,8.5vw,84px);line-height:.95;margin:0 0 12px;letter-spacing:0;color:var(--fg);transform:rotate(-1deg);transform-origin:left}
.t-open h1 em{font-style:normal;font-weight:700;color:var(--accent,#0071E3);font-size:.6em;display:block;margin-top:-.1em;line-height:1}
.t-dates{color:var(--muted);font-weight:600;margin:0 0 18px}
.t-tot{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 12px}
.t-tot div{display:flex;flex-direction:column-reverse}
.t-tot dd{margin:0;font:700 28px/1.1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.t-tot dt{color:var(--muted);font-size:13px;font-weight:600}
#tState{min-height:1.4em}
#tState .btn{margin-left:8px}
.t-map figure{margin:12px 0 28px}
.t-svg{border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#130D36,#2A1660)}
.t-svg svg{display:block;width:100%;height:auto}
.t-svg .land{fill:rgba(190,172,255,.14);stroke:rgba(214,200,255,.22);stroke-width:.8}
.t-svg .rt{fill:none;stroke:#F5B544;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(224,138,30,.7))}
.t-svg .pt circle{fill:#F7EFDD;stroke:#F5B544;stroke-width:3}
.t-svg .pt.c circle{fill:#1F1352;stroke:#F7EFDD;stroke-width:2.5}
.t-svg .pt.s circle{fill:#B9A8F0;stroke:none}
.t-svg .pt text{fill:#FFF8EC;font:700 17px Inter,system-ui,sans-serif;paint-order:stroke;stroke:#130D36;stroke-width:4px}
.t-svg .pt.c text{fill:rgba(255,248,236,.7);font-size:13px}
.t-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:13px}
.t-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:4px}
.t-legend i.d{background:#F7EFDD;border:3px solid #F5B544}
.t-legend i.c{background:#1F1352;border:2px solid #9a8fc0}
.t-legend i.s{background:#B9A8F0}
.t-stops h2,.t-share h2{font-size:24px;margin:0 0 6px}
.stops{list-style:none;margin:14px 0 30px;padding:0;position:relative}
.stops::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--line,rgba(0,0,0,.12))}
.stop{display:flex;gap:14px;padding:10px 0;position:relative}
.stop .dot{flex:none;width:24px;height:24px;border-radius:50%;margin-top:2px;background:var(--bg,#fff);border:3px solid #9a8fc0;position:relative;z-index:1}
.stop.r-main .dot{background:#F5B544;border-color:#C98213}
.stop.r-visit .dot,.stop.r-end .dot{background:#F7EFDD;border-color:#F5B544}
.stop.r-connection .dot{width:16px;height:16px;margin:6px 4px 0}
.stop.r-start .dot,.stop.r-return .dot{background:#B9A8F0;border-color:#B9A8F0}
.sbody{min-width:0;flex:1}
.sname{margin:0;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline}
.sname b{font-size:18px}
.sname .code{font:800 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;padding:3px 6px;border-radius:6px;background:var(--fill,rgba(0,0,0,.06))}
.sname .rl{font-weight:600;color:var(--muted)}
.stop.r-main .rl{color:#B06F0A}
.tag{font:700 11px/1.6 Inter,system-ui,sans-serif;padding:1px 8px;border-radius:999px;background:var(--fill,rgba(0,0,0,.06));color:var(--muted)}
.tag.sug{background:#FFF1D6;color:#8A5300}
.tag.you{background:#E8E2FF;color:#3A2A7A}
.sdet{margin:4px 0 0;color:var(--muted);font-size:14px}
.sdet .why{display:block;font-size:12.5px}
.seg.role{display:inline-flex;flex-wrap:wrap;margin-top:8px;border-radius:12px;background:var(--fill,rgba(0,0,0,.05));padding:3px;gap:2px}
.seg.role button{min-height:36px;padding:6px 12px;border:0;border-radius:9px;background:none;font:600 13px Inter,system-ui,sans-serif;color:inherit;cursor:pointer}
.seg.role button[aria-checked="true"]{background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.seg.role button:focus-visible{outline:2px solid #0071E3;outline-offset:1px}
.linkish{background:none;border:0;padding:6px 4px;margin-left:6px;color:var(--accent);font:600 13px Inter,system-ui,sans-serif;cursor:pointer;text-decoration:underline}
.t-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 18px}
.t-notfound{padding:60px 0;text-align:center}
:root[data-theme="dark"] .tag.sug{background:#4a3410;color:#FFD99A}:root[data-theme="dark"] .tag.you{background:#2f2560;color:#D9D0FF}
@media (max-width:600px){.t-tot dd{font-size:22px}.seg.role button{padding:6px 9px}}

/* ---------- hero with destination postcards ---------- */
.t-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:8px}
.t-hero.solo{grid-template-columns:1fr}
.t-hero .t-open{animation:tUp .7s cubic-bezier(.2,.7,.2,1) both}
.t-cards{position:relative;height:380px}
.t-pc{position:absolute;margin:0;width:236px;padding:10px 10px 12px;background:linear-gradient(#F7EFDD,#EFE3C8);border-radius:10px;box-shadow:0 18px 40px rgba(20,12,50,.28),0 2px 6px rgba(20,12,50,.15);
  transform:rotate(var(--r));animation:tDrop .9s cubic-bezier(.2,.9,.25,1.15) both,tFloat 6s ease-in-out infinite;animation-delay:calc(.15s + var(--i) * .18s),calc(1.2s + var(--i) * .7s)}
.t-pc .ph{aspect-ratio:4/5;border-radius:5px;overflow:hidden;background:#2A1660}
.t-pc img{width:100%;height:100%;object-fit:cover;display:block;animation:tKen 14s ease-in-out infinite alternate}
.t-pc figcaption{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 8px;padding:8px 4px 0;color:#24173F}
.t-pc b{font:700 30px/1 Caveat,"Segoe Print",cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-pc .code{font:800 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;padding:4px 7px;border-radius:6px;background:#F5B544;color:#24173F}
.t-pc .n{grid-column:1/-1;font:600 12.5px/1.4 Inter,system-ui,sans-serif;color:#6B5A86;margin-top:2px}
.t-pc.n1.p0{left:50%;top:0;margin-left:-135px;width:270px}
.t-pc.n2.p0{left:4%;top:20px}.t-pc.n2.p1{right:4%;top:44px}
.t-pc.n3.p0{left:0;top:40px}.t-pc.n3.p1{right:0;top:20px}.t-pc.n3.p2{left:50%;top:70px;margin-left:-118px;z-index:2}
@keyframes tUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tDrop{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--r) * -2)) scale(.92)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes tFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes tKen{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-2%)}}
/* ---------- map drawing ---------- */
.t-svg .pt>*{opacity:0}
.t-svg.go .pt>*{animation:tPop .55s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:var(--t)}
.t-svg.go .pt text{animation-name:tFade;animation-delay:calc(var(--t) + .15s)}
.t-svg.still .pt>*{animation:none;opacity:1}
.t-svg .pt circle{transform-box:fill-box;transform-origin:center}
.t-svg .pt.main .ring{fill:none;stroke:#F5B544;stroke-width:2.5}
.t-svg.go .pt.main .ring{animation:tPop .55s both,tRing 2.4s ease-out infinite;animation-delay:var(--t),calc(var(--t) + .6s)}
.t-svg.still .pt.main .ring{animation:none;opacity:0}
.t-svg .plane{opacity:0}
.t-svg .plane .jet{filter:drop-shadow(0 3px 4px rgba(5,2,25,.45))}
.t-svg .plane .body{fill:#E4E1F6}
.t-svg .plane .belly{fill:#AEA8E0}
.t-svg .plane .fin{fill:#7F78D0}
.t-svg .plane .stab{fill:#AEA8E0}
.t-svg .plane .wing{fill:#AEA8E0}
.t-svg .plane .wedge{fill:#4F4FA8}
.t-svg .plane .win,.t-svg .plane .cockpit{fill:#4F4FA8}
.t-svg .plane .hl{fill:none;stroke:#fff;stroke-width:.7;stroke-linecap:round;opacity:.9}
.t-svg .plane .hl.soft{stroke:#D9D5F4;stroke-width:.9}
@keyframes tPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes tFade{from{opacity:0}to{opacity:1}}
@keyframes tRing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
/* ---------- stops rise in ---------- */
.stops:not(.shown) .stop{opacity:0}
.stops.shown:not(.done) .stop{animation:tUp .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
.stops::before{transform-origin:top;transition:transform 1.2s ease}
.stops:not(.shown)::before{transform:scaleY(0)}
/* ---------- invitation for friends ---------- */
.t-invite{margin:10px 0 40px;padding:28px 28px 22px;border-radius:24px;color:#FFF8EC;background:radial-gradient(120% 90% at 90% 0%,rgba(245,181,68,.22),transparent 55%),linear-gradient(160deg,#130D36,#2A1660)}
.t-invite .hand{color:#F5B544;margin-bottom:6px}
.t-invite h2{font:700 clamp(36px,6vw,56px)/1 Caveat,"Segoe Print",cursive;margin:0 0 10px}
.t-invite p{color:rgba(255,248,236,.82);max-width:560px}
.t-invite .btn.alt{background:rgba(255,248,236,.12);color:#FFF8EC}
@media (max-width:820px){.t-hero{grid-template-columns:1fr;gap:12px}.t-cards{height:360px;max-width:420px;width:100%;margin:0 auto}
  .t-cards .t-pc{width:190px}.t-cards .t-pc.n1.p0{width:220px;margin-left:-110px}.t-cards .t-pc.n3.p2{margin-left:-95px}}
@media (max-width:420px){.t-cards{height:330px}.t-cards .t-pc{width:160px}.t-cards .t-pc.n1.p0{width:210px;margin-left:-105px;top:6px}.t-cards .t-pc.n3.p2{margin-left:-80px}.t-pc b{font-size:24px}}
@media (prefers-reduced-motion:reduce){.t-hero .t-open,.t-pc,.t-pc img,.stops .stop,.stops.shown:not(.done) .stop{animation:none!important;opacity:1}.stops::before{transition:none;transform:none}}
/* ---------- own photos and notes ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hand-note{font:700 22px/1.15 Caveat,"Segoe Print","Bradley Hand",cursive;color:#B06F0A;margin:6px 0 0}
.t-pc .n.hand-note{font:700 18px/1.1 Caveat,"Segoe Print",cursive;color:#8A5300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 0}
.t-pc .ph{display:block;width:100%;padding:0;border:0;cursor:zoom-in}
.snote{display:block;margin-top:8px;max-width:520px}
.snote input{width:100%;min-height:40px;padding:8px 12px;border-radius:10px;border:1px dashed var(--line,rgba(0,0,0,.2));background:transparent;font:700 21px/1.2 Caveat,"Segoe Print",cursive;color:#B06F0A}
.snote input::placeholder{font:500 14px Inter,system-ui,sans-serif;color:var(--muted)}
.snote input:focus{outline:2px solid #F5B544;outline-offset:1px;border-style:solid;background:var(--card,#fff)}
.sthumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sthumbs button{width:76px;height:76px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;transform:rotate(-1.5deg);box-shadow:0 4px 10px rgba(20,12,50,.18);background:#2A1660}
.sthumbs button:nth-child(even){transform:rotate(1.5deg)}
.sthumbs button:hover{transform:none}
.sthumbs img,.tp-img img{width:100%;height:100%;object-fit:cover;display:block}
.t-photos{margin:6px 0 26px;padding:22px 24px;border-radius:22px;background:var(--card,#fff);box-shadow:inset 0 0 0 1px var(--line-soft,rgba(0,0,0,.08));transition:box-shadow .2s}
.t-photos.over{box-shadow:inset 0 0 0 3px #F5B544}
.t-photos .hand{color:#B06F0A;margin:0 0 2px}
.t-photos h2{font-size:24px;margin:0 0 6px}
.tp-head{display:flex;gap:16px 24px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.tp-head .note{max-width:620px;margin:0}
.tp-act{display:flex;gap:12px;align-items:center}
.tp-act .btn.dis{opacity:.45;pointer-events:none}
#tpStatus{margin:10px 0 0;min-height:1.3em}
.tp-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tp-item{display:flex;flex-direction:column;gap:6px}
.tp-img{aspect-ratio:1;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:#2A1660}
.tp-item.cover .tp-img{box-shadow:0 0 0 3px #F5B544}
.tp-stop select{width:100%;min-height:36px;border-radius:9px;border:1px solid var(--line,rgba(0,0,0,.15));background:var(--card,#fff);color:inherit;font:500 13px Inter,system-ui,sans-serif;padding:4px 6px}
.tp-btns{display:flex;gap:6px}
.tp-btns button{flex:1;min-height:34px;border-radius:9px;border:0;background:var(--fill,rgba(0,0,0,.06));color:inherit;font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
.tp-btns .tp-cv[aria-pressed="true"]{background:#FFF1D6;color:#8A5300}
.tp-btns .tp-del{flex:0 0 auto;padding:0 10px}
.tp-btns button:focus-visible,.tp-img:focus-visible,.sthumbs button:focus-visible,.t-pc .ph:focus-visible{outline:2px solid #0071E3;outline-offset:2px}
/* viewer */
.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;overflow:hidden}
.lb::backdrop{background:rgba(10,6,30,.88)}
.lb figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 16px 24px;box-sizing:border-box}
.lb img{max-width:min(100%,1100px);max-height:calc(100% - 70px);object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb figcaption{color:#FFF8EC;text-align:center;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:center}
.lb figcaption b{font:700 30px/1 Caveat,"Segoe Print",cursive}
.lb .hand-note{color:#F5B544;margin:0;font-size:24px}
.lb-n{color:rgba(255,248,236,.6);font:600 13px Inter,system-ui,sans-serif}
.lb button{position:absolute;border:0;border-radius:50%;width:48px;height:48px;background:rgba(255,248,236,.14);color:#FFF8EC;font:400 30px/1 Inter,system-ui,sans-serif;cursor:pointer}
.lb button:focus-visible{outline:2px solid #F5B544}
.lb-x{top:12px;right:12px}.lb-p{left:12px;top:50%;margin-top:-24px}.lb-nx{right:12px;top:50%;margin-top:-24px}
@media (max-width:600px){.t-photos{padding:18px 16px}.tp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lb-p,.lb-nx{top:auto;bottom:16px;margin:0}}
:root[data-theme="dark"] .hand-note,:root[data-theme="dark"] .snote input{color:#F5B544}:root[data-theme="dark"] .tp-btns .tp-cv[aria-pressed="true"]{background:#4a3410;color:#FFD99A}

/* travel companions */
.tp-comp{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft,#e5e5ea)}
.tp-comp h3{margin:0 0 4px;font-size:18px}
.tp-inv{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.tp-inv input{flex:1 1 260px;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line-soft,#e5e5ea);background:var(--card-2,#f5f5f7);font:inherit;font-size:14px;color:inherit}
.tp-people{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tp-people li{display:flex;gap:10px;align-items:center;padding:6px 12px;border-radius:999px;background:var(--card-2,#f5f5f7);font-size:14px}
.tp-img{position:relative}
.tp-by{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600}
.t-sharedlink{margin:6px 0 0;font-size:15px}
.t-sharedlink a{font-weight:600}

/* artwork leads, your photos tucked behind it */
.t-pc.lead{left:50%;top:26px;margin-left:-130px;width:260px;z-index:3}
.t-pc.mini{width:180px;padding:8px 8px 10px;z-index:1}
.t-pc.mini figcaption{display:block;padding:6px 2px 0}
.t-pc.mini .n{margin:0;font:700 19px/1 Caveat,"Segoe Print",cursive;color:#5B4A7A}
.t-pc.mini.m1.p0,.t-pc.mini.m2.p0{left:0;top:4px}
.t-pc.mini.m2.p1{right:0;top:52px}
.t-pc.mini.m1.p0{left:4%}
@media (max-width:760px){.t-cards .t-pc.lead{width:210px;margin-left:-105px;top:18px}.t-cards .t-pc.mini{width:140px}}
@media (max-width:420px){.t-cards .t-pc.lead{width:190px;margin-left:-95px}.t-cards .t-pc.mini{width:118px}.t-pc.mini .n{font-size:16px}}

/* actions by the title */
.t-acts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.t-acts .btn{min-height:38px}
/* owner video controls */
.tv-own{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);margin-bottom:12px;color:#FFF8EC}
.tv-own .note{color:rgba(255,248,236,.7)}
.tv-own .seg{background:rgba(255,255,255,.1)}.tv-own .seg button{color:rgba(255,248,236,.75)}.tv-own .seg button[aria-checked="true"]{background:#FFF8EC;color:#24173F}.tv-own .seg button:disabled{opacity:.45;cursor:not-allowed}
.tv-row{display:flex;flex-direction:column;gap:6px}.tv-l{font-size:12px;font-weight:700;color:rgba(255,248,236,.6);text-transform:uppercase;letter-spacing:.05em}
.tv-covers{display:flex;gap:8px;flex-wrap:wrap}
.tv-cv{width:52px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:#2A1660}
.tv-cv img{width:100%;height:100%;object-fit:cover;display:block}.tv-cv[aria-pressed="true"]{border-color:#F5B544;box-shadow:0 0 0 2px rgba(245,181,68,.35)}
.tv-pub{font-weight:600}
.seg button[aria-checked="true"]{background:var(--card,#fff);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* visitors: the recap only, no export tools */
.t-share.visitor .t-links,.t-share.visitor .vk-side{display:none}
.t-share.visitor .v2-body{grid-template-columns:1fr;justify-items:center}
@media (max-width:600px){.t-tot{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.t-acts .btn{flex:1 1 calc(50% - 8px)}}

.t-ask{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:2px 0 12px;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,#F5B544 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#F5B544 35%,transparent)}
.t-ask b{font-size:16px}.t-ask p{margin:2px 0 0;font-size:14px;color:var(--muted);max-width:52ch}.t-ask-go{display:flex;gap:8px;flex-wrap:wrap}

.tp-mail{margin-top:10px}.tp-mail .tp-inv input{flex:1;min-width:0}

.t-cheer b{font-variant-numeric:tabular-nums}.t-cheer.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}

.t-co2{font-size:13px;color:var(--muted);margin:8px 0 0}.t-co2 a{color:inherit}

.pb-dlg{border:0;border-radius:24px;padding:26px;max-width:400px;width:calc(100% - 32px);background:var(--card);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.3)}.pb-dlg::backdrop{background:rgba(0,0,0,.45)}.pb-dlg h3{font-size:24px;letter-spacing:-.03em;margin-bottom:6px}.pb-opts{display:flex;gap:10px;margin:16px 0 8px;flex-wrap:wrap}
.tp-info{font-size:12.5px;min-width:0}
.tp-info summary{cursor:pointer;color:var(--muted,#6e6e73);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:28px;display:flex;align-items:center}
.tp-info summary::-webkit-details-marker{display:none}.tp-info summary::before{content:"ⓘ";margin-right:5px;font-weight:400}
.tp-info[open] summary{white-space:normal}
.tp-info dl{margin:4px 0 0}
.tp-info dt{color:var(--muted,#6e6e73);font-weight:600;font-size:11px;letter-spacing:.02em;text-transform:uppercase;margin-top:7px}.tp-info dd{margin:1px 0 0;overflow-wrap:anywhere;line-height:1.4}
.tp-kw{display:flex;flex-wrap:wrap;gap:4px}.tp-kw span{padding:1px 7px;border-radius:999px;background:var(--fill,rgba(0,0,0,.06))}
.tp-priv{margin:6px 0 0;color:var(--muted,#6e6e73);font-size:11.5px}
.t-showcase{display:inline-block;margin:6px 0 4px;padding:6px 12px;border-radius:14px;line-height:1.5;background:color-mix(in srgb,var(--sun) 14%,transparent);color:var(--sun-ink);font-size:13px}.t-showcase a{font-weight:600}
.tv-len{font-size:13px;font-weight:600;color:var(--muted);margin-left:6px}
.kit-img{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.kit-img .note{flex:1 1 100%;margin:0}
/* "Make my version" bar on phones: slim, above the system bar, never over the video player (it hides there) */
/* the first result, in four steps */
.t-start{margin:18px 0 6px;padding:20px 22px;border-radius:24px;background:var(--card);box-shadow:var(--shadow)}
.t-start .ts-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.t-start h2{font-size:24px;letter-spacing:-.03em;margin:2px 0 4px}
.t-steps{list-style:none;counter-reset:st;margin:14px 0 0;padding:0;display:grid;gap:10px}
.t-steps li{counter-increment:st;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px 12px 50px;border-radius:16px;background:var(--fill);position:relative}
.t-steps li::before{content:counter(st);position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.t-steps li>div{flex:1 1 240px;min-width:0}.t-steps .note{margin:2px 0 0}.t-steps input{margin-top:8px;width:100%}
.t-steps .st-ok{margin-left:6px;font-size:12px;font-weight:700;color:var(--green,#1E8E3E)}
.t-steps .ts-row{display:flex;gap:6px;flex-wrap:wrap}.t-steps .btn.alt,.t-steps input{background:var(--card);box-shadow:inset 0 0 0 1px var(--line,rgba(127,127,127,.22))}.t-steps input{text-align:left}.ts-imp{margin:12px 0 0}

/* map: compact on the page, larger in a dialog */
.t-svgwrap{position:relative}
.t-mapexp{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.22);background:rgba(19,13,54,.72);color:#FFF8EC;border-radius:99px;padding:6px 12px;font:600 13px var(--f);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.t-mapexp:hover{background:rgba(42,22,96,.9)}.t-mapexp svg{width:14px;height:14px}
.t-mapdlg{width:min(1200px,94vw);max-width:none;border:0;border-radius:22px;padding:14px;background:var(--card);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.t-mapdlg::backdrop{background:rgba(10,8,30,.6)}
.t-mapdlg-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}.t-mapdlg-h h2{font-size:18px;margin:0}
/* trip details: collapsed to the route and flight count */
.t-stops{position:relative}
.t-details>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:6px 0;padding-right:230px}
.t-details>summary::-webkit-details-marker{display:none}
.t-details>summary h2{margin:0;display:inline-flex;align-items:center;gap:8px}
.t-details>summary h2::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.t-details[open]>summary h2::after{transform:rotate(225deg) translateY(-1px)}
.t-dsum{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.t-details[open] .stops{margin-top:10px}
.t-review{position:absolute;right:0;top:8px;z-index:1}.t-review[hidden]{display:none}
@media (max-width:720px){.t-details>summary{padding-right:0}.t-review{position:static;margin:0 0 6px}}
@media (prefers-reduced-motion:reduce){.t-details>summary h2::after{transition:none}}
/* the start guide, once photos are in: one next action */
.t-start.compact{padding:12px 16px;border-radius:18px}
.t-start .ts-c{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.t-start .ts-c p{margin:0;font-size:15px}
.t-start .ts-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.t-details{margin-bottom:28px}.t-details>summary:focus-visible{outline:2px solid #0071E3;outline-offset:4px;border-radius:8px}

/* ---------- Postcard look (the owner's public appearance; visitors only ever see it) ---------- */
/* Paper, restrained blue, a serif destination title and quiet postal details, built on the same page and sections. */
body.t-paper{--pc-paper:#FAF5EB;--pc-ink:#182D3B;--pc-blue:#0066CC;--pc-coral:#D75D45;--pc-line:#D8D4C7;--pc-muted:#5E655F;background:var(--pc-paper);color:var(--pc-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.t-paper{--pc-paper:#141B21;--pc-ink:#EFE8DA;--pc-blue:#6FB0FF;--pc-coral:#F08A73;--pc-line:#33404A;--pc-muted:#AEB6B0}}
:root[data-theme="dark"] body.t-paper{--pc-paper:#141B21;--pc-ink:#EFE8DA;--pc-blue:#6FB0FF;--pc-coral:#F08A73;--pc-line:#33404A;--pc-muted:#AEB6B0}
body.t-paper .t-hero{position:relative;padding:22px 22px 18px;border:1px solid var(--pc-line);border-radius:6px;background:var(--pc-paper);
  background-image:repeating-linear-gradient(135deg,var(--pc-coral) 0 10px,transparent 10px 18px,var(--pc-blue) 18px 28px,transparent 28px 36px);background-size:100% 6px;background-repeat:no-repeat;background-position:0 0}
body.t-paper .t-hero::after{content:"";position:absolute;right:16px;top:18px;width:54px;height:62px;border:2px dashed var(--pc-line);border-radius:3px;pointer-events:none}
body.t-paper .t-open h1{font-family:Georgia,"DejaVu Serif","Times New Roman",serif;font-weight:400;font-size:clamp(36px,6.4vw,68px);line-height:1.02;letter-spacing:-.02em;transform:none;color:var(--pc-ink);overflow-wrap:anywhere;hyphens:auto;padding-right:64px}
body.t-paper .t-open h1 em{font-style:italic;font-weight:400;color:var(--pc-blue);font-size:.5em;margin-top:.25em}
body.t-paper .who,body.t-paper .t-dates{font-family:var(--f-m);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-muted)}
body.t-paper .t-tot{border-top:1px solid var(--pc-line);padding-top:12px}
body.t-paper .t-tot dt{font-family:var(--f-m);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-muted)}
body.t-paper .t-tot dd{color:var(--pc-ink)}
body.t-paper .t-pc{background:#FFFDF8;box-shadow:0 14px 30px rgba(24,45,59,.18),0 1px 3px rgba(24,45,59,.12)}
body.t-paper .t-pc figcaption{color:#182D3B}
body.t-paper .t-pc b{font:400 26px/1.05 Georgia,"DejaVu Serif",serif;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.t-paper .t-pc .code{font-family:var(--f-m);color:#0066CC}
body.t-paper .t-svg{border-radius:6px}
body.t-paper .t-invite{background:var(--pc-paper);color:var(--pc-ink);border:1px solid var(--pc-line);border-radius:6px;position:relative;
  background-image:repeating-linear-gradient(135deg,var(--pc-coral) 0 10px,transparent 10px 18px,var(--pc-blue) 18px 28px,transparent 28px 36px);background-size:100% 6px;background-repeat:no-repeat}
body.t-paper .t-invite .hand{color:var(--pc-blue);font-family:var(--f-m);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
body.t-paper .t-invite h2{font:400 clamp(30px,4.6vw,44px)/1.05 Georgia,"DejaVu Serif",serif;letter-spacing:-.01em;color:var(--pc-ink)}
body.t-paper .t-invite p{color:var(--pc-muted)}
body.t-paper .t-invite .btn.alt{background:transparent;color:var(--pc-blue);border:1px solid var(--pc-line)}
.t-intro{font:italic 400 clamp(17px,2.2vw,20px)/1.5 Georgia,"DejaVu Serif",serif;max-width:60ch;margin:-6px 0 16px;overflow-wrap:anywhere}
.t-intro a{font:600 14px var(--f);font-style:normal;white-space:nowrap}
.t-pc.route{width:min(440px,94%);left:0;right:0;margin:0 auto}
.t-pc.route .ph{aspect-ratio:14/9;background:#FAF5EB;cursor:default}.t-pc.route .ph svg{display:block;width:100%;height:100%}
@media (max-width:760px){.t-cards .t-pc.route{width:min(400px,94%);margin:0 auto}}
.t-look{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}.t-look .seg button[aria-checked="true"]{background:var(--card);box-shadow:var(--shadow);font-weight:700}
.t-saved{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.t-saved p{margin:0 0 8px}.t-saved .t-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- visitors: the trip first, then one way to make your own ---------- */
/* order: who and title → cover and dates → intro → facts (all in the opening) → compact map → photos → story → recap → details → create */
body.t-visitor main.trip{display:flex;flex-direction:column}
body.t-visitor main.trip>*{min-width:0}
body.t-visitor .t-hero{order:1}body.t-visitor .t-map{order:2}body.t-visitor #tPhotos{order:3}body.t-visitor #tStoryView{order:4}
body.t-visitor #tShare{order:5}body.t-visitor .t-stops{order:6}body.t-visitor #tInvite{order:7}body.t-visitor #tMissing{order:8}
body.t-visitor .t-map figure{margin:8px 0 22px}
@media (max-width:820px){
  body.t-visitor .t-svg svg{max-height:min(44vh,320px)} /* the map stays useful without pushing the story far down */
  body.t-paper .t-hero{padding:18px 14px 14px}body.t-paper .t-hero::after{width:40px;height:46px;right:12px;top:16px}body.t-paper .t-open h1{padding-right:48px}
}
/* phones: the cover sits right under the title and dates, before the intro and the facts */
@media (max-width:820px){
  body.t-visitor .t-hero{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left}
  body.t-visitor .t-hero .who{justify-content:flex-start;text-align:left}
  body.t-visitor .t-hero .t-open{display:contents}
  body.t-visitor .t-hero .who{order:1}body.t-visitor #tShowcase{order:2}body.t-visitor #tTitle{order:3}body.t-visitor #tDates{order:4}
  body.t-visitor #tCards{order:5;margin:4px auto 14px}body.t-visitor #tIntro{order:6}body.t-visitor #tTot{order:7}body.t-visitor #tCo2{order:8}body.t-visitor #tActs{order:9}body.t-visitor #tState{order:10}
}
@media (prefers-reduced-motion:reduce){body.t-paper .t-pc{transition:none}}