/*
 * Motor Trade - the guided tour over the live page (UI5, 21.9.2026; restyled
 * 21.9.2026 as a white coach-mark card with a coral frame).
 *
 * app.js draws the role tutorial as one fixed card (#motor-guide) with a ring
 * on the real element each step is about. This file adds the rest of a coach
 * mark and nothing else:
 *   - a dimmed backdrop with a hole cut around the element (.motor-guide__spotlight),
 *     framed in coral - the one strong colour on the tour, reserved for it,
 *   - an arrow from the card to that element (.motor-guide__arrow), coral too,
 *   - "Step x of 8" with a progress bar, Back / Next / Done / Skip / Close and
 *     a visible keyboard focus, on a white card that reads like the content,
 *   - the permanent "How to play" button at the foot of the sidebar.
 * The backdrop and the arrow are pointer-events: none, so the round underneath
 * keeps every click; the tour never traps focus and never pauses anything.
 * The app's own teal is untouched: it marks the way back in, not the lesson.
 * No emoji, no gradients.
 */

/* ---------- the dimmed backdrop with a hole ------------------------------- */
.motor-guide__spotlight {
  position: fixed;
  z-index: 54;
  pointer-events: none;
  border-radius: 12px;
  /* The giant outer shadow IS the dim; the two inner rings frame the element:
     a thin white separator, then the coral coach-mark frame. */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 5px #e05d45,
    0 0 0 9999px rgba(16, 42, 58, 0.45);
  /* No transition on the geometry. The page moves under the tour - a card is
     inserted above the framed element, a countdown grows a line - and the
     frame is re-measured the moment it does; an eased 180ms slide would then
     always be a frame's width behind the element it is pointing at, which is
     the one thing this frame must never be. It snaps instead. */
}
.motor-guide__spotlight[hidden] { display: none; }

/* The element's own ring stays for the tests that count it, but the frame is
   the spotlight now, so the ring goes quiet while the tour is open. */
body.motor-guide-open .motor-guide-focus { outline-color: transparent; }

/* ---------- the arrow ------------------------------------------------------ */
.motor-guide__arrow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 56;
  pointer-events: none;
  overflow: visible;
}
.motor-guide__arrow[hidden] { display: none; }

/* ---------- the card ------------------------------------------------------- */
.motor-theme .motor-guide { max-width: 372px; }
.motor-theme .motor-guide__card {
  width: 372px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px 16px;
}
.motor-theme .motor-guide__head { align-items: center; }
.motor-theme .motor-guide__count {
  color: #8494a5;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
/* Eight thin segments under the head: one filled per step. */
.motor-guide__progress {
  display: block;
  height: 4px;
  margin: 10px 0 0;
  border-radius: 999px;
  background: #eef1f3;
  overflow: hidden;
}
.motor-guide__progress > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #e05d45;
  transition: width 0.2s ease;
}
.motor-theme .motor-guide__title {
  margin: 12px 0 6px;
  font-size: 17px;
  line-height: 1.3;
  outline: none;
}
.motor-theme .motor-guide__body { font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.motor-theme .motor-guide__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.motor-theme .motor-guide__actions button { min-height: 34px; padding: 7px 14px; }
.motor-theme .motor-guide__actions button:focus-visible {
  outline: 2px solid #00858f;
  outline-offset: 2px;
}
.motor-theme #motor-guide-next.is-done::before {
  content: '\2713';
  display: inline-block;
  margin-right: 6px;
  font-weight: 900;
}
/* Skip and Close sit apart from the step controls, so the eye reads
   Back / Next as a pair; Close is last, one click away at the far end. */
.motor-theme .motor-guide__actions .motor-guide__skip { margin-left: auto; }
.motor-theme .motor-guide__actions .motor-guide__close { margin-left: 0; }
.motor-theme .motor-guide__hint {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: #8494a5;
}

/* ---------- the way back in: How to play, at the foot of the sidebar ------- */
.motor-theme #screen-game > .sidebar > .sb-footer .motor-guide-open,
.motor-theme #screen-game > .sidebar .sb-footer > .motor-guide-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(34, 232, 227, 0.1);
  border: 1px solid rgba(34, 232, 227, 0.45);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.motor-theme #screen-game > .sidebar .sb-footer > .motor-guide-open::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.motor-theme #screen-game > .sidebar .sb-footer > .motor-guide-open:hover {
  background: rgba(34, 232, 227, 0.18);
  border-color: #22e8e3;
}
.motor-theme #screen-game > .sidebar .sb-footer > .motor-guide-open:focus-visible {
  outline: 2px solid #22e8e3;
  outline-offset: 2px;
}
@media (max-height: 820px) {
  .motor-theme #screen-game > .sidebar .sb-footer > .motor-guide-open { padding: 6px 10px; margin-bottom: 6px; }
}

/* ---------- a phone keeps its bottom sheet; the spotlight and arrow go ----- */
@media (max-width: 640px), (max-height: 520px) {
  .motor-guide__spotlight,
  .motor-guide__arrow { display: none !important; }
  .motor-theme .motor-guide__card { width: auto; max-width: none; }
}

/* ---------- the card outranks the dim INSIDE this host --------------------
   The dim is not a page-level layer: .motor-guide__spotlight is a CHILD of
   #motor-guide, which is the element carrying z-index 60. So 54 never competed
   with the page - it competed with its own siblings, and the card, which has no
   z-index of its own, lost. The 9999px shadow painted straight over the card,
   its text and its buttons.

   Hit-testing still found the card, because the spotlight is pointer-events:
   none - which is why the buttons stayed clickable while looking greyed out,
   and why fiddling with any child's opacity could never have fixed it.

   One rule settles it: the card is positioned and ranked above both the
   spotlight (54) and the arrow (56) within the host. The page behind the host
   is dimmed exactly as before. */
.motor-guide__card {
  position: relative;
  z-index: 60;
}

/* ---------- the card and its controls stay above the dim ------------------
   The spotlight's dim is a 9999px box-shadow at z-index 54 and the card sits
   at 60, so the card is above it - but only while every one of its own layers
   is opaque. These pin that: the card's face and each button's face are
   white, so nothing on the tour is ever tinted by the mask behind it.
   The disabled state reads as unavailable in the INK, never by letting the
   dim through (styles.css .motor-guide__actions button:disabled). */
.motor-theme .motor-guide__card { background: #ffffff; }
.motor-theme .motor-guide__actions button { background: #ffffff; }
.motor-theme #motor-guide-next:not(:disabled) {
  background: #00858f;
  border-color: #00858f;
  color: #ffffff;
}

/* ---------- reduced motion ------------------------------------------------
   The tour moves a frame around the page and grows a progress line. Someone
   who has asked their system for less movement gets the same tour with the
   state changes applied at once. The frame already snaps rather than eases;
   this covers the progress line and any transition added later. */
@media (prefers-reduced-motion: reduce) {
  .motor-guide,
  .motor-guide *,
  .motor-guide__spotlight,
  .motor-guide__arrow {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- the card never grows past the viewport ------------------------
   The clamp in app.js can always pull a card back inside - unless the card is
   taller than the screen, when pulling the bottom in pushes the top out. So
   the card is bounded and its BODY is what scrolls: the head, the progress
   line and the actions row keep their places, and Back/Next/Skip/Close are on
   screen at any height a laptop or tablet has. */
.motor-theme .motor-guide__card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 16px);
}
.motor-theme .motor-guide__body {
  overflow-y: auto;
  min-height: 0;
}
.motor-theme .motor-guide__actions { flex: 0 0 auto; }