/* =============================================================================
   GDR PLATFORM  |  GUIDED TOUR styles (own file, no additions to style.css)
   Edge-docked, non-blocking: entry card + branch-option strip sit in the bottom
   zone above the wind dock; nothing covers the 3D subject (obstruction law).
   ============================================================================= */

/* entry card (first load): "let Lerato walk you through it" */
#tour-start{position:absolute;bottom:120px;left:50%;transform:translateX(-50%) translateY(10px);z-index:9;
  display:none;align-items:center;gap:16px;max-width:min(560px,92vw);padding:14px 18px;
  background:rgba(14,14,16,.9);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-left:2px solid var(--red);border-radius:3px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transition:.32s cubic-bezier(.25,.46,.45,.94)}
#tour-start.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
#tour-start .ts-body{flex:1 1 auto}
#tour-start .ts-title{font-family:var(--head);font-size:19px;letter-spacing:.03em;color:#fff;line-height:1}
#tour-start .ts-sub{font-size:11.5px;color:var(--grey);margin-top:4px;line-height:1.4}
#tour-start .ts-actions{display:flex;gap:9px;flex:0 0 auto}
.ts-btn{font-family:var(--head);font-size:14px;letter-spacing:.04em;padding:9px 16px;border-radius:2px;white-space:nowrap;transition:.16s cubic-bezier(.25,.46,.45,.94)}
.ts-btn.primary{background:var(--red);color:#fff;border:1px solid var(--red)}
.ts-btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(193,39,45,.35)}
.ts-btn.ghost{background:none;color:var(--grey);border:1px solid var(--line)}
.ts-btn.ghost:hover{color:#fff;border-color:#555}

/* the tour's own narration strip (visible across all tabs, unlike the stage-only
   voice caption). Sits in the bottom zone; never over the 3D subject. */
#tour-dock{position:static}
/* during the tour, the tour's own dock replaces the stage-only voice caption */
#app.tour-mode #voice-caption{display:none!important}
#tour-say{position:absolute;bottom:104px;left:50%;transform:translateX(-50%) translateY(8px);z-index:7;
  max-width:min(680px,90vw);padding:11px 16px;
  background:rgba(14,14,16,.84);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-left:2px solid var(--red);border-radius:3px;
  font-size:12.5px;line-height:1.45;color:#e8e8e8;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.25,.46,.45,.94)}
#tour-dock.show #tour-say{opacity:1;transform:translateX(-50%) translateY(0)}

/* branch-option strip (during the tour), just above the narration strip */
#tour-options{position:absolute;bottom:150px;left:50%;transform:translateX(-50%) translateY(8px);z-index:7;
  display:none;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(720px,92vw);
  opacity:0;transition:.28s cubic-bezier(.25,.46,.45,.94);pointer-events:none}
#tour-options.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.tour-opt{font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff;
  background:rgba(20,20,22,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:2px;
  padding:10px 15px;transition:.16s cubic-bezier(.25,.46,.45,.94)}
.tour-opt:hover{border-color:var(--red);background:rgba(193,39,45,.14);transform:translateY(-2px)}
.tour-opt.tour-end{color:var(--grey);font-weight:500}
.tour-opt.tour-end:hover{color:#fff;border-color:#555;background:rgba(20,20,22,.9);transform:none}

/* keep the tour chrome inside the "hide all" (H) law */
.chrome-hidden #tour-start,.chrome-hidden #tour-options,.chrome-hidden #tour-say{opacity:0!important;pointer-events:none!important}

@media(max-height:620px){
  #tour-start{bottom:96px}#tour-options{bottom:120px}
  #tour-start .ts-sub{display:none}
}
@media(max-width:640px){
  #tour-start{flex-direction:column;align-items:stretch;text-align:center}
  #tour-start .ts-actions{justify-content:center}
}