/*
    Tour.css - the guided tour's scrim, spotlight ring and card (Scripts/Utils/Util.Tour.js,
    Scheduler-WelcomeTour-Design.md section 4). The Scheduler counterpart of Mobile's Tour.css.

    Colours come from Modern.css's --totm-* tokens, so the card reads as part of the Scheduler
    under the default chrome and under the neutral (Dark Mode) chrome alike - the neutral variant
    darkens the header and panels, and leaves dialogs light, which is what the card is.

    Loaded after Modern.css, like the other feature stylesheets, and hashed into the cache-busting
    token by Build-SchedulerBundle.ps1 along with every Styles/*.css.
*/

.totm-tour-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: none;
    /* Above the hamburger menu (900), #GreyOut (1500), the settings dialog (1600), the other
       .ModalDialogs (2000) and the confirm box (3000); below the tooltip (10000) and the Remote
       Help banner. See the header comment in Util.Tour.js. */
    z-index: 4000;
}

.totm-tour-scrim.totm-tour-visible {
    display: block;
}

/* A centred card has no ring to do the dimming, so the scrim does it. */
.totm-tour-scrim.totm-tour-dim {
    background: var(--totm-tour-dim, rgba(15, 23, 42, 0.55));
}

.totm-tour-ring {
    position: fixed;
    display: none;
    /* The JS sizes the ring as the target plus padding; border-box keeps the border inside that,
       or the ring sits off-centre by the border's width. */
    box-sizing: border-box;
    border-radius: 6px;
    border: 2px solid var(--totm-brand, #1976D2);
    /* The dim is the ring's own shadow - everything outside the spotlight darkens, the target
       itself stays at full brightness, and no cut-out canvas is needed. */
    box-shadow: 0 0 0 9999px var(--totm-tour-dim, rgba(15, 23, 42, 0.55));
    pointer-events: none;
    z-index: 4001;
    transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
}

.totm-tour-ring.totm-tour-visible {
    display: block;
}

.totm-tour-card {
    position: fixed;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    /* A long card scrolls its BODY, never the whole card - the buttons must stay on screen. */
    max-height: calc(100% - 24px);
    overflow: hidden;
    padding: 16px 18px 14px 18px;
    background: #fff;
    color: var(--totm-text, #1A1A1A);
    border: 1px solid var(--totm-border-strong, #C9CCD1);
    border-radius: 8px;
    box-shadow: var(--totm-shadow-dialog, 0 12px 32px rgba(15, 23, 42, 0.22));
    font-family: var(--totm-font, Arial, sans-serif);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    z-index: 4002;
    outline: none;
}

.totm-tour-card.totm-tour-visible {
    display: flex;
}

/* A real dialog opened mid-tour (Util.Tour's tick) - step aside until it closes. */
body.totm-tour-paused .totm-tour-scrim,
body.totm-tour-paused .totm-tour-ring,
body.totm-tour-paused .totm-tour-card {
    display: none !important;
}

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

.totm-tour-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.totm-tour-chapter {
    font-size: var(--totm-fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--totm-brand, #1976D2);
}

/* The card's buttons are plain <button>s appended to <body>. Scheduler.css and Modern.css style
   `button` globally (Century Gothic / Inter, borders, the fc-button look), hence the resets. */
.totm-tour-card button {
    font-family: var(--totm-font, Arial, sans-serif);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    box-shadow: none;
    text-shadow: none;
}

.totm-tour-skip {
    margin-left: auto !important;
    padding: 4px 2px;
    background: none;
    border: none;
    color: var(--totm-text-muted, #5F6368);
    text-decoration: underline;
}

.totm-tour-skip:hover {
    color: var(--totm-text, #1A1A1A);
}

.totm-tour-title {
    margin: 0 0 6px 0;
    font-size: var(--totm-fs-xl, 18px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--totm-text, #1A1A1A);
}

.totm-tour-body {
    margin: 0 0 12px 0;
    color: var(--totm-text, #1A1A1A);
    /* min-height 0 lets the flex item shrink below its content, so it scrolls instead. */
    min-height: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.totm-tour-head,
.totm-tour-title,
.totm-tour-foot {
    flex: 0 0 auto;
}

.totm-tour-body p {
    margin: 0 0 8px 0;
}

.totm-tour-body p:last-child {
    margin-bottom: 0;
}

/* Lists of screen parts (Util.WelcomeTour.js list). */
.totm-tour-list {
    margin: 0 0 8px 0;
    padding-left: 18px;
    list-style: disc;
}

.totm-tour-list li {
    margin-bottom: 4px;
}

/* The example status table on the "Job statuses" card. */
.totm-tour-table {
    width: 100%;
    margin: 4px 0 2px 0;
    border-collapse: collapse;
    font-size: var(--totm-fs-sm, 13px);
}

.totm-tour-table th,
.totm-tour-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--totm-border, #E3E5E9);
    text-align: left;
}

.totm-tour-table th {
    font-weight: 600;
    color: var(--totm-text-muted, #5F6368);
    background: var(--totm-brand-tint, #E8F1FB);
}

.totm-tour-table th + th,
.totm-tour-table td + td {
    text-align: center;
}

.totm-tour-tick {
    color: var(--totm-brand, #1976D2);
    font-weight: 700;
}

.totm-tour-dash {
    color: var(--totm-text-muted, #5F6368);
}

.totm-tour-caption,
.totm-tour-flow-caption {
    font-size: var(--totm-fs-xs, 12px);
    color: var(--totm-text-muted, #5F6368);
}

.totm-tour-caption {
    margin: 2px 0 10px 0;
}

.totm-tour-flow-caption {
    margin: 6px 0 -4px 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The "how it fits together" diagrams (Util.WelcomeTour.js flowDiagram). */
.totm-tour-flow-box {
    fill: var(--totm-brand-tint, #E8F1FB);
    stroke: var(--totm-border-strong, #C9CCD1);
    stroke-width: 1;
}

.totm-tour-flow-text {
    fill: var(--totm-text, #1A1A1A);
    font-family: var(--totm-font, Arial, sans-serif);
    font-size: 11px;
    font-weight: 700;
}

.totm-tour-flow-arrow {
    stroke: var(--totm-brand, #1976D2);
    stroke-width: 2;
}

.totm-tour-flow-head {
    fill: var(--totm-brand, #1976D2);
}

.totm-tour-body svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 4px auto 8px auto;
}

.totm-tour-learn-more {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: -4px 0 12px 0;
    font-size: var(--totm-fs-sm, 13px);
    font-weight: 600;
    color: var(--totm-brand, #1976D2);
    text-decoration: underline;
}

.totm-tour-learn-more:hover {
    color: var(--totm-brand-ink, #0C447C);
}

.totm-tour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.totm-tour-progress {
    font-size: var(--totm-fs-xs, 12px);
    color: var(--totm-text-muted, #5F6368);
}

.totm-tour-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.totm-tour-actions {
    display: flex;
    gap: 8px;
}

.totm-tour-primary,
.totm-tour-secondary,
.totm-tour-back {
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 600;
}

.totm-tour-primary {
    background: var(--totm-brand, #1976D2);
    color: #fff;
    border: 1px solid var(--totm-brand, #1976D2);
}

.totm-tour-primary:hover {
    background: var(--totm-brand-ink, #0C447C);
    border-color: var(--totm-brand-ink, #0C447C);
}

.totm-tour-secondary,
.totm-tour-back {
    background: #fff;
    color: var(--totm-text, #1A1A1A);
    border: 1px solid var(--totm-border-strong, #C9CCD1);
}

.totm-tour-secondary:hover,
.totm-tour-back:hover {
    background: var(--totm-brand-tint, #E8F1FB);
}

.totm-tour-card button:focus-visible,
.totm-tour-card a:focus-visible {
    outline: 2px solid var(--totm-brand, #1976D2);
    outline-offset: 2px;
}