/* Planner tour: a ring around the part being explained and a bubble pointing at it.
   Uses the planner's colour tokens (--ink, --paper, --cap, --rule). */
.tour-ring {
    position: absolute;
    z-index: 60;
    border-radius: 10px;
    box-shadow: 0 0 0 3px var(--cap), 0 0 0 9999px rgba(31, 42, 46, 0.28);
    pointer-events: none;
    transition: top 260ms cubic-bezier(0.16, 1, 0.3, 1), left 260ms cubic-bezier(0.16, 1, 0.3, 1),
        width 260ms cubic-bezier(0.16, 1, 0.3, 1), height 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-bubble {
    position: absolute;
    z-index: 61;
    width: min(340px, calc(100vw - 24px));
    padding: 16px 18px 14px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 18px 40px -12px rgba(31, 42, 46, 0.55);
    font-size: 15px;
    line-height: 1.5;
    animation: tour-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-bubble:focus { outline: none; }
.tour-bubble:focus-visible { outline: 2px solid var(--cap); outline-offset: 3px; }

.tour-bubble.docked {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
}

@keyframes tour-in {
    from { opacity: 0; transform: translateY(4px); }
}

.tour-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: var(--ink);
    transform: rotate(45deg);
}
.tour-arrow.up { top: -6px; }
.tour-arrow.down { bottom: -6px; }
.tour-arrow[hidden] { display: none; }

.tour-step { margin: 0; font-size: 12px; letter-spacing: 0.04em; color: #B9C6C1; }
.tour-bubble h2 { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.tour-bubble #tourText { margin: 6px 0 0; color: #E3E8E1; }

.tour-controls { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-controls button {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
}
.tour-skip { margin-right: auto; background: none; border: 0; padding-left: 0 !important; color: #B9C6C1; text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:hover { color: #fff; }
.tour-back { background: none; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.tour-back:hover { border-color: #fff; }
.tour-back[hidden] { display: none; }
.tour-next { background: #fff; border: 1px solid #fff; color: var(--ink); }
.tour-next:hover { background: var(--paper); }
.tour-controls button:focus-visible { outline: 2px solid var(--cap); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .tour-ring { transition: none; }
    .tour-bubble { animation: none; }
}

/* "Take the tour" in How the planner works */
.tour-again { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 6px; color: var(--ink-soft); }