/*
  Location aware tour guide graphic (templates/_graphics/tourGuide.twig): the
  guide on a customer's phone, with the map, route, stops, coach and bottom
  sheet, the lock screen it opens on, and the cards over the phone's edge.
  Colours come from the tokens in graphics.css.
*/
[data-g17-graphic="tourGuide"] .g17g-tg-phone { display: flex; padding: .5em; border-radius: 2.2em; }
[data-g17-graphic="tourGuide"] .g17g-tg-screen { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 1.75em; background: var(--g17g-card); }
[data-g17-graphic="tourGuide"] .g17g-tg-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; border: 1px solid var(--g17g-border); pointer-events: none; }

/* Status bar, the app's header and the booking it belongs to */
[data-g17-graphic="tourGuide"] .g17g-tg-status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 1.5em; padding: .15em 1.25em 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-status b { font-size: .56em; }
[data-g17-graphic="tourGuide"] .g17g-tg-status svg { width: 1.55em; height: .62em; }
[data-g17-graphic="tourGuide"] .g17g-tg-app { flex: none; display: flex; align-items: center; gap: .5em; padding: .15em .75em .5em; }
[data-g17-graphic="tourGuide"] .g17g-tg-logo { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .5em; background: var(--g17g-green); }
[data-g17-graphic="tourGuide"] .g17g-tg-logo svg { width: 60%; height: 60%; }
[data-g17-graphic="tourGuide"] .g17g-tg-apptext { flex: 1; min-width: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-apptext b { display: block; font-size: .72em; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-apptext span { display: block; margin-top: .1em; font-size: .54em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-booking { flex: none; display: flex; align-items: center; gap: .4em; margin: 0 .6em .55em; padding: .4em .45em .4em .6em; border-radius: .75em; background: var(--g17g-soft); }
[data-g17-graphic="tourGuide"] .g17g-tg-booking > svg { flex: none; width: .95em; height: .95em; }
[data-g17-graphic="tourGuide"] .g17g-tg-booking > b { font-size: .6em; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-roll { position: relative; display: inline-grid; justify-items: end; margin-left: auto; overflow: hidden; border-radius: 999px; }
[data-g17-graphic="tourGuide"] .g17g-tg-roll > * { grid-area: 1 / 1; }

/* The map: a flat tint with the road, the stops and the coach on it */
[data-g17-graphic="tourGuide"] .g17g-tg-map { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--g17g-green-tint); }
[data-g17-graphic="tourGuide"] .g17g-tg-svg { position: absolute; left: 0; top: 0; width: 14.7em; height: 22.4em; }
[data-g17-graphic="tourGuide"] .g17g-tg-leg { fill: none; stroke: var(--g17g-green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 120; }
[data-g17-graphic="tourGuide"] .g17g-tg-tag { position: absolute; z-index: 1; }
[data-g17-graphic="tourGuide"] .g17g-tg-tag--left { transform: translateX(-100%); }
[data-g17-graphic="tourGuide"] .g17g-tg-tag b {
    display: block; padding: .25em .6em; border-radius: 999px; background: var(--g17g-card); white-space: nowrap;
    font-size: .5em; font-weight: 700; color: var(--g17g-text-soft); box-shadow: 0 .2em .6em var(--g17g-shadow-soft), 0 0 0 1px var(--g17g-edge);
}
[data-g17-graphic="tourGuide"] .g17g-tg-pin { position: absolute; z-index: 1; width: 1.55em; height: 1.9em; }
[data-g17-graphic="tourGuide"] .g17g-tg-pin > span { position: absolute; inset: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-pin svg { width: 100%; height: 100%; filter: drop-shadow(0 .12em .2em var(--g17g-shadow)); }
[data-g17-graphic="tourGuide"] .g17g-tg-pin__on { transform-origin: 50% 95%; }
[data-g17-graphic="tourGuide"] .g17g-tg-halo { position: absolute; left: 50%; top: 38%; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-coach { position: absolute; left: 0; top: 0; z-index: 2; width: 14.7em; height: 22.4em; pointer-events: none; }
[data-g17-graphic="tourGuide"] .g17g-tg-bus {
    position: absolute; display: grid; place-items: center; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em;
    border-radius: 50%; border: .14em solid var(--g17g-card); background: var(--g17g-green);
    box-shadow: 0 .25em .6em var(--g17g-shadow);
}
[data-g17-graphic="tourGuide"] .g17g-tg-bus svg { width: 64%; height: 64%; }

/* Locked until the tour day */
[data-g17-graphic="tourGuide"] .g17g-tg-lock { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 .9em 3.5em; background: var(--g17g-card); text-align: center; }
[data-g17-graphic="tourGuide"] .g17g-tg-lockdisc { position: relative; width: 3.2em; height: 3.2em; }
[data-g17-graphic="tourGuide"] .g17g-tg-lockdisc > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--g17g-purple); }
[data-g17-graphic="tourGuide"] .g17g-tg-lockdisc > .g17g-tg-lockdisc__on { background: var(--g17g-green); }
[data-g17-graphic="tourGuide"] .g17g-tg-lockdisc svg { width: 48%; height: 48%; }
[data-g17-graphic="tourGuide"] .g17g-tg-stack { position: relative; display: inline-grid; justify-items: center; }
[data-g17-graphic="tourGuide"] .g17g-tg-stack > * { grid-area: 1 / 1; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-locktitle { margin-top: .95em; font-size: .84em; font-weight: 700; letter-spacing: -.01em; }
[data-g17-graphic="tourGuide"] .g17g-tg-locksub { margin-top: .35em; font-size: .6em; color: var(--g17g-muted); }
[data-g17-graphic="tourGuide"] .g17g-tg-lock .g17g-chip { margin-top: 1.4em; font-size: .56em; }

/* The bottom sheet with the current stop */
[data-g17-graphic="tourGuide"] .g17g-tg-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: .4em .85em .5em;
    border-radius: 1.15em 1.15em 0 0; background: var(--g17g-card);
    box-shadow: 0 -.35em 1.2em var(--g17g-shadow-soft), 0 0 0 1px var(--g17g-edge);
}
[data-g17-graphic="tourGuide"] .g17g-tg-handle { display: block; width: 2.2em; height: .22em; margin: 0 auto .35em; border-radius: 1em; background: var(--g17g-border-strong); }
[data-g17-graphic="tourGuide"] .g17g-tg-stops { display: grid; margin: 0 -.85em; overflow: hidden; }
[data-g17-graphic="tourGuide"] .g17g-tg-stop { grid-area: 1 / 1; padding: 0 .85em; }
[data-g17-graphic="tourGuide"] .g17g-tg-kick { display: flex; align-items: center; justify-content: space-between; }
[data-g17-graphic="tourGuide"] .g17g-tg-kick > span:first-child { font-size: .52em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g17g-green-text); }
[data-g17-graphic="tourGuide"] .g17g-tg-kick .g17g-chip { font-size: .52em; }
[data-g17-graphic="tourGuide"] .g17g-tg-now { display: block; margin-top: .15em; font-size: .86em; letter-spacing: -.015em; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-audio { display: flex; align-items: center; gap: .6em; margin-top: .3em; padding: .28em .6em .28em .3em; border-radius: .8em; background: var(--g17g-soft); }
[data-g17-graphic="tourGuide"] .g17g-tg-play { flex: none; display: grid; place-items: center; width: 1.65em; height: 1.65em; margin: 0 .825em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="tourGuide"] .g17g-tg-play > * { grid-area: 1 / 1; display: block; width: 1.15em; height: 1.15em; }
[data-g17-graphic="tourGuide"] .g17g-tg-play svg { width: 100%; height: 100%; }
[data-g17-graphic="tourGuide"] .g17g-tg-track { flex: 1; min-width: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-track > b { display: block; font-size: .6em; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-bar { position: relative; display: block; height: .22em; margin: .26em 0 .14em; overflow: hidden; border-radius: 1em; background: var(--g17g-border); }
[data-g17-graphic="tourGuide"] .g17g-tg-bar > i { position: absolute; inset: 0; background: var(--g17g-green); transform: scaleX(0); transform-origin: 0 50%; }
[data-g17-graphic="tourGuide"] .g17g-tg-times { display: flex; justify-content: space-between; font-size: .5em; color: var(--g17g-muted); font-variant-numeric: tabular-nums; }
[data-g17-graphic="tourGuide"] .g17g-tg-times .g17g-tg-stack { justify-items: start; }
[data-g17-graphic="tourGuide"] .g17g-tg-times em { font-style: normal; font-weight: 600; color: var(--g17g-green-text); }

/* The audio waveform: thin rounded bars like a voice recording. The played copy
   sits on top in green, clipped to how far the audio has played */
[data-g17-graphic="tourGuide"] .g17g-tg-wave { display: grid; height: .95em; margin: .2em 0 .1em; }
[data-g17-graphic="tourGuide"] .g17g-tg-wave > span { grid-area: 1 / 1; display: flex; align-items: center; gap: .1em; }
[data-g17-graphic="tourGuide"] .g17g-tg-wave i { flex: 1 1 0; min-width: 0; min-height: .14em; border-radius: 1em; background: var(--g17g-border-strong); }
[data-g17-graphic="tourGuide"] .g17g-tg-wave__played i { background: var(--g17g-green); }
/* Video tiles: a plain tint thumbnail, a play button and the running time */
[data-g17-graphic="tourGuide"] .g17g-tg-vthumb { position: relative; flex: none; display: grid; place-items: center; width: 3.3em; height: 1.85em; border-radius: .5em; justify-content: start; padding-left: .8em; }
[data-g17-graphic="tourGuide"] .g17g-tg-vbtn { display: grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--g17g-card); box-shadow: 0 .1em .3em var(--g17g-shadow); }
[data-g17-graphic="tourGuide"] .g17g-tg-vbtn > * { grid-area: 1 / 1; display: block; width: .8em; height: .8em; }
[data-g17-graphic="tourGuide"] .g17g-tg-vbtn svg { display: block; width: 100%; height: 100%; }
[data-g17-graphic="tourGuide"] .g17g-tg-dur { position: absolute; right: .2em; bottom: .18em; padding: .08em .35em; border-radius: .5em; background: var(--g17g-card); font-size: .38em; font-style: normal; font-weight: 700; line-height: 1.3; color: var(--g17g-text-soft); font-variant-numeric: tabular-nums; }

/* One more, chip sized: a filming location, or a stack of archive photos */
[data-g17-graphic="tourGuide"] .g17g-tg-extra { display: flex; align-items: center; gap: .5em; margin-top: .3em; padding-left: .1em; }
[data-g17-graphic="tourGuide"] .g17g-tg-extra .g17g-chip { flex: none; font-size: .52em; }
[data-g17-graphic="tourGuide"] .g17g-tg-extra > span:last-child { min-width: 0; font-size: .52em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-extra > span:last-child b { color: var(--g17g-text); }
[data-g17-graphic="tourGuide"] .g17g-tg-pstack { position: relative; flex: none; width: 2em; height: 1.35em; margin: .2em .15em 0 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-pstack i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: .35em; }
[data-g17-graphic="tourGuide"] .g17g-tg-pstack i:first-child { background: var(--g17g-green-bar); transform: translate(.25em, -.22em); }
[data-g17-graphic="tourGuide"] .g17g-tg-pstack i:nth-child(2) { box-shadow: 0 0 0 .1em var(--g17g-card); }
[data-g17-graphic="tourGuide"] .g17g-tg-pstack svg { width: .85em; height: .85em; }
[data-g17-graphic="tourGuide"] .g17g-tg-pstack b { position: absolute; right: -.45em; top: -.45em; display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: 999px; background: var(--g17g-green); box-shadow: 0 0 0 .15em var(--g17g-card); font-size: .5em; color: var(--g17g-on-green); }

/* The video player: it opens over the map, full width at 16:9, from the small
   video tile in the sheet, and closes back into it */
[data-g17-graphic="tourGuide"] .g17g-tg-player {
    position: absolute; left: .75em; right: .75em; top: .5em; z-index: 5; padding: .4em .4em .55em;
    border-radius: 1em; background: var(--g17g-card); box-shadow: 0 .6em 1.6em var(--g17g-shadow), 0 0 0 1px var(--g17g-edge);
}
[data-g17-graphic="tourGuide"] .g17g-tg-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .7em; background: var(--g17g-purple); }
[data-g17-graphic="tourGuide"] .g17g-tg-scene { position: absolute; left: 50%; bottom: 0; width: 6.4em; height: 6.4em; margin-left: -3.2em; opacity: .28; }
[data-g17-graphic="tourGuide"] .g17g-tg-fchip { position: absolute; top: .5em; padding: .15em .45em; border-radius: .35em; background: var(--g17g-card); font-size: .44em; font-weight: 800; letter-spacing: .04em; color: var(--g17g-purple-text); }
[data-g17-graphic="tourGuide"] .g17g-tg-fchip--l { left: .55em; }
[data-g17-graphic="tourGuide"] .g17g-tg-fchip--r { right: .55em; }
[data-g17-graphic="tourGuide"] .g17g-tg-big { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--g17g-card); color: var(--g17g-purple); box-shadow: 0 .3em .9em var(--g17g-shadow); }
[data-g17-graphic="tourGuide"] .g17g-tg-big > span { grid-area: 1 / 1; display: block; width: 1.5em; height: 1.5em; }
[data-g17-graphic="tourGuide"] .g17g-tg-big svg { display: block; width: 100%; height: 100%; }
[data-g17-graphic="tourGuide"] .g17g-tg-pmeta { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; margin: .5em .2em 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-pmeta > b { font-size: .64em; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-ptime { font-size: .52em; color: var(--g17g-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-g17-graphic="tourGuide"] .g17g-tg-ptime .g17g-tg-stack { justify-items: end; }
[data-g17-graphic="tourGuide"] .g17g-tg-scrub { position: relative; display: block; height: .24em; margin: .45em .2em 0; border-radius: 1em; background: var(--g17g-border); }
[data-g17-graphic="tourGuide"] .g17g-tg-scrub__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--g17g-green); transform-origin: 0 50%; }
[data-g17-graphic="tourGuide"] .g17g-tg-scrub__head { position: absolute; inset: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-scrub__head b { position: absolute; left: 0; top: 50%; width: .62em; height: .62em; margin: -.31em 0 0 -.31em; border-radius: 50%; background: var(--g17g-card); box-shadow: 0 0 0 .14em var(--g17g-green), 0 .1em .3em var(--g17g-shadow); }

/* Floating cards over the phone's edge */
[data-g17-graphic="tourGuide"] .g17g-tg-toast { z-index: 5; display: flex; align-items: center; gap: .6em; padding: .65em 1.1em .65em .65em; border-radius: 999px; }
[data-g17-graphic="tourGuide"] .g17g-tg-toast__t { display: block; font-size: .7em; white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-toast__s { display: block; margin-top: .12em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="tourGuide"] .g17g-tg-disc { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--g17g-purple); }
[data-g17-graphic="tourGuide"] .g17g-tg-disc svg { width: 52%; height: 52%; }
[data-g17-graphic="tourGuide"] .g17g-tg-stats { z-index: 5; }
[data-g17-graphic="tourGuide"] .g17g-tg-count { display: flex; align-items: flex-start; gap: .25em; font-size: 1.5em; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; white-space: nowrap; transform-origin: 0 50%; }
[data-g17-graphic="tourGuide"] .g17g-tg-num { display: block; height: 1.25em; overflow: hidden; }
[data-g17-graphic="tourGuide"] .g17g-tg-num > span { display: block; }
[data-g17-graphic="tourGuide"] .g17g-tg-num > span > span { display: block; height: 1.25em; }
[data-g17-graphic="tourGuide"] .g17g-tg-statsub { display: block; font-size: .62em; color: var(--g17g-muted); }
[data-g17-graphic="tourGuide"] .g17g-tg-segs { display: flex; gap: .25em; margin-top: .7em; }
[data-g17-graphic="tourGuide"] .g17g-tg-segs i { position: relative; flex: 1; height: .38em; overflow: hidden; border-radius: .2em; background: var(--g17g-skel); }
[data-g17-graphic="tourGuide"] .g17g-tg-segs b { position: absolute; inset: 0; background: var(--g17g-green); transform-origin: 0 50%; }

/* Layers that fill the stage: the pointer and the burst */
[data-g17-graphic="tourGuide"] .g17g-tg-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
[data-g17-graphic="tourGuide"] .g17g-tg-cursor svg { position: absolute; left: -.32em; top: -.2em; width: 1.55em; height: 1.55em; color: var(--g17g-text); filter: drop-shadow(0 .15em .25em var(--g17g-shadow)); }
[data-g17-graphic="tourGuide"] .g17g-tg-ring { position: absolute; left: -.9em; top: -.9em; width: 1.8em; height: 1.8em; border-radius: 50%; border: 2px solid var(--g17g-green); opacity: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-burst { z-index: 7; }
[data-g17-graphic="tourGuide"] .g17g-tg-burst i { position: absolute; left: -.22em; top: -.22em; width: .44em; height: .44em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="tourGuide"] .g17g-tg-burst i:nth-child(even) { background: var(--g17g-purple); }