/* First-run walkthrough. Sits above every app layer (highest in-app z-index
   is 80) but below nothing it needs to cover. */
.ob[hidden] {
    display: none;
}

/* Freeze the page behind the tour: no background scrolling, no rubber-banding
   on iOS. The tour still scrolls targets into view programmatically, which
   these rules don't block. */
body.ob-active {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

/* Examples and notes may still need to scroll inside the card. */
body.ob-active .ob-extras {
    touch-action: pan-y;
}

.ob-blocker {
    position: fixed;
    inset: 0;
    z-index: 900;
    /* Transparent on its own - the dim comes from the spotlight's ring shadow
       so there is exactly one darkened surface and no seams. */
    background: transparent;
}

/* The "hole": a transparent box whose enormous spread shadow dims everything
   outside it. One element, so moving it animates the whole spotlight. */
.ob-spotlight {
    position: fixed;
    z-index: 901;
    pointer-events: none;
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 9999px rgba(2, 6, 23, 0.74),
        0 0 0 2px var(--accent) inset;
    transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.ob-spotlight[hidden] {
    display: none;
}

/* With no target there is no hole, so the blocker itself carries the dim.
   Driven by a root class because .ob-blocker precedes the tooltip in the DOM
   and sibling combinators only look forward. */
.ob.ob-no-target .ob-blocker {
    background: rgba(2, 6, 23, 0.74);
}

.ob-tooltip {
    position: fixed;
    z-index: 910;
    width: min(340px, calc(100vw - 24px));
    /* Short viewports (landscape phones) can be shorter than a step with
       several examples - scroll inside the card rather than overflowing it
       off-screen where the buttons become unreachable. */
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 1.1rem 1.15rem 1rem;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.65);
    animation: ob-in 0.22s ease both;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Final step / unresolvable target: park the card in the middle. Physical
   `left` on purpose - `inset-inline-start` resolves to `right` in RTL, which
   combined with translateX(-50%) throws the card off the edge. */
.ob-tooltip.is-centred {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: none;
}

@keyframes ob-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.ob-tooltip.is-centred {
    animation: ob-in-centred 0.22s ease both;
}

@keyframes ob-in-centred {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ob-spotlight, .ob-tooltip { transition: none; animation: none; }
}

.ob-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ob-progress {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ob-skip {
    background: none;
    border: none;
    padding: 0.15rem 0.2rem;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
}

.ob-skip:hover {
    color: var(--text-main);
}

.ob-skip[hidden] {
    display: none;
}

.ob-section-kicker {
    margin: 0 0 0.28rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.ob-section-kicker[hidden] {
    display: none;
}

body.ob-active .timeline-sidebar {
    transition: none;
}

body.ob-active .tab-bar {
    z-index: 905;
    pointer-events: none;
}

.tab-btn.ob-section-on {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent);
}

#accountBtn.ob-section-on,
#txtAccountHeading.ob-section-on {
    box-shadow: 0 0 0 2px var(--accent);
    border-radius: 10px;
}

.ob-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.ob-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.ob-head,
.ob-section-kicker,
.ob-title,
.ob-body,
.ob-dots,
.ob-actions {
    flex-shrink: 0;
}

.ob-extras {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ob-extras[hidden] {
    display: none;
}

.ob-examples {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Quoted user phrasing - the core "just say it" idea, so it reads as speech. */
.ob-example {
    font-size: 0.8rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--text-main);
    background-color: var(--accent-soft);
    border-inline-start: 2px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.4rem 0.6rem;
}

[dir="rtl"] .ob-example {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.ob-flow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ob-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    color: var(--entity-place);
    background-color: color-mix(in srgb, var(--entity-place) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--entity-place) 35%, transparent);
}

.ob-flow-chip--fire {
    color: var(--idle);
    background-color: var(--idle-soft);
    border-color: color-mix(in srgb, var(--idle) 35%, transparent);
}

/* Bare glyph, so mirroring it in RTL is safe (no text alongside it). */
.ob-flow-arrow {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: inline-block;
    unicode-bidi: isolate;
    direction: ltr;
}

[dir="rtl"] .ob-flow-arrow {
    transform: scaleX(-1);
}

.ob-note {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.ob-dots {
    display: flex;
    gap: 0.3rem;
    margin: 0.9rem 0 0.8rem;
}

.ob-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--border);
    transition: background-color 0.2s ease, width 0.2s ease;
}

.ob-dot.is-done {
    background-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.ob-dot.is-current {
    width: 18px;
    border-radius: 999px;
    background-color: var(--accent);
}

.ob-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ob-btn {
    font-size: 0.82rem;
    padding: 0.45rem 0.9rem;
}

.ob-btn[hidden] {
    display: none;
}

/* Back sits opposite the forward actions, mirroring in RTL. */
#obBackBtn {
    margin-inline-end: auto;
}

@media (max-width: 1050px) {
    .ob-tooltip {
        max-height: calc(100dvh - 24px - 64px - env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 400px) {
    .ob-tooltip {
        padding: 0.9rem 0.95rem 0.85rem;
    }

    .ob-title {
        font-size: 0.98rem;
    }

    /* Stacked buttons would push the card taller than a small viewport, so
       keep them in a row and let Back keep its own edge. */
    .ob-btn {
        padding: 0.42rem 0.7rem;
        font-size: 0.78rem;
    }
}