/* Tour: the caption card (beside the step, as a strip along the bottom, or an end card in the middle), the click mark
   and the "Your turn" tag. With Show me how's pointer and outline, these are the only tour-only things on a page.
   Colors only from look/look.css (so a client's accent shows through), both looks. Nothing here dims, tints or
   flashes the page. They sit in Show me how's layer, so they also show over an open pop-up. */

/* ---- the caption card ---- */
bb-tour {
  position: fixed; left: 16px; top: 16px; box-sizing: border-box;
  width: 300px; max-width: calc(100vw - 32px);
  display: grid; gap: 12px; padding: 16px 18px 14px;
  border: 2px solid var(--accent); border-radius: 16px; background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-pop); font-family: var(--font); text-align: left; pointer-events: auto;
  transition: left .3s ease, top .3s ease;
}
bb-tour[hidden] { display: none !important; }
bb-tour .tr-in { display: contents; }
bb-tour.tr-still { transition: none; }
bb-tour * { box-sizing: border-box; }
bb-tour .tr-top { display: flex; align-items: center; gap: 10px; }
bb-tour .tr-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-strong); color: var(--on-accent-strong);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
bb-tour .tr-n { font-size: 14px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
bb-tour .sp { flex: 1; }
bb-tour .tr-pause {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
bb-tour .tr-pause:hover { border-color: var(--accent); }
bb-tour .tr-pause svg { width: 14px; height: 14px; flex: none; }
bb-tour .tr-bar { height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
bb-tour .tr-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; }
bb-tour .say { margin: 0; font-size: 16.5px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
bb-tour .say b { font-weight: 800; }
bb-tour .tr-turn { font-weight: 800; color: var(--accent-strong); }
bb-tour .tr-paused { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
bb-tour .tr-nav { display: flex; align-items: center; gap: 8px; }
bb-tour .tr-nav .btn { min-height: 44px; font-size: 15px; font-weight: 700; padding: 0 18px; }
bb-tour .tr-again {
  min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
}
bb-tour .tr-again:hover { color: var(--ink); }

/* the strip along the bottom, for a wide pop-up that leaves no room at the side */
bb-tour.tr-strip {
  left: 50% !important; top: auto !important; bottom: 14px; transform: translateX(-50%);
  width: min(1180px, calc(100vw - 32px)); max-width: none;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; padding: 10px 14px 10px 18px;
}
bb-tour.tr-strip .say { font-size: 16px; }
bb-tour.tr-strip .tr-bar { grid-column: 1 / -1; }
bb-tour.tr-strip .tr-nav .btn { min-height: 42px; }
bb-tour.tr-strip .tr-paused { grid-column: 1 / -1; }

/* the end card, in the middle */
bb-tour.tr-end {
  left: 50% !important; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: auto;
  gap: 14px; justify-items: center; text-align: center; padding: 28px 30px 24px; border-radius: 20px;
}
/* wide (step 23 of the sample): as wide as the room, so it covers whole name tags instead of cutting pieces off them */
bb-tour.tr-end.tr-wide { width: min(1250px, calc(100vw - 32px)); padding: 30px 48px 26px; gap: 12px; }
bb-tour.tr-end h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.25; }
bb-tour.tr-end .tr-text { margin: 0; max-width: 720px; font-size: 16px; color: var(--ink-soft); font-weight: 600; line-height: 1.5; text-wrap: balance; }
bb-tour.tr-end .btns { justify-content: center; margin-top: 8px; }
bb-tour.tr-end .btns .btn { min-height: 48px; font-size: 16px; font-weight: 800; padding: 0 22px; }
bb-tour.tr-end .tr-top { justify-content: center; }

/* the end card's two columns: what people told us, and what the HQ does now */
bb-tour .tr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 12px 10px; align-items: stretch; width: 100%; max-width: 1040px; margin-top: 6px; text-align: left; }
bb-tour .tr-cap { margin: 0; padding-bottom: 2px; font-size: 13px; font-weight: 800; letter-spacing: var(--caps-spacing); text-transform: uppercase; color: var(--ink-soft); }
bb-tour .tr-said { display: flex; align-items: center; margin: 0; padding: 16px 20px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--raised); }
bb-tour .tr-said p, bb-tour .tr-now p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--ink); text-wrap: balance; }
bb-tour .tr-to { display: grid; place-items: center; color: var(--ink-soft); }
bb-tour .tr-to svg { width: 18px; height: 18px; }
bb-tour .tr-now { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
bb-tour .tr-kind { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--mist); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
bb-tour .tr-kind svg { width: 20px; height: 20px; }

/* ---- the click mark: a ring where the pointer clicks ---- */
.tr-click {
  position: fixed; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); pointer-events: none;
}
.tr-click[hidden] { display: none !important; }

/* ---- "Your turn: click here", the tag beside Show me how's outline ---- */
.tr-ring-tag {
  position: fixed; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: var(--radius-pill); background: var(--accent-strong); color: var(--on-accent-strong);
  font-family: var(--font); font-size: 13px; font-weight: 800; white-space: nowrap; pointer-events: none;
}
.tr-ring-tag[hidden] { display: none !important; }

/* ---- a tablet or a phone (under 1024 px): the card docks at the bottom, full width ---- */
@media (max-width: 1023px) {
  bb-tour:not(.tr-end), bb-tour.tr-strip {
    left: 10px !important; right: 10px !important; top: auto !important; bottom: 10px !important; transform: none;
    width: auto; max-width: none; padding: 12px 14px; gap: 8px; max-height: 45vh; overflow: auto;
  }
  bb-tour.tr-strip { grid-template-columns: minmax(0, 1fr); }
  bb-tour .say, bb-tour.tr-strip .say { font-size: 15px; }
  bb-tour .tr-nav { flex-wrap: wrap; }
}
/* while it is docked (tour.js sets the class and --tour-dock), the page's end can scroll above the card, and an open
   pop-up starts at the top and ends above it */
html.tour-docked body::after { content: ""; display: block; height: var(--tour-dock, 0px); }
html.tour-docked dialog[open] { margin-top: 8px; margin-bottom: auto; max-height: calc(100dvh - var(--tour-dock, 0px) - 16px); }
/* the strip on a laptop or a big screen (html.tour-strip, --tour-dock the strip and its gap): an open pop-up that would
   end under the strip ends above it instead (html.tour-lift, set by tour.js only then), as low as it can, its body
   scrolling when it is taller than the room */
html.tour-lift dialog[open] { margin-top: auto; margin-bottom: calc(var(--tour-dock, 0px) + 8px); max-height: calc(100dvh - var(--tour-dock, 0px) - 16px); }
/* a side card turned the strip so the room's own signs show (a step's keep, html.tour-room, set by tour.js only then):
   the page's end gets the strip's height of room, so the room can scroll up above the strip */
html.tour-room body::after { content: ""; display: block; height: var(--tour-dock, 0px); }

/* ---- a phone: the end card takes the screen's width ---- */
@media (max-width: 599px) {
  bb-tour.tr-end, bb-tour.tr-end.tr-wide { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: calc(100vw - 20px); padding: 20px 16px 16px; }
  bb-tour.tr-end h2 { font-size: 21px; }
  bb-tour .tr-said, bb-tour .tr-now { padding: 12px 14px; }
  bb-tour .tr-said p, bb-tour .tr-now p { font-size: 16px; }
  /* one column: each column under its own heading, what people told us first, then what the HQ does now (a quote is
     never under "What HQ does now"); the arrows and the empty corner go */
  bb-tour .tr-cols { grid-template-columns: minmax(0, 1fr); }
  bb-tour .tr-cols > span { display: none; }
  bb-tour .tr-cols > .tr-said { order: 1; }
  bb-tour .tr-cols > .tr-cap ~ .tr-cap { order: 2; margin-top: 6px; }
  bb-tour .tr-cols > .tr-now { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  bb-tour { transition: none; }
}