/* FIRST SHIFT tour + SAVED VIEWS panel + layer loading feedback (wow/tour.js, wow/views.js) */

/* the "..." menu is where VIEWS / SHARE VIEW / REPLAY TOUR live, so it is always visible (it used to appear only when the toolbar folded) */
#b-more.wt-more{display:grid}

/* ---------- tour ---------- */
#wt{position:fixed;inset:0;z-index:120;pointer-events:none}
#wt .wt-block{position:absolute;inset:0;pointer-events:auto;background:transparent;cursor:default}
#wt .wt-spot{position:fixed;border:1px solid var(--cy2);box-shadow:0 0 0 100vmax var(--m-dim),0 0 26px 2px color-mix(in srgb,var(--cy) 55%,transparent),inset 0 0 18px color-mix(in srgb,var(--cy) 25%,transparent);pointer-events:none;transition:left .28s,top .28s,width .28s,height .28s}
#wt .wt-spot::after{content:"";position:absolute;inset:-5px;border:1px dashed color-mix(in srgb,var(--cy2) 55%,transparent);animation:wt-pulse 1.6s ease-in-out infinite}
@keyframes wt-pulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.9;transform:scale(1.02)}}
#wt .wt-spot[hidden]{display:none}
/* no spotlight (centered welcome card): dim the whole screen instead */
#wt .wt-spot[hidden]~.wt-card{box-shadow:0 0 0 100vmax var(--m-dim),0 0 36px color-mix(in srgb,var(--cy) 35%,transparent)}
#wt .wt-card{position:fixed;width:340px;max-width:calc(100vw - 24px);background:var(--m-solid);border:1px solid var(--cy);box-shadow:var(--glow-cy),var(--shadow);padding:14px 16px 14px;pointer-events:auto;transition:left .28s,top .28s,opacity .2s}
#wt .wt-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--cy)}
#wt .wt-card.wt-wait{opacity:.55}
#wt .wt-card.wt-in .wt-h,#wt .wt-card.wt-in .wt-b{animation:wt-in .28s ease-out}
@keyframes wt-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wt-top{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;letter-spacing:.3em;color:var(--cy);margin-bottom:6px}
.wt-n{color:var(--dim);letter-spacing:.14em}
.wt-h{font:700 19px var(--hd);letter-spacing:.2em;color:var(--m-hi);margin-bottom:6px}
.wt-b{font-size:12px;line-height:1.55;color:var(--m-ink2);letter-spacing:.03em;margin-bottom:12px}
.wt-dots{display:flex;gap:5px;margin-bottom:12px}
.wt-dots i{flex:1;height:3px;background:var(--line2)}.wt-dots i.past{background:color-mix(in srgb,var(--cy) 50%,transparent)}.wt-dots i.on{background:var(--cy2);box-shadow:0 0 6px var(--cy)}
.wt-act{display:flex;align-items:center;gap:8px}.wt-sp{flex:1}
.wt-act .btn{min-height:34px}.wt-next{padding:7px 18px}
.wt-skip{color:var(--dim);border-color:transparent;background:none}

/* ---------- saved views panel ---------- */
#wt-views{right:calc(var(--g) + 8px);top:calc(var(--topy) + var(--toph) + 14px);width:330px;max-height:calc(100vh - var(--topy) - var(--toph) - var(--botb) - var(--both) - 40px);overflow:auto;padding:14px;z-index:41;box-shadow:0 0 28px color-mix(in srgb,var(--cy) 20%,transparent)}
#wt-views[hidden]{display:none}
.wv-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wv-h b{font:700 15px var(--hd);letter-spacing:.24em;color:var(--cy2)}
.wv-x{border:1px solid var(--line);padding:3px 8px;font-size:9.5px;letter-spacing:.16em;color:var(--dim)}
.wv-save{display:flex;gap:6px}
.wv-save input{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);padding:7px 9px;color:var(--ink);font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.wv-save input:focus{border-color:var(--cy);outline:0}
.wv-note{font-size:9.5px;color:var(--dim);letter-spacing:.1em;margin:6px 0 10px}
.wv-list{display:flex;flex-direction:column;gap:6px}
.wv-row{display:flex;align-items:center;gap:5px;border:1px solid var(--line2);background:var(--panel);padding:7px 7px 7px 10px;border-left:2px solid var(--cy)}
.wv-t{flex:1;min-width:0}.wv-t b{display:block;font:600 13px var(--hd);letter-spacing:.14em;color:var(--m-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wv-t small{display:block;font-size:10px;letter-spacing:.08em;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wv-empty{border:1px dashed var(--line);padding:12px;font-size:10.5px;line-height:1.5;color:var(--dim);letter-spacing:.06em}
.wv-foot{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}

/* ---------- layer loading feedback ---------- */
.lcard.wt-ld{position:relative}
.wt-ldx{display:flex;align-items:center;gap:8px;padding:0 10px 8px;font-size:10px;letter-spacing:.16em;color:var(--warn)}
.wt-ldx i{position:relative;flex:1;height:3px;background:color-mix(in srgb,var(--warn) 15%,transparent);overflow:hidden}
.wt-ldx i::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,var(--warn),transparent);animation:wt-ld 1.15s linear infinite}
.wt-ldx span{flex:none}
@keyframes wt-ld{from{left:-40%}to{left:100%}}
#rail button.wt-ldr,#catstrip button.wt-ldr{animation:wt-rail 1.2s ease-in-out infinite}
@keyframes wt-rail{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 15%,transparent)}50%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 80%,transparent)}}
@media (prefers-reduced-motion:reduce){#wt .wt-spot::after,.wt-ldx i::after,#rail button.wt-ldr,#catstrip button.wt-ldr{animation:none}.wt-ldx i::after{left:0;width:100%;opacity:.6}}

/* ---------- phone: tour card + views as bottom sheets ---------- */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  #wt .wt-card{padding:12px 14px;box-shadow:0 0 26px color-mix(in srgb,var(--cy) 30%,transparent)}
  .wt-h{font-size:17px;margin-bottom:4px}.wt-b{font-size:12px;margin-bottom:10px}.wt-dots{margin-bottom:10px}
  .wt-act .btn{min-height:40px}.wt-next{flex:1;max-width:48%}
  #wt-views{left:0;right:0;width:auto;top:auto;bottom:calc(var(--botb) + var(--both) + 52px);max-height:56vh;border-width:1px 0 0;padding:12px var(--g) 14px}
  .wv-save input{font-size:16px;padding:9px}
  .wv-row .btn{min-height:36px;padding:4px 10px}
  /* an open views sheet hides the floating bottom-row pills, same as the layer / inspect sheets */
  body.wtv-open #inc-tab,body.wtv-open #qs{display:none}
  body.wtv-open .nr[data-open="0"] .nr-tab{display:none!important}
}
/* CJ 10/13 polish: daylight tour card is opaque paper (the tab strip read through the glass) */
html[data-theme="light"] #wt .wt-card{background:#fbfdfe}