/* ---------------------------------------------------------------------------
   The guided page tour (js/page-tour.js draws it, PageTour.razor starts it).

   Colours come from the MudBlazor palette on :root, so a tour takes on each
   organization's theme.

   Sits above the side menu (1100), MudBlazor popovers (1200) and the app bar
   (1300), so the whole screen dims and the card is never tucked under the
   menu; and below snackbars (1500) and tooltips (1600). A tour is only started
   from the layout's button, which a dialog's backdrop (1400) covers.
   --------------------------------------------------------------------------- */

.tour-trigger.mud-button-root {
    align-self: center;
    margin: 0 4px;
    padding: 3px 10px;
    min-width: 0;
    height: 30px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    background: var(--mud-palette-surface);
}

.tour-trigger.mud-button-root:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }

.tour-trigger.is-running.mud-button-root {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
}

.tour-root {
    position: fixed;
    inset: 0;
    z-index: 1450;
    opacity: 0;
    transition: opacity .16s ease;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.tour-root.is-open { opacity: 1; }

/* Catches clicks on the dimmed page so nothing underneath can be used mid-tour. */
.tour-backdrop {
    position: absolute;
    inset: 0;
}

/* One element, one enormous shadow: everything outside the box is dimmed and
   the box itself stays untouched. On a step about the page the box shrinks to
   nothing in the middle and the shadow dims the whole screen. */
.tour-spot {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 200vmax rgba(17, 17, 32, .56);
    outline: 2px solid rgba(255, 255, 255, .95);
    transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease, outline-color .2s ease;
    pointer-events: none;
}

.tour-card {
    position: absolute;
    width: min(400px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(17, 17, 32, .32), 0 0 0 1px rgba(17, 17, 32, .06);
    padding: 14px 16px 10px;
    transition: top .2s ease, left .2s ease;
    outline: none;
}

.tour-card.is-centred { width: min(480px, calc(100vw - 24px)); }

.tour-card.is-nudged { animation: tour-nudge .32s ease; }

@keyframes tour-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.tour-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--mud-palette-surface);
    transform: rotate(45deg);
    margin: -6px 0 0 -6px;
}

.tour-arrow[hidden] { display: none; }

/* The card is below the target, so the arrow is on its top edge, and so on. */
.tour-arrow.is-bottom { top: 0; }
.tour-arrow.is-top { top: 100%; }
.tour-arrow.is-right { left: 0; }
.tour-arrow.is-left { left: 100%; }

.tour-card-head {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.tour-count {
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.tour-x {
    margin-left: auto;
    background: none;
    border: 0;
    border-radius: 4px;
    font-size: 22px;
    line-height: 1;
    /* Darker than the page's muted ink: at 22px this is not large text by the
       accessibility rules, so it needs 4.5 and var(--mud-palette-text-secondary) only reaches 4.4. */
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 0 4px;
}

.tour-x:hover { color: var(--mud-palette-text-primary); background: var(--mud-palette-background-gray); }

.tour-progress {
    height: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    overflow: hidden;
    margin-bottom: 12px;
}

.tour-progress-bar {
    height: 100%;
    width: 0;
    background: var(--mud-palette-primary);
    transition: width .2s ease;
}

.tour-card-title {
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.3;
    margin-bottom: 6px;
}

/* Long steps scroll inside the card; the buttons stay in reach. */
.tour-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.tour-card-text { margin: 0; }

.tour-points {
    margin: 8px 0 0;
    padding: 0 0 0 16px;
}

.tour-points li { margin: 0 0 4px; }
.tour-points li::marker { color: var(--mud-palette-primary); }
.tour-points strong { color: var(--mud-palette-text-primary); font-weight: 600; }

.tour-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.tour-spacer { flex: 1 1 auto; }

.tour-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-surface);
    background: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 5px;
    padding: 6px 16px;
    cursor: pointer;
}

.tour-btn:hover { background: var(--mud-palette-primary-darken); }

.tour-btn-quiet {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.tour-btn-quiet:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }

.tour-btn[hidden],
.tour-link[hidden] { display: none; }

.tour-link {
    font: inherit;
    font-size: 12.5px;
    background: none;
    border: 0;
    padding: 4px 2px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tour-link:hover { color: var(--mud-palette-text-primary); }

.tour-hint {
    margin-top: 8px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-align: right;
}

.tour-btn[hidden],
.tour-link[hidden] { display: none; }

.tour-link {
    font: inherit;
    font-size: 12.5px;
    background: none;
    border: 0;
    padding: 4px 2px;
    color: #5F5F5F;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tour-link:hover { color: #292929; }

.tour-hint {
    margin-top: 8px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    color: #6B6B6B;
    text-align: right;
}

.tour-btn:focus-visible,
.tour-x:focus-visible,
.tour-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
    .tour-root,
    .tour-spot,
    .tour-card,
    .tour-progress-bar { transition: none; }

    .tour-card.is-nudged { animation: none; }
}