/* HOP — "Watch a day in HOP" (tour.js; v120: explain, then show).
   EXPLAIN: the app is blurred behind a navy message at the top, with "Show me". SHOW: the message fades away, the app
   comes into focus and plays, with only a small bar at the bottom. The card is the same navy in light and dark. */
html.is-touring .sample-banner{display:none !important;}
html.is-touring .intro-switch{display:none !important;}

/* the app, blurred and quiet while a message explains what comes next */
html.is-touring body > *:not(.tour-layer){ transition:filter .35s ease; }
html.tour-blur body > *:not(.tour-layer){ filter:blur(9px) saturate(.75); }
.tour-layer{position:fixed; inset:0; z-index:2000; pointer-events:none;}
.tour-veil{position:fixed; inset:0; background:rgba(10,22,40,.32); opacity:0; transition:opacity .35s ease; pointer-events:none;}
.tour-layer.is-explain .tour-veil{opacity:1;}
.tour-shield{position:fixed; inset:0; pointer-events:auto; background:transparent;}

.tour-ring{position:fixed; border-radius:16px; border:3px solid #fbd57f; box-shadow:0 0 0 4px rgba(251,213,127,.35); pointer-events:none;
  transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease;}
.tour-ring.is-dim{box-shadow:0 0 0 4px rgba(251,213,127,.35), 0 0 0 200vmax rgba(8,18,34,.38);}
.tour-finger{position:fixed; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; pointer-events:none;
  background:rgba(251,213,127,.42); border:3px solid #fff; box-shadow:0 4px 16px rgba(8,18,34,.35);
  transition:left .6s cubic-bezier(.3,.7,.2,1), top .6s cubic-bezier(.3,.7,.2,1), transform .15s;}
.tour-finger i{position:absolute; inset:-3px; border-radius:50%; border:3px solid #fbd57f; opacity:0;}
.tour-finger.is-tap{transform:scale(.82);}
.tour-finger.is-tap i{animation:tourRipple .6s ease-out;}
@keyframes tourRipple{from{opacity:1; transform:scale(.8);} to{opacity:0; transform:scale(2.1);}}

/* the message: always at the very top */
.tour-card{position:fixed; left:50%; top:calc(14px + env(safe-area-inset-top,0px)); width:min(520px, calc(100% - 24px)); pointer-events:none;
  background:#10274a; color:#fff; border-radius:22px; padding:16px 18px 16px; box-shadow:0 20px 60px rgba(8,18,34,.5), 0 0 0 1px rgba(255,255,255,.08);
  font-family:var(--font-body, system-ui, sans-serif); opacity:0; transform:translate(-50%, -14px); transition:opacity .3s ease, transform .3s ease;
  max-height:calc(100vh - 28px); overflow:auto;}
.tour-card.is-on{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
.tour-card.is-new .tour-h, .tour-card.is-new .tour-p{animation:tourIn .4s ease both;}
@keyframes tourIn{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}
.tour-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.tour-k{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#9fc3df;}
.tour-k b{color:#fbd57f; font-weight:800;}
.tour-skip{border:0; background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:13px; font-weight:700; padding:7px 11px; border-radius:999px; cursor:pointer; min-height:34px;}
.tour-dots{display:flex; gap:5px; margin:0 0 12px;}
.tour-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25);}
.tour-dots i.is-done{background:rgba(251,213,127,.6);}
.tour-dots i.is-on{background:#fbd57f; width:20px; border-radius:4px;}
.tour-h{font-family:var(--font-display, system-ui, sans-serif); font-size:24px; line-height:1.2; margin:0 0 8px; color:#fff; letter-spacing:-.01em;}
.tour-p{font-size:16.5px; line-height:1.5; margin:0 0 16px; color:#dbe8f3;}
.tour-ctl{display:flex; align-items:center; gap:10px;}
.tour-ctl[hidden]{display:none;}
.tour-b{border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; font:inherit; font-size:14.5px; font-weight:700; border-radius:14px; padding:10px 14px; min-height:46px; cursor:pointer;}
.tour-b:disabled{opacity:.3; cursor:default;}
.tour-show{flex:1; border:0; border-radius:16px; min-height:52px; cursor:pointer; font:inherit; font-size:17.5px; font-weight:900; color:#10274a; background:#fbd57f;
  box-shadow:0 8px 22px rgba(251,213,127,.28);}
.tour-show span{font-size:14px; margin-left:4px;}
.tour-show:active{transform:scale(.98);}
.tour-b:focus-visible, .tour-skip:focus-visible, .tour-cta:focus-visible, .tour-show:focus-visible, .tour-mini button:focus-visible{outline:3px solid #fbd57f; outline-offset:2px;}

/* while the app plays: one small bar at the bottom */
.tour-mini{position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 16px); display:flex; gap:4px; padding:5px;
  border-radius:999px; background:rgba(16,39,74,.9); box-shadow:0 10px 30px rgba(8,18,34,.35); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;}
.tour-mini.is-on{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
.tour-mini button{width:42px; height:42px; border:0; border-radius:50%; background:transparent; color:#fff; font:inherit; font-size:17px; font-weight:800; cursor:pointer;}
.tour-mini button.is-on{background:rgba(251,213,127,.25); color:#fbd57f;}
.tour-mini button[data-tour-skip]{font-size:14px; color:#9fc3df;}

/* the last message */
.tour-card.is-end .tour-p{margin-bottom:10px;}
.tour-why{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px;}
.tour-why li{position:relative; padding:9px 10px 9px 34px; background:rgba(255,255,255,.07); border-radius:12px; font-size:14.5px; line-height:1.4; color:#dbe8f3;}
.tour-why li::before{content:"\2713"; position:absolute; left:11px; top:9px; color:#fbd57f; font-weight:900;}
.tour-why b{color:#fff;}
.tour-again{font-size:14px; line-height:1.4; margin:0 0 12px; padding:10px 12px; border-radius:12px; background:rgba(251,213,127,.14); color:#fff;}
.tour-again b{color:#fbd57f;}
.tour-end-acts{display:flex; flex-wrap:wrap; gap:8px;}
.tour-cta{flex:1 1 100%; border:0; background:#fbd57f; color:#10274a; font:inherit; font-size:16px; font-weight:800; border-radius:14px; padding:12px 14px; min-height:48px; cursor:pointer;}
.tour-end-acts .tour-b{flex:1 1 0;}
.tour-fine{font-size:12px; color:#9fc3df; margin:10px 0 0;}

/* yesterday's score chip lights up */
.tour-flash{animation:tourFlash .55s ease-in-out 4;}
@keyframes tourFlash{0%,100%{box-shadow:0 0 0 0 rgba(251,213,127,0); transform:scale(1);} 50%{box-shadow:0 0 0 7px rgba(251,213,127,.75); transform:scale(1.05);}}

/* the offer in the classic intro and HOP's Office */
.tour-offer{display:flex; align-items:center; gap:12px; width:calc(100% - 28px); max-width:520px; margin:10px auto 0; padding:11px 14px; border-radius:16px; cursor:pointer;
  border:1.5px solid #fbd57f; background:#fffaf0; color:#10274a; text-align:left; font:inherit;}
.tour-offer-ic{flex:none; width:36px; height:36px; border-radius:50%; background:#10274a; color:#fbd57f; display:flex; align-items:center; justify-content:center; font-size:14px; padding-left:2px;}
.tour-offer b{display:block; font-size:15.5px;}
.tour-offer i{display:block; font-style:normal; font-size:13px; color:#526a8b;}

@media (prefers-reduced-motion: reduce){
  .tour-finger, .tour-ring, .tour-card, .tour-mini, .tour-veil, html.is-touring body > *:not(.tour-layer){transition:none;}
  .tour-flash{animation:none; box-shadow:0 0 0 6px rgba(251,213,127,.75);}
  .tour-card.is-new .tour-h, .tour-card.is-new .tour-p{animation:none;}
}

/* v121: the idea in one picture: a big library, a small day */
.tour-concept{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:6px; position:relative;}
.tour-concept[hidden]{display:none;}
.tour-concept li{position:relative; display:flex; flex-direction:column; gap:1px; padding:9px 12px 9px 40px; border-radius:14px; background:rgba(255,255,255,.07); opacity:.25; transform:translateX(-6px);}
.tour-concept li::before{content:""; position:absolute; left:14px; top:13px; width:12px; height:12px; border-radius:50%; background:#fbd57f; box-shadow:0 0 0 4px rgba(251,213,127,.18);}
.tour-concept li:not(:last-child)::after{content:""; position:absolute; left:19px; top:27px; width:2px; height:calc(100% - 8px); background:rgba(251,213,127,.4);}
.tour-concept li:first-child{padding-top:12px; padding-bottom:12px; background:rgba(251,213,127,.12);}
.tour-concept li:nth-child(3){background:rgba(95,184,166,.16);}
.tour-concept b{font-size:15.5px; color:#fff;}
.tour-concept span{font-size:13.5px; color:#bcd2e4;}
.tour-concept.is-play li{animation:tourStep .5s ease forwards; animation-delay:calc(var(--i) * .9s + .2s);}
@keyframes tourStep{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .tour-concept li{opacity:1; transform:none;} .tour-concept.is-play li{animation:none;} }

/* v125: "The Easy 8 Explained": a colourful, pulsing button beside the Easy 8 title */
.tour-hrow{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 8px;}
.tour-hrow .tour-h{margin:0; flex:1; min-width:0;}
.tour-x8{flex:none; position:relative; border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:900; line-height:1.15; color:#fff; text-align:center;
  max-width:132px; padding:9px 12px; border-radius:14px; text-shadow:0 1px 2px rgba(0,0,0,.25);
  background:linear-gradient(120deg, #ff7a59, #f7b733, #4cd3a5, #4aa3f0, #b77cf0, #ff7a59); background-size:300% 100%;
  animation:tourX8Hue 5s linear infinite, tourX8Pulse 1.6s ease-in-out infinite; box-shadow:0 0 0 0 rgba(247,183,51,.6);}
.tour-x8[hidden]{display:none;}
.tour-x8:focus-visible{outline:3px solid #fff; outline-offset:2px;}
@keyframes tourX8Hue{to{background-position:300% 0;}}
@keyframes tourX8Pulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(247,183,51,.55);} 50%{transform:scale(1.06); box-shadow:0 0 0 9px rgba(247,183,51,0);}}

/* the side trip: Mike's Easy 8 page in focus, free to tap, with a small frame at the bottom */
.tour-layer.is-detour .tour-shield{display:none;}
.tour-detour{position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:min(520px, calc(100% - 24px)); pointer-events:auto;
  background:#10274a; color:#fff; border-radius:20px; padding:12px 14px; box-shadow:0 18px 50px rgba(8,18,34,.45), 0 0 0 1px rgba(255,255,255,.08);
  font-family:var(--font-body, system-ui, sans-serif); opacity:0; transform:translate(-50%, 14px); transition:opacity .3s ease, transform .3s ease;}
.tour-detour[hidden]{display:none;}
.tour-detour.is-on{opacity:1; transform:translate(-50%, 0);}
.tour-detour .tour-k{margin:0 0 4px;}
.tour-dp{margin:0 0 6px; font-size:14px; line-height:1.4; color:#dbe8f3;}
.tour-dp.is-try{color:#fff; font-weight:700;}
.tour-detour-back{display:block; width:100%; margin-top:8px; border:0; border-radius:14px; min-height:48px; cursor:pointer; font:inherit; font-size:17px; font-weight:900; color:#10274a; background:#fbd57f; box-shadow:0 8px 22px rgba(251,213,127,.28);}
.tour-detour-back:focus-visible{outline:3px solid #fff; outline-offset:2px;}
html.is-tour-detour .bottom-nav, html.is-tour-detour [data-nav-home]{display:none !important;}
html.tour-detour-root .topbar .back-btn{visibility:hidden;}
html.is-tour-detour main{padding-bottom:220px !important;}
@media (prefers-reduced-motion: reduce){ .tour-x8{animation:none;} .tour-detour{transition:none;} }

/* v128: deeper in, on an idea's own pages, the frame says so */
.tour-detour .is-deep-only{display:none;}
.tour-detour.is-deep .tour-dp{display:none;}
.tour-detour.is-deep .is-deep-only{display:block; color:#fff;}