/* ============================================================================
   VeloPin — Community Routes (additive production module)
   All selectors are prefixed .vpc- and scoped under #vpcOverlay so nothing
   here can affect the existing app. Pairs with community.js.
   ============================================================================ */
:root{
  --vpc-accent:#E8401C; --vpc-accent-d:#C9350F; --vpc-text:#1A1D23; --vpc-muted:#6B7280;
  --vpc-faint:#9AA3AF; --vpc-border:#E6E9ED; --vpc-line:#F1F2F4; --vpc-bg:#F4F6F4;
  --vpc-road:#475569; --vpc-gravel:#B45309; --vpc-mtb:#15803D; --vpc-ebike:#7C3AED; --vpc-r:14px;
}

/* entry button in the header — deliberately low-key (ghost) so the orange
   upgrade CTA stays the single dominant action. A divider isolates the CTA. */
.vpc-nav-btn{position:relative;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;
  color:var(--vpc-text,#1A1D23);border-radius:0;padding:4px 0;font:inherit;font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;cursor:pointer;transition:color .15s;}
/* Animated orange underline on hover only, aligned to the TEXT label (matches .hdr-blog). */
.vpc-nav-btn > span{position:relative;}
.vpc-nav-btn > span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--vpc-accent,#E8401C);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .18s ease;}
.vpc-nav-btn:hover > span::after{transform:scaleX(1);}
.vpc-nav-btn.is-active{background:transparent;color:var(--vpc-accent,#E8401C);}
.vpc-nav-btn svg{flex:none;display:block;color:var(--vpc-muted,#6B7280);transition:color .15s;}
.vpc-nav-btn.is-active svg{color:var(--vpc-accent,#E8401C);}
/* Community Routes hover dropdown (Explore / My routes) + chevron. */
.vpc-navwrap{position:relative;display:inline-flex;align-items:center;align-self:stretch;}
.vpc-nav-btn .vpc-chev{flex:none;margin-left:1px;color:var(--vpc-muted,#6B7280);transition:transform .18s ease,color .15s;}
.vpc-navwrap:hover .vpc-nav-btn .vpc-chev{transform:rotate(180deg);color:var(--vpc-accent,#E8401C);}
.vpc-navmenu{position:absolute;top:100%;left:0;min-width:174px;background:#fff;border:1px solid var(--vpc-border,#E6E9ED);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:5px;display:none;flex-direction:column;gap:1px;z-index:20;}
.vpc-navwrap:hover .vpc-navmenu{display:flex;}
.vpc-navmenu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--vpc-text,#1A1D23);cursor:pointer;white-space:nowrap;}
.vpc-navmenu-item:hover{background:var(--vpc-line,#F1F2F4);color:var(--vpc-accent,#E8401C);}
.vpc-navmenu-item svg{flex:none;color:var(--vpc-muted,#6B7280);transition:color .15s;}
.vpc-navmenu-item:hover svg{color:var(--vpc-accent,#E8401C);}
.vpc-hdr-divider{width:1px;height:22px;background:var(--vpc-border);margin:0 6px;flex:none;align-self:center;}
/* Mobile: Community lives in the burger drawer (#mtCommunity), so the header
   community button is redundant — hide the whole wrapper. */
@media(max-width:767px){.vpc-navwrap,.vpc-nav-btn{display:none!important;}}
@media(max-width:760px){.vpc-nav-btn span.vpc-lbl{display:none;}.vpc-nav-btn{padding:7px;}.vpc-nav-btn .vpc-chev{display:none;}.vpc-navmenu{display:none!important;}}

/* full-screen overlay */
/* Docked BELOW the planner header (58px desktop / 42px mobile) so the header
   stays visible for navigation. The header (z4500) sits above this overlay. */
#vpcOverlay{position:fixed;top:58px;left:0;right:0;bottom:0;z-index:4000;background:var(--vpc-bg);display:none;
  flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--vpc-text);overflow:hidden;}
#vpcOverlay.on{display:flex;}
@media(max-width:767px){#vpcOverlay{top:54px;}}
#vpcOverlay *,#vpcOverlay *::before,#vpcOverlay *::after{box-sizing:border-box;}
.vpc-top{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:#fff;
  border-bottom:1px solid var(--vpc-border);flex:none;}
.vpc-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;cursor:pointer;}
.vpc-brand .vpc-logo{width:22px;height:27px;display:inline-flex;align-items:center;}
.vpc-brand .vpc-logo svg{display:block;}
.vpc-brand .vpc-brand-sub{color:var(--vpc-faint);font-weight:600;}
.vpc-brand .vpc-dot{width:24px;height:24px;border-radius:7px;background:var(--vpc-accent);display:grid;place-items:center;color:#fff;font-size:13px;}
.vpc-tabs{display:flex;gap:4px;margin-left:6px;}
.vpc-tabs button{font:inherit;font-size:13.5px;font-weight:600;color:var(--vpc-muted);padding:7px 13px;border-radius:9px;border:0;background:transparent;cursor:pointer;}
.vpc-tabs button.on{background:#FCE9E2;color:var(--vpc-accent-d);}
.vpc-x{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--vpc-border);background:#fff;color:var(--vpc-muted);font-size:16px;cursor:pointer;}
.vpc-body{flex:1;overflow-y:auto;overflow-x:hidden;}
.vpc-wrap{max-width:1120px;margin:0 auto;padding:20px 18px 70px;}

.vpc-sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.vpc-sec-h h1{margin:0;font-size:22px;letter-spacing:-.5px;}
.vpc-sec-h p{margin:5px 0 0;font-size:13px;color:var(--vpc-muted);}
.vpc-import-btn{flex:none;align-self:center;white-space:nowrap;}
/* Big centered notice (important messages) */
.vpc-bignote{position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;background:rgba(20,25,35,.42);padding:20px;animation:vpcBigIn .15s ease;}
.vpc-bignote-card{background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.32);padding:26px 34px;font-size:18px;font-weight:600;color:var(--vpc-text);max-width:440px;text-align:center;line-height:1.45;}
@keyframes vpcBigIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* generic bits */
/* bike-type badge — matches the app's cloud-route tags (soft tint + dark text) */
.vpc-bt{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.vpc-bt.road{background:#EEF1F5;color:#475569;}
.vpc-bt.gravel{background:#FDEAD7;color:#9A3412;}
.vpc-bt.mtb{background:#E2F3DE;color:#166534;}
.vpc-bt.ebike{background:#EDE9FE;color:#6D28D9;}
.vpc-bt.trekking{background:#DEF2F4;color:#0E7490;}
.vpc-bt.untagged{background:#EEF1F5;color:#64748B;}
/* editable bike-type pill: transparent native <select> overlaid on the pill */
.vpc-btpill{position:relative;gap:3px;padding:3px 8px;cursor:pointer;}
.vpc-btpill .vpc-btcaret{flex:none;opacity:.55;}
.vpc-btpill:hover{filter:brightness(.97);}
.vpc-btsel{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;opacity:0;cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none;}
.vpc-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--vpc-border);background:#fff;color:var(--vpc-muted);}
.vpc-pub{font-size:9.5px;font-weight:800;color:#15803D;background:#E7F4EC;border:1px solid #BFE3CC;border-radius:999px;padding:1px 6px;text-transform:uppercase;letter-spacing:.4px;}
.vpc-pend{font-size:9.5px;font-weight:800;color:#92600A;background:#FBF0DA;border:1px solid #EAD8AE;border-radius:999px;padding:1px 6px;text-transform:uppercase;letter-spacing:.4px;}
.vpc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:11px;border:1px solid var(--vpc-border);background:#fff;font:inherit;font-size:13.5px;font-weight:700;color:var(--vpc-text);cursor:pointer;transition:.15s;}
.vpc-btn:hover{border-color:#cdd3da;}
.vpc-btn.primary{background:var(--vpc-accent);border-color:var(--vpc-accent);color:#fff;}
.vpc-btn.primary:hover{background:var(--vpc-accent-d);border-color:var(--vpc-accent-d);}
.vpc-btn.pro{background:#fff;border-color:var(--vpc-accent);color:var(--vpc-accent);}
.vpc-btn.pro:hover{background:#FCE9E2;}
.vpc-btn[disabled]{opacity:.45;pointer-events:none;}
/* ── Social login (Apple / Google) ── */
.vpc-social{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.vpc-soc-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:10px 12px;border-radius:11px;border:1.5px solid var(--vpc-border);background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:var(--vpc-text);cursor:pointer;transition:filter .15s,border-color .15s;}
.vpc-soc-btn:hover{filter:brightness(.96);}
.vpc-soc-btn svg{flex:none;}
.vpc-soc-btn.apple{background:#000;border-color:#000;color:#fff;}
.vpc-soc-btn.google{background:#fff;border-color:#dadce0;color:#3c4043;}
.vpc-soc-btn[disabled]{opacity:.55;pointer-events:none;}
.vpc-auth-sep{display:flex;align-items:center;gap:10px;margin:15px 0 13px;color:var(--vpc-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.vpc-auth-sep::before,.vpc-auth-sep::after{content:'';flex:1;height:1px;background:var(--vpc-border);}
.vpc-protag{font-size:9.5px;font-weight:800;letter-spacing:.4px;background:var(--vpc-accent);color:#fff;border-radius:999px;padding:1px 6px;margin-left:2px;}

/* toolbar */
.vpc-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:13px;flex-wrap:wrap;}
.vpc-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--vpc-border);border-radius:11px;padding:9px 12px;flex:1;min-width:200px;}
.vpc-search input{border:0;outline:0;font:inherit;font-size:13.5px;flex:1;background:transparent;}
.vpc-seg{display:flex;gap:5px;background:#fff;border:1px solid var(--vpc-border);border-radius:999px;padding:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.vpc-seg::-webkit-scrollbar{display:none;}
.vpc-sort-wrap{display:inline-flex;align-items:center;gap:0;border:1px solid var(--vpc-border);border-radius:11px;background:#fff;padding:0 0 0 11px;height:36px;flex-shrink:0;}
.vpc-sort-lbl{font-size:12.5px;font-weight:600;color:var(--vpc-muted);white-space:nowrap;}
.vpc-sortsel{height:34px;padding:0 30px 0 6px;border:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;font:inherit;font-size:13px;font-weight:600;color:var(--vpc-text);appearance:none;-webkit-appearance:none;cursor:pointer;}
.vpc-sortsel:focus{outline:none;}
.vpc-sort-dir{display:inline-flex;align-items:center;justify-content:center;width:32px;height:34px;border:none;border-left:1px solid var(--vpc-border);border-radius:0 10px 10px 0;background:transparent;cursor:pointer;color:var(--vpc-muted);padding:0;flex-shrink:0;transition:background .12s,color .12s;}
.vpc-sort-dir:hover{background:var(--vpc-surface);color:var(--vpc-text);}
.vpc-sort-dir .vpc-ic{transition:transform .2s;}
.vpc-sort-dir.asc .vpc-ic{transform:rotate(180deg);}
.vpc-seg button{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;border:0;background:transparent;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--vpc-muted);cursor:pointer;}
.vpc-ic{display:inline-block;vertical-align:-2px;flex:none;}
.vpc-av .vpc-ic{vertical-align:0;}
.vpc-seg button.on{background:var(--vpc-text);color:#fff;}
.vpc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
/* Mobile "Filters" collapse trigger — hidden on desktop (chips always show there). */
.vpc-mfilterbar{display:none;margin-bottom:12px;}
.vpc-filterbtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;color:var(--vpc-text);background:#fff;border:1px solid var(--vpc-border);border-radius:999px;padding:8px 14px;cursor:pointer;}
.vpc-mfilterbar.has-active .vpc-filterbtn{border-color:var(--vpc-accent);color:var(--vpc-accent-d);}
.vpc-filterbtn-ct{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--vpc-accent);color:#fff;font-size:11px;font-weight:700;}
.vpc-filterbtn-ct:empty{display:none;}
.vpc-filterbtn-chev{margin-left:2px;transition:transform .18s;}
.vpc-mfilterbar.on .vpc-filterbtn-chev{transform:rotate(180deg);}
/* Mobile one-line route-detail action bar (hidden on desktop — desktop keeps the row stack). */
.vpc-mactions{display:none;}
.vpc-mabar{display:flex;align-items:center;gap:8px;}
.vpc-mahero{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--vpc-accent);color:#fff;font-size:13.5px;font-weight:700;border:0;border-radius:11px;padding:13px 10px;white-space:nowrap;overflow:hidden;cursor:pointer;}
.vpc-mahero svg{flex:none;}
.vpc-masq{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--vpc-border);border-radius:11px;background:#fff;color:var(--vpc-text);position:relative;cursor:pointer;}
.vpc-masq.on{background:#FCEEE7;border-color:var(--vpc-accent);color:var(--vpc-accent-d);}
.vpc-macar{position:absolute;right:4px;bottom:3px;font-size:10px;color:var(--vpc-muted);}
.vpc-mamenu{position:absolute;right:0;top:54px;min-width:230px;background:#fff;border:1px solid var(--vpc-border);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.18);overflow:hidden;z-index:30;display:none;}
.vpc-mamenu.open{display:block;}
.vpc-maitem{display:flex;align-items:center;gap:10px;width:100%;padding:12px 13px;font:inherit;font-size:13.5px;font-weight:600;color:var(--vpc-text);background:none;border:0;border-bottom:1px solid var(--vpc-line);cursor:pointer;text-align:left;}
.vpc-maitem:last-child{border-bottom:0;}
.vpc-maitem svg{flex:none;color:var(--vpc-muted);}
.vpc-mapro{margin-left:auto;font-size:10px;font-weight:700;color:#7A3E12;background:#FAE7D8;padding:2px 7px;border-radius:5px;letter-spacing:.02em;}
.vpc-chip{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid var(--vpc-border);background:#fff;color:#475569;cursor:pointer;}
.vpc-chip.on{background:#FCE9E2;border-color:var(--vpc-accent);color:var(--vpc-accent-d);}

/* filter pills + dropdowns */
.vpc-fpill{position:relative;}
.vpc-fpill-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--vpc-border);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;}
.vpc-fpill-btn:hover{border-color:#cdd3da;}
.vpc-fpill.on .vpc-fpill-btn{background:#FCE9E2;border-color:var(--vpc-accent);color:var(--vpc-accent-d);}
.vpc-ftoggle{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--vpc-border);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;}
.vpc-ftoggle:hover{border-color:#cdd3da;}
.vpc-ftoggle.on{background:var(--vpc-accent);border-color:var(--vpc-accent);color:#fff;}
.vpc-ftoggle svg{display:block;}
.vpc-fcar{font-size:9px;color:var(--vpc-faint);}
.vpc-fdrop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:#fff;border:1px solid var(--vpc-border);border-radius:12px;box-shadow:0 12px 30px rgba(20,25,35,.16);padding:6px;min-width:170px;max-height:280px;overflow:auto;}
.vpc-fdrop.open{display:block;}
.vpc-fopt{padding:8px 11px;border-radius:8px;font-size:13px;color:#374151;cursor:pointer;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;}
.vpc-fopt:hover{background:#F3F4F6;}
.vpc-fopt.on{background:#FCE9E2;color:var(--vpc-accent-d);font-weight:700;}
/* Location drill-in (countries → cities) */
.vpc-fdrill{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:500;}
.vpc-fdrill-r{display:flex;align-items:center;gap:5px;color:var(--vpc-faint);}
.vpc-fdrill-n{font-size:11px;}
.vpc-fdrill svg,.vpc-fback svg{flex:none;}
.vpc-fback{display:flex;align-items:center;gap:6px;color:var(--vpc-muted);font-weight:500;font-size:12px;border-bottom:1px solid var(--vpc-line);border-radius:0;margin-bottom:3px;}
.vpc-fback svg{transform:rotate(180deg);}
.vpc-fallof{font-weight:600;}
.vpc-fclear{border:0;background:transparent;color:var(--vpc-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;padding:7px 6px;}

/* report reason menu (opens upward, centered) */
.vpc-report{position:relative;display:inline-block;}
.vpc-report-btn{border:0;background:transparent;color:var(--vpc-faint);font:inherit;font-size:12px;cursor:pointer;padding:2px 4px;}
.vpc-report-btn:hover{color:var(--vpc-muted);text-decoration:underline;}
.vpc-report .vpc-fdrop{left:50%;transform:translateX(-50%);top:auto;bottom:calc(100% + 6px);min-width:220px;text-align:left;}

/* Share button (Option A — outline accent) */
.vpc-btn-share{background:#fff;border:1.5px solid var(--vpc-accent);color:var(--vpc-accent-d);}
.vpc-btn-share:hover{background:#FCE9E2;border-color:var(--vpc-accent);}
.vpc-btn-share svg{color:var(--vpc-accent);}

/* gallery grid */
.vpc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
@media(max-width:820px){.vpc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.vpc-grid{grid-template-columns:1fr;}}
.vpc-card{background:#fff;border:1px solid var(--vpc-border);border-radius:var(--vpc-r);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:.16s;}
.vpc-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,25,35,.1);}
.vpc-thumb{height:140px;background:#DDE4D6;position:relative;}
.vpc-thumb .vpc-fill{position:absolute;inset:0;}
.vpc-thumb .vpc-fill img{width:100%;height:100%;object-fit:cover;display:block;}
.vpc-fill img,.vpc-fimg{width:100%;height:100%;object-fit:cover;display:block;}
.vpc-thumb .vpc-fill svg{width:100%;height:100%;display:block;}
.vpc-badges{position:absolute;top:8px;left:8px;display:flex;gap:6px;z-index:5;}
/* pin / favourite — top-right of the thumbnail */
.vpc-pin{position:absolute;top:8px;right:8px;z-index:6;width:30px;height:30px;border-radius:50%;border:1px solid var(--vpc-border);background:#fff;color:var(--vpc-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(20,25,35,.18);transition:.14s;padding:0;}
.vpc-pin:hover{color:var(--vpc-accent-d);border-color:var(--vpc-accent);}
.vpc-pin.on{background:var(--vpc-accent);border-color:var(--vpc-accent);color:#fff;}
.vpc-pin svg{display:block;}
.vpc-cbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:8px;flex:1;}
.vpc-cbody h3{margin:0;font-size:14.5px;letter-spacing:-.2px;line-height:1.25;}
.vpc-titlerow{display:flex;align-items:flex-start;gap:8px;}
.vpc-titlerow .vpc-bt{flex:none;margin-top:1px;}
.vpc-titlerow h3{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vpc-meta{display:flex;gap:13px;font-size:12px;color:var(--vpc-muted);font-weight:600;}
.vpc-meta b{color:var(--vpc-text);}
.vpc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:7px;border-top:1px solid var(--vpc-line);font-size:12px;color:var(--vpc-muted);}
.vpc-av{width:21px;height:21px;border-radius:50%;background:linear-gradient(135deg,#E8401C,#F5A623);color:#fff;display:inline-grid;place-items:center;font-size:10px;font-weight:800;margin-right:5px;vertical-align:middle;}
.vpc-fsoc{display:inline-flex;align-items:center;}
.vpc-fsoc span{display:inline-flex;align-items:center;gap:4px;margin-left:9px;}
.vpc-card-like{display:inline-flex;align-items:center;gap:4px;margin-left:9px;background:none;border:none;padding:2px 4px;border-radius:6px;cursor:pointer;color:var(--vpc-muted);font-size:12px;line-height:1;}
.vpc-card-like:hover{color:var(--vpc-accent);background:#FCE9E2;}
.vpc-card-like.liked{color:var(--vpc-accent);}
.vpc-card-like.liked svg{fill:var(--vpc-accent);}
/* Detail: same heart-toggle concept as the card, placed below the author panel */
.vpc-detail-like{margin-top:12px;}
.vpc-detail-like .vpc-card-like{margin-left:0;font-size:13.5px;font-weight:600;gap:6px;padding:9px 15px;border:1px solid var(--vpc-border);border-radius:11px;}
.vpc-detail-like .vpc-card-like:hover{border-color:var(--vpc-accent);}
.vpc-detail-like .vpc-card-like.liked{border-color:var(--vpc-accent);background:#FCE9E2;}
.vpc-empty{color:var(--vpc-muted);font-size:13.5px;padding:30px 4px;text-align:center;}

/* signed-out inline sign-in form (My routes) */
.vpc-signin{width:380px;max-width:100%;margin:26px auto 0;background:#fff;border:1px solid var(--vpc-border);border-radius:var(--vpc-r);padding:24px 24px;}
.vpc-auth-tabs{display:flex;gap:18px;border-bottom:1px solid var(--vpc-line);margin-bottom:16px;}
.vpc-auth-tabs button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--vpc-muted);padding:0 0 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.vpc-auth-tabs button.on{color:var(--vpc-text);font-weight:700;border-bottom-color:var(--vpc-accent);}
.vpc-signin .vpc-field{margin-bottom:11px;}
.vpc-signin .vpc-field input{width:100%;border:1px solid var(--vpc-border);border-radius:10px;padding:11px 12px;font:inherit;font-size:14px;outline:0;}
.vpc-signin .vpc-field input:focus{border-color:var(--vpc-accent);}
.vpc-auth-err{font-size:12.5px;color:#B91C1C;margin:2px 0 0;line-height:1.4;}
.vpc-auth-err:empty{display:none;}

/* brand-styled range slider (privacy radius) */
#vpcOverlay input[type=range], .vpc-scrim input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(to right, var(--vpc-accent) 0%, var(--vpc-accent) var(--vpc-rangefill,40%), #E2E5E2 var(--vpc-rangefill,40%), #E2E5E2 100%);
  outline:none;cursor:pointer;margin:6px 0;
}
#vpcOverlay input[type=range]::-webkit-slider-thumb, .vpc-scrim input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--vpc-accent);box-shadow:0 1px 4px rgba(20,25,35,.25);cursor:pointer;margin-top:0;
}
#vpcOverlay input[type=range]::-moz-range-thumb, .vpc-scrim input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--vpc-accent);box-shadow:0 1px 4px rgba(20,25,35,.25);cursor:pointer;
}
#vpcOverlay input[type=range]::-moz-range-track, .vpc-scrim input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#E2E5E2;}
#vpcOverlay input[type=range]::-moz-range-progress, .vpc-scrim input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--vpc-accent);}

/* map */
.vpc-mapwrap{position:relative;display:none;margin-bottom:14px;}
.vpc-map{height:62vh;min-height:380px;border-radius:var(--vpc-r);overflow:hidden;border:1px solid var(--vpc-border);}
.vpc-mapbtn{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:500;background:#fff;border:1px solid var(--vpc-border);border-radius:999px;padding:8px 16px;font:inherit;font-size:12.5px;font-weight:700;box-shadow:0 4px 14px rgba(20,25,35,.18);cursor:pointer;}
.vpc-mapbtn:hover{background:#FCE9E2;}
.vpc-mapbtn.active{border-color:var(--vpc-accent);color:var(--vpc-accent);}
.vpc-mapbtn.active:hover{background:#FCE9E2;}
.vpc-maplegend{position:absolute;left:12px;bottom:12px;z-index:500;background:rgba(255,255,255,.94);border:1px solid var(--vpc-border);border-radius:10px;padding:9px 11px;box-shadow:0 2px 10px rgba(20,25,35,.14);}
.vpc-maplegend-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--vpc-faint);margin-bottom:6px;}
.vpc-maplegend span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--vpc-text);line-height:1.7;}
.vpc-maplegend span i{flex:none;width:18px;height:3px;border-radius:2px;}
.maplibregl-popup.vpc-pop .maplibregl-popup-content{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--vpc-border);box-shadow:0 10px 28px rgba(20,25,35,.20);}
.vpc-tip{cursor:pointer;}
.vpc-tip:hover .vpc-tip-open{text-decoration:underline;}
.maplibregl-popup.vpc-pop .maplibregl-popup-tip{display:none;}
/* Cursor-following hover chip on the Explore map (never steals the hover) */
.maplibregl-popup.vpc-hover-chip{pointer-events:none;z-index:4;}
.maplibregl-popup.vpc-hover-chip .maplibregl-popup-content{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:7px 10px;border-radius:10px;border:1px solid var(--vpc-border);box-shadow:0 4px 14px rgba(20,25,35,.16);}
.maplibregl-popup.vpc-hover-chip .maplibregl-popup-tip{display:none;}
.vpc-chiprow{display:flex;align-items:center;gap:6px;min-width:0;}
.vpc-chipdot{width:9px;height:9px;border-radius:50%;flex:none;}
.vpc-chipnm{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--vpc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.vpc-chipsub{font-size:11px;color:var(--vpc-muted);font-weight:600;margin-top:2px;}
.vpc-tip{display:flex;min-width:184px;max-width:240px;}
.vpc-tip-bar{width:4px;flex:none;}
.vpc-tip-main{padding:9px 12px;min-width:0;}
.vpc-tip-title{font-size:13px;font-weight:700;line-height:1.25;color:var(--vpc-text);margin-bottom:6px;}
.vpc-tip-stats{display:flex;gap:12px;font-size:12px;color:var(--vpc-muted);font-weight:600;margin-bottom:7px;}
.vpc-tip-stats span{display:inline-flex;align-items:center;gap:5px;}
.vpc-tip-stats b{color:var(--vpc-text);font-weight:800;}
.vpc-tip-foot{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;gap:10px;}
.vpc-tip-auth{display:inline-flex;align-items:center;gap:5px;color:var(--vpc-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vpc-tip-av{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#E8401C,#F5A623);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none;}
.vpc-tip-open{display:inline-flex;align-items:center;gap:4px;color:var(--vpc-accent-d);font-weight:700;flex:none;}

/* my-published list */
/* My-routes sub-segment (Created · Saved · Copies) */
.vpc-mseg{display:inline-flex;background:#fff;border:1px solid var(--vpc-border);border-radius:999px;padding:3px;margin:0 0 14px;gap:2px;}
.vpc-collseg{align-self:flex-start;}   /* shrink to content inside the column-flex list (don't stretch full width) */
.vpc-mseg button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--vpc-muted);background:none;border:0;border-radius:999px;padding:6px 14px;cursor:pointer;transition:.14s;}
.vpc-mseg button:hover{color:var(--vpc-accent-d);}
.vpc-mseg button.on{background:var(--vpc-accent);color:#fff;}
.vpc-mseg button.on svg{color:#fff;}
.vpc-mseg svg{color:var(--vpc-muted);}
/* copy provenance in the row */
.vpc-copytag{font-size:10.5px;font-weight:600;color:#185FA5;background:#E6F1FB;border-radius:999px;padding:2px 8px;}
.vpc-copysub{display:flex;align-items:center;gap:5px;margin-top:3px;color:var(--vpc-faint);}
.vpc-copysub svg{flex:none;}
/* detail-panel: favourites toggle */
.vpc-btn-pin{justify-content:space-between!important;}
.vpc-pin-left{display:flex;align-items:center;gap:7px;}
.vpc-btn-pin.on{background:#FCE9E2;border-color:var(--vpc-accent);color:var(--vpc-accent-d);}
.vpc-pin-sw{width:30px;height:17px;border-radius:999px;border:1.5px solid #ccc;position:relative;flex-shrink:0;transition:.2s;background:#fff;}
.vpc-pin-knob{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#ccc;transition:.2s;}
.vpc-btn-pin.on .vpc-pin-sw{background:var(--vpc-accent);border-color:var(--vpc-accent);}
.vpc-btn-pin.on .vpc-pin-knob{left:15px;background:#fff;}
.vpc-mine{display:flex;flex-direction:column;gap:11px;}
.vpc-mrow{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--vpc-border);border-radius:var(--vpc-r);padding:12px;}
/* Collection route reordering — grip handle + drag/drop states */
.vpc-mrow .vpc-mdrag{flex:none;display:flex;align-items:center;color:var(--vpc-faint);cursor:grab;padding:2px;margin-right:-8px;border-radius:6px;}
.vpc-mrow .vpc-mdrag:hover{color:var(--vpc-muted);background:var(--vpc-line);}
.vpc-mrow .vpc-mdrag:active{cursor:grabbing;}
.vpc-mrow.vpc-mrow-dragging{opacity:.5;}
.vpc-mrow.vpc-mrow-over{outline:2px dashed var(--vpc-accent);outline-offset:2px;}
.vpc-reorder-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--vpc-muted);background:var(--vpc-line);border-radius:9px;padding:7px 11px;margin:0 0 10px;}
.vpc-reorder-hint-ic{display:inline-flex;color:var(--vpc-faint);flex:none;}
.vpc-reorder-hint-x{margin-left:auto;border:0;background:transparent;color:var(--vpc-faint);cursor:pointer;font-size:13px;line-height:1;padding:2px 6px;border-radius:5px;}
.vpc-reorder-hint-x:hover{color:var(--vpc-muted);background:#fff;}
.vpc-mrow .vpc-mini{width:190px;height:116px;border-radius:11px;overflow:hidden;flex:none;background:#DDE4D6;position:relative;}
.vpc-mrow .vpc-mini .vpc-fill{position:absolute;inset:0;}
.vpc-mrow .vpc-nm{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
/* Inline route rename in a My-routes row (pencil after the name + edit state) */
.vpc-mrow .vpc-nm-edit{flex:none;border:0;background:transparent;color:var(--vpc-faint);cursor:pointer;padding:1px 4px;border-radius:5px;display:inline-flex;align-items:center;}
.vpc-mrow .vpc-nm-edit:hover{color:var(--vpc-accent);background:var(--vpc-line);}
.vpc-mrow .vpc-nm.vpc-nm-editing{gap:6px;}
.vpc-mrow .vpc-nm-input{flex:1;min-width:0;font:inherit;font-size:15px;font-weight:700;padding:4px 8px;border:1px solid var(--vpc-accent);border-radius:7px;outline:0;}
.vpc-mrow .vpc-nm-ok,.vpc-mrow .vpc-nm-cancel{flex:none;border:0;background:transparent;cursor:pointer;padding:2px 7px;border-radius:6px;font-size:14px;line-height:1;}
.vpc-mrow .vpc-nm-ok{color:#15803D;}
.vpc-mrow .vpc-nm-ok:hover{background:#E2F3DE;}
.vpc-mrow .vpc-nm-cancel{color:var(--vpc-muted);}
.vpc-mrow .vpc-nm-cancel:hover{background:var(--vpc-line);}
.vpc-mrow .vpc-sub{font-size:12.5px;color:var(--vpc-muted);margin-top:3px;}
.vpc-mrow .vpc-mloc{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--vpc-muted);margin:3px 0 6px;min-width:0;}
.vpc-mrow .vpc-mloc svg{flex-shrink:0;color:var(--vpc-faint,#9aa3af);}
.vpc-mrow .vpc-mloc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vpc-mrow .vpc-mfoot{display:flex;align-items:flex-end;gap:8px 10px;flex-wrap:wrap;}
.vpc-mrow .vpc-mfoot .vpc-sub{flex:1 1 auto;min-width:0;}
.vpc-mrow .vpc-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
/* Mobile-only bits — hidden on desktop so the row layout above is unchanged. */
.vpc-mrow .vpc-mstat{display:none;position:absolute;top:8px;left:8px;z-index:2;}
.vpc-mrow .vpc-mpub{display:none;}
@media(max-width:767px){
  /* Reclaim header space: collapse the filter chips behind the "Filters" button
     (revealed on tap) and drop the long My Routes intro paragraph. */
  .vpc-mfilterbar{display:flex;}
  .vpc-chips{display:none;}
  .vpc-chips.open{display:flex;}
  #vpcMineSub{display:none;}
  /* The global iOS-no-zoom rule bumps every input/select to 16px on mobile. The
     sort <select> can safely shrink (selects don't trigger iOS zoom-on-focus); the
     search <input> MUST stay 16px or iOS zooms in when focused — Tony confirmed he
     doesn't want that, so only the select is reduced. */
  #vpcOverlay .vpc-sortsel{font-size:13px !important;}
  /* Route detail (mobile): _placeDActions moves the #vpcDActions panel ABOVE the photos;
     here it's stripped to a frameless, sticky one-line bar. Its old stacked rows + the
     long note (both inside it) stay hidden. */
  /* Detail modal = full-bleed flex column on mobile: title header (.vpc-mh) + a FIXED
     action bar (#vpcDActions, frameless, sits right below the header) + scrolling body
     (.vpc-mb). The bar is a flex:none child of the modal so it never scrolls. Its old
     stacked rows + long note (inside it) stay hidden. */
  #vpcDetailScrim{padding:0;}
  #vpcDetailScrim .vpc-modal{width:100%;max-width:100%;height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column;}
  #vpcDetailScrim .vpc-mh{flex:none;border-bottom:0;}
  #vpcDActions{flex:none !important;margin:0 !important;padding:10px 16px !important;background:#fff !important;border:0 !important;border-radius:0 !important;}
  .vpc-dactions{display:none !important;}
  .vpc-dlnote{display:none !important;}
  .vpc-mactions{display:block !important;}
  #vpcDetailScrim .vpc-mb{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* My Routes cards adopt the Explore card layout: vertical, full-width map on top, details below. */
  .vpc-mrow{flex-direction:column;align-items:stretch;gap:0;padding:0;position:relative;}
  .vpc-mrow .vpc-mdrag{display:none;}   /* native drag-and-drop is desktop-only */
  .vpc-reorder-hint{display:none;}      /* …so the reorder hint is desktop-only too */
  .vpc-mrow .vpc-mini{width:100%;height:140px;border-radius:var(--vpc-r) var(--vpc-r) 0 0;}
  .vpc-mrow .vpc-mbody{padding:11px 13px 13px;}
  .vpc-mrow .vpc-nm{font-size:14.5px;}
  .vpc-mrow .vpc-mstat{display:inline-flex;}
  .vpc-mrow .vpc-nm .vpc-pub{display:none;}            /* inline status hidden — shown on the thumbnail instead */
  /* Kebab floats on the thumbnail top-right (sibling, so it never triggers row-open); desktop Publish in .vpc-act hidden in favour of the full-width body button. */
  .vpc-mrow .vpc-act{position:absolute;top:8px;right:8px;margin:0;z-index:4;}
  .vpc-mrow .vpc-act [data-pub]{display:none;}
  .vpc-mrow .vpc-rkebab{width:32px;height:32px;border-radius:50%;box-shadow:0 1px 4px rgba(20,25,35,.22);}
  /* Compact right-aligned pill (not a full-width bar). width:max-content + display:flex keeps margin-left:auto working even if the .vpc-mfoot parent isn't a flex box (block flow); align-self:flex-end covers the column-flex fallback. */
  .vpc-mrow .vpc-mpub{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;flex:none;margin-left:auto;align-self:flex-end;padding:7px 14px;border-radius:9px;font-size:12.5px;}
}

/* Sets — grid of set cards (H — destination design) */
.vpc-sets-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:14px;}
.vpc-sets-new-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;}
.vpc-sets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.vpc-set-card{background:#fff;border:1px solid var(--vpc-border);border-radius:var(--vpc-r);overflow:hidden;cursor:pointer;position:relative;transition:box-shadow .15s,border-color .14s;}
.vpc-set-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.09);border-color:#D1D5DB;}
.vpc-set-body{padding:14px 14px 10px;}
.vpc-set-region{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:#E7F4EC;color:#186A34;border:1px solid #BFE3CC;margin-bottom:9px;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vpc-set-region svg{flex:none;color:#186A34;}
/* Variant A — first-photo banner on the collection card */
.vpc-set-photo{position:relative;height:116px;background-size:cover;background-position:center;background-color:#DDE4D6;}
.vpc-set-photo-ph{background:linear-gradient(to bottom,#BFE3F2,#EAF6E9);}
.vpc-set-ph-svg{display:block;width:100%;height:100%;}
.vpc-set-region-photo{position:absolute;top:9px;left:9px;margin:0;background:rgba(255,255,255,.92);border-color:transparent;box-shadow:0 1px 3px rgba(0,0,0,.14);}
.vpc-set-region-photo svg{color:currentColor;}
.vpc-set-card.has-photo .vpc-set-kebab{background:rgba(255,255,255,.9);color:var(--vpc-text);box-shadow:0 1px 3px rgba(0,0,0,.14);z-index:3;}
.vpc-set-card.has-photo .vpc-set-kebab:hover{background:#fff;}
.vpc-set-name{font-size:15px;font-weight:700;color:var(--vpc-text);letter-spacing:-.01em;padding-right:22px;margin-bottom:4px;}
.vpc-set-pub-ic{color:#15803D;display:inline-flex;vertical-align:-2px;margin-left:3px;}
.vpc-set-pub-ic svg{display:block;}
.vpc-set-sub{font-size:12px;color:var(--vpc-muted);margin-bottom:10px;}
.vpc-set-swatches{display:flex;gap:5px;flex-wrap:wrap;}
.vpc-set-swatch{font-size:10.5px;font-weight:700;color:#fff;padding:3px 9px;border-radius:5px;letter-spacing:.01em;}
.vpc-set-div{height:1px;background:var(--vpc-line);margin:10px 0 0;}
.vpc-set-foot{padding:8px 14px 10px;font-size:12px;color:var(--vpc-muted);display:flex;align-items:center;gap:5px;}
.vpc-set-foot svg{flex:none;color:var(--vpc-faint);}
.vpc-set-del{position:absolute;top:12px;right:10px;background:none;border:0;color:var(--vpc-faint);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:4px;}
.vpc-set-del:hover{background:#FEE2E2;color:#B91C1C;}
/* set-card ⋯ menu (Rename / Delete) */
.vpc-set-card .vpc-set-menu{position:absolute;top:9px;right:9px;}
.vpc-set-kebab{display:grid;place-items:center;width:28px;height:28px;background:none;border:0;border-radius:7px;color:var(--vpc-faint);cursor:pointer;}
.vpc-set-kebab:hover{background:var(--vpc-line);color:var(--vpc-text);}
.vpc-set-card.menu-open{overflow:visible;z-index:5;}
.vpc-set-rename-input{width:100%;font:inherit;font-size:15px;font-weight:700;color:var(--vpc-text);padding:3px 7px;border:1px solid var(--vpc-accent);border-radius:7px;outline:none;box-shadow:0 0 0 3px rgba(232,64,28,.12);}
/* Sets — detail header (inside a set) */
.vpc-set-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.vpc-set-back{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--vpc-accent-d);cursor:pointer;padding:0;}
.vpc-set-back:hover{text-decoration:underline;}
.vpc-set-hname{font-size:17px;font-weight:700;color:var(--vpc-text);letter-spacing:-.02em;}
.vpc-set-add-btn{padding:8px 14px!important;font-size:13px!important;}
.vpc-coll-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.vpc-coll-badge{align-self:center;}
/* Mobile: stack the collection-detail header so the title gets its own full-width
   line (instead of being squeezed into a narrow middle column). Back link on top,
   title full width, then badge + actions share the next row. */
@media(max-width:767px){
  .vpc-set-detail-head{flex-wrap:wrap;align-items:center;gap:8px 10px;}
  .vpc-set-detail-head .vpc-set-back{flex:0 0 100%;text-align:left;}
  .vpc-set-detail-head .vpc-set-hname{flex:0 0 100%;font-size:20px;line-height:1.3;letter-spacing:-.01em;}
  .vpc-set-detail-head .vpc-coll-badge{flex:0 0 auto;align-self:flex-start;}
  /* Option A: one primary CTA fills the row; Share goes icon-only; kebab compact. */
  .vpc-set-detail-head .vpc-coll-actions{flex:0 0 100%;margin-left:0;margin-top:4px;flex-wrap:nowrap;justify-content:flex-start;}
  .vpc-coll-actions .vpc-set-add-btn{flex:1;justify-content:center;min-width:0;order:-1;}
  .vpc-coll-actions .vpc-collshare-mini{flex:none;}
  .vpc-coll-actions .vpc-collshare-mini .vpc-btnlbl{display:none;}
  .vpc-coll-actions .vpc-coll-menu{flex:none;}
  /* Match the kebab to the outline share button beside it (boxed, same height). */
  .vpc-coll-actions .vpc-set-kebab{width:auto;height:auto;padding:9px 11px;border:1px solid var(--vpc-border);border-radius:11px;background:#fff;color:var(--vpc-muted);}
  .vpc-coll-actions .vpc-set-kebab:hover{border-color:#cdd3da;background:#fff;}
}
.vpc-coll-unshare-link{background:none;border:0;color:var(--vpc-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;padding:4px 2px;}
.vpc-coll-unshare-link:hover{color:var(--vpc-accent-d);}
.vpc-coll-sub{font-size:12.5px;color:var(--vpc-muted);margin-top:2px;}
.vpc-mh-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}
.vpc-coll-sharebtn{padding:7px 13px!important;font-size:13px!important;}
.vpc-coll-sharebtn:hover{border-color:#cdd3da!important;}
.vpc-coll-sharebtn svg{color:var(--vpc-muted);}
.vpc-coll-desc-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vpc-faint);margin:2px 0 5px;}
.vpc-coll-desc{font-size:13px;color:#374151;line-height:1.55;margin:0 0 14px;white-space:pre-line;overflow-wrap:anywhere;}
.vpc-coll-desc a,.vpc-coll-desc-text a{color:var(--vpc-accent-d);text-decoration:underline;}
/* Explore: collections strip */
.vpc-coll-strip{margin:0 0 16px;}
.vpc-coll-strip-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vpc-faint);margin:0 2px 8px;}
.vpc-coll-strip-h svg{color:var(--vpc-muted);}
.vpc-coll-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:330px;overflow-y:auto;padding:2px 4px 4px 2px;scrollbar-width:thin;}
.vpc-routes-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vpc-faint);margin:4px 2px 10px;}
.vpc-routes-h svg{color:var(--vpc-muted);}
/* Explore collection cards — same photo-banner style as the My-routes grid */
.vpc-coll-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--vpc-border);border-radius:12px;padding:0;overflow:hidden;cursor:pointer;font:inherit;text-align:left;transition:box-shadow .14s,border-color .14s;}
.vpc-coll-card:hover{border-color:#D1D5DB;box-shadow:0 4px 18px rgba(20,25,35,.09);}
.vpc-coll-card .vpc-set-photo{height:92px;}
.vpc-coll-card-body{padding:9px 12px 11px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vpc-coll-card-nm{font-size:13.5px;font-weight:700;color:var(--vpc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vpc-coll-card-sub{font-size:11.5px;color:var(--vpc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Explore Routes/Collections mode toggle — auto-width (no full-width white gap)
   + bigger than the small view/sort segments so it reads as the primary switch. */
.vpc-xmode{display:inline-flex;margin:0 0 16px;}
.vpc-xmode button{font-size:15.5px;padding:11px 22px;gap:8px;}
.vpc-xmode button svg{width:18px;height:18px;}
/* Collections mode: full bundle-card grid (no strip height cap) */
.vpc-bundle-grid{max-height:none;overflow:visible;padding:9px 9px 4px 2px;}
/* Bundle (collection / tour) card — stacked-paper look + type badge so it reads
   as MANY routes, not one. Offset box-shadows draw outside the clipped card. */
.vpc-bundle{box-shadow:4px -4px 0 0 #EAECEF, 8px -8px 0 0 #F1F2F4;}
.vpc-bundle:hover{border-color:#D1D5DB;box-shadow:4px -4px 0 0 #EAECEF, 8px -8px 0 0 #F1F2F4, 0 6px 18px rgba(20,25,35,.10);}
.vpc-bundle-badge{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.vpc-bundle-badge svg{display:block;}
.vpc-bundle-badge.tour{background:#C9350F;color:#fff;}
.vpc-bundle-badge.coll{background:rgba(255,255,255,.95);color:#374151;}
.vpc-tour-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--vpc-accent-d,#C2360F);background:#FCE9E2;border:1px solid #F6C9BB;border-radius:6px;padding:1px 6px;white-space:nowrap;vertical-align:middle;}
/* Expandable tour rows (My routes) — NO overflow:hidden on the group (it would
   clip the kebab dropdown). Master stays a normal card; days are indented cards. */
.vpc-tour-group{display:flex;flex-direction:column;gap:7px;}
.vpc-tour-chev{flex:none;width:24px;height:24px;border:0;background:none;color:var(--vpc-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;transition:transform .18s,background .14s;margin-right:-4px;}
.vpc-tour-chev:hover{background:rgba(0,0,0,.05);color:var(--vpc-text);}
.vpc-tour-chev.open{transform:rotate(90deg);}
.vpc-tour-kids{margin-left:18px;display:flex;flex-direction:column;gap:6px;}
.vpc-tour-kid{display:flex;align-items:center;gap:11px;padding:9px 11px;background:#FBFBFA;border:1px solid var(--vpc-border);border-radius:11px;}
.vpc-tour-rail{flex:none;width:16px;display:flex;justify-content:center;color:var(--vpc-faint);}
.vpc-tour-kid .vpc-nm{font-size:13px;font-weight:600;}
.vpc-tk-thumb{width:46px;height:34px;flex:none;}
.vpc-coll-fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--vpc-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.14);z-index:3;}
.vpc-coll-fav:hover{background:#fff;color:var(--vpc-text);}
.vpc-coll-fav.on{background:var(--vpc-accent);color:#fff;}
/* Favourite Collections tab — the same card grid but full page (no inner scroll) */
.vpc-coll-grid-page{max-height:none;overflow:visible;}
@media(max-width:820px){.vpc-coll-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:540px){.vpc-coll-cards{grid-template-columns:1fr;max-height:204px;}}
/* Collection/Set description — owner editor */
.vpc-coll-descrow{display:flex;align-items:flex-start;gap:8px;max-width:680px;margin:0 0 4px;}
.vpc-coll-desc-text{font-size:13.5px;line-height:1.55;color:var(--vpc-muted);margin:0;white-space:pre-line;overflow-wrap:anywhere;}
.vpc-coll-desc-edit{flex:none;border:0;background:none;color:var(--vpc-faint);cursor:pointer;padding:2px;}
.vpc-coll-desc-edit:hover{color:var(--vpc-accent-d);}
.vpc-coll-desc-add{border:0;background:none;color:var(--vpc-faint);font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 0;margin:0 0 4px;}
.vpc-coll-desc-add:hover{color:var(--vpc-accent-d);}
.vpc-coll-desc-editor{max-width:680px;margin:0 0 6px;}
.vpc-coll-desc-editor textarea{width:100%;font:inherit;font-size:13.5px;line-height:1.5;color:var(--vpc-text);border:1px solid var(--vpc-accent);border-radius:10px;padding:10px 12px;box-shadow:0 0 0 3px rgba(232,64,28,.12);resize:vertical;min-height:60px;outline:none;box-sizing:border-box;}
.vpc-coll-desc-bar{display:flex;align-items:center;margin-top:8px;}
.vpc-coll-desc-count{font-size:11.5px;color:var(--vpc-faint);}
.vpc-coll-desc-bar > span:last-child{margin-left:auto;display:flex;gap:8px;}
/* Collection photos — owner editor grid */
.vpc-photos-sec{margin:2px 0 8px;}
.vpc-photos-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vpc-faint);margin:0 0 8px;}
.vpc-photos-grid{display:flex;gap:8px;flex-wrap:wrap;}
/* Full-screen photo lightbox (click a thumbnail / cover to view) */
.vpc-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(15,18,24,.9);display:flex;align-items:center;justify-content:center;}
.vpc-lightbox-img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 10px 50px rgba(0,0,0,.5);object-fit:contain;background:#222;}
.vpc-lightbox-x{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;cursor:pointer;}
.vpc-lightbox-x:hover{background:rgba(255,255,255,.3);}
.vpc-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vpc-lightbox-nav:hover{background:rgba(255,255,255,.3);}
.vpc-lightbox-nav.prev{left:18px;}
.vpc-lightbox-nav.next{right:18px;}
.vpc-lightbox-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.45);padding:4px 12px;border-radius:999px;}
.vpc-photo-thumb{position:relative;width:108px;height:72px;border-radius:9px;background-size:cover;background-position:center;background-color:#DDE4D6;cursor:grab;}
.vpc-photo-thumb:active{cursor:grabbing;}
.vpc-photo-thumb.cover{outline:2px solid var(--vpc-accent);outline-offset:0;}
.vpc-photo-thumb.vpc-photo-dragging{opacity:.4;}
.vpc-photo-thumb.vpc-photo-over{outline:2px dashed var(--vpc-accent);outline-offset:2px;}
.vpc-photo-cover{position:absolute;left:5px;top:5px;background:var(--vpc-accent);color:#fff;border-radius:5px;padding:2px 5px;display:inline-flex;}
.vpc-photo-rm{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(20,25,35,.62);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vpc-photo-rm:hover{background:rgba(20,25,35,.85);}
.vpc-photo-add{width:108px;height:72px;border-radius:9px;border:1.5px dashed var(--vpc-border);background:#fff;color:var(--vpc-faint);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.vpc-photo-add:hover{border-color:var(--vpc-accent);color:var(--vpc-accent-d);}
/* Route detail photos — carousel lives in the LEFT (map) column, kept compact */
.vpc-dphotos{margin-top:16px;}
.vpc-dphotos .vpc-photos-h{margin-top:0;}
.vpc-dphotos .vpc-photo-thumb{cursor:zoom-in;}
.vpc-dphotos .vpc-collphoto-cover{height:170px;max-height:170px;object-fit:cover;border-radius:10px;}
.vpc-dphotos .vpc-collphoto-nav{width:30px;height:30px;}
.vpc-dphotos .vpc-collphoto-strip{margin-bottom:2px;}
.vpc-dphotos .vpc-collphoto-th{width:58px;height:38px;}
/* Hero photos: when a route has photos, the box is lifted above the map+details
   grid (see _placeRoutePhotos) and shown large + full-width. */
.vpc-dphotos-hero{margin:0 0 18px;}
.vpc-dphotos-hero .vpc-photos-h{margin-bottom:10px;}
.vpc-dphotos.vpc-dphotos-hero .vpc-collphoto-cover{height:auto;max-height:46vh;min-height:280px;object-fit:cover;border-radius:14px;}
.vpc-dphotos-hero .vpc-collphoto-th{width:84px;height:56px;}
.vpc-dphotos-hero .vpc-collphoto-nav{width:34px;height:34px;}
/* Owner editable hero grid = a MOSAIC canvas: a 4-col grid where every 5th photo
   spans 2x2, the rest 1x1 — tight gaps + rounded outer corners read as one canvas.
   (The 1-big-+-4-small unit tiles 2 rows hole-free, so order is preserved and the
   add tile stays last; spans reset on mobile to a uniform 2-col grid.) */
.vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:96px;gap:5px;border-radius:12px;overflow:hidden;}
.vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid .vpc-photo-thumb,
.vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid .vpc-photo-add{width:auto;height:auto;min-height:0;border-radius:8px;}
/* Mock layout: one big hero (left, 2fr) spanning both rows + two stacked side tiles
   (right, 1fr); the 2nd side tile carries the "+N more" overlay. */
.vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid .vpc-photo-thumb:first-child{grid-column:1;grid-row:1 / span 2;}
.vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid .vpc-photo-thumb:first-child:only-child{grid-column:1 / -1;}
.vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid .vpc-photo-thumb.cover{outline:none;}
/* "View N more" overlay on the last shown tile when the route has >5 photos.
   pointer-events:none so the tile click (opens lightbox = all photos) + the ✕ still work. */
.vpc-photo-more .vpc-photo-more-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:rgba(17,22,30,.52);color:#fff;border-radius:inherit;pointer-events:none;text-align:center;padding:4px;}
.vpc-photo-more .vpc-photo-more-lbl b{font-size:21px;font-weight:700;line-height:1;}
.vpc-photo-more .vpc-photo-more-lbl small{font-size:11px;font-weight:600;opacity:.95;}
/* "Manage all" link in the hero photos header + the manager overlay */
.vpc-dphotos .vpc-photos-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.vpc-photos-manage{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--vpc-border);background:#fff;color:var(--vpc-muted);font:inherit;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;}
.vpc-photos-manage:hover{border-color:var(--vpc-accent);color:var(--vpc-accent-d);}
.vpc-rpmgr-ov{position:fixed;inset:0;z-index:6200;display:flex;align-items:center;justify-content:center;background:rgba(20,25,35,.5);padding:22px;}
.vpc-rpmgr-card{background:#fff;border-radius:16px;width:100%;max-width:680px;max-height:82vh;overflow:auto;padding:18px 20px 20px;box-shadow:0 24px 70px rgba(0,0,0,.32);}
.vpc-rpmgr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.vpc-rpmgr-head span{font-size:16px;font-weight:700;}
.vpc-rpmgr-body .vpc-photos-grid{gap:8px;}
/* "Has photos" card teaser (option B): cover photo replaces the map thumbnail, the
   map demotes to a corner chip, + a camera-count badge. Works in .vpc-mini (My
   routes rows) and .vpc-thumb (Explore cards) — both are position:relative. */
.vpc-thumb-mapchip{position:absolute;bottom:7px;right:7px;width:64px;height:44px;border-radius:7px;border:2px solid #fff;overflow:hidden;z-index:2;box-shadow:0 1px 5px rgba(0,0,0,.3);}
.vpc-thumb-mapchip .vpc-fill{position:absolute;inset:0;}
.vpc-thumb-photn{position:absolute;left:7px;bottom:7px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:rgba(17,22,30,.62);color:#fff;font-size:11px;font-weight:600;line-height:1;padding:3px 7px;border-radius:20px;}
.vpc-thumb-photn svg{width:12px;height:12px;}
@media(max-width:600px){
  .vpc-dphotos.vpc-dphotos-hero .vpc-photos-grid{grid-template-columns:2fr 1fr;grid-auto-rows:88px;}
}
.vpc-photos-hint{font-size:11.5px;color:var(--vpc-faint);margin-top:8px;}
/* Collection viewer — cover + strip */
.vpc-collphoto-stage{position:relative;margin-bottom:8px;}
.vpc-collphoto-cover{display:block;width:100%;max-height:60vh;object-fit:contain;border-radius:12px;background:var(--vpc-bg);}
.vpc-collphoto-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(20,25,35,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s;}
.vpc-collphoto-nav:hover{background:rgba(20,25,35,.72);}
.vpc-collphoto-nav.prev{left:10px;}
.vpc-collphoto-nav.next{right:10px;}
.vpc-collphoto-nav.prev svg{transform:rotate(180deg);}
.vpc-collphoto-count{position:absolute;right:12px;bottom:10px;background:rgba(20,25,35,.6);color:#fff;font-size:11px;border-radius:999px;padding:2px 9px;}
.vpc-collphoto-strip{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;}
.vpc-collphoto-th{flex:0 0 auto;width:76px;height:50px;border-radius:7px;border:0;padding:0;background-size:cover;background-position:center;background-color:#DDE4D6;cursor:pointer;opacity:.7;transition:.14s;}
.vpc-collphoto-th:hover{opacity:1;}
.vpc-collphoto-th.on{opacity:1;outline:2px solid var(--vpc-accent);}
/* Add-routes-to-set browser */
.vpc-setadd-seg{margin-bottom:12px;}
.vpc-setadd-seg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--vpc-muted);border:0;background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.vpc-setadd-seg button.on{background:var(--vpc-accent);color:#fff;}
.vpc-setadd-seg button.on svg{color:#fff;}
.vpc-setadd-srch{position:relative;display:flex;align-items:center;margin-bottom:10px;}
.vpc-setadd-srch>svg{position:absolute;left:11px;width:15px;height:15px;color:var(--vpc-faint);pointer-events:none;}
.vpc-setadd-srch input{width:100%;font:inherit;font-size:13.5px;color:var(--vpc-text);background:var(--vpc-line);border:1px solid transparent;border-radius:10px;padding:9px 34px 9px 33px;outline:none;}
.vpc-setadd-srch input:focus{background:#fff;border-color:var(--vpc-accent);}
.vpc-setadd-srch input::placeholder{color:var(--vpc-faint);}
.vpc-setadd-srch-x{position:absolute;right:7px;width:24px;height:24px;display:none;place-items:center;background:none;border:0;border-radius:7px;color:var(--vpc-faint);font-size:13px;cursor:pointer;}
.vpc-setadd-srch-x:hover{background:var(--vpc-border);color:var(--vpc-text);}
.vpc-setadd-srch.has-val .vpc-setadd-srch-x{display:grid;}
.vpc-setadd-list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.vpc-setadd-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;cursor:pointer;transition:.12s;}
.vpc-setadd-row:hover{background:var(--vpc-line);}
.vpc-setadd-row.added{opacity:.6;cursor:default;}
.vpc-setadd-row input{width:18px;height:18px;flex:none;accent-color:var(--vpc-accent);cursor:pointer;}
.vpc-setadd-thumb{width:64px;height:42px;border-radius:8px;overflow:hidden;flex:none;background:#DDE4D6;position:relative;}
.vpc-setadd-thumb .vpc-fill{position:absolute;inset:0;}
.vpc-setadd-thumb svg,.vpc-setadd-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vpc-setadd-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.vpc-setadd-nm{font-size:13.5px;font-weight:600;color:var(--vpc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vpc-setadd-sub{font-size:12px;color:var(--vpc-muted);display:flex;align-items:center;}
.vpc-setadd-added{flex:none;font-size:10.5px;font-weight:700;color:#15803D;background:#E7F4EC;border-radius:999px;padding:2px 8px;}
.vpc-setadd-count{font-size:12.5px;color:var(--vpc-muted);margin-right:auto;}
/* Sets — new set inline form */
.vpc-set-newform{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.vpc-set-nameinput{flex:1;min-width:160px;border:1px solid var(--vpc-border);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;outline:none;}
.vpc-set-nameinput:focus{border-color:var(--vpc-accent);box-shadow:0 0 0 3px rgba(232,64,28,.1);}
/* Sets — Add-to-set sheet (bottom sheet / centered modal) */
.vpc-set-scrim{align-items:center!important;}
.vpc-set-sheet{background:#fff;border-radius:16px;width:100%;max-width:440px;box-shadow:0 16px 50px rgba(0,0,0,.22);overflow:hidden;}
.vpc-set-sheet-list{max-height:280px;overflow-y:auto;padding:6px 14px;}
.vpc-set-check-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--vpc-line);cursor:pointer;font-size:14px;}
.vpc-set-check-row:last-child{border-bottom:0;}
.vpc-set-check-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--vpc-accent);flex:none;}
.vpc-set-check-row span:nth-child(2){flex:1;font-weight:600;color:var(--vpc-text);}
.vpc-set-check-count{font-size:12px;color:var(--vpc-faint);}
.vpc-set-sheet-new{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--vpc-line);}
.vpc-set-sheet-new input{flex:1;border:1px solid var(--vpc-border);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;outline:none;}
.vpc-set-sheet-new input:focus{border-color:var(--vpc-accent);box-shadow:0 0 0 3px rgba(232,64,28,.1);}

/* modals (detail + publish) */
.vpc-scrim{position:fixed;top:58px;left:0;right:0;bottom:0;background:rgba(20,25,35,.5);display:none;align-items:flex-start;justify-content:center;z-index:4100;padding:26px 16px;overflow:auto;}
@media(max-width:767px){.vpc-scrim{top:54px;}}
.vpc-scrim.on{display:flex;}
/* Route detail must stack ABOVE the collection viewer when opened from inside it
   (both are .vpc-scrim, but the detail markup is earlier in the DOM). */
#vpcDetailScrim{z-index:4200;}
.vpc-modal{width:560px;max-width:100%;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.25);overflow:hidden;}
.vpc-modal.lg{width:840px;}
.vpc-mh{display:flex;justify-content:space-between;align-items:center;padding:16px 19px;border-bottom:1px solid var(--vpc-line);}
.vpc-mh h3{margin:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;margin-right:10px;}
.vpc-mh .vpc-x2{width:30px;height:30px;border-radius:9px;border:1px solid var(--vpc-border);background:#fff;color:var(--vpc-muted);cursor:pointer;flex:none;}
/* Back-to-list pill in the route-detail header — mobile/app only; desktop keeps the ✕. */
.vpc-dback{display:none;align-items:center;gap:5px;flex:none;margin-right:10px;border:1px solid var(--vpc-border);background:#fff;color:#1A1D23;border-radius:999px;padding:6px 12px 6px 9px;font:600 13.5px system-ui,sans-serif;cursor:pointer;}
.vpc-dback svg{flex:none;}
.is-native #vpcDetailScrim .vpc-dback{display:inline-flex;}
.is-native #vpcDetailScrim .vpc-mh .vpc-x2{display:none;}
/* Native app: push every overlay below the safe-area app header so its top controls (back/✕) aren't occluded. */
.is-native .vpc-scrim{top:calc(54px + env(safe-area-inset-top)) !important;}
/* Mobile: the collection header has two text buttons (Make own / Share) + close that
   crowd the title on one row → stack them. Title (+ top-right ✕) on top, buttons below. */
@media(max-width:600px){
  #vpcCollScrim .vpc-mh{flex-wrap:wrap;align-items:flex-start;position:relative;padding-right:52px;}
  #vpcCollScrim .vpc-mh>div:first-child{flex:1 1 100%;margin-right:0;min-width:0;}
  #vpcCollScrim .vpc-mh-actions{flex:1 1 100%;margin-left:0;margin-top:11px;}
  #vpcCollScrim .vpc-mh-actions .vpc-btn{flex:1;justify-content:center;min-width:0;padding-left:8px;padding-right:8px;white-space:nowrap;}
  #vpcCollScrim .vpc-mh-actions .vpc-btn.primary{flex:2;}
  #vpcCollScrim .vpc-mh-actions .vpc-x2{position:absolute;top:15px;right:17px;}
}
/* Detail-modal title rename (owner) — pencil hugs the title; inline input on edit */
.vpc-dtitle-wrap{display:flex;align-items:center;gap:7px;flex:1;min-width:0;margin-right:10px;}
.vpc-dtitle-wrap h3{flex:0 1 auto;margin-right:0;}
.vpc-dtitle-edit{flex:none;border:0;background:transparent;color:var(--vpc-muted);cursor:pointer;padding:3px;border-radius:6px;display:inline-flex;}
.vpc-dtitle-edit:hover{color:var(--vpc-accent);background:var(--vpc-line);}
.vpc-dtitle-input{flex:1;min-width:0;font:inherit;font-size:15px;font-weight:700;padding:5px 9px;border:1px solid var(--vpc-accent);border-radius:8px;outline:0;}
.vpc-dtitle-ok,.vpc-dtitle-cancel{flex:none;border:0;background:transparent;cursor:pointer;padding:3px 7px;border-radius:6px;font-size:15px;line-height:1;display:inline-flex;align-items:center;}
.vpc-dtitle-ok{color:#15803D;}
.vpc-dtitle-ok:hover{background:#E2F3DE;}
.vpc-dtitle-cancel{color:var(--vpc-muted);}
.vpc-dtitle-cancel:hover{background:var(--vpc-line);}
.vpc-mb{padding:18px 19px;display:flex;flex-direction:column;gap:15px;}
.vpc-detail{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;}
@media(max-width:720px){.vpc-detail{grid-template-columns:1fr;}}
.vpc-panel{background:#fff;border:1px solid var(--vpc-border);border-radius:var(--vpc-r);padding:16px;}
#vpcDBadges{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px;text-align:left;}
.vpc-dmap{height:330px;border-radius:var(--vpc-r);overflow:hidden;border:1px solid var(--vpc-border);}
.vpc-dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:13px 0;}
.vpc-dfacts{display:none;}
.vpc-dfacts-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--vpc-faint);margin-bottom:11px;}
.vpc-dfacts-meta>span{display:inline-flex;align-items:center;gap:4px;}
.vpcf-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.vpcf-cell{background:rgba(20,22,26,.045);border-radius:10px;padding:11px 6px;text-align:center;}
.vpcf-cell-lbl{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--vpc-faint);}
.vpcf-cell-lbl .vpc-ic{width:14px;height:14px;flex:none;}
.vpcf-cell-val{font-size:18px;font-weight:800;margin-top:3px;}
.vpcf-cell-val small{font-size:11px;font-weight:600;color:var(--vpc-faint);}
@media (max-width:767px){.vpc-dfacts{display:block;}.vpc-detail #vpcDStats{display:none;}}
.vpc-trail-load{font-size:11px;color:var(--vpc-faint);padding:5px 0;}
.vpc-stat .v{font-size:18px;font-weight:800;}.vpc-stat .l{font-size:10.5px;font-weight:700;color:var(--vpc-faint);text-transform:uppercase;letter-spacing:.5px;}
.vpc-dactions{display:flex;flex-direction:column;gap:9px;}
/* C layout: hero + a calm list of settings-style rows */
.vpc-btn-pub{border-color:var(--vpc-accent)!important;color:var(--vpc-accent-d)!important;}
.vpc-btn-pub:hover{background:#FCE9E2!important;}
.vpc-drows{display:flex;flex-direction:column;border:1px solid var(--vpc-border);border-radius:12px;padding:4px;}
.vpc-drow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:var(--vpc-text);padding:11px 10px;border-radius:8px;cursor:pointer;transition:.13s;}
.vpc-drow:hover{background:var(--vpc-line);}
.vpc-drow-ic{flex:none;display:grid;place-items:center;color:var(--vpc-muted);}
.vpc-drow-lbl{flex:1;min-width:0;}
.vpc-drow-val{flex:none;color:var(--vpc-muted);font-weight:600;}
.vpc-drow > svg{flex:none;color:var(--vpc-faint);}
.vpc-drow .vpc-rpro{flex:none;}
.vpc-drow.liked{color:var(--vpc-accent-d);}
.vpc-drow.liked .vpc-drow-ic{color:var(--vpc-accent);}
.vpc-drow.liked .vpc-drow-ic svg{fill:var(--vpc-accent);}
.vpc-drow-pin .vpc-pin-sw{margin-left:auto;}
.vpc-drow.on .vpc-drow-ic{color:var(--vpc-accent);}
.vpc-drow.on .vpc-pin-sw{background:var(--vpc-accent);border-color:var(--vpc-accent);}
.vpc-drow.on .vpc-pin-knob{left:15px;background:#fff;}
.vpc-dactions-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vpc-faint);margin:4px 2px -3px;}
.vpc-dlnote{font-size:11px;color:var(--vpc-faint);line-height:1.5;margin:9px 2px 0;text-align:center;}
.vpc-like-row{display:flex;justify-content:center;margin-top:6px;}
.vpc-like-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:5px 10px;border-radius:999px;font-size:13px;font-family:inherit;color:var(--vpc-muted);transition:.15s;}
.vpc-like-btn:hover{background:#FCE9E2;color:var(--vpc-accent);}
.vpc-like-btn.liked{color:var(--vpc-accent);}
.vpc-like-btn.liked svg{fill:var(--vpc-accent);}
.vpc-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;}
.vpc-field label small{font-weight:500;color:var(--vpc-faint);}
.vpc-field input[type=text],.vpc-field textarea{width:100%;border:1px solid var(--vpc-border);border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;outline:0;}
.vpc-field input:focus,.vpc-field textarea:focus{border-color:var(--vpc-accent);}
.vpc-field textarea{resize:vertical;min-height:104px;line-height:1.5;}
.vpc-segchips{display:flex;gap:7px;flex-wrap:wrap;}
.vpc-segchips .vpc-chip{cursor:pointer;}
.vpc-pubmap{height:170px;border-radius:12px;overflow:hidden;border:1px solid var(--vpc-border);}
.vpc-toggle{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#F8FAF8;border:1px solid var(--vpc-line);border-radius:11px;padding:11px 13px;}
.vpc-toggle .tl{font-size:12.5px;font-weight:600;}.vpc-toggle .tl small{display:block;font-weight:500;color:var(--vpc-faint);margin-top:2px;}
.vpc-sw{width:42px;height:24px;border-radius:999px;background:var(--vpc-accent);position:relative;border:0;flex:none;cursor:pointer;}
.vpc-sw::after{content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;}
.vpc-sw.off{background:#CBD2D9;}.vpc-sw.off::after{right:20px;}
.vpc-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--vpc-muted);line-height:1.5;}
.vpc-mf{padding:14px 19px;border-top:1px solid var(--vpc-line);display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.vpc-mf .note{font-size:11.5px;color:var(--vpc-faint);}
/* "Publishing as @handle · change" chip in the publish footer */
.vpc-pubas{display:flex;align-items:center;gap:6px;margin-right:auto;min-width:0;font-size:12.5px;color:var(--vpc-muted);}
.vpc-pubas:empty{display:none;}
.vpc-pubas b{color:var(--vpc-text);font-weight:700;}
.vpc-pubas .vpc-av{margin-right:0;}
.vpc-pubas .vpc-handle-input{width:130px;}
.vpc-legend{display:flex;gap:16px;font-size:11.5px;color:var(--vpc-muted);font-weight:600;flex-wrap:wrap;}
.vpc-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px;}

/* My-routes row overflow menu (kebab) — demotes Unpublish below Details */
.vpc-rmenu{position:relative;}
.vpc-rkebab{width:34px;height:34px;border-radius:10px;border:1px solid var(--vpc-border);background:#fff;color:var(--vpc-muted);cursor:pointer;display:grid;place-items:center;}
.vpc-rkebab:hover{background:#FAFAFA;color:#374151;}
.vpc-rmenu-pop{display:none;position:absolute;top:40px;right:0;background:#fff;border:1px solid var(--vpc-border);border-radius:11px;box-shadow:0 12px 30px rgba(20,25,35,.16);padding:5px;min-width:204px;z-index:20;}
.vpc-rmenu-pop.open{display:block;}
.vpc-rmi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;font-size:13px;color:#374151;padding:8px 11px;border-radius:8px;cursor:pointer;text-align:left;}
.vpc-rmi:hover{background:#F3F4F6;}
.vpc-rmi.danger{color:#B91C1C;}
.vpc-rmi.danger:hover{background:#FEE2E2;}
.vpc-rmi-ic{flex:none;display:grid;place-items:center;color:#475569;}
.vpc-rmi-tx{display:flex;flex-direction:column;line-height:1.2;font-weight:700;}
.vpc-rmi-tx small{font-weight:400;font-size:10.5px;color:var(--vpc-faint);margin-top:1px;}
.vpc-rpro{margin-left:auto;align-self:center;font-size:8.5px;font-weight:800;letter-spacing:.3px;color:#7C3AED;background:#EDE9FE;border-radius:4px;padding:2px 5px;}
.vpc-rmi.locked{color:var(--vpc-faint);}
.vpc-rmi.locked .vpc-rmi-ic{color:var(--vpc-faint);}
.vpc-rsep{height:1px;background:var(--vpc-line,#F1F2F4);margin:4px 6px;}

/* ── waypoints panel (detail overlay, below the map) ── */
.vpc-wp{margin-top:14px;background:#fff;border:1px solid var(--vpc-border);border-radius:14px;padding:12px 13px 6px;}
.vpc-wp-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin:0 0 8px;}
.vpc-wp-h svg{color:#475569;}
.vpc-wp-n{font-size:11px;font-weight:700;color:var(--vpc-muted);background:var(--vpc-line,#F1F2F4);border-radius:999px;padding:1px 8px;}
.vpc-wp-row{display:flex;align-items:center;gap:10px;padding:7px 2px;}
.vpc-wp-row + .vpc-wp-row{border-top:1px solid var(--vpc-line,#F1F2F4);}
.vpc-wp-ic{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;background:#F4F6F4;color:#475569;}
.vpc-wp-ic.water{background:#E6F0FB;color:#1D4ED8;}
.vpc-wp-ic.food{background:#FDEAD7;color:#9A3412;}
.vpc-wp-ic.summit{background:#E7F4EC;color:#15803D;}
.vpc-wp-ic.view{background:#F3ECFE;color:#7C3AED;}
.vpc-wp-ic.warn{background:#FDE7E7;color:#B91C1C;}
.vpc-wp-main{min-width:0;flex:1;}
.vpc-wp-nm{font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vpc-wp-ty{font-size:10.5px;color:var(--vpc-faint);margin-top:1px;}
.vpc-wp-km{font-size:11.5px;font-weight:700;color:var(--vpc-muted);flex:none;}
.vpc-wp-list{padding-bottom:6px;}
.vpc-wp-ph{height:9px;width:62%;border-radius:5px;background:#E6E9ED;}
.vpc-wp-ph.sm{height:7px;width:38%;margin-top:5px;background:#EEF1F4;}
.vpc-wp-teaser{position:relative;}
.vpc-wp-locked{filter:blur(3px);opacity:.55;pointer-events:none;user-select:none;}
.vpc-wp-gate{position:absolute;left:0;right:0;bottom:0;top:38%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 60%);padding:0 10px 8px;text-align:center;}
.vpc-wp-lk{width:30px;height:30px;border-radius:50%;background:#F3ECFE;color:#7C3AED;display:grid;place-items:center;}
.vpc-wp-gate p{margin:0;font-size:11.5px;color:#374151;font-weight:600;line-height:1.35;}
.vpc-wp-gate .vpc-btn{padding:8px 14px;}

/* my handle bar (My routes) */
.vpc-myhandle{font-size:12.5px;color:var(--vpc-muted);margin:0 2px 14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.vpc-myhandle:empty{display:none;}
.vpc-myhandle b{color:var(--vpc-text);font-weight:700;}
.vpc-handle-edit{border:0;background:transparent;color:var(--vpc-accent-d);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;padding:0 2px;}
.vpc-handle-at{color:var(--vpc-faint);font-weight:700;}
.vpc-handle-input{border:1px solid var(--vpc-border);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px;outline:0;width:180px;}
.vpc-handle-input:focus{border-color:var(--vpc-accent);}

/* comments */
.vpc-comments{margin-top:4px;}
.vpc-cmt-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:0 0 14px;}
.vpc-cmt-n{color:var(--vpc-faint);font-weight:600;}
.vpc-av.sm{width:30px;height:30px;font-size:12px;}
.vpc-cmt-new{display:flex;gap:10px;margin-bottom:16px;}
.vpc-cmt-new textarea{width:100%;border:1px solid var(--vpc-border);border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;outline:0;resize:vertical;min-height:42px;}
.vpc-cmt-new textarea:focus{border-color:var(--vpc-accent);}
.vpc-cmt-gate{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F8FAF8;border:1px solid var(--vpc-line);border-radius:10px;padding:12px 13px;font-size:12.5px;color:var(--vpc-muted);margin-bottom:16px;}
.vpc-cmt{display:flex;gap:10px;margin-bottom:14px;}
.vpc-cmt-body{min-width:0;flex:1;}
.vpc-cmt-top{display:flex;align-items:baseline;gap:8px;}
.vpc-cmt-nm{font-size:13px;font-weight:700;}
.vpc-cmt-ago{font-size:11.5px;color:var(--vpc-faint);}
.vpc-cmt-tx{font-size:13.5px;color:#374151;line-height:1.5;margin:2px 0 0;white-space:pre-wrap;word-break:break-word;}
.vpc-cmt-acts{display:flex;gap:14px;margin-top:5px;font-size:11.5px;color:var(--vpc-muted);font-weight:600;}
.vpc-cmt-acts span{display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.vpc-cmt-like.on{color:var(--vpc-accent-d);}
.vpc-cmt-del:hover{color:#B91C1C;}

/* Route-detail extras: elevation profile + climbs (rendered from stored detail) */
.vpc-dlabel{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vpc-faint);margin:0 0 9px;}
/* Roomier rhythm between the left-column detail sections (elevation, surface, trail,
   waypoints, climbs) — a hairline divider + breathing space above each non-empty one. */
.vpc-detail #vpcDElev:not(:empty),
.vpc-detail #vpcDSurf:not(:empty),
.vpc-detail #vpcDWaypoints:not(:empty),
.vpc-detail #vpcDClimbs:not(:empty),
#vpcDSurf #vpcDTrail{margin-top:20px;padding-top:18px;border-top:0.5px solid var(--vpc-line);}
.vpc-elev{display:block;border-radius:6px;}
.vpc-climb{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:0.5px solid rgba(0,0,0,.07);}
.vpc-climb:first-of-type{border-top:none;}
.vpc-cnum{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.vpc-cbody{flex:1;min-width:0;color:var(--vpc-muted);font-size:12px;}
.vpc-climbs-banner{margin:6px 0 2px;background:var(--vpc-surface);border-radius:var(--vpc-r);padding:7px 11px;display:flex;align-items:center;justify-content:space-between;}
.vpc-climbs-banner span{font-size:12px;color:var(--vpc-muted);}
.vpc-climbs-show{font-size:12px;font-weight:600;color:var(--vpc-brand);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:3px;padding:0;}
.vpc-cgrade{font-size:13px;font-weight:600;flex-shrink:0;}
.vpc-sbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-bottom:7px;}
.vpc-sbar span{display:block;height:100%;}
.vpc-sleg{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--vpc-muted);}
.vpc-sdot{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:1px;margin-right:4px;}
.vpc-ssub{font-size:11.5px;color:var(--vpc-muted);margin-top:6px;}

/* Tour overview (multi-day collection) — side-by-side on wider panels */
.vpc-tour-overview{display:flex;gap:16px;margin:0 0 20px;align-items:flex-start;}
.vpc-tour-map{flex:0 0 55%;min-width:0;height:240px;border-radius:10px;overflow:hidden;background:var(--vpc-line);position:relative;}

/* Expand-to-lightbox button on overview / detail maps */
.vpc-tour-map,#vpcDetailMap{position:relative;}
.vpc-map-expand{position:absolute;bottom:8px;right:8px;z-index:5;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff;border:0.5px solid rgba(0,0,0,.22);border-radius:6px;cursor:pointer;color:#1c1c1c;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.vpc-map-expand:hover{background:#f3f4f6;}
.vpc-map-expand:active{transform:scale(.96);}

/* Fullscreen map lightbox */
.vpc-maplb{position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:24px;}
.vpc-maplb.on{display:flex;}
.vpc-maplb-inner{position:relative;width:100%;max-width:1100px;height:88vh;background:var(--vpc-line);border-radius:12px;overflow:hidden;}
.vpc-maplb-map{position:absolute;inset:0;width:100%;height:100%;}
.vpc-maplb-x{position:absolute;top:12px;left:12px;z-index:3;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#fff;border:0.5px solid rgba(0,0,0,.22);border-radius:7px;cursor:pointer;color:#1c1c1c;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.vpc-maplb-x:hover{background:#f3f4f6;}
.vpc-maplb-legend{position:absolute;left:14px;bottom:14px;z-index:3;background:rgba(255,255,255,.95);border:0.5px solid rgba(0,0,0,.12);border-radius:8px;padding:9px 12px;font-size:12px;max-width:72%;color:#1c1c1c;}
.vpc-maplb-leg-title{font-weight:600;margin-bottom:5px;}
.vpc-maplb-leg-days{display:flex;gap:14px;flex-wrap:wrap;}
.vpc-maplb-leg-day{display:flex;align-items:center;gap:5px;}
.vpc-maplb-leg-sw{width:9px;height:9px;border-radius:50%;display:inline-block;}
@media(max-width:600px){.vpc-maplb{padding:10px;}.vpc-maplb-inner{height:92vh;}.vpc-maplb-legend{max-width:88%;}}
.vpc-tour-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.vpc-tour-totals{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--vpc-text);padding:0 0 10px;border-bottom:1px solid var(--vpc-line);}
.vpc-tour-totals-sep{color:var(--vpc-faint);font-weight:400;}
.vpc-tour-stages{display:flex;flex-direction:column;gap:0;margin-top:4px;}
.vpc-tour-day{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--vpc-line);font-size:13px;}
.vpc-tour-day:last-child{border-bottom:none;}
.vpc-tour-day-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.vpc-tour-day-label{font-weight:600;color:var(--vpc-text);min-width:44px;}
.vpc-tour-day-stats{color:var(--vpc-muted);flex:1;}
.vpc-tour-day-open{margin-left:auto;font-size:12px;color:var(--vpc-accent);font-weight:600;cursor:pointer;background:none;border:none;padding:2px 6px;border-radius:5px;}
.vpc-tour-day-open:hover{background:var(--vpc-line);}
/* stack on narrow panels / mobile */
@media(max-width:600px){
  .vpc-tour-overview{flex-direction:column;}
  .vpc-tour-map{flex:none;width:100%;height:200px;}
}