:root{
  --bg:#0b1020; --bg2:#0f1530; --ink:#0c1226; --paper:#ffffff;
  --muted:#6b7385; --line:#e7e9f0;
  --brand:#6366f1; --brand2:#8b5cf6; --accent:#f97316;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
  --shadow:0 18px 50px -20px rgba(20,20,60,.35);
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink); background:#f6f7fb; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; line-height:1.05; letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn-primary{
  background:var(--grad); color:#fff; border:0; padding:13px 22px; border-radius:999px;
  font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 10px 24px -8px rgba(99,102,241,.7);
  transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(99,102,241,.8)}
.btn-ghost{
  background:rgba(255,255,255,.08); color:inherit; border:1px solid rgba(255,255,255,.18);
  padding:11px 18px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer; transition:.15s;
}
.btn-ghost:hover{background:rgba(255,255,255,.16)}

/* ---------- hero ---------- */
.hero{
  background:radial-gradient(1200px 600px at 80% -10%,#3b2d72 0%,transparent 55%),
             radial-gradient(900px 500px at 0% 20%,#1e2a5e 0%,transparent 50%),
             linear-gradient(160deg,#0b1020,#141a38);
  color:#eef0fb; padding-bottom:90px; overflow:hidden; position:relative;
}
.nav{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px 24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo{font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600;color:#c7cbe6}
.nav-links a:hover{color:#fff}
.hero-inner{max-width:1160px;margin:0 auto;padding:40px 24px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.pill{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#cbd0ef;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(38px,5.2vw,64px);font-weight:700}
.lede{margin:22px 0 28px;font-size:18px;color:#bfc5e4;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:40px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:30px;font-family:'Fraunces',serif}
.hero-stats span{font-size:13px;color:#9aa0c6}

.hero-art{position:relative;height:420px}
.globe{position:absolute;inset:0;margin:auto;width:300px;height:300px;font-size:300px;line-height:300px;text-align:center;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));animation:spin 40s linear infinite;opacity:.95}
@keyframes spin{to{transform:rotate(360deg)}}
.float-card{position:absolute;background:rgba(255,255,255,.95);color:#111;border-radius:14px;padding:9px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);backdrop-filter:blur(8px);animation:bob 5s ease-in-out infinite}
.float-card b{font-size:13px;display:block}
.float-card span{font-size:11px;color:#666}
.fc-img{width:40px;height:40px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px}
.c1{top:10px;left:0;animation-delay:0s}
.c2{top:150px;right:-10px;animation-delay:1.2s}
.c3{bottom:20px;left:30px;animation-delay:2.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- features ---------- */
.features{max-width:1160px;margin:0 auto;padding:90px 24px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 50px}
.sec-head h2{font-size:clamp(28px,3.4vw,42px)}
.sec-head p{color:var(--muted);font-size:18px;margin-top:12px}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.2s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat-ico{font-size:30px;margin-bottom:14px}
.feat h3{font-size:19px;margin-bottom:8px}
.feat p{font-size:14.5px;color:var(--muted)}

/* ---------- app device ---------- */
.app-wrap{background:linear-gradient(180deg,#eef0f8,#f6f7fb);padding:30px 24px 90px}
.device{
  max-width:1080px;margin:0 auto;background:var(--paper);border-radius:26px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(30,30,80,.45);border:1px solid var(--line);display:flex;flex-direction:column;height:760px;
}
.app-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);background:#fff}
.app-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}
.app-profile{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:#444}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.screens{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;padding:24px 26px}
.screen.hidden{display:none}

.map-head,.feed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.map-head h2,.feed-head h2{font-size:26px}
.beta{font-family:'Plus Jakarta Sans';font-size:11px;font-weight:700;background:var(--grad);color:#fff;padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:6px}
#map{height:min(40vh,320px);border-radius:16px;border:1px solid var(--line);z-index:0}

/* cooperative map gestures (see makeMapCooperative in app.js) */
@media (hover:hover){
  .coop:not(.coop-on):hover::after{content:'Click to interact with the map';position:absolute;top:10px;left:50%;transform:translateX(-50%);font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;background:rgba(22,22,30,.72);color:#fff;padding:6px 13px;border-radius:999px;z-index:800;pointer-events:none;white-space:nowrap}
}
.coop-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;background:rgba(22,22,30,.35);color:#fff;z-index:800;pointer-events:none;opacity:0;transition:opacity .25s}
.coop-hint-on .coop-hint{opacity:1}
.chips,.log-filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;padding:7px 13px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .sw{width:10px;height:10px;border-radius:3px}

/* map popups */
.leaflet-popup-content{margin:10px 12px;font-family:'Plus Jakarta Sans'}
.pop b{font-size:14px} .pop .pc{font-size:12px;color:#666} .pop .pr{font-weight:700;color:var(--brand)}
.pin-hit{width:40px;height:40px;display:flex;align-items:flex-end;justify-content:center}
.pin{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);box-shadow:0 6px 14px -4px rgba(0,0,0,.5);border:1.5px solid #fff}
.pin span{transform:rotate(-45deg);font-size:10px}

/* avatars + save button (shared by feed, search, profiles) */
.av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex:none}
.save-btn{margin-left:auto;border:1px solid var(--line);background:#fff;padding:8px 15px;border-radius:999px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.save-btn.saved{background:var(--ink);color:#fff;border-color:var(--ink)}

/* bucket */
#bucket{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bcard{position:relative;border-radius:16px;overflow:hidden;height:170px;display:flex;align-items:flex-end;padding:16px;color:#fff;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);transition:.15s}
.bcard:hover{transform:translateY(-3px)}
.bcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.bcard .bc-inner{position:relative;z-index:1}
.bcard .btag{font-size:11px;font-weight:700;background:rgba(255,255,255,.25);padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.bcard h4{font-size:20px;font-family:'Fraunces',serif;margin:8px 0 2px}
.bcard small{font-size:12px;opacity:.85}
.bemoji{position:absolute;top:12px;right:14px;font-size:30px;z-index:1}

/* inbox / auto-log */
.icard{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;transition:.15s}
.icard.added{opacity:.55}
.isrc{width:42px;height:42px;border-radius:11px;background:#f1f2f8;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.icard .it{font-size:14.5px;font-weight:700}
.icard .id{font-size:12.5px;color:var(--muted)}
.icat{font-size:11px;font-weight:700;color:#fff;padding:3px 9px;border-radius:999px;margin-top:5px;display:inline-block}
.add-btn{margin-left:auto;border:0;background:var(--grad);color:#fff;padding:9px 16px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;flex:none}
.add-btn:disabled{background:#e6e7ef;color:#9aa0b5;cursor:default}

/* planner */
.planner-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:18px}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl label{font-size:12px;font-weight:700;color:var(--muted)}
.ctl select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;font-weight:600;background:#fff;cursor:pointer;min-width:130px}
.plan-out:empty{display:none}
.plan-intro{background:linear-gradient(135deg,#eef0ff,#fdf0f6);border:1px solid #e3e6ff;border-radius:14px;padding:16px 18px;margin-bottom:16px;font-size:14.5px}
.plan-intro b{color:var(--brand)}
.day{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;display:flex;gap:14px}
.day .dnum{width:44px;height:44px;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;font-size:13px;text-align:center;line-height:1.1}
.day .ditems{font-size:14px}
.day .dtitle{font-weight:700;margin-bottom:4px}
.day .ditem{color:#444;font-size:13.5px;margin:2px 0;display:flex;gap:7px}
.thinking{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px;padding:30px}
/* planner v2: wide rows, option chips, concept cards, detail view */
.ctl-wide{flex:1 1 100%}
.opt-hint{font-weight:500;color:#aab;font-size:11px;margin-left:4px}
.opt-chips{display:flex;flex-wrap:wrap;gap:7px}
.pchip{background:#f1f2f8;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:#444;transition:.12s}
.pchip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pchip:disabled{opacity:.4;cursor:default}
.wiz-city-input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-family:inherit;font-size:14.5px;margin:10px 0 8px}
.wiz-city-input:disabled{opacity:.4}
.plan-go{flex-direction:row;align-items:center;gap:12px}
.plan-err{color:#dc2626;font-size:13px;font-weight:600}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:6px}
.concept-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:8px;transition:.15s}
.concept-card:hover{border-color:var(--brand);box-shadow:0 10px 30px -18px rgba(80,80,160,.5)}
.cc-title{font-family:'Fraunces',serif;font-size:19px}
.cc-highlights .ditem{color:#444;font-size:13px;margin:2px 0}
.cc-summary{font-size:13.5px;color:#444}
.cc-open{margin-top:auto;color:var(--brand);font-weight:700;font-size:13.5px}
/* draft trips (saved from the planner) */
.trip-draft-banner{background:#fff7ed;border:1px solid #fdba74;border-radius:14px;padding:14px 16px;margin-bottom:14px;font-size:13.5px;color:#7c2d12;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trip-draft-banner .complete-btn{margin-left:auto;padding:9px 16px;font-size:13.5px}
.plan-ref{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.plan-ref .pr-head{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.plan-ref .pr-name{font-family:'Fraunces',serif;font-size:17px}
/* pre-cap rows can store long text: clamp the summary to two lines … */
.plan-ref .pr-pitch{font-size:13.5px;color:#444;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plan-ref .pr-chips{margin-top:4px}
/* … and ellipsize each highlight chip (.chip base look, non-interactive) */
.plan-ref .pr-chip{cursor:default;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-ref .pr-expand{margin-top:10px;border:1px solid var(--brand);background:#fff;color:var(--brand);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:.15s}
.plan-ref .pr-expand:hover{background:var(--brand);color:#fff}
.plan-ref .pr-itin{margin-top:10px;font-size:13px}
.plan-ref .pr-day{margin-top:8px}
.plan-ref .pr-daylabel{font-weight:700}
.jrn-back{background:none;border:0;color:var(--muted);font-weight:700;font-size:13.5px;cursor:pointer;padding:0 0 10px;font-family:inherit}
.jrn-back:hover{color:var(--ink)}
.plan-note{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;font-size:13.5px;color:#444}
.plan-note b{color:var(--ink)}
.spin{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* modals */
.modal-bg{
  position:fixed;inset:0;z-index:2000;background:rgba(12,16,38,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:22px;width:100%;max-width:460px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 90px -20px rgba(0,0,0,.5);animation:pop .2s ease}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:22px}
.x{border:0;background:#f1f2f8;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;color:#555}
.modal-body{padding:20px 22px;overflow-y:auto}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld>span{font-size:13px;font-weight:700;color:#444}
.fld>span em,.fld>span b{font-weight:700}.fld>span em{color:var(--muted);font-style:normal;font-weight:500}
.fld>span b{color:var(--brand)}
.fld input,.fld textarea{border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit;font-size:14.5px;resize:none}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--brand)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld-label{font-size:13px;font-weight:700;color:#444;display:block;margin-bottom:8px}
.cat-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.cat-opt{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 6px;cursor:pointer;text-align:center;font-size:12px;font-weight:600;color:#555;transition:.12s}
.cat-opt .ce{font-size:20px;display:block;margin-bottom:3px}
.cat-opt.sel{color:#fff;border-color:transparent}
input[type=range]{accent-color:var(--brand);height:6px}
.loc-row{display:flex;align-items:center;gap:12px;margin:4px 0 18px;flex-wrap:wrap}
.btn-find{border:1px solid var(--brand);color:var(--brand);background:#fff;font-weight:700;font-size:13.5px;padding:10px 15px;border-radius:11px;cursor:pointer;white-space:nowrap}
.btn-find:hover{background:#f3f3ff}
.loc-hint{font-size:12.5px;color:var(--muted);flex:1;min-width:140px}
.loc-hint.ok{color:#16a34a;font-weight:600}
.loc-hint.err{color:#dc2626;font-weight:600}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px}
.btn-ghost.dark{background:#f1f2f8;color:#444;border:1px solid var(--line)}
.btn-ghost.dark:hover{background:#e8e9f2}

/* delete account (danger zone of Edit profile) */
.da-open{display:block;margin:14px auto 0;border:0;background:none;color:#dc2626;font-size:13px;font-weight:600;cursor:pointer;padding:4px 8px}
.da-open:hover{text-decoration:underline}
.da-warn{font-size:13.5px;line-height:1.5;color:#7f1d1d;background:#fef2f2;border:1px solid #fecaca;border-radius:11px;padding:12px 14px;margin:0 0 16px}
.btn-danger{background:#dc2626;color:#fff;border:0;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 10px 24px -8px rgba(220,38,38,.6);transition:transform .15s,box-shadow .15s,opacity .15s}
.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(220,38,38,.7)}
.btn-danger:disabled{opacity:.45;cursor:default;box-shadow:none}

/* tabbar */
.tabbar{display:flex;border-top:1px solid var(--line);background:#fff}
.tab{flex:1;border:0;background:none;padding:11px 4px 13px;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;border-top:2px solid transparent;margin-top:-1px}
.tab span{font-size:19px}
.tab.active{color:var(--brand);border-top-color:var(--brand)}

/* sub-navs inside the Journey + Profile tabs */
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
/* profile-pane tabs (Rankings/Trips/Map): underline-style text tabs.
   Kept separate from .chip (filter pills) and .subnav (shared with Journey). */
.ptab{border:0;background:none;padding:8px 2px 10px;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;border-bottom:2px solid transparent}
.ptab.active{color:var(--ink);border-bottom-color:var(--ink)}
.pane.hidden{display:none}
.sect-head{margin-top:28px}

/* ---------- Phase 2: Instagram-style feed ---------- */
.icon-btn{border:1px solid var(--line);background:#fff;width:40px;height:40px;border-radius:50%;font-size:16px;cursor:pointer;transition:.15s;flex:none}
.icon-btn:hover{border-color:var(--brand)}
.fs-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.fs-bar input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-family:inherit;font-size:14.5px}
.fs-bar input:focus{outline:none;border-color:var(--brand)}
.fs-bar .x{flex:none}

.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:18px;box-shadow:0 8px 24px -16px rgba(0,0,0,.3)}
.pauthor{display:flex;align-items:center;gap:10px;padding:12px 16px}
.pauthor .av{width:36px;height:36px;font-size:17px}
.pwho{display:flex;flex-direction:column;line-height:1.25}
.pwho b{font-size:14px}
.pwho span{font-size:12px;color:var(--muted)}
/* share cards: entry slideshow + context + caption.
   Instagram-ish proportions: capped card width, square media. */
.sharecard{max-width:440px;margin-left:auto;margin-right:auto}
.pcarousel{position:relative}
.ptrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ptrack::-webkit-scrollbar{display:none}
.pslide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;background:#eceef6;position:relative}
.pslide img{width:100%;height:100%;object-fit:cover;display:block}
.pdots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:5px;justify-content:center;pointer-events:none}
.pdots span{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.5);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:width .2s ease,background-color .2s ease}
.pdots span.on{background:#fff;width:14px}
.sl-grad{display:flex;align-items:center;justify-content:center}
.sl-ic{font-size:56px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.sl-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:13.5px;font-weight:700}
.sl-cap span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-cap em{font-style:normal;font-weight:600;opacity:.85}
.sl-cap b{flex:none;font-size:13px}
/* no-media fallback slide: name + rating + trip/location on the category gradient */
.sl-fb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:100%;padding:0 24px;color:#fff;text-align:center;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.sl-fb b{font-family:'Fraunces',serif;font-size:22px;font-weight:600;line-height:1.15}
.sl-fb b em{font-style:normal;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;opacity:.85;white-space:nowrap}
.sl-fb .sl-fb-r{font-size:15px;font-weight:800}
.sl-fb small{font-size:13px;font-weight:600;opacity:.85}
.share-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 16px 0;cursor:pointer}
.share-head b{font-family:'Fraunces',serif;font-size:17.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-head span{font-size:12.5px;color:var(--muted);font-weight:600;flex:none}
.share-cap{font-size:14px;color:#3a3a44;line-height:1.5;padding:7px 16px 0}
.tripfoot{display:flex;align-items:center;gap:10px;padding:12px 16px}
.share-foot{justify-content:flex-end}
.tf-view{border:0;background:var(--grad);color:#fff;font-weight:700;font-size:13px;padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:none}
.tripfoot .save-btn{margin-left:0;flex:none}
/* likes + comments (per individual post): bar under the media on feed cards,
   compact row on trip-detail entries */
.ptrack{touch-action:manipulation} /* no double-tap zoom, keeps swipe/pan */
.pactions{display:flex;align-items:center;gap:4px}
.pengage{margin-right:auto} /* bottom-left of the card foot; Save/View stay right */
.pengage .pactions .eng-n:last-child{margin-right:0}
.dinfo .pactions{padding:8px 0 0}
.eng-btn{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;transition:transform .12s}
.eng-btn:active{transform:scale(1.25)}
.eng-btn.liked{animation:heartpop .25s ease}
@keyframes heartpop{40%{transform:scale(1.35)}}
.eng-n{font-size:13.5px;font-weight:700;color:#3a3a44;margin-right:12px;cursor:pointer;min-width:12px}
.heart-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:74px;pointer-events:none;z-index:5;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));animation:burst .65s ease forwards}
@keyframes burst{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}

/* comment sheet */
.comment-modal{max-height:72vh;min-height:340px}
.cmt-list{flex:1;overflow-y:auto;padding:14px 20px}
.cmt{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.cmt.pending{opacity:.55}
.cmt-av{width:32px;height:32px;font-size:15px}
.cmt-body{flex:1;min-width:0}
.cmt-who{font-size:12px;color:var(--muted);cursor:pointer}
.cmt-who b{color:var(--ink);font-size:13px}
.cmt-body p{font-size:14px;line-height:1.45;color:#2a2a33;margin-top:2px;overflow-wrap:break-word}
.cmt-del{border:0;background:none;color:#b6b9c9;font-size:13px;cursor:pointer;padding:4px;flex:none}
.cmt-del:hover{color:#dc2626}
.cmt-err{padding:0 20px}
.cmt-err:empty{display:none}
.cmt-bar{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.cmt-bar input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-family:inherit;font-size:14.5px}
.cmt-bar input:focus{outline:none;border-color:var(--brand)}
.cmt-post{border:0;background:var(--grad);color:#fff;font-weight:700;font-size:13.5px;padding:0 18px;border-radius:999px;cursor:pointer}

.cmt-avlink{flex:none;cursor:pointer}

/* user-list sheet (followers / following / likers) */
.ulist-modal{max-height:72vh;min-height:340px}
.ulist-list{flex:1;overflow-y:auto;padding:14px 20px}
.ulist-list .thinking{padding:10px 0}
.plink{cursor:pointer}
.plink:hover b,.plink:hover{text-decoration:underline}

.feed-more{display:block;margin:2px auto 22px;border:1px solid var(--line);background:#fff;color:var(--brand);font-weight:700;font-size:13px;padding:10px 24px;border-radius:999px;cursor:pointer;transition:.15s}
.feed-more:hover{border-color:var(--brand);background:#f7f7ff}
.feed-more:disabled{opacity:.6;cursor:default}

/* ---------- Phase 3: profiles ---------- */
#profile-head{margin-bottom:4px}
.prof-top{display:flex;align-items:center;gap:16px}
.prof-av{width:72px;height:72px;font-size:34px;flex:none}
.prof-names{flex:1;min-width:0}
.prof-names h2{font-size:24px}
.prof-names span{font-size:13px;color:var(--muted);font-weight:600}
.prof-follow{font-size:13px;color:#444;margin-top:5px}
.prof-follow b{font-family:'Fraunces',serif;font-size:14px}
.prof-bio{font-size:14px;color:#444;margin-top:10px}
.prof-stats-sect{margin:18px 0 20px}
.prof-stats-head{font-size:16px;margin-bottom:10px}
.prof-stats{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.pstat{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.2}
.pstat b{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);font-family:'Fraunces',serif;font-size:20px}
.pstat span{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#profile-private.hidden,#profile-body.hidden{display:none}
.prof-top .follow-btn{font-size:13px;padding:10px 18px;flex:none}

/* image avatars (uploaded) vs emoji avatars */
.avimg{overflow:hidden}
.avimg img{width:100%;height:100%;object-fit:cover;display:block}
.chip-av{display:inline-block;width:22px;height:22px;border-radius:50%;overflow:hidden;vertical-align:-6px}
.chip-av img{width:100%;height:100%;object-fit:cover;display:block}
.chip-me{cursor:pointer}
.pauthor{cursor:pointer}
.freq{cursor:pointer}
.th-owner{text-decoration:underline;cursor:pointer}

/* rankings */
#ranks-chips{margin-bottom:14px}
.rk-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:9px}
.rk-n{font-family:'Fraunces',serif;font-weight:700;font-size:16px;color:var(--muted);width:22px;text-align:center;flex:none}
.rk-thumb{width:46px;height:46px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.rk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rk-info{flex:1;min-width:0;line-height:1.3}
.rk-info b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-info small{font-size:12px;color:var(--muted)}
.rk-rate{font-weight:800;color:var(--brand);flex:none}

/* edit profile */
.ep-av-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ep-toggle{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;margin-bottom:14px}
.ep-toggle>div{flex:1}
.ep-toggle b{font-size:14px;display:block}
.ep-toggle small{font-size:12px;color:var(--muted)}
.ep-toggle input{display:none}
.switch{width:44px;height:26px;border-radius:999px;background:#e2e4ee;position:relative;flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:.2s}
.ep-toggle input:checked + .switch{background:var(--brand)}
.ep-toggle input:checked + .switch::after{left:21px}

/* journal (drafts + sharing) */
#journal-trips{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.draft-pill{position:absolute;top:10px;right:10px;background:#fff;color:#b45309;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(0,0,0,.35);z-index:1}
.draft-badge{font-size:10.5px;font-weight:800;color:#b45309;background:#fef3c7;border:1px solid #fcd34d;padding:2px 8px;border-radius:6px;display:inline-block;margin-bottom:5px;margin-left:5px}
.droute{font-size:13px;font-weight:700;color:#475569;margin-top:2px;letter-spacing:.3px}
.trip-share{border:0;background:rgba(0,0,0,.3);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px);z-index:1}
.trip-share:hover{background:rgba(0,0,0,.55)}
.share-sub{margin:-4px 0 12px}
.share-list{background:#fafbff;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:14px}
.share-list b{display:block;margin-bottom:6px;font-size:12.5px}
.share-list.muted{color:var(--muted);font-style:italic}
.share-item{padding:2px 0}

/* trips list */
.trips-head{align-items:center}
.new-trip-btn{border:0;background:var(--grad);color:#fff;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;cursor:pointer;box-shadow:0 10px 22px -10px rgba(99,102,241,.7);transition:transform .15s;white-space:nowrap}
.new-trip-btn:hover{transform:translateY(-2px)}
#trips-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 8px 24px -16px rgba(0,0,0,.3);transition:.15s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tcover{height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.temoji{font-size:46px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.tbody{padding:15px 17px}
.tbody h3{font-size:21px;margin-bottom:4px}
.tmeta{font-size:12.5px;color:var(--muted);font-weight:600}
.tsum{font-size:13.5px;color:#444;margin:7px 0 9px}
.tstats{font-size:12.5px;color:var(--brand);font-weight:700}

/* trip detail (popup modal) */
.trip-view-modal{max-width:540px;width:100%;max-height:88vh;overflow-y:auto;padding:22px}
#add-modal{z-index:2100}
.back{border:0;background:#f1f2f8;color:#444;font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:999px;cursor:pointer;margin-bottom:16px}
.back:hover{background:#e8e9f2}
.trip-hero{border-radius:20px;padding:22px;color:#fff;display:flex;align-items:center;gap:18px;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:0 14px 34px -16px rgba(0,0,0,.4)}
.trip-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.15),rgba(0,0,0,.4));pointer-events:none}
.th-emoji{font-size:54px;position:relative;z-index:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.th-text{position:relative;z-index:1}
.th-text h2{font-size:30px}
.th-meta{font-size:14px;opacity:.95;font-weight:600;margin-top:3px}
.th-stats{font-size:13px;opacity:.9;margin-top:8px}
/* Owner hero only (friend hero never gets .has-actions): stack the old
   emoji+text row above a normal-flow action bar. */
.trip-hero.has-actions{flex-direction:column;align-items:stretch;gap:14px}
.th-main{display:flex;align-items:center;gap:18px}
.th-actions{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.th-actions button{min-width:34px;min-height:34px;padding:0;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
@media (pointer:coarse){
  .th-actions button{min-width:44px;min-height:44px}
}
.trip-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

/* timeline */
.timeline{position:relative}
.dayrow{display:flex;gap:14px}
.daymark{display:flex;flex-direction:column;align-items:center;flex:none;width:34px}
.daynum{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.dayline{flex:1;width:2px;background:var(--line);margin:4px 0}
.dayrow:last-child .dayline{display:none}
.daybody{flex:1;padding-bottom:22px}
.dayhead{font-family:'Fraunces',serif;font-size:17px;font-weight:600;margin:5px 0 12px;padding-top:4px}
.dentry{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:10px;box-shadow:0 6px 18px -16px rgba(0,0,0,.3)}
.dthumb{width:46px;height:46px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px}
.dinfo{flex:1;min-width:0}
.dtag{font-size:10.5px;font-weight:700;color:#fff;padding:2px 8px;border-radius:6px;display:inline-block;margin-bottom:5px}
.dname{font-size:15px;font-weight:700}
.drate{color:var(--brand);font-size:13px;font-weight:700;margin-left:4px}
.dnote{font-size:13px;color:#555;margin-top:2px}
.dempty{font-size:13px;color:var(--muted);font-style:italic;padding:4px 0 10px}
.day-add{border:1px dashed #cdd0e0;background:#fafbff;color:var(--brand);font-weight:700;font-size:13px;padding:9px 14px;border-radius:11px;cursor:pointer;width:100%;transition:.15s}
.day-add:hover{background:#f1f1ff;border-color:var(--brand)}

/* add-place trip pill + cover picker + planner badges */
.trip-pill{display:inline-block;background:#f1f2f8;border-radius:999px;padding:7px 14px;font-size:13px;color:#444;margin-bottom:14px}
.trip-pill b{color:var(--ink)}
.cover-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
.cover-opt{height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border:2px solid transparent;opacity:.7;transition:.12s}
.cover-opt.sel{opacity:1;border-color:var(--ink);transform:scale(1.05)}
.ai-live{font-size:11px;font-weight:700;color:#16a34a;background:#dcfce7;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}
.ai-sample{font-size:11px;font-weight:600;color:#9a6b00;background:#fef3c7;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* footer */
.foot{background:var(--ink);color:#cfd3ea;text-align:center;padding:46px 24px}
.foot .brand{justify-content:center;color:#fff;margin-bottom:8px}
.foot p{font-size:14px;color:#9aa0c6}

@media(max-width:880px){
  .hero-inner{grid-template-columns:1fr} .hero-art{display:none}
  .feat-grid{grid-template-columns:1fr 1fr}
  .nav-links>a{display:none}
  #trips-list,#journal-trips,#bucket{grid-template-columns:1fr}
  .device{height:680px}
}
@media(max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .tab span{font-size:17px} .tab{font-size:10px}
}

/* ============ JOURNEY ============ */
.jrn-head h2{font-size:26px}
#journey-map{height:340px;border-radius:16px;border:1px solid var(--line);z-index:0;margin:14px 0}
/* connected sources strip */
.jrn-sources{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.jsrc{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.jsrc.off{border-style:dashed;opacity:.7}
.jsrc-ic{font-size:19px}
.jsrc b{font-size:13.5px;display:block} .jsrc small{font-size:11.5px;color:var(--muted)}
.jsrc-dot{margin-left:auto;font-weight:700}
.jsrc.on .jsrc-dot{color:#10b981} .jsrc.off .jsrc-dot{color:var(--brand)}
/* live banner */
.jrn-live{display:flex;align-items:center;gap:13px;margin-top:14px;padding:14px 16px;border-radius:15px;
  background:linear-gradient(135deg,#0c1226,#25204d);color:#eef0fb;box-shadow:var(--shadow)}
.jrn-live:empty{display:none}
.jlive-dot{width:12px;height:12px;border-radius:50%;background:#34d399;flex:none;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:jpulse 1.8s infinite}
@keyframes jpulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%{box-shadow:0 0 0 12px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.jlive-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.jlive-label{font-size:11px;font-weight:800;color:#34d399;letter-spacing:.02em}
.jlive-body b{font-size:14px;line-height:1.3} .jlive-body small{font-size:12px;color:#b9bfe0}
.jlive-go{margin-left:auto;flex:none;background:#fff;color:var(--ink);border:0;padding:9px 14px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
.jlive-go:hover{transform:translateY(-1px)}
/* day pills */
.jrn-days{display:flex;gap:9px;margin-top:16px;overflow-x:auto;padding-bottom:4px}
.jday{flex:none;background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 15px;cursor:pointer;text-align:left;transition:.15s;line-height:1.25}
.jday b{font-size:14px;display:block} .jday small{font-size:11.5px;color:var(--muted)}
.jday.active{background:var(--ink);border-color:var(--ink);color:#fff}
.jday.active small{color:#b9bfe0}
/* timeline steps */
.jday-label{font-weight:700;font-size:15px;margin:2px 0 14px}
.jstep{display:flex;gap:13px;cursor:pointer}
.js-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:30px}
.js-num{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;border:2px solid #fff;box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
.js-line{width:2px;flex:1;background:var(--line);margin:3px 0}
.jstep:last-child .js-line{display:none}
.js-card{flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin-bottom:12px;transition:.15s}
.jstep:hover .js-card{border-color:var(--brand);box-shadow:0 8px 22px -14px rgba(99,102,241,.6)}
.jstep.sel .js-card{border-color:var(--brand);background:#fbfbff}
.js-top{display:flex;align-items:center;gap:8px}
.js-ic{font-size:16px}
.js-top b{font-size:14.5px}
.js-time{margin-left:auto;font-weight:700;font-size:13px;color:var(--brand);flex:none}
.js-sub{font-size:12px;color:var(--muted);margin:3px 0 5px}
.js-detail{font-size:13px;color:#444;line-height:1.45}
.js-src{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--muted);background:#f4f5fa;border:1px solid var(--line);padding:3px 9px;border-radius:999px}
/* map pins */
.jpin{width:28px;height:28px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 4px 10px -3px rgba(0,0,0,.5)}
.jstart{width:20px;height:20px;border-radius:50%;background:#34d399;border:3px solid #fff;box-shadow:0 0 0 4px rgba(52,211,153,.35)}
/* plan → journey bridge button */
.jrn-cta{width:100%;margin-top:12px;background:#fff;border:1px dashed var(--brand);color:var(--brand);font-weight:700;font-size:14px;padding:12px;border-radius:13px;cursor:pointer;transition:.15s}
.jrn-cta:hover{background:#f1f1ff}

/* ---------- auth gate + API-era additions (Phase 4) ---------- */
.device{position:relative}
.auth-gate{position:absolute;inset:0;z-index:500;background:rgba(250,250,255,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-gate.hidden{display:none}
.gate-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 38px;max-width:400px;width:100%;text-align:center;box-shadow:0 30px 70px -30px rgba(30,30,80,.35)}
.gate-logo{font-size:34px;color:var(--brand);margin-bottom:6px}
.gate-card h3{font-size:24px;font-family:'Fraunces',serif;margin-bottom:6px}
.gate-card p{font-size:14px;color:var(--muted);margin-bottom:18px}
.gate-card .fld{text-align:left;margin-bottom:12px}
.gate-card .btn-primary{width:100%;margin-top:6px}
.chip-signout{border:1px solid var(--line);background:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:4px 10px;cursor:pointer;color:#444}
.chip-signout:hover{border-color:var(--brand);color:var(--brand)}
.bremove{position:absolute;top:10px;left:12px;z-index:2;border:0;border-radius:50%;width:26px;height:26px;background:rgba(0,0,0,.35);color:#fff;font-size:12px;cursor:pointer;backdrop-filter:blur(4px)}
.bremove:hover{background:rgba(0,0,0,.6)}
.pin-results{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pin-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line);background:#fafbff;border-radius:12px;padding:10px 14px;cursor:pointer;font-size:14px;transition:.15s}
.pin-opt:hover{border-color:var(--brand);background:#f1f1ff}
.pin-opt small{color:var(--muted);font-size:12px}

/* ---------- Phase 5: friends, photos, edit/delete ---------- */
.freq{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fafbff;border-radius:12px;padding:9px 12px;margin-bottom:8px}
.freq .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.freq-who{flex:1;display:flex;flex-direction:column;line-height:1.25}
.freq-who small{color:var(--muted);font-size:12px}
.freq-yes,.follow-btn{border:0;background:var(--grad);color:#fff;font-weight:700;font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer}
.follow-btn.on{background:#e8e9f4;color:#444}
.freq-no{border:1px solid var(--line);background:#fff;color:#888;font-size:12px;padding:7px 10px;border-radius:999px;cursor:pointer}

/* ---------- Phase 4: Discover (search + popular grid) ---------- */
.disc-bar{margin-bottom:16px}
.disc-results.hidden,#disc-popular.hidden{display:none}
.disc-sect{margin-bottom:20px}
.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:8px}
.disc-tile{cursor:pointer;border-radius:14px;overflow:hidden;transition:transform .12s}
.disc-tile:hover{transform:translateY(-2px)}
.dt-media{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#eef;display:flex;align-items:center;justify-content:center}
.dt-media img{width:100%;height:100%;object-fit:cover;display:block}
.dt-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px}
.dt-media.dt-trip{font-size:40px;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.dt-likes{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;backdrop-filter:blur(2px)}
.dt-cap{padding:7px 2px 2px;line-height:1.25}
.dt-cap b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-cap small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dphotos{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
.dphoto{width:58px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.dphoto-add{width:58px;height:58px;border:1px dashed #cdd0e0;background:#fafbff;border-radius:9px;font-size:14px;cursor:pointer;color:var(--muted)}
.dphoto-add:hover{border-color:var(--brand);color:var(--brand)}
.dentry{position:relative}
.dactions{display:flex;flex-direction:column;gap:6px;transition:.15s;position:absolute;top:10px;right:10px}
/* hide-until-hover only where hover exists; on touch the buttons stay visible */
@media (hover:hover) and (pointer:fine){
  .dactions{opacity:0}
  .dentry:hover .dactions{opacity:1}
}
.dact{border:1px solid var(--line);background:#fff;border-radius:8px;width:26px;height:26px;font-size:12px;cursor:pointer;color:#666}
.dact:hover{border-color:var(--brand);color:var(--brand)}
/* entry already shared (S3): ✓ state — still tappable, re-share confirms */
.dact-shared{color:#16a34a;border-color:#86efac;background:#f0fdf4}
.dact-shared:hover{border-color:#16a34a;color:#15803d}

/* ---------- S3: compose "+" + chooser + trip picker ---------- */
.compose-btn{font-size:22px;color:var(--brand);line-height:1}
.compose-btn:hover{background:#f7f7ff}
.profile-compose{display:block;margin-left:auto;margin-bottom:10px}
.compose-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;border:1px solid var(--line);background:#fafbff;border-radius:14px;padding:14px 16px;cursor:pointer;font-family:inherit;font-size:15px;transition:.15s;margin-bottom:10px}
.compose-opt:hover{border-color:var(--brand);background:#f1f1ff}
.compose-opt b{font-size:16px}
.compose-opt small{color:var(--muted);font-size:12.5px}
.tp-row{cursor:pointer;transition:.15s}
.tp-row:hover{border-color:var(--brand)}
.tp-cover{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.tp-sel{border-color:var(--brand);background:#f1f1ff}
.tp-check{color:var(--brand);font-weight:800;font-size:15px}
.tp-new .tp-cover{background:#f1f1ff;color:var(--brand);font-weight:800}
/* S3.1 fix: mcShowStep toggles .hidden on the three panes but no rule backed
   it (this codebase scopes .hidden per component — there is no global rule),
   so all three compose panes rendered stacked. Pre-existing in S3. */
#mc-pane-place.hidden,#mc-pane-trip.hidden,#mc-pane-caption.hidden{display:none}
.mc-photo{width:auto;padding:0 10px;font-size:12px;white-space:nowrap}
.trip-hero{position:relative}
.trip-del{border:0;background:rgba(0,0,0,.3);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px)}
.trip-del:hover{background:rgba(220,38,38,.75)}
.trip-edit{border:0;background:rgba(0,0,0,.3);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px);z-index:1}
.trip-edit:hover{background:rgba(0,0,0,.55)}

/* ---------- landing: nav auth buttons ---------- */
#nav-auth{display:flex;gap:10px;align-items:center}
.btn-nav{padding:9px 16px;font-size:13.5px;display:inline-block}
a.btn-nav{line-height:1}

/* ---------- landing: static screenshot frames (swap .shot-ph for real <img class="shot-img">) ---------- */
.shots{background:linear-gradient(180deg,#eef0f8,#f6f7fb);padding:90px 24px}
.shots-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1160px;margin:0 auto}
.shot{display:flex;flex-direction:column;gap:14px}
.shot-screen{aspect-ratio:9/17;border-radius:28px;border:7px solid #10142e;background:#fff;overflow:hidden;position:relative;box-shadow:0 30px 60px -25px rgba(20,20,60,.45)}
.shot-img{width:100%;height:100%;object-fit:cover;display:block}
.shot-ph{position:absolute;inset:0;display:flex;flex-direction:column}
.ph-top{height:36px;flex:none;display:flex;align-items:center;gap:6px;padding:0 13px;font-weight:800;font-size:12px;border-bottom:1px solid var(--line)}
.ph-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;margin-left:auto;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.ph-body{flex:1;padding:11px;display:flex;flex-direction:column;gap:9px;min-height:0;justify-content:space-between}
.ph-line{height:8px;border-radius:99px;background:#e7e9f0;flex:none}
.ph-line.w40{width:40%}.ph-line.w50{width:50%}.ph-line.w60{width:60%}.ph-line.w70{width:70%}.ph-line.w80{width:80%}.ph-line.w90{width:90%}
.ph-map{flex:1;border-radius:12px;position:relative;border:1px solid var(--line)}
.ph-map span{position:absolute;font-size:15px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.ph-chiprow{display:flex;gap:6px;flex:none}
.ph-chiprow i{font-style:normal;font-size:9.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:#555;background:#fff}
.ph-card{border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:7px;background:#fff}
.ph-cover{height:56px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.ph-cover.tall{height:72px}
.ph-day{display:flex;gap:8px;align-items:center}
.ph-day em{font-style:normal;width:24px;height:24px;flex:none;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:10px;display:flex;align-items:center;justify-content:center}
.ph-day.sq em{border-radius:7px;width:28px}
.ph-day>div{flex:1;display:flex;flex-direction:column;gap:5px}
.ph-intro{border:1px solid #e3e6ff;background:linear-gradient(135deg,#eef0ff,#fdf0f6);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:6px}
.ph-book{background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;text-align:center;border-radius:999px;padding:8px}
.shot figcaption{text-align:center}
.shot figcaption b{font-family:'Fraunces',serif;font-size:17px;display:block}
.shot figcaption span{font-size:13px;color:var(--muted)}
@media(max-width:880px){.shots-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shots-row{grid-template-columns:1fr;max-width:280px}}

/* ---------- /app: full-page app shell ---------- */
.app-page{background:#eef0f8}
.app-page .app-wrap{min-height:100vh;padding:24px;display:flex}
.app-page .device{width:100%;max-width:1200px;height:calc(100vh - 48px);min-height:560px;margin:auto}
.app-page .app-brand{color:inherit}