/* =====================================================================
   TaskO guided product tour – styles
   ---------------------------------------------------------------------
   The simulated app is drawn with TaskO's own stylesheets (tokens.css,
   app.css, board.css, pages.css are loaded by the tour page before this
   file), so the screens use exactly the real class names and look like
   the real product in light and dark themes. This file only adds:
   1. Tokens         aliases from the player's names to TaskO's --fb-* tokens
   2. Tour shell     sim-only helpers (bp-*): root layout, toast, help menu,
                     floating tour button, intro/end card buttons
   3. Tour player    bp-t-* – spotlight, popup, cursor, ripple, player bar,
                     chapter list, intro/end overlay
   No web fonts: TaskO uses the system font stack, and the site's content
   security policy allows no third-party origins.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --f-d:var(--fb-font-display);--f-b:var(--fb-font);
  --ink:#172B4D;--ink-2:#44546F;--ink-3:#626F86;--mist:#F1F2F4;--line:#DFE1E6;
  --accent:#0C66E4;--accent-ink:#0055CC;--accent-soft:#E9F2FE;--accent-light:#85B8FF;
  --teal-l:#4BCE97;--mari:#E2B203;--rose:#C9372C;
  --ground:var(--mist);--surface:#fff;--muted:var(--ink-2);--line-strong:#C1C7D0;--dark:#1D2125;
}
/* the player and its cards are always light, whatever theme the simulated app shows */
.bp-t-pop,.bp-t-card,.bp-menu{color:var(--ink);font-family:var(--f-b)}
.bp-t-title,.bp-t-card h2,.bp-t-info b{font-family:var(--f-d)}

/* ---------- 2. tour shell ---------- */
#root{min-height:100vh}
.bp-touring .app-main{padding-bottom:132px}
@media(max-width:640px){.bp-touring .app-main{padding-bottom:200px}}
body.bp-touring:not(.bp-bar-top) .navbar-float{bottom:96px}
@media(max-width:640px){body.bp-touring:not(.bp-bar-top) .navbar-float{bottom:136px}}
@keyframes bp-fade{from{opacity:0}}
.bp-t-card .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.bp-t-card .btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.bp-t-card .btn-p:hover{background:var(--accent-ink)}
.bp-t-card .btn-g:hover{border-color:var(--ink-3)}
.bp-toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:500;font-size:14px;padding:12px 20px;border-radius:999px;z-index:700;box-shadow:0 14px 40px rgba(0,0,0,.25);display:flex;gap:10px;align-items:center;animation:bp-toast .3s ease;max-width:calc(100vw - 32px)}
.bp-toast svg{color:var(--teal-l)}
@keyframes bp-toast{from{opacity:0;transform:translate(-50%,-10px)}}
.bp-menu{position:fixed;z-index:720;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 40px -20px rgba(31,42,46,.35),0 2px 10px rgba(0,0,0,.06);padding:8px;width:300px}
.bp-menu button{display:flex;gap:12px;align-items:flex-start;width:100%;border:0;background:none;padding:12px;border-radius:10px;cursor:pointer;text-align:left}
.bp-menu button:hover{background:var(--mist)}
.bp-menu b{font-weight:600}
.bp-menu small{display:block;color:var(--ink-2);font-size:12.5px}
.bp-fab{position:fixed;right:18px;bottom:18px;z-index:650;background:var(--ink);color:#fff;border:0;border-radius:999px;height:48px;padding:0 20px 0 16px;font-weight:600;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.bp-fab:hover{background:#0B1322}
.bp-fab i{width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
@media(max-width:640px){.bp-fab{bottom:92px}}

/* =====================================================================
   3. Product tour player (1:1 with the reference .t-* rules)
   ===================================================================== */
.bp-t-block{position:fixed;inset:0;z-index:880;cursor:default}
.bp-t-spot{position:fixed;z-index:890;border-radius:14px;pointer-events:none;box-shadow:0 0 0 9999px rgba(12,14,18,.58);transition:all .38s cubic-bezier(.4,0,.2,1)}
.bp-t-spot::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid var(--accent-light);animation:bp-ring 1.6s ease-out infinite}
@keyframes bp-ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
.bp-t-spot.none{box-shadow:0 0 0 9999px rgba(12,14,18,.58);width:0!important;height:0!important}
.bp-t-spot.none::after{display:none}
.bp-t-pop{position:fixed;z-index:900;width:360px;background:#fff;border-radius:18px;padding:18px 20px 0;box-shadow:0 22px 60px rgba(0,0,0,.32);transition:left .38s cubic-bezier(.4,0,.2,1),top .38s cubic-bezier(.4,0,.2,1),opacity .2s;overflow:hidden}
.bp-t-pop.hide{opacity:0}
.bp-t-kick{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--accent-ink)}
.bp-t-live{width:8px;height:8px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 0 0 rgba(75,206,151,.6);animation:bp-live 1.4s infinite}
.bp-t-pop.paused .bp-t-live{background:var(--mari);animation:none}
@keyframes bp-live{70%{box-shadow:0 0 0 7px rgba(75,206,151,0)}100%{box-shadow:0 0 0 0 rgba(75,206,151,0)}}
.bp-t-title{font-family:var(--f-d);font-size:19px;font-weight:700;margin:8px 0 6px;letter-spacing:-.01em}
.bp-t-body{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.bp-t-action{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-radius:10px;padding:8px 12px}
.bp-t-timer{height:4px;background:var(--mist);margin:16px -20px 0}
.bp-t-timer i{display:block;height:100%;width:0;background:var(--accent)}
.bp-t-pop::before{content:"";position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg);display:none}
.bp-t-pop.side-right::before{display:block;left:-6px;top:26px}
.bp-t-pop.side-left::before{display:block;right:-6px;top:26px}
.bp-t-pop.side-bottom::before{display:block;top:-6px;left:calc(50% - 7px)}
.bp-t-pop.side-top::before{display:block;bottom:-6px;left:calc(50% - 7px)}
.bp-t-pop.sheet{left:12px!important;right:12px;width:auto}
.bp-t-pop.sheet::before{display:none}

.bp-t-cursor{position:fixed;z-index:960;left:0;top:0;width:28px;height:28px;pointer-events:none;transition:transform .62s cubic-bezier(.45,0,.2,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));display:none}
.bp-t-cursor.on{display:block}
.bp-t-ripple{position:fixed;z-index:955;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(133,184,255,.75);pointer-events:none;animation:bp-ripple .55s ease-out forwards}
@keyframes bp-ripple{to{transform:scale(4.2);opacity:0}}

.bp-t-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:950;width:min(820px,calc(100vw - 24px));background:var(--dark);color:#fff;border-radius:20px;padding:12px 14px 12px 20px;box-shadow:0 18px 50px rgba(0,0,0,.4);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center}
.bp-t-bar.top{bottom:auto;top:12px}
[data-g]{scroll-margin-top:84px;scroll-margin-bottom:24px}
.bp-t-info{display:flex;align-items:baseline;gap:10px;min-width:0}
.bp-t-info b{font-family:var(--f-d);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-t-info span{font-size:12.5px;color:#9C9CA8;white-space:nowrap}
.bp-t-demo{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--dark);background:var(--accent-light);border-radius:99px;padding:2px 8px;margin-left:auto;white-space:nowrap}
.bp-t-prog{grid-column:1/2;display:flex;gap:5px}
.bp-t-seg{flex:1;height:6px;border-radius:99px;background:#33343C;overflow:hidden;cursor:pointer;border:0;padding:0;position:relative}
.bp-t-seg i{position:absolute;inset:0 auto 0 0;background:var(--accent-light);border-radius:99px;transition:width .3s}
.bp-t-seg:hover{background:#45464F}
.bp-t-btns{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:4px}
.bp-t-btn{width:40px;height:40px;border-radius:50%;border:0;background:none;color:#D9D9E0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bp-t-btn:hover{background:#2A2B32;color:#fff}
.bp-t-btn.play{width:48px;height:48px;background:#fff;color:var(--ink)}
.bp-t-btn.play:hover{background:#E8E8EC;color:var(--ink)}
.bp-t-speed{height:34px;min-width:48px;border-radius:999px;border:1px solid #3A3B44;background:none;color:#fff;font-weight:700;font-size:13px;cursor:pointer;margin:0 4px}
.bp-t-speed:hover{background:#2A2B32}
@media (max-width:640px){
  .bp-t-bar{grid-template-columns:1fr;padding:12px 14px;bottom:10px}
  .bp-t-btns{grid-column:1;grid-row:auto;justify-content:space-between}
  .bp-t-demo{display:none}
}

/* chapter list on the bar */
.bp-t-chlist{position:fixed;z-index:965;width:300px;max-height:min(520px,calc(100vh - 140px));overflow:auto;background:var(--dark);color:#fff;border-radius:16px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.bp-t-chlist button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:#D9D9E0;padding:9px 10px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13.5px;text-align:left}
.bp-t-chlist button:hover{background:#2A2B32;color:#fff}
.bp-t-chlist button.on{background:#1C2B41;color:var(--accent-light)}
.bp-t-chlist .n{width:24px;height:24px;border-radius:50%;background:#2A2B32;display:flex;align-items:center;justify-content:center;font-size:11.5px;flex:none}
.bp-t-chlist .ok .n{background:var(--accent);color:#fff}
.bp-t-chlist small{margin-left:auto;color:#7C7C88;font-weight:500}

/* intro / end overlay */
.bp-t-overlay{position:fixed;inset:0;z-index:970;background:rgba(12,14,18,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;animation:bp-fade .25s}
.bp-t-card{width:min(560px,100%);background:#fff;border-radius:26px;padding:34px 36px 28px;box-shadow:0 30px 80px rgba(0,0,0,.4);max-height:calc(100vh - 32px);overflow:auto}
.bp-t-card .logo{height:40px;display:block;margin-bottom:22px}
.bp-t-card .kicker{font-size:12px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--accent-ink)}
.bp-t-card h2{font-size:30px;font-weight:700;letter-spacing:-.025em;margin:8px 0 10px;line-height:1.15}
.bp-t-card p{color:var(--ink-2);line-height:1.6;margin:0}
.bp-t-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;list-style:none;padding:0;margin:20px 0 24px}
.bp-t-grid li button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 10px;border-radius:12px;background:var(--mist);border:1px solid transparent;font-weight:600;font-size:13.5px;cursor:pointer;text-align:left}
.bp-t-grid li button:hover{border-color:var(--ink);background:#fff}
.bp-t-grid li button small{color:var(--ink-2);font-weight:500}
.bp-t-grid .n{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.bp-t-grid .n.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.bp-t-card .btns{display:flex;gap:10px;flex-wrap:wrap;flex-direction:row-reverse}
.bp-t-card .btns .btn{flex:1}
.bp-t-card .note{font-size:12.5px;color:var(--ink-3);margin-top:14px;text-align:center}
@media (max-width:640px){
  .bp-t-card{padding:24px 20px 20px}.bp-t-card h2{font-size:24px}
  .bp-t-grid{grid-template-columns:1fr;gap:4px;margin:14px 0 16px}.bp-t-grid li button{padding:7px 10px}.bp-t-grid li button small{display:none}
}
@media (prefers-reduced-motion:reduce){.bp-t-spot,.bp-t-pop,.bp-t-cursor{transition:none}.bp-t-spot::after,.bp-t-live{animation:none}}

/* the simulator re-renders on every click: overlays animate only when they first open (screens-core.js adds .bp-anim) */
#root .pop,#root .modal-backdrop,#root .modal,#root .cardback{animation:none}
#root .pop.bp-anim{animation:fb-pop-in var(--fb-dur) var(--fb-ease)}
#root .modal-backdrop.bp-anim{animation:fb-fade var(--fb-dur)}
#root .modal.bp-anim{animation:fb-modal-in var(--fb-dur-slow) var(--fb-ease)}

.bp-t-btn:disabled{opacity:.35;cursor:default;background:none}
/* UAT TASKO-045: very narrow screens keep every control, including Exit, on screen */
@media (max-width:380px){.bp-t-bar{padding:10px 8px}.bp-t-btns{gap:0}.bp-t-btn{width:36px;height:36px}.bp-t-btn.play{width:42px;height:42px}.bp-t-speed{min-width:40px;margin:0 2px}}