/* ========================================================================
   The tour (D86): six cards that say what Elevate holds and where to find
   it, in a window over the page of each card's area (partials/tour.php,
   View\Tour). Explanation only.

     .tour               the window, a .dialog of its own width without a
                         border; .is-welcome, .is-models and so on name its
                         card; .is-continued, drawn open by a page the tour
                         moved on to, does not rise in again
     .tour-veil          the dimming under a window drawn open, until app.js
                         makes it modal and its backdrop takes over
     .tour-stage         the card's picture across the top, on the card's
                         own white, a grid of dots behind what it shows
     .tour-nav           Back, the dots and Close in one row over it, the
                         colour of what is behind them; .tour-round each
                         button, .tour-dots and .tour-dot the cards
     .tour-scene         what the picture shows, in the middle under the row
     .tour-panel, .tour-title, .tour-text
                         the card's words, centred
     .tour-foot, .tour-next
                         the one wide button
     .tour-spot          the card's sidebar entry, laid exactly over it above
                         the dimming (app.js): its icon and .tour-spot-words,
                         the icon alone in the rail (.is-rail)

   What the pictures are made of: .tour-card, .tour-card-head,
   .tour-card-title, .tour-card-sub, .tour-row, .tour-row-main, .tour-row-end,
   .tour-who, .tour-avatar (.is-sm, .is-pending), .tour-pill; .tour-deck
   (Lena in front of two more models); .tour-links, .tour-bios, .tour-bio,
   .tour-wires and .tour-phone with its parts (the link page as fans see
   it); .tour-team and .tour-invite; .tour-chart and its parts (the plays);
   .tour-ask-wrap, .tour-soon, .tour-ask and its parts (AI Copilot's field
   on its picture); .tour-word and its parts (the welcome's word in heat).

   The page behind is only dimmed, as behind the record panel, so the area
   stays readable. Black, white and grey from the tokens; colour only in
   the welcome's word and in AI Copilot's picture, which has it on its own
   page too. Only where it has room, 640 pixels wide and 480 high, so
   never on a phone, upright or turned; below 660 pixels high its picture
   and the room around its words are smaller.
   ======================================================================== */

/* ---- The window ----------------------------------------------------- */

/* It scrolls only where a screen is too low for it, which the compact
   form below makes rare. */
.tour {
    width: min(500px, calc(100vw - 48px));
    max-height: min(820px, calc(100dvh - 32px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    box-shadow: 0 0 0 1px var(--color-tour-ring), var(--shadow-dialog);
}

.tour::backdrop {
    background: var(--color-overlay-panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* A page the tour moved on to draws the window open, where the modal
   window will be, over a veil in place of its backdrop, so it is there in
   the page's first frame; app.js then makes it modal. */
.tour[open]:not(:modal) {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
}

.tour-veil {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-dialog) - 1);
    background: var(--color-overlay-panel);
}

/* Arrived open: it does not rise in again, only its picture and words
   fade in; it closes as every window does. */
.tour.is-continued[open]:not(.is-closing),
.tour.is-continued[open]:not(.is-closing)::backdrop {
    animation: none;
}

@media (prefers-reduced-motion: no-preference) {
    .tour.is-continued .tour-scene,
    .tour.is-continued .tour-panel {
        animation: tour-arrive 320ms var(--ease-out) both;
    }
}

@keyframes tour-arrive {
    from { opacity: 0; }
}

/* ---- The picture ---------------------------------------------------- */

.tour-stage {
    position: relative;
    flex: none;
    height: 292px;
    overflow: hidden;
    user-select: none;
}

/* A fine grid of dots behind the pictures of the app, fading out towards
   the edges; not behind the welcome's word or AI Copilot's picture. */
.tour-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--color-tour-grid) 1px, transparent 1.4px);
    background-size: 18px 18px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 54%, black 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 54%, black 25%, transparent 80%);
}

.tour.is-welcome .tour-stage::before,
.tour.is-copilot .tour-stage::before {
    content: none;
}

.tour-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-top: 44px;
}

.tour.is-welcome .tour-scene,
.tour.is-copilot .tour-scene {
    padding-top: 0;
}

/* The welcome's heat may glow past the window's edge while its first or
   last letter melts: on this card nothing clips it, where the window has
   the room to show all of itself. */
@media (min-height: 660px) {
    .tour.is-welcome,
    .tour.is-welcome .tour-stage,
    .tour.is-welcome .tour-scene {
        overflow: visible;
    }
}

/* Back, the dots and Close: one row over the picture, the colour of what
   is behind them, a shade only under the pointer. */
.tour-nav {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tour-round {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
}

.tour-round .icon {
    width: 18px;
    height: 18px;
}

/* Close keeps to the right on the welcome, which has no Back. */
.tour-close {
    margin-left: auto;
}

.tour-round:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 0;
}

/* The dots, in the middle of the row whether Back is there or not. */
.tour-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    translate: -50% -50%;
}

.tour-dot {
    display: grid;
    place-items: center;
    width: 16px;
    height: 24px;
}

.tour-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    transition: background-color var(--duration-fast) var(--ease-in-out);
}

.tour-dot[aria-current="step"] {
    width: 28px;
}

.tour-dot[aria-current="step"]::before {
    width: 20px;
    background: var(--color-text);
}

.tour-dot:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    border-radius: var(--radius-full);
}

@media (hover: hover) {
    .tour-round:hover {
        background: var(--color-surface-muted);
        color: var(--color-text);
    }

    .tour-dot:not([aria-current]):hover::before {
        background: var(--color-text-subtle);
    }
}

/* On AI Copilot's dark picture: white, and glass under the pointer. */
.tour.is-copilot .tour-round {
    color: var(--copilot-ink);
}

.tour.is-copilot .tour-dot::before {
    background: var(--copilot-glass-rim);
}

.tour.is-copilot .tour-dot[aria-current="step"]::before {
    background: var(--copilot-ink);
}

@media (hover: hover) {
    .tour.is-copilot .tour-round:hover {
        background: var(--copilot-glass);
        color: var(--copilot-ink);
    }

    .tour.is-copilot .tour-dot:not([aria-current]):hover::before {
        background: var(--copilot-glow);
    }
}

/* ---- The words and the button --------------------------------------- */

.tour-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-8) 0;
    text-align: center;
}

.tour-title {
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: var(--weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.tour-text {
    max-width: 400px;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: var(--leading-normal);
    text-wrap: pretty;
}

.tour-foot {
    flex: none;
    padding: var(--space-6) var(--space-8) var(--space-8);
}

.tour-next {
    min-height: 46px;
    border-radius: 10px;
    font-size: 0.9375rem;
}

/* ---- What the pictures are made of ----------------------------------- */

/* A card of the app, a little smaller. */
.tour-card {
    position: relative;
    width: 292px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-tour-card);
    font-size: var(--text-sm);
    text-align: left;
}

.tour-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.tour-card-title {
    font-weight: var(--weight-semibold);
}

.tour-card-sub {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.tour-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-top: 1px solid var(--color-border);
}

.tour-row-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-medium);
}

.tour-row-end {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.tour-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.tour-who .tour-row-main {
    flex: none;
}

.tour-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
}

.tour-avatar.is-sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.tour-avatar.is-pending {
    border-style: dashed;
    border-color: var(--color-border-strong);
    background: transparent;
}

.tour-avatar.is-pending .icon {
    width: 13px;
    height: 13px;
}

.tour-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-medium);
}

/* Models: Lena's card in front of two more. */
.tour-deck {
    position: relative;
    margin-top: 30px;
}

.tour-deck .tour-card.is-back {
    position: absolute;
    inset: 0 0 auto;
    height: 64px;
    transform-origin: 50% 0;
}

.tour-deck .tour-card.is-back-1 {
    transform: translateY(-15px) scale(0.93);
    opacity: 0.9;
}

.tour-deck .tour-card.is-back-2 {
    transform: translateY(-29px) scale(0.86);
    opacity: 0.6;
}

/* Link pages: two accounts, each with its own link, both to one page. */
.tour-links {
    display: flex;
    align-items: center;
    gap: 48px;
}

.tour-bios {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tour-bio {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 188px;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-tour-card);
    text-align: left;
}

.tour-bio-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.tour-bio-handle {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.tour-bio-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-subtle);
    font-size: 11px;
}

.tour-wires {
    position: absolute;
    top: 0;
    left: 100%;
    width: 48px;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--color-border-strong);
    stroke-width: 1.25;
}

/* The link page on a phone, as fans see it: the same in both themes, as
   the page itself is. */
.tour-phone {
    width: 112px;
    height: 216px;
    padding: 5px;
    border-radius: 23px;
    background: var(--tour-phone-frame);
    box-shadow: 0 0 0 1px var(--color-border-strong), var(--tour-phone-shadow);
}

.tour-phone-screen {
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: var(--tour-phone-screen);
    color: var(--tour-phone-ink);
    text-align: center;
}

.tour-phone-photo {
    position: relative;
    height: 100px;
    overflow: hidden;
    container-type: inline-size;
}

.tour-phone-photo .portrait {
    inset: -12%;
}

.tour-phone-photo::after {
    content: '';
    position: absolute;
    inset: 0 0 -1px;
    background: linear-gradient(to bottom, transparent 45%, var(--tour-phone-screen));
}

.tour-phone-name {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: -6px;
    font-size: 12px;
    font-weight: 700;
}

.tour-phone-badge {
    width: 11px;
    height: 11px;
}

.tour-phone-badge-fill {
    fill: var(--tour-verified);
}

.tour-phone-badge-tick {
    fill: none;
    stroke: var(--tour-phone-ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tour-phone-icons {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.tour-phone-icons span {
    width: 15px;
    height: 15px;
    border-radius: var(--radius-full);
    background: var(--tour-phone-quiet);
}

.tour-phone-button {
    height: 24px;
    margin: 12px 10px 0;
    border-radius: var(--radius-full);
    background: var(--tour-phone-ink);
}

.tour-phone-button.is-quiet {
    margin-top: 6px;
    background: var(--tour-phone-quiet);
}

/* Team. */
.tour-team .tour-card-head {
    justify-content: space-between;
}

.tour-invite {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--color-border-strong);
    border-radius: 7px;
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-xs);
}

.tour-invite .icon {
    width: 12px;
    height: 12px;
}

/* Analytics: the plays of 30 days, in the line of Home's chart. */
.tour-chart {
    width: 320px;
    padding: 14px 16px 12px;
}

.tour-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.tour-chart-label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.tour-chart-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tour-chart-change {
    color: var(--color-success-text);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
}

.tour-chart-plot {
    display: block;
    width: 100%;
    height: 92px;
    margin-top: 10px;
    overflow: visible;
    color: var(--color-text);
}

.tour-chart-fade-from {
    stop-color: currentColor;
    stop-opacity: 0.12;
}

.tour-chart-fade-to {
    stop-color: currentColor;
    stop-opacity: 0;
}

.tour-chart-area {
    fill: url("#tour-chart-fade");
}

.tour-chart-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.tour-chart-line.is-today {
    stroke-dasharray: 3 3;
}

.tour-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--color-text-subtle);
    font-size: 11px;
}

/* AI Copilot: its own picture across the whole stage, the field on it. */
.tour-stage .copilot-picture {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
}

.tour-ask-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.tour-soon {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--copilot-glass-rim);
    border-radius: var(--radius-full);
    background: var(--copilot-glass);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--copilot-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
}

.tour-ask {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(360px, calc(100% - 48px));
    height: 46px;
    padding: 0 7px 0 16px;
    border-radius: var(--radius-full);
    background: var(--tour-ask-bg);
    color: var(--tour-ask-ink);
    box-shadow: var(--tour-ask-shadow);
    font-size: var(--text-base);
    text-align: left;
}

.tour-ask-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tour-ask-text [data-tour-ask] {
    transition: opacity 260ms var(--ease-in-out);
}

.tour-ask-text .is-leaving {
    opacity: 0;
}

.tour-ask-caret {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.16em;
    background: var(--tour-ask-ink);
    animation: tour-blink 1.05s steps(1) infinite;
}

.tour-ask-send {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--tour-ask-send);
    color: var(--tour-ask-bg);
}

.tour-ask-send .icon {
    width: 15px;
    height: 15px;
}

@keyframes tour-blink {
    50% { opacity: 0; }
}

/* The welcome's word (partials/tour/word.php): across the stage, its
   letters through the ramp of the theme. Under reduced motion the melting
   letters give way to the whole word, still. */
.tour-word {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tour-word-heat {
    font-family: var(--font-display);
    font-size: 145px;
    font-weight: 700;
    filter: var(--image-tour-heat);
}

.tour-word-still {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .tour-word-melt {
        display: none;
    }

    .tour-word-still {
        display: inline;
    }

    .tour-ask-caret {
        animation: none;
    }
}

/* ---- The sidebar's entry, lifted ------------------------------------ */

/* A copy of the card's sidebar entry, laid exactly over it above the
   dimming: its icon and words in the chip of the open area, wider in the
   rail, where the words are hidden. A popover, so it stands over the modal
   window's backdrop; never in the way of the pointer. */
.tour-spot {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    gap: 10px;
    height: 32px;
    margin: 0;
    padding: 0 12px 0 9px;
    overflow: visible;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 550;
    white-space: nowrap;
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-tour-spot);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.tour-spot:popover-open {
    display: flex;
}

.tour-spot.is-shown {
    opacity: 1;
}

.tour-spot .icon {
    width: 16px;
    height: 16px;
}

/* In the rail the entry is its icon alone, and so is its copy. */
.tour-spot.is-rail {
    justify-content: center;
    padding: 0;
}

.tour-spot.is-rail .tour-spot-words {
    display: none;
}

/* ---- A low screen: the picture and the room around the words smaller - */

@media (max-height: 659px) {
    .tour-stage {
        height: 236px;
    }

    .tour-scene {
        padding-top: 40px;
    }

    .tour-scene > :not(.tour-word, .copilot-picture) {
        scale: 0.78;
    }

    .tour-panel {
        padding-top: var(--space-4);
    }

    .tour-foot {
        padding: var(--space-5) var(--space-8) var(--space-6);
    }
}

/* ---- No room, no tour ------------------------------------------------ */

/* Where app.js does not open it, a phone upright or turned, a card a page
   drew open stays out of sight. */
@media (max-width: 639px), (max-height: 479px) {
    .tour[open]:not(:modal),
    .tour-veil {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tour-spot,
    .tour-ask-text [data-tour-ask] {
        transition: none;
    }
}