/* ---------------------------------------------------------------------------
   The "Get started" panel on the feed (DEV-1263).

   Numbered circles joined by a rail that fills up to where the board has got to,
   so how far along they are is drawn rather than written twice. The step being
   asked for now stands out; the ones behind it wait quietly instead of being
   locked away.
   --------------------------------------------------------------------------- */
.journey {
    background: #fff;
    /* The blue frame of the rest of Sharely, so the panel stands out of the feed
       rather than reading as one more card. */
    border: 1px solid var(--primary);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}
.journey__title {
    font-size: 22px;
    font-weight: 600;
    color: #0F2248;
}
.journey__subtitle {
    font-size: 14px;
    color: rgba(15, 34, 72, 0.5);
    margin-top: 4px;
}
.journey__steps {
    margin-top: 20px;
}
.journey__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.journey__step + .journey__step {
    border-top: 1px solid rgba(15, 34, 72, 0.06);
}
/* The rail between one circle and the next. It is drawn by the step above, and
   coloured by whether that step is behind the reader. */
.journey__step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 40px;
    bottom: -10px;
    width: 2px;
    background: rgba(15, 34, 72, 0.12);
}
.journey__step.is-done:not(:last-child)::before {
    background: var(--primary);
}
.journey__marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 2px solid rgba(15, 34, 72, 0.15);
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 34, 72, 0.45);
}
/* The step being asked for now, and the ones already behind, are filled in; the
   ones still to come are outlined. */
.journey__step.is-current .journey__marker,
.journey__step.is-done .journey__marker {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.journey__label {
    flex: 1 1 auto;
    font-size: 15px;
    color: #0F2248;
}
.journey__step.is-current .journey__label {
    font-weight: 600;
}
.journey__step.is-later .journey__label {
    color: rgba(15, 34, 72, 0.55);
}
.journey__step.is-done .journey__label {
    color: rgba(15, 34, 72, 0.45);
    text-decoration: line-through;
}
/* Alone on the page the panel is a column of its own, centred in front of the scene
   behind it (DEV-1263). */
.journey--narrow {
    max-width: 570px;
    /* Centred, and standing a little below the header rather than against it. */
    margin: 40px auto 0;
}

/* The page the journey is read on: the association it is about, drawn behind it. The
   picture is fixed to the foot of the page so the horizon stays where it is however far
   the list of steps runs (DEV-1263). */
/* The picture starts where the header ends: the page normally leaves a band of white
   below it, which read as a gap above the scene (DEV-1263). */
.journey-page.header-fixed {
    padding-top: 70px;
}
/* Alone on the page the panel is the page, so it needs no frame around it. */
.journey--narrow {
    border: 0;
}
.journey-scene {
    background-image: url('/img/journey-background.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: calc(100vh - 70px);
}
/* A fixed background is drawn against the viewport, which phones handle badly: iOS blows
   it up to the size of the whole document. There it scrolls with the page (DEV-1263). */
@media (max-width: 767px) {
    .journey-scene {
        background-attachment: scroll;
    }
}
.journey__start {
    flex: 0 0 auto;
}
/* Offered rather than urged: the same quiet grey as the line it belongs to. */
.journey__again {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 8px;
    font-size: 13px;
    color: rgba(15, 34, 72, 0.45);
    text-decoration: underline;
}
.journey__again:hover {
    color: rgba(15, 34, 72, 0.7);
}
.journey__saved {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 34, 72, 0.06);
    font-size: 13px;
    color: rgba(15, 34, 72, 0.5);
}
@media (max-width: 640px) {
    .journey {
        padding: 18px 16px;
    }
}

/* The popover of the guided onboarding tours (DEV-1263). driver.js draws it, this gives it
   the wording weight and the button colours of the rest of Sharely. */

.driver-popover.journey-popover {
    max-width: 340px;
    border-radius: 12px;
    padding: 18px 18px 14px;
}

.driver-popover.journey-popover .driver-popover-title {
    font-size: 16px;
    line-height: 1.3;
    /* The cross sits in the corner, and a long title must not run underneath it. */
    padding-right: 20px;
}

.driver-popover.journey-popover .driver-popover-description {
    font-size: 14px;
    line-height: 1.45;
}

/* What a facility can be: one line each, with room to breathe between them. */
.driver-popover.journey-popover .journey-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

/* The letters the budget rows are marked with, in the popover that names them. */
.driver-popover.journey-popover .journey-pill {
    display: inline-flex;
    justify-content: center;
    min-width: 20px;
    margin-right: 4px;
    vertical-align: middle;
}
.driver-popover.journey-popover .journey-list li + li {
    margin-top: 8px;
}

/* A step the user answers with the button rather than by clicking the page itself: the
   button is the thing to press, so it is the blue one. On a step that asks for a click,
   Next is only the quiet way past it and stays plain. */
.driver-popover.journey-popover--act .driver-popover-next-btn {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    text-shadow: none;
}

.driver-popover.journey-popover--act .driver-popover-next-btn:hover {
    background: var(--primary);
    opacity: 0.9;
    color: #fff;
}

/* How far along the tour is, in the footer beside the buttons. */
.driver-popover.journey-popover .driver-popover-progress-text {
    font-size: 12px;
    color: rgba(15, 34, 72, 0.5);
    align-self: center;
}

.driver-popover.journey-popover .driver-popover-prev-btn {
    text-shadow: none;
}

/* The way out of a tour, now that a click beside the popover no longer ends it. driver.js
   hides its cross whenever closing by overlay or Escape is switched off, and switched off
   is exactly what it is: the cross is the only way out, so it is put back (DEV-1263). */
.driver-popover.journey-popover .driver-popover-close-btn {
    /* driver.js sets the cross to display:none inline, so the rule has to shout. */
    display: block !important;
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 22px;
    color: rgba(15, 34, 72, 0.5);
}

.driver-popover.journey-popover .driver-popover-close-btn:hover {
    color: #0F2248;
}

/* A step that asks the reader to use the page itself: the dim layer stays, the clicks go
   through it, and a drop-down opened underneath is lifted above it (DEV-1263). */
/* While a tour runs, driver.js takes the pointer away from the whole page and hands it
   back to the highlighted element alone. A drop-down opens its list at the end of the
   body, outside that element, which is why the list could be opened and nothing in it
   could be picked. On a step that asks the reader to use the page, the page gets its
   pointer back; the overlay itself keeps none, so clicks fall through to what is under
   it (DEV-1263). */
body.journey-interactive.driver-active * {
    pointer-events: auto !important;
}

body.journey-interactive.driver-active svg.driver-overlay,
body.journey-interactive.driver-active svg.driver-overlay * {
    pointer-events: none !important;
}

/* A step that lights several elements at once draws one box over them all, and the box is
   the element driver.js is given. On a step that hands the page its clicks back, the rule
   above handed them to that box as well, and it sat over the very menu the reader was
   asked to use: the box is a drawing, never a thing to press (DEV-1263). */
body.journey-interactive.driver-active #journey-group-highlight {
    pointer-events: none !important;
}

body.journey-interactive .select2-container--open,
body.journey-interactive .dropdown__body {
    z-index: 100000;
}

/* The support messenger floats above the tour overlay, and on a step that hands the page
   its clicks back the bottom corner of the screen belonged to Fernand rather than to
   Sharely: a click there opened the support site instead of what was under it. It steps
   aside for as long as a tour is running (DEV-1263). */
body.driver-active [id^="fernand"],
body.driver-active [class*="fernand"],
body.driver-active iframe[src*="fernand"] {
    display: none !important;
}

/* A dialogue is drawn above the overlay driver.js dims the page with, so inside one
   nothing was dimmed and the hole the tour cuts around its element showed nothing at all:
   the whole dialogue stayed lit and no field looked marked. On a step whose element lives
   in a dialogue the overlay is lifted over it, and the step then looks like every other
   one: everything goes dark and what the text is about is what stays lit (DEV-1263). */
body.journey-in-dialogue svg.driver-overlay {
    z-index: 100001 !important;
}

/* What a step opens on top of the dialogue belongs above that overlay in turn. */
body.journey-in-dialogue .select2-container--open,
body.journey-in-dialogue .dropdown__body {
    z-index: 100002;
}

/* A step can offer its ways forward as links in its own text. They read as links rather
   than as the plain wording around them (DEV-1263). */
.driver-popover.journey-popover .journey-choice {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.driver-popover.journey-popover .journey-choice:hover {
    opacity: 0.8;
}