/* Practice Chains runner — spotlight overlay with a real click-through hole.
 * Loaded by index.html; see practice-runner.js for the mechanics.
 */
/* Visual dimming ONLY. The mask must never intercept the pointer: doing so
   killed page scrolling (a fixed overlay eats the wheel, so a trainee could not
   scroll down to the focus points below the fold) and stopped :hover from
   reaching the row underneath, which is what reveals the sheet's row actions.
   Clicks outside the current step's target are blocked by a capture-phase
   listener in practice-runner.js instead, which gates interaction without
   taking the pointer away from the page. */
.pr-mask {
  position: fixed;
  z-index: 2147482900;
  background: rgba(6, 10, 20, 0.72);
  pointer-events: none;
  transition: none;
}
.pr-ring {
  position: fixed;
  z-index: 2147482950;
  border: 3px solid #22c55e;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25), 0 0 24px rgba(34, 197, 94, 0.55);
  pointer-events: none;
}
.pr-bubble {
  position: fixed;
  z-index: 2147482960;
  max-width: 320px;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  font: 14px/1.5 system-ui, -apple-system, sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.pr-bubble-title {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4ade80;
}
.pr-bubble-body { color: #cbd5e1; }
/* Batch toast: fixed near the top so it never covers the ringed field. */
.pr-bubble.pr-bubble-top {
  max-width: min(420px, calc(100vw - 24px));
  text-align: center;
}

.pr-badge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147482970;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font: 13px/1.4 system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.pr-badge button {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: inherit;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.pr-badge button:disabled { opacity: .6; cursor: default; }
/* Failure notice for Stop training. Collapsed when empty so the badge's flex
   gap does not leave a hole next to the button in the ordinary case. */
.pr-badge-msg {
  font-size: 12px;
  color: #fca5a5;
}
.pr-badge-msg:empty { display: none; }
.pr-final {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(6, 10, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pr-final-card {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  font: 14px/1.5 system-ui, -apple-system, sans-serif;
}
.pr-final-card h2 { margin: 0 0 8px; font-size: 18px; }
.pr-final-card p { margin: 0 0 16px; color: #94a3b8; }
/* Start next training is the happy path after complete, so it is the filled
   primary. Approve and Request changes stay outline. Wraps on narrow screens
   rather than squashing. */
.pr-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pr-final-card button {
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pr-final-next {
  background: #22c55e;
  color: #06240f;
}
.pr-final-approve,
.pr-final-changes {
  background: transparent;
  color: #e5e7eb;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
}
.pr-final-card button:disabled { opacity: .6; cursor: default; }

/* Change-request dock. Fixed to the body so it survives every SPA navigation
   (only #dashboardContent is ever swapped), and the body carries matching
   padding so the app is pushed over instead of hidden underneath it. Nothing
   in the app's own desktop chrome is position:fixed — the header and sidebar
   are flex children of .app — so the padding is enough on its own there. */
.pr-cr-dock {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  z-index: 2147482980;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  overflow-y: auto;
  background: #111827;
  color: #e5e7eb;
  border-left: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.35);
  font: 14px/1.5 system-ui, -apple-system, sans-serif;
}
body.pr-cr-docked { padding-right: 360px; }
/* The dock keeps the runner's own dark chrome in either theme, the same way the
   bubble and the badge do — it is training furniture sitting over the app, not
   part of it. Against a dark app the drop shadow stops reading, so the edge has
   to come from the border. */
html[data-theme="dark"] .pr-cr-dock {
  border-left-color: rgba(148, 163, 184, 0.55);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.6);
}
.pr-cr-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #4ade80;
}
.pr-cr-guide {
  margin: 0;
  font-size: 13px;
  color: #94a3b8;
}
.pr-cr-text {
  flex: 1;
  min-height: 140px;
  width: 100%;
  box-sizing: border-box;
  background: #0b1220;
  color: inherit;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  resize: none;
}
.pr-cr-msg {
  font-size: 12px;
  color: #94a3b8;
  min-height: 16px;
}
.pr-cr-msg.is-error { color: #fca5a5; }
.pr-cr-submit {
  background: #22c55e;
  color: #06240f;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pr-cr-submit:disabled { opacity: .6; cursor: default; }
/* The way out of the dock. Deliberately quiet: it is the escape hatch, not the
   thing the trainee is here to do, and it must never be mistaken for Submit. */
.pr-cr-stop {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: #94a3b8;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.pr-cr-stop:hover { color: #e5e7eb; }
.pr-cr-stop:disabled { opacity: .6; cursor: default; }

/* On a phone a 360px rail would leave the app a sliver, so the dock becomes a
   bottom sheet. The breakpoint is the app's own 768px on purpose: that is where
   .mobile-bottom-bar appears, and the bar is position:fixed full width, so at
   any narrower width a right rail would have the bar running underneath it.
   The sheet clears the bar instead, because navigating the CRM while writing
   this up is the entire point of the dock. */
@media (max-width: 768px) {
  body.pr-cr-docked { padding-right: 0; }
  .pr-cr-dock {
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    max-height: 52vh;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 16px;
    border-left: none;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.4);
  }
  html[data-theme="dark"] .pr-cr-dock {
    border-left-color: transparent;
    border-top-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.6);
  }
  .pr-cr-text { min-height: 90px; }
}
/* Continue button on an explain-only (info) step. The gate allows clicks inside
   #pr-bubble, so this is reachable while the rest of the page is locked. */
.pr-bubble-action {
  margin-top: 12px;
  background: #22c55e;
  color: #06240f;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}