/*
    TotmTour - the guided tour's scrim, spotlight ring and card (Scripts/Components/TotmTour.js,
    Mobile-WelcomeTour-Design.md section 4).

    Colours come only from Tokens.css. Tokens.css is always loaded and Dark.css redefines those
    tokens on :root under BOTH Tradie Classic and Tradie Light, so nothing here depends on
    Theme.css and there are no Classic-only selectors to duplicate. The one Dark Mode rule (a
    heavier dim) lives in Dark.css.

    Sizes are in em off the card's own font-size, so Settings > Zoom Level scales the card with
    the rest of the app.
*/

.totm-tour-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: none;
    z-index: 3500;
    /* The scrim catches every tap so nothing behind the tour can be operated mid-tour. */
    touch-action: none;
}

.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(--tour-dim, rgba(0, 0, 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: var(--radius);
    border: 2px solid var(--brand);
    /* 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(--tour-dim, rgba(0, 0, 0, .55));
    pointer-events: none;
    z-index: 3501;
    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: 1em 1em .85em 1em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    font-family: var(--font);
    font-size: var(--type-base);
    line-height: 1.4;
    text-align: left;
    z-index: 3502;
    outline: none;
}

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

/* The PWA "Install app" pill (pwa-install.js) carries an inline z-index of 10000, above the tour,
   and sat right over the card's buttons. Out of the way while a tour runs; !important because
   only that beats an inline style. */
body.totm-tour-running #totmInstallApp {
    visibility: hidden !important;
}

/* Settings > Help (OnTheGo.View.Settings renderHelpSection): the whole tour, its chapters, and the
   user guide, as three spaced groups. Spacing only - colours stay with the buttons' own classes,
   so every theme and Dark Mode is unaffected. Scoped by id because GenericControlDimensions sets
   margin: 0 on every button. */
#SettingsHelpSection {
    padding: var(--space-1) 0 var(--space-2) 0;
}

#SettingsHelpSection .SettingsHelpGroup + .SettingsHelpGroup {
    margin-top: var(--space-4);
}

#SettingsHelpSection .SettingsHelpIntro {
    margin: 0 0 var(--space-3) 0;
}

#SettingsHelpSection .SettingsHelpHeading {
    display: block;
    margin: 0 0 var(--space-2) 0;
}

#SettingsHelpSection .SettingsTourChapterButton + .SettingsTourChapterButton {
    margin-top: var(--space-2);
}

/* The chapter and user-guide buttons are plain jQuery Mobile buttons, which no theme stylesheet
   recolours - under Dark Mode they stayed bright white. Coloured from tokens instead, so they read
   as quiet secondary buttons in every theme. !important to beat jQM's swatch classes. */
#SettingsHelpSection .SettingsTourChapterButton,
#SettingsHelpSection #SettingsUserGuideButton {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
    text-shadow: none !important;
}

/* The guide is a different kind of thing from the tour, so a rule above it as well as the space. */
#SettingsHelpSection .SettingsHelpGuide {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

/* A real dialog opened mid-tour (TotmTour's watchForDialogs) - 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: .5em;
    margin-bottom: .35em;
}

.totm-tour-chapter {
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The card's buttons are plain <button>s, appended to <body> outside any jQuery Mobile page, so
   jQM never enhances them - but Mobile.css styles bare `button` globally (font, size), hence the
   explicit resets below. */
.totm-tour-card button {
    font-family: var(--font) !important;
    font-size: .95em !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.totm-tour-skip {
    margin-left: auto !important;
    padding: .3em .2em;
    background: none;
    border: none;
    color: var(--text-muted);
    text-decoration: underline;
}

.totm-tour-title {
    margin: 0 0 .35em 0;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text);
}

.totm-tour-body {
    margin: 0 0 .9em 0;
    color: var(--text);
    /* 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 .5em 0;
}

/* The "what's on your Home screen" card's list (WelcomeTour.js). */
.totm-tour-list {
    margin: 0 0 .6em 0;
    padding-left: 1.2em;
}

.totm-tour-list li {
    margin-bottom: .25em;
}

/* The job chapter's fallback picture of the job screen's tab bar (WelcomeTour.js), shown when
   there is no real job to open. Tokens only, so it follows the theme like the real tabs. */
.totm-tour-mock-tabs {
    display: flex;
    margin: .4em 0 .7em 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.totm-tour-mock-tab {
    flex: 1 1 0;
    padding: .45em .3em;
    text-align: center;
    font-weight: 700;
    font-size: .9em;
    background: var(--surface-2);
    color: var(--text);
}

.totm-tour-mock-tab + .totm-tour-mock-tab {
    border-left: 1px solid var(--border-strong);
}

.totm-tour-mock-tab-active {
    background: var(--brand);
    color: var(--text-on-brand);
}

/* The data-flow chapter's diagrams (WelcomeTour.js flowDiagram). Tokens only, so they follow the
   theme and Dark Mode like everything else on the card. */
.totm-tour-flow-box {
    fill: var(--surface-2);
    stroke: var(--border-strong);
    stroke-width: 1;
}

.totm-tour-flow-text {
    fill: var(--text);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
}

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

.totm-tour-flow-head {
    fill: var(--brand);
}

.totm-tour-body svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: .5em auto;
}

.totm-tour-learn-more {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: -.4em 0 .8em 0;
    font-size: .85em;
    font-weight: 700;
    color: var(--brand);
    text-decoration: underline;
}

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

.totm-tour-progress {
    font-size: .8em;
    color: var(--text-muted);
}

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

.totm-tour-actions {
    display: flex;
    gap: .5em;
}

.totm-tour-primary,
.totm-tour-secondary,
.totm-tour-back {
    min-height: 2.6em;
    padding: .45em 1em;
    border-radius: var(--radius);
    font-weight: 700;
}

.totm-tour-primary {
    background: var(--btn-add-bg);
    color: var(--text-on-brand);
    border: 1px solid var(--btn-add-bg);
}

.totm-tour-primary:hover {
    background: var(--btn-add-bg-hover);
}

.totm-tour-secondary,
.totm-tour-back {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
}

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