/* BestYou·AI — the tour, dressed in the site's own register.
   Navy ground, gold rule, no new vocabulary. Written 2026-08-08. */

/* ── the control in the masthead ──────────────────────────────────────── */
.tour-start {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  margin-right: 4px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 520;
  letter-spacing: .01em;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .78;
  cursor: pointer;
}
.tour-start:hover,
.tour-start:focus-visible { opacity: 1; border-color: #c8a95e; color: #8a6d20; }
:root[data-theme="dark"] .tour-start:hover,
:root[data-theme="dark"] .tour-start:focus-visible { border-color: #e6cf92; color: #e6cf92; }

/* ── the highlight ────────────────────────────────────────────────────────
   A ring around the target, never a fill over it — the step has to be
   readable while it is being pointed at. No animation: the calm-surface
   rule holds here, so this is a fixed ring rather than a pulse. */
.tour-spot {
  position: fixed;
  z-index: 98;
  pointer-events: none;
  border: 2px solid #c8a95e;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(200, 169, 94, .16),
              0 0 0 9999px rgba(6, 14, 28, .34);
}

/* ── the card ─────────────────────────────────────────────────────────── */
.tour-box {
  position: fixed;
  z-index: 99;
  right: 22px;
  bottom: 22px;
  width: min(92vw, 360px);
  padding: 20px 22px 18px;
  background: #0a1b33;
  color: #eaf2fb;
  border: 1px solid rgba(230, 207, 146, .3);
  border-radius: 14px;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .46);
}

.tour-count {
  margin: 0 0 6px;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8fa8c4;
}

.tour-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: #f6ecc9;
}

.tour-body {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #c6d5e8;
}

/* ── transport ─────────────────────────────────────────────────────────────
   Play · Pause · Stop, on their own row above Back/Next/End. They control the
   FLOW; the row below controls the POSITION — two different jobs, so they do
   not sit in one undifferentiated line of six buttons. */
.tour-transport {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.tour-tbtn {
  min-height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .18);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tour-tbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.tour-tbtn:disabled { opacity: .4; cursor: default; }
/* Lit while the tour is actually running — driven by playback state, never by
   the click, so the button can never disagree with what is happening. */
.tour-running .tour-play {
  color: #0b1a12;
  background: var(--gold, #d9a441);
  border-color: var(--gold, #d9a441);
}
.tour-box[data-size="mini"] .tour-transport { display: none; }

.tour-bar { display: flex; gap: 8px; align-items: center; }

.tour-btn {
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22);
  background: none;
  color: #eaf2fb;
}
.tour-btn:focus-visible { outline: 2px solid #e6cf92; outline-offset: 2px; }
.tour-btn[disabled] { opacity: .38; cursor: default; }

.tour-next {
  background: #e6cf92;
  border-color: #e6cf92;
  color: #14243d;
  font-weight: 600;
}
.tour-end { margin-left: auto; opacity: .72; }
.tour-end:hover { opacity: 1; }

/* Screen-reader announcement channel — present, never seen. */
.tour-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── phone ────────────────────────────────────────────────────────────────
   The card goes full-width along the bottom, where a thumb already is, and
   the copy tightens. The ring stays, because it is the whole point. */
@media (max-width: 599px) {
  .tour-box {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
    padding: 16px 16px 14px;
  }
  .tour-title { font-size: 19px; }
  .tour-body  { font-size: 15px; margin-bottom: 13px; }
  .tour-btn   { min-height: 44px; padding: 0 14px; flex: 1 1 auto; }
  .tour-end   { flex: 0 0 auto; }

  /* The masthead is tight on a phone. Where there is a menu, the tour is
     offered from inside it; where there is not (the wall, company, portal
     all use a bare .bar), the masthead control stays, because hiding it
     with no replacement would make the tour unreachable. */
  .mast-in .tour-start { display: none; }
}

/* The tour's entry inside the phone menu — a button styled to sit level
   with the links beside it, not to shout over them. */
.tour-start-menu {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  font: inherit;
  font-size: 17px;
  text-align: left;
  color: #e6cf92;
  background: none;
  border: 0;
  cursor: pointer;
}
.tour-start-menu:focus-visible { outline: 2px solid #e6cf92; outline-offset: 2px; }

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

/* ── top row: step count, and stopping the voice ──────────────────────────
   HK asked for a clear way to stop the audio at the top of the card. It is
   a real toggle with aria-pressed, not a decoration: the state is announced,
   and it survives across pages so silencing the tour once silences it for
   the rest of the journey. */
.tour-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tour-top .tour-count { margin: 0; flex: 1 1 auto; }

.tour-mute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c6d5e8;
  background: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
}
.tour-mute:hover { border-color: rgba(230, 207, 146, .6); color: #f6ecc9; }
.tour-mute:focus-visible { outline: 2px solid #e6cf92; outline-offset: 2px; }

/* A speaker that loses its waves when the voice is off — the icon states
   which way the control currently sits, rather than which way it will go. */
.tour-mute-ico {
  width: 13px; height: 13px;
  background: currentColor;
  clip-path: polygon(0 35%, 28% 35%, 58% 8%, 58% 92%, 28% 65%, 0 65%);
}
.tour-mute:not(.off) .tour-mute-ico {
  box-shadow: 5px 0 0 -3px currentColor, 8px 0 0 -3px currentColor;
}
.tour-mute.off { color: #8fa8c4; opacity: .8; }

/* ── karaoke ──────────────────────────────────────────────────────────────
   The sentence being spoken carries the gold; the ones already read stay
   legible but recede. Driven by the audio clock, so it cannot drift. */
.tour-s { transition: color .18s ease; }
.tour-saying { color: #f6ecc9; }
.tour-said   { color: #93a7bf; }

/* When the voice cannot be reached the tour reads in silence and says so by
   simply not pretending — the control dims rather than claiming to play. */
.tour-nosound .tour-mute { opacity: .45; }

/* ── the whole journey, clickable ─────────────────────────────────────────
   HK asked to see the entire journey from inside the box. Seven segments:
   done, current, still to come — and any of them reachable directly, so a
   visitor can go to the part they came for instead of pressing Next six
   times to find out whether it is worth it. */
.tour-dots {
  display: flex;
  gap: 5px;
  margin: 14px 0 12px;
}
.tour-dot {
  flex: 1 1 0;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.tour-dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 9px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
}
.tour-dot.done::after { background: rgba(230, 207, 146, .55); }
.tour-dot.on::after   { background: #e6cf92; height: 4px; top: 8.5px; }
.tour-dot:hover::after { background: rgba(230, 207, 146, .8); }
.tour-dot:focus-visible { outline: 2px solid #e6cf92; outline-offset: 2px; border-radius: 3px; }

@media (max-width: 599px) {
  .tour-mute { min-height: 34px; font-size: 12.5px; }
  .tour-dot  { height: 30px; }
  .tour-dot::after { top: 13px; }
}

/* ══ THE PLAYER: FOUR SIZES, AND QUIET UNTIL WANTED ═══════════════════════
   HK, 2026-08-09. A guided tour has to sit ON the page it is describing, so
   the card is always in the way of something. These give the visitor the
   say: collapse it to a pill, or open it to a full sheet, and it stays
   however they left it for the rest of the journey.

   Smallest first: mini · s (default) · m · full. */

.tour-box {
  transition: opacity .2s ease, width .18s ease, padding .18s ease;
}

/* TRANSLUCENT UNTIL WANTED.
   At rest the card lets the page read through it; bring the pointer onto it,
   or move focus into it, and it becomes solid. Focus-within matters as much
   as hover — a keyboard user never triggers hover and must not be left
   reading a faded card. */
@media (hover: hover) {
  .tour-box { opacity: .62; }
  .tour-box:hover,
  .tour-box:focus-within,
  .tour-box.tour-held { opacity: 1; }
}

/* On a touch screen there is no pointer to rest on the card, so a
   hover-gated fade would leave a phone permanently dimmed with no way to
   clear it. Touch keeps it solid. Same lesson as the audience panel that
   was invisible on every phone. */
@media (hover: none) {
  .tour-box { opacity: 1; }
}

/* ── mini: a pill, not a card ─────────────────────────────────────────────
   Everything but the step count and the size control folds away. The whole
   pill is pressable, because a 20px target is not a fair ask of a thumb. */
.tour-box[data-size="mini"] {
  width: auto;
  padding: 8px 10px 8px 16px;
  cursor: pointer;
  border-radius: 999px;
}
.tour-box[data-size="mini"] .tour-title,
.tour-box[data-size="mini"] .tour-body,
.tour-box[data-size="mini"] .tour-dots,
.tour-box[data-size="mini"] .tour-bar,
.tour-box[data-size="mini"] .tour-mute { display: none; }
.tour-box[data-size="mini"] .tour-top { margin-bottom: 0; }
.tour-box[data-size="mini"] .tour-count { white-space: nowrap; }

/* ── the three sizes up ───────────────────────────────────────────────── */
.tour-box[data-size="s"]    { width: min(92vw, 340px); }
.tour-box[data-size="m"]    { width: min(94vw, 460px); }
.tour-box[data-size="m"]    .tour-title { font-size: 23px; }
.tour-box[data-size="m"]    .tour-body  { font-size: 16.5px; }

.tour-box[data-size="full"] {
  width: min(96vw, 640px);
  max-height: 82vh;
  overflow-y: auto;
  padding: 26px 28px 22px;
}
.tour-box[data-size="full"] .tour-title { font-size: 27px; }
.tour-box[data-size="full"] .tour-body  { font-size: 18px; line-height: 1.6; }

/* ── the size control ─────────────────────────────────────────────────── */
.tour-sizer { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.tour-sizer button {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: #c6d5e8;
  background: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  cursor: pointer;
}
.tour-sizer button:hover:not([disabled]) { border-color: rgba(230,207,146,.6); color: #f6ecc9; }
.tour-sizer button:focus-visible { outline: 2px solid #e6cf92; outline-offset: 2px; }
.tour-sizer button[disabled] { opacity: .3; cursor: default; }

/* ── phone ────────────────────────────────────────────────────────────────
   The card is a bottom sheet on a phone, which is where a thumb already is.
   "full" becomes a genuine full-height sheet rather than a slightly wider
   card, because on a small screen there is no middle ground worth having. */
@media (max-width: 599px) {
  .tour-box[data-size="s"],
  .tour-box[data-size="m"] { width: auto; left: 10px; right: 10px; }

  .tour-box[data-size="m"] .tour-title { font-size: 21px; }
  .tour-box[data-size="m"] .tour-body  { font-size: 16px; }

  .tour-box[data-size="full"] {
    left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: 92vh;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .tour-box[data-size="full"] .tour-title { font-size: 23px; }
  .tour-box[data-size="full"] .tour-body  { font-size: 17px; }

  .tour-box[data-size="mini"] {
    left: auto; right: 10px; bottom: 10px;
    padding: 10px 12px 10px 16px;
  }
  .tour-sizer button { width: 34px; height: 34px; }
}