/* SP-247 tour overlay styles (Blazor port, BU-170). Copied from
   JarganApiDemo/renderer/styles-tour.css; SPA-only .workflow-indicator block
   replaced by the Blazor .tour-anchor + top-bar help-btn rules. */
/* PM-010 decouple: local tokens for tour-overlay grayscale + accent-hover that
   have no exact-value match in tokens-canonical.css :root. Control values are
   preserved verbatim as the var() fallback (SP-337 pattern). The tour tooltip is
   a LIGHT card (#fff), so these are light-surface neutrals, not dark-section literals. */
:root {
  --tour-card-bg:        #fff;
  --tour-text-strong:    #222;
  --tour-text-title:     #111;
  --tour-text-body:      #333;
  --tour-text-muted:     #999;
  --tour-text-dim:       #666;
  --tour-btn-bg:         #f2f2f2;
  --tour-btn-bg-hover:   #e6e6e6;
  --tour-accent-hover:   #c04700;
}
/* Default backdrop - transparent; only dims when tour is on a centered step */
.jargan-tour-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9998;
  pointer-events: none;
  transition: background 180ms ease-out !important;
}
.jargan-tour-backdrop.jargan-tour-backdrop-active {
  background: rgba(0, 0, 0, 0.45);
}

/* Spotlight - a rectangle sized to the anchor, uses a huge box-shadow to dim
   everything outside it. Orange halo + soft glow draws attention. */
.jargan-tour-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 9998;
  border-radius: 10px !important;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(221, 81, 0, 0.9),
    0 0 22px 4px rgba(221, 81, 0, 0.45),
    0 0 44px 12px rgba(221, 81, 0, 0.20) !important;
  transition:
    top 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    left 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease-out !important;
}
.jargan-tour-spotlight.jargan-tour-spotlight-active {
  opacity: 1;
}

/* Gentle pulse on the halo so the eye finds it */
/* check-loading-brand: allow -- guided-tour spotlight attention halo, not a loading/busy state */
@keyframes jarganTourHaloPulse {
  0%, 100% { box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(221, 81, 0, 0.9),
      0 0 22px 4px rgba(221, 81, 0, 0.45),
      0 0 44px 12px rgba(221, 81, 0, 0.20) !important; }
  50%      { box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(221, 81, 0, 1),
      0 0 28px 6px rgba(221, 81, 0, 0.55),
      0 0 56px 16px rgba(221, 81, 0, 0.28) !important; }
}
.jargan-tour-spotlight.jargan-tour-spotlight-active {
  animation: jarganTourHaloPulse 2.4s ease-in-out infinite;
}

.jargan-tour-tooltip {
  position: fixed;
  z-index: 9999;
  width: min(360px, calc(100vw - 24px));
  background: var(--tour-card-bg, #fff);
  color: var(--tour-text-strong, #222);
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  padding: 18px 20px 16px;
  font-family: inherit;
  line-height: 1.4;
  animation: jarganTourFadeIn 160ms ease-out;
}

.jargan-tour-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 10px;
  gap: 4px;
}

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

.jargan-tour-close {
  justify-self: end;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--tour-text-muted, #999);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.jargan-tour-close:hover {
  color: var(--tour-text-strong, #222);
}

.jargan-tour-progress {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent, #DD5100);
  text-transform: uppercase;
}

.jargan-tour-progress .jargan-tour-step-total {
  color: var(--tour-text-muted, #999);
  margin-left: 4px;
  font-weight: 500;
}

.jargan-tour-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tour-text-title, #111);
}

.jargan-tour-body {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--tour-text-body, #333);
}

.jargan-tour-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.jargan-tour-skip {
  justify-self: center;
  background: transparent;
  border: 0;
  color: var(--tour-text-dim, #666);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}

.jargan-tour-skip:hover {
  color: var(--tour-text-strong, #222);
  text-decoration: underline;
}

.jargan-tour-nav {
  display: flex;
  gap: 8px;
}

.jargan-tour-prev,
.jargan-tour-next {
  border: 0;
  border-radius: 6px !important;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.jargan-tour-prev {
  background: var(--tour-btn-bg, #f2f2f2);
  color: var(--tour-text-body, #333);
}

.jargan-tour-prev:hover {
  background: var(--tour-btn-bg-hover, #e6e6e6);
}

.jargan-tour-next {
  background: var(--color-accent, #DD5100);
  color: var(--tour-card-bg, #fff);
}

.jargan-tour-next:hover {
  background: var(--tour-accent-hover, #c04700);
}

/* SP-268: mobile bottom-sheet treatment for guided tour */
@media (max-width: 640px) {
  .jargan-tour-tooltip {
    /* Let tour.js set top/left via inline styles for anchored steps,
       but when the CSS below supplies them with !important the inline
       values are overridden. Centered (unanchored) steps still get
       the inline positioning from tour.js - those get overridden here too. */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 520px);
    padding: 16px 18px 14px;
    border-radius: 14px;
    overflow-y: auto;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22);
  }

  .jargan-tour-title {
    font-size: 16px;
    line-height: 1.3;
  }

  .jargan-tour-body {
    font-size: 14px;
    line-height: 1.4;
  }

  .jargan-tour-progress {
    font-size: 11px;
  }

  .jargan-tour-header {
    margin-bottom: 8px;
  }

  .jargan-tour-actions {
    margin-top: 12px;
  }

  .jargan-tour-nav {
    width: 100%;
  }

  .jargan-tour-nav > button {
    flex: 1;
  }

  .jargan-tour-prev,
  .jargan-tour-next {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 14px;
  }

  .jargan-tour-skip {
    font-size: 12px;
    padding: 4px 6px;
    min-height: unset;
  }
}

/* SP-268: landscape phones - keep the sheet short so it doesn't eat the screen */
@media (max-width: 900px) and (max-height: 500px) {
  .jargan-tour-tooltip {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 80vh;
    overflow-y: auto;
  }

  .jargan-tour-actions {
    flex-direction: row;
  }

  .jargan-tour-nav {
    display: flex;
    gap: 8px;
  }
}

/* BU-170: <TourAnchor> wrapper renders display:contents so it never perturbs
   layout; tour.js resolveAnchor() unwraps to the first element child. */
.tour-anchor {
  display: contents;
}

/* BU-171: tour re-entry pill in the Blazor top bar (between bell and avatar).
   Orange pill, white text/icon. Background is the accent darkened 28% so the
   white label holds 4.5:1+ (6.8:1 at the #9f3a00 fallback), per the BU-386
   darkened-accent precedent. */
.apphdr-row1 .workflow-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px !important;
  background: #9f3a00;
  background: color-mix(in srgb, var(--color-accent, #DD5100), #000 28%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 140ms ease;
}
.apphdr-row1 .workflow-help-btn:hover {
  filter: brightness(1.15);
}
.apphdr-row1 .workflow-help-btn .ui-label {
  color: #fff;
}