/* Guided intro tour overlay. Sits above every app layer (repo max is 20000);
   cut + blockers at 21000, card at 21001. See tour.js / spec-intro-tour.html. */

#tourroot{ position:fixed; inset:0; z-index:21000; pointer-events:none; }

/* transparent click-blockers around the cutout (shadows don't capture events) */
.tour-block{ position:fixed; z-index:21000; pointer-events:auto; background:transparent; display:none; }

/* one element gives both the hole and the dim scrim (huge spread shadow) + amber ring */
.tour-cut{
    position:fixed; z-index:21000; pointer-events:none; display:none;
    border:2px solid #ffb347; border-radius:9px;
    box-shadow:0 0 0 4px rgba(255,179,71,.28), 0 0 0 9999px rgba(10,14,22,.66);
    transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

/* tooltip card */
.tour-tip{
    position:fixed; z-index:21001; pointer-events:auto;
    width:300px; max-width:calc(100vw - 16px);
    background:#fff; color:#26303f; border-radius:11px; padding:13px 14px 12px;
    box-shadow:0 12px 34px rgba(0,0,0,.34);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:13px; line-height:1.45;
}
.tour-tip.tour-tip-dock{ width:auto; }
.tour-step{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#c47f16; }
.tour-tip h5{ margin:3px 0 5px; font-size:15px; color:#141a26; font-weight:700; }
.tour-tip p{ margin:0 0 11px; color:#45526a; }
.tour-tip em{ font-style:normal; font-weight:700; color:#26303f; }

.tour-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-dots{ display:flex; gap:5px; }
.tour-dot{ width:6px; height:6px; border-radius:50%; background:#d3d9e4; }
.tour-dot.on{ background:#ff8c1a; }
.tour-btns{ display:flex; gap:6px; }
.tour-b{ font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:8px; border:1px solid transparent;
    cursor:pointer; min-height:40px; }
.tour-b.ghost{ background:transparent; color:#7b8598; }
.tour-b.ghost:hover{ color:#45526a; }
.tour-b.pri{ background:#ff8c1a; color:#fff; }
.tour-b.pri:hover{ background:#f07d0a; }

.tour-skip{ position:absolute; top:9px; right:11px; font-size:11px; color:#9aa4b6; font-weight:600;
    background:transparent; border:0; cursor:pointer; padding:6px 8px; min-height:36px; }
.tour-skip:hover{ color:#6a7488; }

.tour-tail{ position:absolute; width:12px; height:12px; background:#fff; transform:rotate(45deg);
    display:none; box-shadow:-2px -2px 4px rgba(0,0,0,.04); }

.tour-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* first-run banner attention pulse (home tips card) */
@keyframes tourBannerPulse{
    0%   { box-shadow:0 0 0 0 rgba(255,140,26,.42); }
    70%  { box-shadow:0 0 0 10px rgba(255,140,26,0); }
    100% { box-shadow:0 0 0 0 rgba(255,140,26,0); }
}
.dh-tips.dh-tips-pulse{ animation:tourBannerPulse 2s ease-out 2; border-color:#ffd8a8; }

/* Help page "Take the tour" replay launcher — deliberately quiet (a subtle
   outline chip, not a loud orange CTA): the tour is a replay affordance here. */
.helptourbtn{
    display:inline-flex; align-items:center; gap:6px;
    background:transparent; color:#c47f16; border:1px solid #f0cf9a; border-radius:8px;
    font-size:13px; font-weight:600; padding:7px 13px; cursor:pointer; margin:2px 0 6px;
}
.helptourbtn:hover{ background:#fff6ea; border-color:#e6b877; }
.helptourbtn .ic{ width:15px; height:15px; opacity:.85; }

/* gated (logged-out / view-only) users: no replay entry point at all */
body.tour-noaccess .helptourbtn{ display:none; }

@media (min-width:561px){
    /* phone bottom-dock only kicks in below 560; on desktop keep the fixed width */
    .tour-tip{ width:300px; }
}
@media (max-width:560px){
    .tour-tip{ width:270px; font-size:12.5px; padding:12px 13px 11px; }
    .tour-tip h5{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
    .tour-cut{ transition:none; }
    .dh-tips.dh-tips-pulse{ animation:none; }
}