/* The guided tour (js/tutorial.js): a banner in the top bar's card, under its
   row, and a pointer that plays the app. Themed by css/theme.css's tokens
   (every page carries html.tr). */

/* ---------- the banner ---------- */
/* in the card's own flow: negative side margins take it out to the card's
   edges, and a rule above separates it from the bar's row */
.tut {
  margin: 5px -10px -7px;
  border-top: 1px solid var(--t-line);
  font-size: 13.5px;
  line-height: 1.28;
  color: rgb(var(--t-ink-rgb));
  user-select: none;
  -webkit-user-select: none;
}
.tut[hidden] { display: none; }
.tut-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 0 12px;
  min-height: 24px;
}
.tut-step-no {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-dim);
}
.tut-step-no:empty { display: none; }
.tut-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--t-display);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tut-btn {
  flex: none;
  width: 28px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 8px;
  color: rgba(var(--t-ink-rgb), 0.75);
  font: inherit;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tut-btn:hover { background: var(--t-hover); color: rgb(var(--t-ink-rgb)); }
.tut-list-btn svg { transition: transform 0.2s ease; }
.tut-list-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.tut-body {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 3px 2px;
}
.tut-nav {
  flex: none;
  width: 20px;
  height: 36px;
  border: none;
  background: none;
  color: var(--t-dim);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.tut-nav:hover { color: rgb(var(--t-ink-rgb)); background: var(--t-hover); }
.tut-nav:disabled { opacity: 0.25; cursor: default; background: none; }
/* on a touch screen the banner is swiped; the arrows only take room */
@media (hover: none) and (pointer: coarse) {
  .tut-nav { display: none; }
  .tut-body { padding-left: 10px; }
}
/* The narration: a window two and a half lines tall that the lines scroll
   up through, the newest at the bottom and bright, the ones before it
   dimmed on their way off the top. */
.tut-lines {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.9em;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* (no mask-image here: over the card's backdrop blur Chrome dropped the
     masked lines from whole frames, and the window read empty) */
}
.tut-line {
  margin: 0;
  padding: 1px 0;
  color: rgb(var(--t-ink-rgb));
  transition: opacity 0.4s ease;
  flex: none;
}
.tut-line.old { opacity: 0.5; }
.tut-line.older { opacity: 0.22; }
.tut-line.idle { color: rgba(var(--t-ink-rgb), 0.8); }
/* a line that names a link stands it in the app's own mono */
.tut-line code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--t-fill);
}
/* the whole narration slides: each new line is added at the bottom and the
   list is translated up by the height of what went before (js sets it) */
.tut-scroll {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tut-play {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: none;
  color: rgb(var(--t-ink-rgb));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tut-play:hover { background: var(--t-hover); }
.tut-play:active { transform: scale(0.94); }
.tut-play svg { fill: currentColor; width: 26px; height: 26px; }
.tut-play .tut-ic-pause { display: none; }
.tut.playing .tut-play .tut-ic-play { display: none; }
.tut.playing .tut-play .tut-ic-pause { display: block; }

/* how far through the current step: a hairline along the banner's foot
   that fills with the step's time (js sets the width) */
.tut-progress {
  height: 2px;
  margin: 0 12px;
  border-radius: 1px;
  background: rgba(var(--t-ink-rgb), 0.1);
  overflow: hidden;
}
.tut-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 1px;
  background: rgba(var(--t-ink-rgb), 0.75);
  transition: width 0.25s linear, opacity 0.3s ease;
}
.tut:not(.playing):not(.paused) .tut-progress-fill { opacity: 0; }
.tut.paused .tut-progress-fill { opacity: 0.45; }

/* ---------- the list of steps ---------- */
.tut-steps {
  list-style: none;
  margin: 0 0 4px;
  padding: 0 0 4px;
  border-top: 1px solid var(--t-line);
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tut-steps[hidden] { display: none; }
/* its scrollbar as the app's other panels have theirs (css/theme.css): a
   6px thumb at 18% ink, lifting under the pointer, and no track */
.tut-steps {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--t-ink-rgb), 0.22) transparent;
}
.tut-steps::-webkit-scrollbar { width: 6px; height: 6px; }
.tut-steps::-webkit-scrollbar-track, .tut-steps::-webkit-scrollbar-corner { background: transparent; }
.tut-steps::-webkit-scrollbar-thumb { background-color: rgba(var(--t-ink-rgb), 0.18); border-radius: 999px; }
.tut-steps::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--t-ink-rgb), 0.32); }
.tut-steps li { margin: 0; }
.tut-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tut-step-row:hover { background: var(--t-hover); }
.tut-step-row.on .tut-step-name { font-weight: 600; }
.tut-step-tick {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--t-ink-rgb), 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: rgb(var(--t-paper-rgb));
}
.tut-step-row.seen .tut-step-tick {
  background: rgb(var(--t-ink-rgb));
  border-color: rgb(var(--t-ink-rgb));
}
.tut-step-row.seen .tut-step-tick::before { content: "✓"; }
.tut-step-name { flex: 1 1 auto; min-width: 0; }
.tut-step-new {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--t-tdf);
  color: #1a1a1a;
}
.tut-step-replay {
  flex: none;
  font-size: 12px;
  color: var(--t-dim);
}
.tut-steps-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 6px 12px 2px;
  font-size: 13px;
}
.tut-steps-foot .linklike { color: rgba(var(--t-ink-rgb), 0.8); }

/* the ? beside the search button opens the tour, the dice after it a stage
   at random; with a rider open the row is theirs - the icons give way to
   the name (body.rider-open is set by the app as the rider's chip is drawn;
   the :has() form is a fallback for the same state) */
body.rider-open .filter-head-row #search-toggle,
body.rider-open .filter-head-row #tut-help,
body.rider-open .filter-head-row #random-stage,
.filter-head-row:has(.rider-filter:not([hidden])) #search-toggle,
.filter-head-row:has(.rider-filter:not([hidden])) #tut-help,
.filter-head-row:has(.rider-filter:not([hidden])) #random-stage { display: none; }

/* ---------- the pointer ---------- */
/* White with a dark edge, on an aqua halo that breathes, so the eye finds it
   again after reading the banner. Aqua because no race, jersey or control
   uses it (the owner's pick over yellow, the Tour's own colour). A ring
   closes in on it each time it sets off. */
.tut-pointer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6000; /* over the release-notes overlay (5000) */
  pointer-events: none;
  width: 40px;
  height: 40px;
  transform: translate(-100px, -100px);
  transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
  opacity: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.tut-pointer[hidden] { display: none; }
.tut-pointer.shown { opacity: 1; }
.tut-pointer.instant { transition: opacity 0.3s ease; }
.tut-pointer svg { position: absolute; left: 0; top: 0; }
/* the fingertip (the arrow's tip) is the point: each is drawn from it */
.tut-pointer .tut-hand { fill: #ffffff; stroke: #14161c; stroke-width: 1.5; stroke-linejoin: round; transform: translate(-15px, -4px); }
.tut-pointer .tut-arrow { fill: #ffffff; stroke: #14161c; stroke-width: 1.5; stroke-linejoin: round; transform: translate(-6px, -4px); display: none; }
.tut-pointer.mouse .tut-hand { display: none; }
.tut-pointer.mouse .tut-arrow { display: block; }
.tut-halo {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(30, 232, 200, 0.34);
  box-shadow: 0 0 0 2px rgba(30, 232, 200, 0.85);
  animation: tut-halo 1.6s ease-in-out infinite;
}
@keyframes tut-halo {
  0%, 100% { transform: scale(0.8); opacity: 0.95; }
  50% { transform: scale(1.12); opacity: 0.55; }
}
.tut-ping {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid #1ee8c8;
  opacity: 0;
}
.tut-pointer.ping .tut-ping { animation: tut-ping 0.7s ease-out; }
@keyframes tut-ping {
  0% { opacity: 0.95; transform: scale(3.4); }
  100% { opacity: 0; transform: scale(0.9); }
}
/* the press: the pointer dips, and a ring spreads from the point */
.tut-pointer.press .tut-hand { transform: translate(-15px, -4px) scale(0.88); transform-origin: 15px 4px; }
.tut-pointer.press .tut-arrow { transform: translate(-6px, -4px) scale(0.88); transform-origin: 6px 4px; }
.tut-pointer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #1ee8c8;
  background: rgba(30, 232, 200, 0.4);
  opacity: 0;
  transform: scale(0.4);
}
.tut-pointer.press::after { animation: tut-ripple 0.55s ease-out forwards; }
@keyframes tut-ripple {
  0% { opacity: 0.95; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(3.4); }
}
/* the pointer holds (a drag): the halo closes to a firm disc */
.tut-pointer.hold .tut-halo { animation: none; transform: scale(0.7); opacity: 1; background: rgba(30, 232, 200, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .tut-halo { animation: none; }
}

/* a tour under way: the app's own hover cursors give way to the drawn hand */
body.tut-playing { cursor: default; }