/* SourceHub - guided tour of the staff realm (GUI/APP/tour.js) and its entry in the side menu.
   Ported from Krios' tour.css, without the music button: SourceHub has no sound. */

.sh-tour-layer { position: fixed; inset: 0; z-index: 2600; pointer-events: none; }
.sh-tour-blocker { position: absolute; inset: 0; pointer-events: auto; }
.sh-tour-spot
{
    position: absolute; border-radius: var(--sh-radius); box-shadow: 0 0 0 9999px rgba(14, 26, 38, .55);
    outline: 3px solid var(--sh-accent); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
    pointer-events: none;
}
.sh-tour-pop
{
    position: absolute; width: 380px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto;
    background: var(--sh-card); color: var(--sh-ink); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow), 0 10px 30px rgba(14, 26, 38, .18);
    padding: 1rem 1.125rem .875rem; pointer-events: auto; animation: sh-tour-pop .16s ease-out;
    transition: left .25s ease, top .25s ease;
}
.sh-tour-pop.sh-tour-center { width: 440px; }
.sh-tour-pop.sh-tour-waiting, .sh-tour-pop.sh-tour-leaving { visibility: hidden; }
@keyframes sh-tour-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sh-tour-count { font-size: .71875rem; font-weight: 700; color: var(--sh-accent-d); text-transform: uppercase; letter-spacing: .05em; }
.sh-tour-pop h3 { margin: .25rem 0 .375rem; font-size: 1.0625rem; font-weight: 700; }
.sh-tour-pop h3 i { color: var(--sh-accent); }
.sh-tour-pop p { margin: 0 0 .75rem; color: var(--sh-ink-2); line-height: 1.5; font-size: .90625rem; }
.sh-tour-actions { display: flex; gap: .375rem; align-items: center; flex-wrap: wrap; }
.sh-tour-actions .btn { cursor: pointer; }
.sh-tour-actions .sh-tour-exit { margin-right: auto; }

/* The one-time proposal offered at the first visit of each account (GUI/APP/tour.js#propose). */
.sh-tour-offer
{
    position: fixed; right: 1.125rem; bottom: 1.125rem; z-index: 1095; width: 340px; max-width: calc(100vw - 24px);
    background: var(--sh-card); color: var(--sh-ink); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow), 0 10px 30px rgba(14, 26, 38, .18);
    padding: .875rem 1rem; display: flex; gap: .625rem; align-items: flex-start;
    animation: sh-tour-pop .18s ease-out;
}
.sh-tour-offer > i { color: var(--sh-accent); font-size: 1.125rem; margin-top: .125rem; }
.sh-tour-offer-text { flex: 1; min-width: 0; }
.sh-tour-offer-text b { display: block; font-size: .875rem; }
.sh-tour-offer-text span { display: block; margin-top: .125rem; color: var(--sh-ink-3); font-size: .8125rem; line-height: 1.4; }
.sh-tour-offer-actions { display: flex; flex-direction: column; gap: .375rem; margin-top: .5rem; }

/* Phones and tablets: 44 px touch targets (DIRECTIVES C12); the card never needs horizontal
   scroll and the proposal docks full width at the bottom. */
@media (pointer: coarse)
{
    .sh-tour-actions .btn { min-height: 44px; }
}
@media (max-width: 575.98px)
{
    .sh-tour-pop, .sh-tour-pop.sh-tour-center { width: calc(100vw - 24px); }
    .sh-tour-offer { left: .75rem; right: .75rem; bottom: .75rem; width: auto; flex-direction: column; }
    .sh-tour-offer-actions { flex-direction: row; }
    .sh-tour-offer-actions .btn { flex: 1; min-height: 44px; }
}

/* The side-menu entry: same look as the real menu links above it (app.css .sh-side a), pushed
   to the foot of the menu with the demo-only "Campionario" entry, when that one is present. */
.sh-nav-tour { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--sh-line-2); }
.sh-nav-tour-btn
{
    display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 44px;
    padding: .55rem .625rem; border-radius: var(--sh-radius-sm); border: 0; background: none;
    font-size: .84375rem; color: var(--sh-ink-2); text-align: left; cursor: pointer;
}
.sh-nav-tour-btn:hover { background: var(--sh-canvas); }
.sh-nav-tour-btn i { width: 1.1em; text-align: center; color: var(--sh-ink-4); }