/* ---- The walkthrough ----
   Six stops around the console, pointing at real controls. Not a modal: the
   whole value is pointing at something that is actually there, and a modal
   cannot point at anything behind it.

   IT USES THE ONE VEIL'S COLOUR, WITH NO EXCEPTION: --cbc-veil exactly as
   declared, which is the third place it is applied and still the only dim in
   the product. The lightbox's argument for going darker does not transfer:
   there the dimming IS the thing, because a photo viewer's subject is the
   photo. Here the console is the subject. The reader has to recognise the rail,
   the search button and the bell tomorrow morning, so the console has to stay
   legible underneath.

   AND IT IS THE ONE VEIL THAT DOES NOT BLUR. --cbc-veil-blur is a
   backdrop-filter, which is the most expensive thing a stylesheet can ask a
   browser for: everything behind it is drawn into a texture and filtered again
   on every frame that anything back there moves, and the page underneath comes
   off the compositor for as long as it is up, so a scroll during the tour takes
   the slow road. The other two veils sit over a still page for a few seconds
   and can afford it. This one sits over a live console for minutes, over a rail
   that pulses and cards that draw to canvases, with a clip path being rewritten
   under it every time the lit control moves. It was also working against the
   feature: this is the one veil the reader is meant to keep reading THROUGH,
   and blurring the thing you are pointing at is an odd way to point at it.

   THE HOLE IS A CLIP PATH, not four rectangles around a gap. Four elements is
   four things to keep in step, four hairline seams where they meet, and no
   rounded corner without drawing one. The path is written per frame by
   walkthrough/place.ts, which is also why nothing here transitions: a
   transition on a property that is written whenever it changes is permanent
   lag, and a light that travels across the screen is the reader watching the
   tour instead of being shown a thing. Same argument console-palette.css
   already makes for data-found.

   The ring is the console's own focus ring, verbatim. The sentence "this
   control" is already written in this codebase and the tour says it in the same
   words rather than inventing a second way to say it. An outline paints OUTSIDE
   the box it is on, so where the lit control is flush against the edge of the
   window the hole gives up a ring's width and the ring lands on the strip it
   gave up. That decision is per edge and it is made in walkthrough/place.ts,
   because it is arithmetic and belongs where the rest of the arithmetic is
   checked. */

.cb-walk-stage {
  transition: opacity var(--cb-motion-fast) var(--cb-motion-ease);
}
/* Out of the way, whole, whenever the reader opens something over us: the
   search, a menu, a dialog. It stands down rather than fighting for the top,
   which is what lets the search shortcut keep working during the stop that
   teaches it. */
.cb-walk-stage[data-standby] {
  opacity: 0;
  pointer-events: none;
}
/* The one exit, in step with the card's. Same fade, same timer, so the dim and
   the thing it was explaining leave together: the veil used to be removed in a
   single frame while the card went on fading for another 150ms over a fully
   bright console with nothing left behind it. pointer-events goes with the
   opacity, because a transparent veil still hit-tests and the reader has their
   console back the moment they press Escape. */
.cb-walk-stage[data-closing] {
  opacity: 0;
  pointer-events: none;
}

.cb-walk-veil {
  position: fixed;
  inset: 0;
  z-index: var(--cbc-z-tour);
  background: var(--cbc-veil);
  animation: cbc-fade var(--cb-motion-fast) var(--cb-motion-ease) backwards;
}

/* Over the hole, transparent, and the reason it exists at all: clip-path
   removes hit testing along with paint, so without this a click in the hole
   falls straight through to the real control. Its own click advances the stop,
   because somebody who pressed the thing you pointed at has understood it. */
.cb-walk-guard {
  position: fixed;
  z-index: var(--cbc-z-tour);
  border-radius: var(--cb-radius-lg);
  /* Written as the token rather than as a bare 2px, which every other focus
     ring in this console is allowed to be. It stopped being a free literal the
     day the hole had to leave room for it: walkthrough/stage.ts reads the same
     token to work out how far to pull the hole off the edge of the window, and
     a ring that is two pixels here and two pixels there is two numbers waiting
     to disagree. */
  outline: var(--cb-space-xxs) solid var(--cbc-accent);
  cursor: pointer;
}

/* Nothing to light: the veil covers everything and the guard swallows the
   whole page, so a stop whose control went away dims rather than rings air. */
.cb-walk-stage[data-lit="false"] .cb-walk-veil {
  clip-path: none;
}
.cb-walk-stage[data-lit="false"] .cb-walk-guard {
  inset: 0;
  outline: none;
  cursor: default;
}

/* ---- The card ----
   A manual popover, so it is in the top layer above the veil without joining
   the z ladder, and so the tooltip on its own Back button cannot close it the
   way an auto popover would. Positioned by walkthrough/card.ts, which is why
   inset is cleared and the margins are zero. */
.cb-walk,
.cb-walk:popover-open {
  position: fixed;
  inset: auto;
  margin: 0;
  display: grid;
  gap: var(--cb-space-lg);
  inline-size: var(--cb-width-xs);
  max-inline-size: calc(100vw - var(--cb-space-6xl));
  padding: var(--cb-space-2xl);
  border: 1px solid var(--cbc-line-strong);
  border-radius: var(--cb-radius-3xl);
  background: var(--cbc-raised);
  box-shadow: var(--cbc-shadow);
  color: var(--cbc-ink);
  animation: cbc-emerge var(--cb-motion-base) var(--cbc-spring) backwards;
}
/* The fallback for a browser with no popover support, copied from the notice
   panel rather than reinvented. */
.cb-walk:not(:popover-open):not([data-open]) {
  display: none;
}
.cb-walk[data-open] {
  display: grid;
}
/* The one exit. Driven from a timer rather than animationend, because a
   backgrounded tab never fires that event. */
.cb-walk[data-closing] {
  opacity: 0;
  transition: opacity var(--cb-motion-fast) var(--cb-motion-ease);
}

.cb-walk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-lg);
}
/* The one place the card says where you are. A number rather than a row of
   dots, and it used to carry both: the number is what reads at a glance, what
   survives a screenshot, and what the live region already announces. The dots'
   stated advantage, that they could re-lay out where a number would have to
   lie, was never true of either. The run's length is fixed when the run is
   planned, so a stop skipped at run time gaps the numbering and leaves the
   total exactly where it was. */
.cb-walk-step {
  color: var(--cbc-ink-faint);
  font-size: var(--cb-type-xs-size);
  line-height: var(--cb-type-xs-line-height);
  font-variant-numeric: tabular-nums;
}
.cb-walk-shut {
  display: grid;
  place-items: center;
  inline-size: var(--cb-space-3xl);
  block-size: var(--cb-space-3xl);
  margin-inline-end: calc(var(--cb-space-md) * -1);
  border: 0;
  border-radius: var(--cb-radius-md);
  background: none;
  color: var(--cbc-ink-faint);
  cursor: pointer;
}
.cb-walk-shut:hover {
  background: var(--cbc-hover);
  color: var(--cbc-ink);
}
.cb-walk-shut .cb-icon {
  inline-size: var(--cb-space-xl);
  block-size: var(--cb-space-xl);
}

.cb-walk-title {
  margin: 0;
  font-size: var(--cb-type-lg-size);
  line-height: var(--cb-type-lg-line-height);
  font-weight: var(--cb-font-weight-semibold);
  color: var(--cbc-ink);
}
.cb-walk-body {
  margin: 0;
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-ink-muted);
}

/* The keys, on the two stops that teach one. Empty on the other four, and an
   empty grid track would leave a gap that reads as a missing paragraph. */
.cb-walk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-lg);
  color: var(--cbc-ink-faint);
  font-size: var(--cb-type-xs-size);
  line-height: var(--cb-type-xs-line-height);
}
.cb-walk-legend:empty {
  display: none;
}
.cb-walk-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-sm);
}

/* flex-end rather than space-between: the buttons are the only thing left in
   this row now the dots have gone, and space-between would push them across to
   the left edge of the card. */
.cb-walk-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cb-space-lg);
  margin-block-start: var(--cb-space-xs);
}
.cb-walk-keys {
  display: flex;
  align-items: center;
  gap: var(--cb-space-md);
}