/* Lesson tour (fork of the Simulations Guide Mode card). Palette: Tuva teal + gold. */
#lesson-tour { position:fixed; inset:0; z-index:12000; font-family:"Source Sans 3", Roboto, Arial, sans-serif; }
#lesson-tour .lt-backdrop { position:absolute; inset:0; background:transparent; pointer-events:auto; transition:background 0.2s; }
#lesson-tour:not(.has-spot) .lt-backdrop { background:rgba(10,32,30,0.5); }
#lesson-tour .lt-spot {
  position:absolute; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,32,30,0.55); outline:3px solid #FEC905; outline-offset:0;
}
#lesson-tour .lt-card { position:absolute; transition:left 0.3s ease, top 0.3s ease; width:min(380px, calc(100vw - 24px)); background:#fff; color:#243b39; border-radius:12px; padding:12px 16px; box-shadow:0 16px 48px rgba(0,0,0,0.45); box-sizing:border-box; max-height:calc(100vh - 16px); overflow-y:auto; }
#lesson-tour .lt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#lesson-tour .lt-count { font-size:0.75rem; font-weight:600; color:#6b7f7d; letter-spacing:0.02em; }
#lesson-tour .lt-players { display:flex; gap:2px; }
#lesson-tour .lt-players button { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; background:none; border:none; color:#034b45; line-height:1; cursor:pointer; border-radius:5px; }
#lesson-tour .lt-players button:hover { background:#e6f0ef; }
#lesson-tour .lt-players svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; fill:none; display:block; flex-shrink:0; }
#lesson-tour .lt-players .lt-ic-spk-on, #lesson-tour .lt-players .lt-ic-spk-off { width:16px; height:16px; stroke-width:2; }
#lesson-tour .lt-players .lt-ic-pause { width:14px; height:14px; }
#lesson-tour .lt-players .lt-ic-play { width:13.5px; height:13.5px; display:none; }
#lesson-tour .lt-players .lt-ic-replay { width:13.5px; height:13.5px; stroke-width:2.37; }
#lesson-tour .lt-pause.is-paused .lt-ic-pause { display:none; }
#lesson-tour .lt-pause.is-paused .lt-ic-play { display:block; }
#lesson-tour .lt-players .lt-ic-spk-off { display:none; }
#lesson-tour .lt-mute.is-muted .lt-ic-spk-on { display:none; }
#lesson-tour .lt-mute.is-muted .lt-ic-spk-off { display:block; }
#lesson-tour .lt-title { margin:6px 0 4px; font-size:1.1rem; font-weight:700; color:#034b45; }
#lesson-tour .lt-body { margin:0 0 8px; font-size:0.95rem; line-height:1.5; }
#lesson-tour .lt-hint { margin:0 0 8px; font-size:0.8rem; font-weight:600; color:#8a5a00; }
#lesson-tour .lt-hint:empty { display:none; }
#lesson-tour .lt-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#lesson-tour .lt-nav { display:flex; gap:8px; margin-left:auto; }
#lesson-tour .lt-skip { background:none; border:none; color:#6b6b6b; font-size:0.8125rem; font-weight:600; cursor:pointer; padding:6px 4px; }
#lesson-tour .lt-skip:hover { color:#034b45; text-decoration:underline; }
#lesson-tour .lt-back { background:#fff; border:1px solid #c5d3d1; color:#034b45; border-radius:6px; padding:7px 14px; font-size:0.8125rem; font-weight:600; cursor:pointer; }
#lesson-tour .lt-back:hover:not(:disabled) { background:#eaf1f0; }
#lesson-tour .lt-back:disabled { opacity:0.4; cursor:not-allowed; }
#lesson-tour .lt-next { position:relative; overflow:hidden; background:#034b45; border:1px solid #034b45; color:#fff; border-radius:6px; padding:7px 18px; font-size:0.8125rem; font-weight:600; cursor:pointer; }
#lesson-tour .lt-next:hover { background:#0a6a62; }
/* Auto-advance progress: a gold fill along the Next button's bottom edge. */
#lesson-tour .lt-next-fill { position:absolute; left:0; bottom:0; height:3px; width:0; background:#FEC905; pointer-events:none; }
#lesson-tour button:focus-visible { outline:3px solid #FEC905; outline-offset:2px; }

/* "Tour" button: in the player's top bar, or floating on the landing page. */
.lt-btn { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; cursor:pointer; font:inherit; font-size:0.75rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.lt-btn--bar { height:32px; margin:0 8px 0 auto; padding:0 12px; color:#fff; background:transparent; border:1.5px solid #FEC905; border-radius:16px; }
.lt-btn--bar:hover { background:rgba(254,201,5,0.18); }
.lt-btn--float { position:fixed; right:20px; bottom:20px; z-index:900; height:40px; padding:0 16px; color:#034b45; background:#FEC905; border:none; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,0.3); }
/* Student view: in the lesson panel's header, next to the "Step N of M" menu (or the text-size button on the intro). */
.lt-btn--step { position:relative; height:32px; margin:0 0 0 8px; padding:0 12px; color:#034b45; background:#fff; border:1.5px solid #034b45; border-radius:16px; }
.lt-btn--step:hover { background:#e6f0ef; }
.lt-btn--step .lt-btn-dot { border-color:#fff; }
.lt-btn--float:hover { background:#ffd83a; }
/* Landing page: in the lesson card's button row, an outline button like Teacher / Student Preview. */
.lt-btn--row { justify-content:center; gap:6px; min-height:44px; align-self:stretch; padding:6px 14px; color:#4b5563; background:#fff; border:1px solid #9ca3af; border-radius:4px; font-family:"Source Sans 3","Source Sans Pro",sans-serif !important; /* a global button{font-family:...!important} would otherwise win */ font-size:16px; font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; }
.lt-btn--row svg { width:15px; height:15px; opacity:0.8; }
.lt-btn--row:hover { color:#034b45; background:#f3f4f6; border-color:#6b7280; }
.lt-btn--row .lt-btn-dot { display:none; }
.lt-btn:focus-visible { outline:3px solid #FEC905; outline-offset:2px; }
/* Student view: the button names the screen ("Tour: Data table") and shows a gold dot while that screen's help is unseen. */
.lt-btn--bar { position:relative; }
.lt-btn-screen { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:-4px; }
.lt-btn-screen:empty { display:none; }
.lt-btn-dot { display:none; position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:#FEC905; border:2px solid #034b45; box-sizing:border-box; }
.lt-btn--new .lt-btn-dot { display:block; animation:ltDot 1.1s ease-in-out 2; }
@keyframes ltDot { 0%,100% { transform:scale(1); } 50% { transform:scale(1.7); } }
@media (max-width: 1100px) { .lt-btn-screen { display:none; } }
@media (prefers-reduced-motion: reduce) { .lt-btn--new .lt-btn-dot { animation:none; } }

/* Help for one screen: a smaller card. */
#lesson-tour .lt-card--compact { width:min(340px, calc(100vw - 24px)); padding:10px 14px; }
#lesson-tour .lt-card--compact .lt-title { font-size:1rem; margin:4px 0 3px; }
#lesson-tour .lt-card--compact .lt-body { font-size:0.9rem; line-height:1.45; }

/* Ghost cursor (same shape and motion as the sims' Guide Mode cursor; Tuva teal outline). */
#lesson-tour .lt-cursor { position:absolute; width:26px; height:26px; margin:-2px 0 0 -2px; pointer-events:none; transition:opacity 0.2s; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.4)); z-index:2; }
#lesson-tour .lt-cursor-svg { display:block; transition:transform 0.12s ease; }
#lesson-tour .lt-cursor--press .lt-cursor-svg { transform:scale(0.8); }
#lesson-tour .lt-cursor-ring { position:absolute; left:2px; top:2px; width:10px; height:10px; border-radius:50%; border:2px solid #FEC905; opacity:0; transform:translate(-50%,-50%) scale(0.4); }
#lesson-tour .lt-ring-anim { animation:ltRing 0.5s ease-out; }
@keyframes ltRing { 0%{opacity:0.9;transform:translate(-50%,-50%) scale(0.4);} 100%{opacity:0;transform:translate(-50%,-50%) scale(3.2);} }
@media (prefers-reduced-motion: reduce) { #lesson-tour .lt-ring-anim { animation:none; } #lesson-tour .lt-card { transition:none; } }
/* Putting the player back after Skip / Done: only the cursor shows, input stays blocked. */
#lesson-tour.is-restoring .lt-card, #lesson-tour.is-restoring .lt-spot { display:none !important; }
#lesson-tour.is-restoring .lt-backdrop { background:transparent; }