/* ============================================================
   PM Hub Guided Tour — styles
   Additive: no existing app styles are modified.
   All custom properties reference tokens defined in pmhub-mockup.html.
   ============================================================ */

body.tour-active { overflow: hidden; }

.tour-layer {
  position: fixed;
  inset: 0;
  z-index: 2500;
}

.tour-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(1px);
}

.tour-spotlight {
  position: absolute;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(10, 22, 40, 0.55),
    0 0 0 2px var(--accent, #1a5ca0);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
  pointer-events: none;
}

.tour-spotlight[data-centered="1"] { display: none; }

.tour-card {
  position: absolute;
  width: 380px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid var(--card-border, #d0d7e2);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--card-shadow-lg, 0 10px 40px rgba(10, 25, 60, 0.12), 0 4px 16px rgba(10, 25, 60, 0.08));
  z-index: 2501;
  animation: tourCardIn 0.18s ease-out;
}

@keyframes tourCardIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-card-head {
  padding: 12px 16px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.tour-req {
  font-size: 0.72rem;
  color: var(--text-500, #5a6680);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.tour-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.70rem;
  color: var(--text-400, #768098);
  white-space: nowrap;
}

.tour-title {
  padding: 6px 16px 0;
  font-size: 1.05rem;
  font-family: 'Newsreader', serif;
  font-weight: 600;
  color: var(--text-900, #0f1a2e);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.tour-body {
  padding: 8px 16px 12px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-800, #1e2a44);
}

.tour-body p { margin: 0 0 8px; }
.tour-body p:last-child { margin-bottom: 0; }

.tour-note {
  margin: 0 16px 12px;
  padding: 8px 10px;
  background: var(--amber-50, #fffbeb);
  border: 1px solid var(--amber-100, #fef3c7);
  border-radius: var(--radius-sm, 6px);
  color: var(--amber-800, #854d0e);
  font-size: 0.76rem;
  line-height: 1.45;
}

.tour-card-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--card-border, #d0d7e2);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--slate-50, #f5f7fa);
  border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px);
}

.tour-card-foot .tour-spacer { flex: 1; }

/* Buttons inside the tour card reuse .btn tokens but add sizing so they stay
   compact regardless of surrounding button scaling. */
.tour-card-foot .btn {
  padding: 5px 12px;
  font-size: 0.78rem;
}

/* ============================================================
   Help-menu dropdown (topnav "?" button)
   Only visible when the tour help icon is toggled open.
   ============================================================ */
.tour-help-menu {
  position: absolute;
  top: 52px;
  right: 16px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--card-border, #d0d7e2);
  border-radius: var(--radius, 10px);
  box-shadow: var(--card-shadow-lg, 0 10px 40px rgba(10, 25, 60, 0.12));
  padding: 6px;
  z-index: 950;
  animation: tourMenuIn 0.15s ease-out;
}

@keyframes tourMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-help-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--text-800, #1e2a44);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.tour-help-menu button:hover {
  background: var(--blue-50, #eaf1fb);
  color: var(--blue-700, #1a4b8c);
}

.tour-help-menu .tour-help-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--slate-100, #eceff4);
}

.tour-help-menu .tour-help-hint {
  padding: 6px 10px 4px;
  font-size: 0.7rem;
  color: var(--text-500, #5a6680);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.tour-help-menu .tour-help-status {
  padding: 4px 10px 8px;
  font-size: 0.78rem;
  color: var(--text-700, #2e3a50);
  line-height: 1.45;
}

.tour-help-menu button[data-tour-disable] {
  color: var(--red-700, #b91c1c);
}

.tour-help-menu button[data-tour-disable]:hover {
  background: var(--red-50, #fef2f2);
  color: var(--red-700, #b91c1c);
}

/* A tiny "?" icon-btn in the nav — matches existing .icon-btn (defined in
   the host mockup). No overrides here. */

/* The exec-dashboard health-row wrapper uses display:contents so grid flow
   is preserved. */
[data-tour-id="exec-dashboard-health-row"] { display: contents; }