/* The tour (tour.js): the sidebar foot's "Tour" row, then the three layers a running tour puts on the body: the
   light on one control with the dim around it, a clear layer that takes every click off the card, and the card.
   Nothing here moves: the card arrives by the page's own open move (enter in core.js), and the light jumps. */

/* the sidebar's foot: "Tour", over the signed-in account's row and drawn as that row is */
.tour-row { flex: none; display: flex; align-items: center; gap: 17px; width: 100%; padding: 9px 14px 9px 21px; border-top: 1px solid var(--line); color: var(--text3); font-weight: 500; text-align: left; }
.tour-row:hover { background: var(--raise); color: var(--text); }
.tour-row + .me { border-top: 0; padding-top: 6px; }
#view:focus { outline: none; }  /* the page takes the focus back when a tour that no button started ends */

/* the light: its ring is an outline, so it shows in forced colours, where the dim's shadow is not drawn */
.tour-lit { position: fixed; z-index: 50; border-radius: 12px; outline: 2px solid var(--red); box-shadow: 0 0 0 9999px rgba(6, 7, 9, .62); pointer-events: none; }
.tour-catch { position: fixed; inset: 0; z-index: 51; }

.tour { position: fixed; z-index: 52; display: grid; gap: 6px; width: 320px; max-width: calc(100vw - 24px); padding: 16px 16px 12px; background: var(--raise); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); }
.tour h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--head); outline: none; }
.tour p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text2); }
.tour-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tour-count { margin-right: auto; font-size: 12px; font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }
.tour-stop { height: 32px; padding: 0 6px; border-radius: 8px; color: var(--text3); font-size: 13px; font-weight: 600; }
.tour-stop:hover { color: var(--text); }
.tour .btn:not(.primary) { background: var(--chip); }
.tour [hidden] { display: none; }
/* the caret: half outside the card, on the side that faces the control (data-side, set by tourPlace) */
.tour-caret { position: absolute; width: 12px; height: 12px; background: var(--raise); border: solid var(--line2); border-width: 1px 0 0 1px; rotate: 45deg; }
.tour[data-side="top"] .tour-caret { top: -7px; }
.tour[data-side="bottom"] .tour-caret { bottom: -7px; rotate: 225deg; }
.tour[data-side="left"] .tour-caret { left: -7px; rotate: -45deg; }
.tour[data-side="right"] .tour-caret { right: -7px; rotate: 135deg; }
.tour[data-side=""] .tour-caret { display: none; }
/* a phone: the card docks over the tabs (its bottom is set by tourPlace), with taller buttons and no caret */
.tour.dock { left: 12px; right: 12px; width: auto; max-width: none; padding: 16px; }
.tour.dock :is(.btn, .tour-stop) { height: 40px; } .tour.dock .btn { padding: 0 16px; }
/* under a docked card the open page gets room at its end, so its last control scrolls clear of the card */
body:has(.tour.dock) #view .page[data-page] { padding-bottom: 220px; }