/* The tour player (tour.js over the page TourPages.cs builds): a real screen in a browser frame (a computer) or a phone
   outline (a phone), one highlighted area to press, the step's words beside it, the chapters as a numbered rail. Without
   script the stage stays hidden and the list of every step is the tour. Colours and type from site.css. */
.tour-intro { padding: 20px 0 8px; }
.tour-crumb { margin: 0 0 6px !important; font-size: 14px; }
.tour-crumb a { text-decoration: none; }
.tour-crumb a::before { content: "‹ "; }

.tour-stage { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 20px; align-items: start; margin-top: 8px; }
.tour-stage[hidden] { display: none; }
.tour[data-device="phone"] .tour-stage { grid-template-columns: minmax(0, auto) minmax(16rem, 22rem); justify-content: center; }

/* The frame */
.tour-frame { min-width: 0; background: #fff; }
.tour-frame--computer { border: 1px solid var(--ps-line); border-radius: var(--ps-radius-lg); overflow: hidden; box-shadow: 0 18px 44px -26px rgba(15, 23, 42, .45); }
.tour-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ps-band); border-bottom: 1px solid var(--ps-line); }
.tour-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; display: block; flex: none; }
.tour-url { margin-left: 8px; flex: 1; min-width: 0; font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ps-muted); background: #fff; border: 1px solid var(--ps-line); border-radius: 999px; padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tour-frame--phone { justify-self: center; border: 10px solid #1f2937; border-radius: 34px; overflow: hidden; box-shadow: 0 22px 48px -26px rgba(15, 23, 42, .6); width: fit-content; max-width: 100%; }
/* The bar never decides the phone's width: the frame is fit-content, and a long route would widen it past the screen. */
.tour-frame--phone .tour-bar { padding: 6px 10px; box-sizing: border-box; width: 0; min-width: 100%; }
.tour-frame--phone .tour-bar i { display: none; }
.tour-frame--phone .tour-url { margin-left: 0; text-align: center; font-size: 11px; }

.tour-screen { position: relative; background: var(--ps-band-2); aspect-ratio: 16 / 10; }
.tour-frame--phone .tour-screen { width: min(calc(100vw - 54px), calc(clamp(420px, 100vh - 380px, 700px) * var(--ar, .462))); }
.tour-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* The one area to press */
.tour-hot { position: absolute; padding: 0; margin: 0; background: transparent; border: 3px solid var(--ps-wine); border-radius: 8px; cursor: pointer;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .22); transition: left .4s ease, top .4s ease, width .4s ease, height .4s ease; }
.tour-hot::after { content: ""; position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ps-wine); animation: tour-ping 1.6s infinite; }
.tour-hot--whole { border-style: dashed; box-shadow: none; }
.tour-hot--whole::after { display: none; }
.tour-hot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
@keyframes tour-ping { 0% { box-shadow: 0 0 0 0 rgba(122, 40, 71, .6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(122, 40, 71, 0); } }
.tour-hot__tag { position: absolute; left: 0; top: calc(100% + 8px); max-width: min(320px, 80vw); width: max-content; background: var(--ps-wine); color: #fff;
    font: 600 12px/1.3 var(--ps-text); padding: 6px 10px; border-radius: 6px; text-align: left; white-space: normal; box-shadow: var(--ps-shadow); pointer-events: none; }
.tour-hot__tag--above { top: auto; bottom: calc(100% + 8px); }
.tour-hot__tag--inside { top: 8px; left: 8px; }
.tour-hot__tag--end { left: auto; right: 0; }

/* The end card, inside the screen */
.tour-end { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 6%; background: var(--ps-wine); color: #fff; overflow: auto; }
.tour-end[hidden] { display: none; }
.tour-end__in { max-width: 520px; }
.tour-end h2 { color: #fff; margin: 0 0 8px; font-size: clamp(20px, 3vw, 30px); }
.tour-end p { color: #f6e7ee; margin: 0 0 8px; }
.tour-end .ps-ctas { justify-content: center; }
.tour-end .ps-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .7); }
.tour-end .ps-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.tour-end .ps-btn--primary { background: #fff; color: var(--ps-wine) !important; }
.tour-end .ps-call, .tour-end .ps-call a { color: #fff; }
.tour[data-device="phone"] .tour-end .ps-btn { min-height: 40px; font-size: 13px; padding: 0 12px; }

/* The step's words */
.tour-note { background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-radius-lg); padding: 18px; display: grid; gap: 8px; min-width: 0; position: sticky; top: 76px; }
.tour-count { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ps-wine); }
.tour-note h2 { margin: 0; font-size: 20px; }
.tour-note p { margin: 0; color: var(--ps-muted); }
.tour-controls { display: flex; gap: 8px; margin-top: 6px; }
.tour-controls .ps-btn--primary { flex: 1; }
.tour-hint { font-size: 12px !important; }

/* The chapters */
.tour-rail ol { position: relative; list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-rail a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border: 1px solid var(--ps-line); border-radius: 999px; background: #fff; color: var(--ps-ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.tour-rail a b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 999px; background: var(--ps-wine-tint); color: var(--ps-wine); font: 700 12px var(--ps-display); }
.tour-rail a[aria-current] { background: var(--ps-wine); border-color: var(--ps-wine); color: #fff; }
.tour-rail a[aria-current] b { background: rgba(255, 255, 255, .2); color: #fff; }

/* Every step as a list: the tour without script, folded away under the player with it */
.tour-all { margin-top: 24px; border-top: 1px solid var(--ps-line); padding-top: 12px; }
.tour-all > summary { cursor: pointer; font: 600 15px var(--ps-display); color: var(--ps-ink-strong); padding: 6px 0; }
.tour-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 28px; }
.tour-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.tour-item h2 { font-size: 19px; margin: 2px 0 6px; }
.tour-item p { margin: 0 0 6px; color: var(--ps-muted); }
.tour-item__n { font-size: 12px; font-weight: 600; color: var(--ps-wine) !important; text-transform: uppercase; letter-spacing: .04em; }
.tour-item__route { font: 12px ui-monospace, Consolas, monospace; word-break: break-all; }
.tour-item__shot { border: 1px solid var(--ps-line); border-radius: var(--ps-radius-lg); display: block; }
.tour-item__shot--phone { max-height: 560px; width: auto; border: 8px solid #1f2937; border-radius: 24px; justify-self: start; }
.tour-others { margin: 0; padding-left: 18px; }

@media (max-width: 900px) {
    .tour-stage, .tour[data-device="phone"] .tour-stage { grid-template-columns: minmax(0, 1fr); }
    .tour-note { position: static; order: -1; padding: 14px; gap: 6px; }
    .tour-note h2 { font-size: 18px; }
    .tour-hint { display: none; }
    .tour-hot { border-width: 2px; }
    .tour-hot::after { width: 12px; height: 12px; right: -6px; top: -6px; }
    .tour-item { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .tour-frame--phone .tour-screen { width: min(calc(100vw - 54px), calc(min(56vh, 560px) * var(--ar, .462))); }
    .tour-rail a span { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .tour-hot { transition: none; }
    .tour-hot::after { animation: none; }
}

/* At the end the screen grows to the card's own height: a fixed screen shape cut the last line off on a phone. */
.tour-screen--end { aspect-ratio: auto !important; }
.tour-screen--end > img { display: none; }
.tour-screen--end .tour-end { position: relative; inset: auto; min-height: 320px; }
@media (max-width: 600px) {
    /* The chapters swipe sideways in one row on a phone, inside their own box. */
    .tour-rail ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .tour-rail ol::-webkit-scrollbar { display: none; }
    .tour-rail li { flex: none; }
}