/* Employee Portal guided tours (ep-tour.js). Global, not scoped: the tour is appended to <body>. */
.ep-tour-root { position: fixed; inset: 0; z-index: 2000; }
.ep-tour-spot {
    position: fixed; border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 9999px rgba(23, 25, 30, 0.58);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.ep-tour-card {
    position: fixed; width: 360px; max-width: calc(100vw - 24px); background: #FFFFFF; color: #17191E;
    border-radius: 18px; padding: 16px 18px 14px; box-shadow: 0 20px 50px rgba(23, 25, 30, 0.3);
    display: flex; flex-direction: column; gap: 8px; font-family: inherit;
    transition: top 0.25s ease, left 0.25s ease; animation: ep-tour-in 0.18s ease-out;
}
.ep-tour-card.sheet { left: 12px; right: 12px; bottom: 12px; width: auto; top: auto !important; }
@keyframes ep-tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ep-tour-head { display: flex; align-items: center; gap: 8px; }
.ep-tour-badge { font-size: 12px; font-weight: 700; color: #2B59C3; background: #E7EDFB; border-radius: 999px; padding: 3px 9px; }
.ep-tour-name { font-size: 12px; font-weight: 600; color: #5E6470; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tour-x { border: none; background: transparent; font-size: 22px; line-height: 1; color: #5E6470; cursor: pointer; padding: 0 2px; }
.ep-tour-x:hover { color: #17191E; }
.ep-tour-title { margin: 2px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.ep-tour-text { margin: 0; font-size: 14px; line-height: 1.5; color: #3A3E46; }
.ep-tour-dots { display: flex; gap: 5px; margin-top: 2px; }
.ep-tour-dots span { width: 6px; height: 6px; border-radius: 3px; background: #D9D6CF; transition: width 0.2s; }
.ep-tour-dots span.on { width: 18px; background: #2B59C3; }
.ep-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ep-tour-never { margin-right: auto; border: none; background: transparent; color: #5E6470; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.ep-tour-back, .ep-tour-next { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ep-tour-back { margin-left: auto; border: 1px solid #E6E3DD; background: #FFFFFF; color: #17191E; }
.ep-tour-never + .ep-tour-back { margin-left: 0; }
.ep-tour-back:disabled { opacity: 0.45; cursor: default; }
.ep-tour-next { border: none; background: #2B59C3; color: #FFFFFF; }
.ep-tour-next:hover { filter: brightness(1.08); }
.ep-tour-card button:focus-visible { outline: 2px solid #2B59C3; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .ep-tour-spot, .ep-tour-card { transition: none; animation: none; }
}
.ep-tour-root.no-anim .ep-tour-spot, .ep-tour-root.no-anim .ep-tour-card { transition: none; }