/* A compact welcome tour leaves the real page visible behind each step. */
#welcome-tour { position:fixed; inset:auto 30px 30px auto; margin:0; width:450px; max-width:calc(100vw - 40px); max-height:calc(100dvh - 40px); padding:0; border:1px solid #dad9d0; border-radius:14px; background:#fff; box-shadow:0 14px 90px #0003; }
#welcome-tour::backdrop { background:rgba(30,32,23,.23); backdrop-filter:none; }
body[data-tour-page] { overflow:hidden; }
.tour-card { padding:24px 27px 22px; }
.tour-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tour-topline .eyebrow { font-size:8px; letter-spacing:1.5px; }
.tour-topline .icon-button { width:29px; height:29px; border-radius:50%; border-color:#ddd; }
.tour-heading { display:flex; align-items:center; gap:12px; margin:10px 0 13px; }
.tour-step-icon { display:grid; place-items:center; width:41px; height:41px; border-radius:50%; background:#eeefe7; color:#6d7358; }
.tour-heading p { font-size:10px; color:#999; }
#tour-title { font-family:var(--serif); font-size:31px; letter-spacing:-.5px; line-height:1.2; margin:0 0 12px; outline:none; }
.tour-copy { font-size:11px; line-height:1.9; color:#777; margin-bottom:19px; }
.tour-page-tiles { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.tour-page-tiles button { position:relative; text-align:left; padding:14px; border:1px solid #e1e1d8; border-radius:9px; background:#f7f7f3; min-height:112px; }
.tour-page-tiles button>span { display:block; color:#777f64; margin-bottom:11px; }
.tour-page-tiles strong { display:block; font-size:12px; font-weight:500; margin-bottom:5px; color:#333; }
.tour-page-tiles small { display:block; font-size:8px; color:#999; }
.tour-page-tiles button>svg { position:absolute; right:13px; top:15px; color:#888; }
.tour-page-tiles button:hover { background:#eeefe6; }
.tour-tips { display:grid; gap:11px; padding:0; margin:20px 0; list-style:none; }
.tour-tips li { display:flex; align-items:flex-start; gap:9px; font-size:11px; color:#666; line-height:1.75; }
.tour-tips svg { color:#899274; margin-top:3px; }
.tour-hint { font-size:10px; color:#92927f; line-height:1.8; margin:17px 0; }
.tour-dots { display:flex; gap:8px; justify-content:center; list-style:none; padding:0; margin:18px 0; }
.tour-dots button { border-radius:50%; width:23px; height:23px; font-size:8px; color:#999; background:#eee; border:1px solid transparent; }
.tour-dots button[aria-current] { color:#fff; background:#626b50; }
.tour-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #e5e5de; padding-top:18px; }
.tour-actions>div { display:flex; gap:8px; }
.tour-actions .button { font-size:10px; padding:9px 13px; min-height:37px; }
.tour-actions .text-link { font-size:10px; color:#999; }
.tour-mini-map { height:137px; overflow:hidden; position:relative; border-radius:10px; background:#eeeee6; }
.tour-mini-map>svg { width:100%; height:100%; }
.tour-mini-pin { position:absolute; top:25px; left:52%; border-radius:20px 20px 20px 2px; background:#7b826c; color:#fff; width:28px; height:28px; display:grid; place-items:center; }
.tour-mini-shop { position:absolute; bottom:13px; left:12px; right:12px; padding:11px; border-radius:7px; background:#fff; display:flex; gap:9px; align-items:center; box-shadow:0 2px 14px #0001; }
.tour-mini-shop>span:first-child { color:#8b917a; }
.tour-mini-shop>span:last-child { margin-left:auto; color:#8b917a; }
.tour-mini-shop strong { display:block; font-size:10px; font-weight:500; color:#555; }
.tour-mini-shop small { display:block; font-size:8px; color:#aaa; margin-top:4px; }
.tour-example-label { position:absolute; top:10px; left:12px; font-size:7px; letter-spacing:1px; text-transform:uppercase; padding:3px 6px; background:#fff; color:#8a8a7c; border-radius:3px; }
.tour-mini-discover { position:relative; height:144px; overflow:hidden; border-radius:10px; background:#222; }
.tour-mini-discover>img { position:absolute; width:100%; height:100%; object-fit:cover; opacity:.52; }
.tour-mini-discover>div { position:absolute; bottom:13px; left:16px; color:#fff; }
.tour-mini-discover>div>span { font-size:7px; letter-spacing:1.5px; }
.tour-mini-discover strong { display:block; font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.15; margin:7px 0; }
.tour-mini-discover small { font-size:7px; color:#ddd; }
.tour-mini-discover .tour-example-label { left:auto; right:10px; }
.tour-mini-haul { display:flex; flex-wrap:wrap; gap:0; background:#f4f4ef; border:1px solid #e3e3da; border-radius:10px; padding:12px; }
.tour-mini-haul>span { font-size:9px; display:flex; align-items:center; gap:5px; padding-bottom:10px; margin-right:16px; color:#666; }
.tour-mini-haul>div { display:flex; width:100%; gap:13px; align-items:center; padding-top:8px; border-top:1px solid #ddd; }
.tour-mini-haul img { width:64px; height:72px; border-radius:6px; flex-shrink:0; }
.tour-mini-haul small { font-size:6px; letter-spacing:.8px; color:#999; }
.tour-mini-haul strong { display:block; font-family:var(--serif); font-size:20px; font-weight:400; margin:4px 0; }
.tour-mini-haul p { font-size:8px; line-height:1.7; max-width:180px; color:#999; }
.tour-mini-profile { padding:3px 15px; background:#f6f5ef; border:1px solid #e5e3d9; border-radius:10px; }
.tour-mini-profile>div { display:flex; align-items:center; gap:10px; padding:14px 0; color:#8a9178; flex-wrap:wrap; }
.tour-mini-profile>div+div { border-top:1px solid #e1e0d6; }
.tour-mini-profile strong { display:block; font-size:10px; font-weight:500; color:#555; }
.tour-mini-profile small { display:block; font-size:8px; color:#999; margin-top:5px; }
.tour-mini-profile .tour-private { display:flex; align-items:center; gap:4px; margin-left:27px; font-size:7px; color:#8d8c7e; }
body[data-tour-page="map"] .main-nav a[data-page="map"],body[data-tour-page="discover"] .main-nav a[data-page="discover"],body[data-tour-page="haul"] .main-nav a[data-page="haul"],body[data-tour-page="for-you"] .main-nav a[data-page="for-you"] { outline:2px solid #9fa888; outline-offset:5px; background:#edf0e5; color:#444d33; border-radius:5px; }
.profile-aside .tour-replay-block { padding:17px; border:1px solid #e1e1d7; border-radius:10px; background:#f2f3ed; }
.tour-replay-block h3 { font-size:21px; margin:9px 0; }
.tour-replay-block .text-link { font-size:11px; }
@media(max-width:680px) {
  #welcome-tour { inset:auto 12px calc(83px + env(safe-area-inset-bottom,0px)) 12px; width:auto; max-width:none; max-height:calc(100dvh - 105px - env(safe-area-inset-bottom,0px)); }
  .tour-card { padding:19px 21px; }
  .tour-heading { margin:7px 0 12px; }
  #tour-title { font-size:28px; }
  .tour-copy { font-size:11px; line-height:1.75; margin-bottom:15px; }
  .tour-page-tiles button { padding:12px; min-height:99px; }
  .tour-mini-map,.tour-mini-discover { height:115px; }
  .tour-mini-discover strong { font-size:23px; }
  .tour-tips { gap:9px; margin:15px 0; }
  .tour-tips li { font-size:10px; }
  .tour-hint { font-size:9px; margin:14px 0; }
  .tour-dots { margin:15px 0; }
  .tour-actions { padding-top:14px; position:sticky; bottom:-1px; background:#fff; box-shadow:0 -9px 14px #fff; }
  .tour-actions .button { padding:9px 10px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { #welcome-tour { scroll-behavior:auto; } }