/* ============================================================================
 * tour.css -- the guided tour, dressed in the design system.
 *
 * driver.css (vendored, loaded immediately before this) ships a white card
 * with a drop shadow and a system font stack. None of that is this product.
 * Everything below is an OVERRIDE of that file rather than a replacement for
 * it, which is what keeps `driver.js` upgradable by copying two files: the
 * vendored sheet keeps owning geometry, arrow placement and the
 * `.driver-active *{pointer-events:none}` interaction lock, and this one only
 * restates colour, type and radius in olympus tokens.
 *
 * Both sheets are UNLAYERED. Between two unlayered sheets source order
 * decides, and `stylesheet_link_tag` in layouts/_head.html.erb emits this one
 * after driver.css -- that ordering is the only thing making these rules win,
 * since almost every pair below ties at 0-1-0.
 *
 * The tokens resolve per `html[data-theme]`, so paper and carbon are both
 * handled by the same declarations; there is no second block for the dark
 * theme and there must not be one.
 * ========================================================================= */

/* THE STACKING POSITION IS ARGUED IN tokens.css's --z-tour. The `!important`
   is NOT a precedence shortcut: driver.js builds the overlay as an inline SVG
   and assigns `style.zIndex = '10000'` on the element itself (it is a literal
   in dist/driver.js.mjs), so a stylesheet cannot reach it any other way. The
   popover is class-styled at z-index 1000000000 and needs no such escape --
   it only has to sit one above the overlay it belongs to. */
.driver-overlay {
  z-index: var(--z-tour) !important;
}

/* The scrim, matching `[data-modal]`'s exactly -- this app dims the page one
   way, and driver's own default (black at 0.7) reads as a different product.
   Same literal as olympus-remnant.css uses for the two modal backdrops;
   there is no token for it to share.

   driver takes `overlayColor`/`overlayOpacity` as JS config and writes both
   onto this path as inline styles, so `!important` is again the only way in.
   Setting it here rather than in the controller is also what keeps a colour
   literal out of app/javascript, where spec/design/palette_bypass_spec.rb
   rightly fails on one. */
.driver-overlay path {
  fill: rgb(0 0 0) !important;
  opacity: .45 !important;
}

.driver-popover {
  background: rgb(var(--elevated));
  color: rgb(var(--ink));
  border: 1px solid rgb(var(--hairline-strong));
  border-radius: var(--radius-lg);
  /* Every --shadow-* token in this design is `none` and tokens_spec.rb fails
     on one that is not: separation comes from ground and hairline, never
     blur. driver.css's `0 1px 10px #0006` is the one place a shadow would
     re-enter the app, so it is cancelled rather than re-tuned. */
  box-shadow: none;
  font-family: var(--fam-sans);
  padding: 14px;
  min-width: 260px;
  max-width: 320px;
  z-index: calc(var(--z-tour) + 1);
}

.driver-popover-title {
  font-family: var(--fam-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: rgb(var(--ink));
}

.driver-popover-description {
  font-size: var(--text-s);
  line-height: 1.55;
  color: rgb(var(--ink2));
}

.driver-popover-close-btn {
  color: rgb(var(--ink3));
  font-size: 16px;
  width: 28px;
  height: 26px;
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
  color: rgb(var(--ink));
}

.driver-popover-progress-text {
  font-family: var(--fam-sans);
  font-size: var(--text-2xs);
  color: rgb(var(--ink3));
}

/* Shaped from .btn / .btn-sm in olympus-remnant.css. This is not a second
   copy of Ui::Button: driver.js builds these <button>s itself, so there is no
   markup for a component to own -- the same reason toasts are not a component
   (docs/design-system/not-components.md, where the tour popover is recorded
   alongside them). If .btn's own padding or radius changes, nothing makes
   these follow. */
.driver-popover-footer-btn {
  padding: 4px 9px;
  border: 1px solid rgb(var(--hairline));
  border-radius: var(--radius);
  background: rgb(var(--elevated-2));
  color: rgb(var(--ink));
  font-family: var(--fam-sans);
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.3;
  text-shadow: none;
}

.driver-popover-footer-btn:hover,
.driver-popover-footer-btn:focus {
  background: rgb(var(--elevated));
  border-color: rgb(var(--hairline-strong));
}

/* The "next" button carries the tour forward and is the one thing to press,
   so it takes .btn-primary's accent. :last-child rather than a driver.js
   class because the library names the pair only by position. */
.driver-popover-navigation-btns button:last-child {
  background: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: rgb(var(--accent-ink));
  font-weight: 600;
}

.driver-popover-navigation-btns button:last-child:hover,
.driver-popover-navigation-btns button:last-child:focus {
  background: rgb(var(--accent));
  border-color: rgb(var(--accent));
}

.driver-popover-navigation-btns button + button {
  margin-left: 6px;
}

/* driver.css draws the arrow as a 5px border box and colours exactly one edge
   #fff, transparent on the other three -- so each side needs its own
   re-colour. The side name is where the arrow sits relative to the popover,
   which is the opposite edge from the one that stays opaque. */
.driver-popover-arrow-side-left   { border-left-color:   rgb(var(--elevated)); }
.driver-popover-arrow-side-right  { border-right-color:  rgb(var(--elevated)); }
.driver-popover-arrow-side-top    { border-top-color:    rgb(var(--elevated)); }
.driver-popover-arrow-side-bottom { border-bottom-color: rgb(var(--elevated)); }

/* The spotlight cut-out already isolates the target; the ring is what says
   "this exact control" when the target sits flush against a panel edge.
   `outline` rather than `border` because it is drawn outside the box and so
   cannot move anything -- reflowing the page under a highlight would shift
   the very element being pointed at. */
.driver-active-element {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
  border-radius: var(--radius);
}