/* Coach overlay for guided mode (?learn in the URL). */
#coach-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:99999;
  background:#1d1a26; color:#f2efe9;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  box-shadow:0 -4px 18px rgba(0,0,0,.25);
}
#coach-bar .num{ font-size:13px; color:#9a93a6; white-space:nowrap; }
#coach-bar .instr{ flex:1; font-size:16px; line-height:1.4; }
#coach-bar .instr b{ color:#f0d9ac; font-weight:600; }
#coach-bar .status{ font-size:13px; color:#9a93a6; white-space:nowrap; min-width:46px; text-align:right; }
#coach-bar .status.ok{ color:#7fd49a; font-weight:600; }
#coach-bar .status.prog{ color:#d8c79a; }
#coach-bar.ok{ background:#234a2b; }
/* one-shot pulse when a step's done() flips true; readable from peripheral vision */
#coach-bar.step-done{ animation:coach-step-done .9s ease-out 1; }
@keyframes coach-step-done{
  0%{ background:#2f6b3d; box-shadow:0 -4px 22px rgba(63,157,87,.55); }
  100%{ background:#1d1a26; box-shadow:0 -4px 18px rgba(0,0,0,.25); }
}
#coach-bar button.nav{
  font-family:inherit; border:none; border-radius:8px; padding:10px 15px; font-size:15px; cursor:pointer;
  background:#3a3447; color:#e9e4dc; white-space:nowrap;
}
#coach-bar button.nav:disabled{ opacity:.4; cursor:default; }
#coach-bar button.nav.primary{ background:#5a5366; }
#coach-bar button.nav.primary.ready{ background:linear-gradient(180deg,#3f9d57,#2f7d44); color:#fff; font-weight:600; }
/* step not yet detected as done: clickable, but yellow and confirms before advancing */
#coach-bar button.nav.primary.unmet{ background:linear-gradient(180deg,#e2b53a,#c8961f); color:#2a2200; font-weight:600; }

#coach-card{
  position:fixed; inset:0; z-index:100000; background:rgba(12,10,18,.75);
  display:flex; align-items:center; justify-content:center; padding:24px;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
#coach-card .box{
  background:#fff; color:#211d2b; max-width:440px; border-radius:16px; padding:24px 26px;
}
#coach-card h2{ margin:0 0 10px; font-size:22px; }
#coach-card p{ margin:0 0 10px; font-size:15px; line-height:1.55; color:#3a3543; }
#coach-card ul{ margin:0 0 14px; padding-left:20px; font-size:14px; color:#5a5566; line-height:1.5; }
#coach-card button{
  font-family:inherit; border:none; border-radius:10px; padding:12px 18px; font-size:16px; font-weight:600; cursor:pointer;
  background:linear-gradient(180deg,#9a6b2f,#7d5523); color:#fff;
}

/* highlight ring on the real element the coach is pointing at */
.coach-hi{
  position:relative; z-index:99998 !important;
  box-shadow:0 0 0 3px #f0d9ac, 0 0 0 7px rgba(240,217,172,.45) !important;
  border-radius:8px !important;
  animation:coach-pulse 1.3s ease-in-out infinite;
}
@keyframes coach-pulse{
  0%,100%{ box-shadow:0 0 0 3px #f0d9ac, 0 0 0 6px rgba(240,217,172,.5); }
  50%{ box-shadow:0 0 0 3px #f0d9ac, 0 0 0 12px rgba(240,217,172,0); }
}
/* the drawer is a full-height panel; a pulsing outer ring there is noise.
   steady inset border instead. */
.map-drawer.coach-hi{
  animation:none;
  box-shadow:inset 0 0 0 3px #f0d9ac !important;
}
body.coach-on{ padding-bottom:64px; }
/* the coach bar is fixed to the viewport bottom; without this, the rail's bottom
   strip (the Main menu link) sits underneath it. */
body.coach-on #rail{ height:calc(100vh - 64px); }
#coach-bar #coach-exit{ background:#2b2638; color:#9a93a6; }
#coach-bar #coach-exit:hover{ color:#fff; }