/* ═══════════════════════════════════════════════════════════════════════════
   THE QUICK TOUR

   A ring around a real thing on the real screen, and a card beside it. Not a
   slideshow of screenshots: a screenshot goes stale the week after it is taken,
   and it teaches somebody what the app USED to look like.

   The dimming is four panes rather than one box with a hole in it. A hole cut
   with `clip-path` cannot be animated smoothly, cannot be given a border, and
   inverts awkwardly in a light theme — whereas four rectangles around the
   target are four rectangles, and the "hole" is simply the gap between them.
   That gap is also genuinely clickable, which is what lets the tour point at a
   button somebody is allowed to press while it is pointing.
   ═══════════════════════════════════════════════════════════════════════════ */

.tour-root {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* The root itself catches nothing — the four shades below do. So the hole in
     the middle is a real hole and the thing under it can be clicked. */
  pointer-events: none;
}
.tour-root[hidden] { display: none !important; }

.tour-shade {
  position: fixed;
  background: rgba(6, 7, 12, 0.62);
  pointer-events: auto;
  transition: all 160ms ease;
}

.tour-ring {
  position: fixed;
  border: 2px solid var(--ui-accent);
  border-radius: calc(var(--ui-radius) + 2px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 30%, transparent);
  pointer-events: none;
  transition: all 160ms ease;
}

.tour-card {
  position: fixed;
  width: min(21.25rem, calc(100vw - 2rem));
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 1rem 1.125rem 0.875rem;
  pointer-events: auto;
  transition: all 160ms ease;
}

.tour-step {
  font: 600 max(0.625rem, var(--text-min))/1 var(--ui-font); /* 10px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-dim);
}
.tour-card h3 {
  margin: 0.5rem 0 0.375rem;
  font-size: 1rem;
}
.tour-card p {
  margin: 0 0 0.75rem;
  font-size: 0.84375rem; /* 13.5px */
  line-height: 1.6;
  color: var(--ui-text);
}
.tour-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.tour-row .grow { flex: 1 1 auto; }


/* The last card of the tour has nothing to point at, so it sits in the middle
   of the screen and says so by being wider. */
.tour-card.centred {
  width: min(26.25rem, calc(100vw - 2rem));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .tour-shade, .tour-ring, .tour-card { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE QUESTIONNAIRE

   Same card, same shades, same ring. What is different is that the row of
   Back/Next at the bottom is replaced by a stack of ANSWERS, so the thing you
   press is the sentence you agree with rather than a direction.

   Full width and left-aligned, because these are sentences and not buttons in
   a toolbar; a centred label makes a seven-word option read as a heading.
   ═══════════════════════════════════════════════════════════════════════════ */

.tour-options {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
}
.tour-options:empty { display: none; }

.tour-option {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  line-height: 1.45;
  padding: 0.5625rem 0.75rem;
  height: auto;
}

/* ── waiting for the person to do something ────────────────────────────────
   A step that asks for a click ON THE APP cannot dim the app: the shades catch
   clicks, and a click on a shade closes the questionnaire. So while it waits
   the shades go away entirely and the card steps aside to the bottom right,
   where it can be read without covering a board.                            */

.tour-root.waiting .tour-shade,
.tour-root.waiting .tour-ring { display: none; }

.tour-root.waiting .tour-card,
.tour-root.waiting .tour-card.centred {
  width: min(20rem, calc(100vw - 2rem));
  left: auto;
  top: auto;
  right: 1.125rem;
  bottom: 1.125rem;
  transform: none;
}

/* The × that dismisses a waiting card. It is the only way out of one, so it is
   a button and not a decoration — same hit area, no label. */
.tour-root.waiting [data-q="close"] {
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.625rem;
}

/* The list of what is wrong with questionnaire.md. Deliberately plain: it is
   read once, by the person editing the file, and then it is gone. */
.tour-problems {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.78125rem; /* 12.5px */
  line-height: 1.55;
  color: var(--ui-text);
}
.tour-problems li { margin-bottom: 0.375rem; }