/*
 * The guided tour: an overlay, not a panel.
 *
 * `12` §4 gives panels one model and two drawings, and every one of them belongs to the account.
 * This belongs to one person (`10`, 23 August): it is drawn ON TOP of whatever the desk is showing,
 * it has no window, no tab and no place in the strip, and nothing in this file has an equivalent on
 * the server.
 *
 * **Written phone-first, at 375×667.** The card is pinned to the bottom of the viewport and capped
 * at a little under half the glass, so the control a step is pointing at has somewhere to be: the
 * step scrolls it to the middle of what is left. The wide layout is the override, not the other way
 * round — a phone that inherited a desktop rule by accident is the failure this order prevents.
 *
 * **The page never scrolls sideways.** Every text block here wraps, and the row of buttons wraps
 * rather than pushing the card wider than the screen.
 */

/* ------------------------------------------------------------------ the offer, on the list screen */

/*
 * One line and two buttons, never a dialog.
 *
 * A tour that greets everybody on arrival is a tour people learn to dismiss, and what they learn to
 * dismiss is the corner of the screen it appeared in. So this sits in the flow of the applications
 * screen, covers nothing, and is gone for good once it is taken or waved away.
 */
/*
 * The host is a bare <div> in index.html, like #dashboard-bar. `display: contents` so that when the
 * strip inside it is hidden — which is most of the time, for most people — the host contributes no
 * box at all and the column above the list does not gain a stray gap.
 */
#tour-offer {
    display: contents;
}

.tour-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--accent-weak);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}

.tour-offer__text {
    flex: 1 1 16rem;
    min-width: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ the card */

/*
 * The host is in the flow at the end of the document and the CARD is fixed, which is why the spacer
 * below works: the document really does get taller while the tour is up, so the last screenful of
 * the page can be brought clear of a card that cannot push anything.
 */
.tour {
    position: relative;
}

.tour__spacer {
    height: 54vh;
}

.tour__card {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    /*
     * Just over half the glass, and the number is a measurement rather than a taste.
     *
     * The longest step — the publishing gate, which has three conditions and cannot say them in
     * fewer — is about this tall on a 667px phone, and at 46vh it was cut across a button, which
     * reads as breakage rather than as "there is more below". What is left above is where the
     * marked control is scrolled to, and `bringAboveTheCard` measures THIS box rather than assuming
     * a number, so changing it here cannot put a step's target underneath it.
     */
    max-height: 52vh;
    overflow-y: auto;
    padding: 0.85rem 1rem 1rem;
    background: var(--surface);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -6px 24px rgb(0 0 0 / 22%);
}

.tour__count {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.tour__title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.tour__lead {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    line-height: var(--line);
    overflow-wrap: anywhere;
}

/*
 * What has to be open before this step has anything to point at.
 *
 * A notice rather than an error: nothing has gone wrong, the reader is simply somewhere else. It is
 * the honest alternative to a step that lights nothing and says nothing about why.
 */
.tour__needs {
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.86rem;
    color: var(--notice);
    background: var(--notice-weak);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}

/*
 * The one control in the tour that other people see.
 *
 * Marked with the accent rather than left as an ordinary small button, because pressing it changes
 * what is on somebody else's screen and the difference between that and Next has to be visible
 * before the press, not explained after it.
 */
.tour__do {
    display: block;
    width: 100%;
    margin-bottom: 0.6rem;
    color: var(--accent-text);
    background: var(--accent);
    border-color: var(--accent);
    /* The label is a sentence, not a word: it must be allowed to run onto a second line rather than
       widen the card past a 375px screen. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.tour__do:disabled {
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-color: var(--border);
}

.tour__why {
    margin-bottom: 0.7rem;
}

.tour__why > p {
    font-size: 0.86rem;
}

/*
 * The way on, always reachable.
 *
 * Sticky to the bottom of the card, which is itself the scroll box: a step with a long claim, a
 * button and a fold is taller than 46vh on a 667px phone, and without this the reader has to
 * discover that the card scrolls inside itself before they can find Next. The opaque background is
 * part of it — a transparent sticky bar has the text of the step sliding underneath the buttons.
 */
.tour__nav {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    background: var(--surface);
}

/* Pushed to the far end on a line of its own terms: leaving is not the next step. */
.tour__leave {
    margin-left: auto;
    color: var(--text-muted);
}

.tour__notkept {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--notice);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ the mark on the control */

/*
 * What the step is pointing at.
 *
 * An outline and not a border: an outline is drawn outside the box and changes no layout, so
 * marking the panel strip cannot shift the panel strip. `outline-offset` keeps it clear of the
 * control's own focus ring rather than sitting on top of it.
 */
.tour-lit {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    /*
     * A halo outside the outline, and it earns its place: several of the things a step points at
     * are already made of accent-bordered pills, and a plain accent outline around them read as one
     * more border rather than as "this one". Spread only, no blur and no offset, so it cannot be
     * mistaken for a shadow that lifts the element.
     */
    box-shadow: 0 0 0 7px var(--accent-weak);
    /*
     * **A masked element cannot be marked, and this is the note that saves the next person an hour.**
     *
     * `#app-tabs` fades its right edge with `mask-image` (`style.css`), and a mask clips everything
     * the element paints — its outline and this halo included. Marking the strip therefore did
     * nothing at all on a phone and worked perfectly on a desk, where the media query turns the mask
     * off. The fix is not to remove the fade, which is the only sign that the strip scrolls: the two
     * steps about panels mark the SECTION around it (`#tv`) instead.
     */
}

/* ------------------------------------------------------------------ wide: out of the way */

@media (min-width: 40rem) {
    /*
     * On a desk the card is a column in the bottom-left corner rather than a full-width bar. It has
     * to be somewhere, and the bottom-left is where this interface has least: the strip and the
     * head bar are at the top, and the windows are placed from the top-left cascading down and
     * right, so the corner is the last place a window lands.
     */
    .tour__card {
        right: auto;
        bottom: 1rem;
        left: 1rem;
        width: min(26rem, 42vw);
        max-height: min(60vh, 34rem);
        border: 2px solid var(--accent);
        border-radius: var(--radius);
    }

    /* Far less is needed here: the card is short and the page below it is reachable already. */
    .tour__spacer {
        height: 12rem;
    }
}