/* JDLO walkthrough, multipage (v6): the Play button (mounted into #tour-slot), the mini player
   (mounted into #tour-player-slot) and the cover that hides a page the tour opened until it is in
   place. Written in the v5 site's grammar: one ink, square corners, no shadow, no gradient, no
   rounded chips. Uses the page's --ink, --grey, --pad and --ease when present. Every class starts
   with jt- so nothing here meets the site's own rules.

   No layout shift: while scripting is on, #tour-slot keeps the button's height from the first paint,
   so the page never moves when the button appears. With scripting off the slot is empty and 0 px
   tall. The player's offer button sits in a row of fixed height, so it appears without moving anything. */

:root {
  --jt-key: 3rem;
  --jt-ink: var(--ink, #0a0a0a);
  --jt-dim: rgba(255, 255, 255, .64);
  --jt-ease: var(--ease, cubic-bezier(.31, .13, .11, 1));
}

/* ---------- A page the tour opened: covered from the first paint until the tour has put it in place.
   The inline <head> snippet adds .jt-arrive; tour.js lifts it with the house ease. If tour.js never
   runs, the cover lifts by itself after 1.5 s. ---------- */
html.jt-arrive::after {
  content: ""; position: fixed; inset: 0; z-index: 300;   /* the site's --z-curtain */
  background: var(--jt-ink); pointer-events: none; transform-origin: 50% 0;
  animation: jt-uncover .4s var(--jt-ease) 1.5s forwards;
}
html.jt-arrive.jt-lift::after { animation: none; transform: scaleY(0); transition: transform .4s var(--jt-ease); }
@keyframes jt-uncover { to { transform: scaleY(0); visibility: hidden; } }
/* The player stays above both curtains, so it reads as one player across pages. */
html.jt-arrive .jt-player, html.jt-leaving .jt-player { z-index: 310; }

/* ---------- The slot and the Play button ---------- */
/* content-box: the site sets border-box everywhere, which would fold the padding into the min-height.
   flex: the button sits on no text line, so no baseline gap is added under it. */
#tour-slot:not(:empty) { display: flex; align-items: flex-start; padding-top: 1.5rem; }
@media (scripting: enabled) {
  #tour-slot { display: flex; align-items: flex-start; box-sizing: content-box; padding-top: 1.5rem; min-height: var(--jt-key); }
}
/* Client pages and /services: the slot sits under the intro line, in the intro's first column. */
.open > #tour-slot { grid-column: 1; }
.jt-btn {
  display: inline-grid; grid-template-columns: var(--jt-key) auto; align-items: center; gap: .875rem;
  min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--jt-ink); font: inherit; text-align: left; cursor: pointer;
  visibility: hidden; -webkit-tap-highlight-color: transparent;
}
.jt-ready .jt-btn { visibility: visible; }
.jt-btn__key { position: relative; width: var(--jt-key); height: var(--jt-key); background: var(--jt-ink); }
.jt-btn__key::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: .875rem; height: 1rem; margin: -.5rem 0 0 -.3125rem;
  background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .3s var(--jt-ease);
}
.jt-btn__label { display: grid; gap: .1875rem; line-height: 1.1; }
.jt-btn__title { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.015em; }
.jt-btn__note { color: var(--grey, #6e6e73); font-size: .875rem; }
.jt-btn:focus-visible { outline: 2px solid var(--jt-ink); outline-offset: .375rem; }
@media (hover: hover) { .jt-btn:hover .jt-btn__key::before { transform: translateX(.1875rem); } }

/* ---------- The mini player: same place on every page ---------- */
.jt-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;   /* over the sticky header (100), under modals (200) */
  /* Clears the iPhone home indicator and the notch in landscape. --jt-sab lets a test stand in for a device inset. */
  padding: 10px max(var(--pad, 16px), env(safe-area-inset-right, 0px)) max(6px, calc(var(--jt-sab, env(safe-area-inset-bottom, 0px)) + 2px)) max(var(--pad, 16px), env(safe-area-inset-left, 0px));
  background: var(--jt-ink); color: #fff;
  font-size: 15px; line-height: 1.3; letter-spacing: -.01em;
  animation: jt-in .28s var(--jt-ease) both;
}
.jt-player--still { animation: none; }
.jt-player[hidden], .jt-player [hidden] { display: none !important; }
@keyframes jt-in { from { opacity: 0; transform: translateY(12px); } }

/* One segment per part of this playlist; the current one fills as it plays. */
.jt-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 2px; height: 3px; }
.jt-seg { flex: 1 1 0; overflow: hidden; background: rgba(255, 255, 255, .22); }
.jt-seg i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }

/* The sentence on top, across the whole player (3 lines on phones, 2 on desktop, fixed height).
   Under it one row of 44 px controls: play/pause (or "Keep going" / "Back to the tour" once it stopped),
   where we are, the offer for a client part ("Hear more"), and stop/close. */
.jt-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 44px;
  grid-template-areas: "text text text text" "lead where offer end";
  align-items: center; column-gap: 12px; row-gap: 6px;
  max-width: 72rem; margin: 0 auto; padding-top: 2px;
}
.jt-text { grid-area: text; min-width: 0; }
.jt-ctl--pp, .jt-keep { grid-area: lead; }
.jt-where { grid-area: where; }
.jt-offer { grid-area: offer; }
.jt-ctl--end { grid-area: end; }

.jt-ctl {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jt-ctl--pp { background: #fff; color: var(--jt-ink); }
.jt-ctl:disabled, .jt-keep:disabled, .jt-offer:disabled { cursor: default; }
.jt-i { width: 20px; height: 20px; fill: currentColor; }
.jt-ctl--pp .jt-i { display: none; }
.jt-player[data-pp="pause"] .jt-ctl--pp .jt-i--pause,
.jt-player[data-pp="play"] .jt-ctl--pp .jt-i--play,
.jt-player[data-pp="next"] .jt-ctl--pp .jt-i--next { display: block; }
.jt-ctl--end .jt-i--close { display: none; }
.jt-player[data-end="close"] .jt-ctl--end .jt-i--stop { display: none; }
.jt-player[data-end="close"] .jt-ctl--end .jt-i--close { display: block; }
@media (hover: hover) { .jt-ctl--end:hover { background: rgba(255, 255, 255, .1); } }

/* The note ("Captions only", "Tap play to keep listening") is a tab on top of the player, out of the
   flow, so it never moves the caption or resizes the player. */
.jt-note {
  position: absolute; left: 0; bottom: 100%; margin: 0;
  padding: 6px max(var(--pad, 16px), env(safe-area-inset-left, 0px)) 3px;
  background: var(--jt-ink); color: var(--jt-dim); font-size: 13px; line-height: 1.25; white-space: nowrap;
}
/* "Stand-in voice" (manifest.playerTag): the same kind of tab, on the right, while the clips aren't JP's. */
.jt-tag {
  position: absolute; right: 0; bottom: 100%; margin: 0; pointer-events: none;
  padding: 6px max(var(--pad, 16px), env(safe-area-inset-right, 0px)) 3px;
  background: var(--jt-ink); color: var(--jt-dim); font-size: 13px; line-height: 1.25; white-space: nowrap;
}
/* One sentence at a time, at the bottom of a box of fixed height: the player never changes size and
   nothing in it moves (each sentence is a new <span>). A sentence too long for the box is set smaller (.is-long). */
.jt-cap {
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  height: 62px; margin: 0; font-size: 16px; line-height: 20.6px; font-weight: 500; overflow-wrap: anywhere;
}
.jt-cap.is-long { font-size: 14px; letter-spacing: -.005em; }
.jt-player:not([data-state="playing"]) .jt-cap { color: var(--jt-dim); }

.jt-where { min-width: 0; margin: 0; color: var(--jt-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-keep {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 14px;
  border: 0; border-radius: 0; background: #fff; color: var(--jt-ink);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jt-keep .jt-i { width: 14px; height: 14px; }
.jt-offer {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; max-width: 14rem;
  padding: 0 2px 0 4px; border: 0; border-radius: 0; background: none; color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jt-offer__t {
  overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(255, 255, 255, .5);
}
.jt-offer .jt-i { flex: none; width: 16px; height: 16px; }
@media (hover: hover) { .jt-offer:hover .jt-offer__t { text-decoration-color: #fff; } }

.jt-ctl:focus-visible, .jt-keep:focus-visible, .jt-offer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* With a mouse, the page moves under a resting cursor while the walkthrough plays; hover effects would
   fire at random. They wait until it stops. A click anywhere still stops it (it lands on <body>). */
@media (hover: hover) and (pointer: fine) { html.jt-playing main { pointer-events: none; } }

/* The site's sticky header steps aside while the walkthrough plays. */
.jt-header-away { transform: translateY(-100%) !important; }

.jt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-tour-focus]:focus { outline: none; }

/* ---------- Desktop: a floating bar ---------- */
@media (min-width: 1024px) {
  :root { --jt-key: 4rem; }
  #tour-slot:not(:empty) { padding-top: 2rem; }
  .jt-btn { gap: 1.125rem; }
  .jt-btn__key::before { width: 1.125rem; height: 1.3125rem; margin: -.65625rem 0 0 -.4375rem; }
  .jt-btn__title { font-size: 1.375rem; }
  .jt-btn__note { font-size: 1rem; }

  .jt-player { bottom: 1.5rem; width: min(56rem, calc(100% - 3rem)); margin: 0 auto; padding: 14px 16px 8px; }
  .jt-note, .jt-tag { padding-left: 16px; padding-right: 16px; }
  .jt-grid { row-gap: 6px; }
  .jt-cap { height: 47px; font-size: 18px; line-height: 23.4px; }
  .jt-cap.is-long { font-size: 16px; line-height: 23.4px; }
  .jt-where { font-size: 15px; }
  .jt-offer { font-size: 16px; }
}
@media (scripting: enabled) and (min-width: 1024px) {
  #tour-slot { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jt-player { animation: none; }
  .jt-btn__key::before { transition: none; }
  html.jt-arrive::after { display: none; }
}