/* Kiri Bloom theme for Shepherd.js guided tours (app/static/guides.js).
   Separate file, not folded into kiribook.css, because Shepherd ships its
   own DOM structure under its own class namespace (.shepherd-*) that needs
   wholesale re-skinning rather than a handful of utility overrides. Consumes
   the same custom properties kiribook.css defines, loaded after it.

   Sourced from the "KiriBook Design System" Claude Design project handoff
   (design_handoff_shepherd_tours, 2026-07-23): white card, hairline warm
   border, serif title, lavender primary button, mono "Step X of Y"
   progress, pointer arrow, warm-plum modal overlay. See app/static/guides.js
   for the modalOverlayOpeningRadius/Padding config and progress injection
   this file's layout assumes. */

/* ---------- Modal overlay (dim everything + spotlight cutout) ---------- */
.shepherd-modal-overlay-container {
  fill: var(--color-overlay);
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* ---------- The popup card ---------- */
.shepherd-element.kb-shepherd {
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  color: var(--color-text);
  outline: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.kb-shepherd.shepherd-enabled {
  opacity: 1;
}
.kb-shepherd .shepherd-content {
  border-radius: inherit;
  overflow: hidden;
}

/* ---------- Header (serif title + x close) ---------- */
/* Higher specificity than Shepherd's base
   `.shepherd-has-title .shepherd-content .shepherd-header` (3 class
   selectors, sets a gray fill) so the header stays white and the card
   reads as one surface, not two stacked segments. */
.shepherd-element.kb-shepherd .shepherd-content .shepherd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-3);
  background: var(--color-surface);
  border-radius: 0;
}
.kb-shepherd.shepherd-has-cancel-icon:not(.shepherd-has-title) .shepherd-header {
  padding-bottom: 0;
}
.kb-shepherd .shepherd-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 21px;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-strong);
  text-wrap: pretty;
}

.kb-shepherd .shepherd-cancel-icon {
  flex: none;
  margin: -2px -4px 0 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-subtle);
  font-size: var(--text-heading-md);
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.kb-shepherd .shepherd-cancel-icon:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-strong);
}
.kb-shepherd .shepherd-cancel-icon:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ---------- Body text ---------- */
.kb-shepherd .shepherd-text {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-wrap: pretty;
}
.kb-shepherd .shepherd-text p {
  margin: 0 0 var(--space-3);
}
.kb-shepherd .shepherd-text p:last-child {
  margin-bottom: 0;
}
.kb-shepherd .shepherd-text a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-shepherd .shepherd-text a:hover {
  color: var(--color-primary-active);
}

/* ---------- Footer (progress + skip . back . next) ---------- */
.kb-shepherd .shepherd-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--color-divider);
  background: var(--color-surface-cream);
}
/* Progress + skip pinned left; nav buttons pushed right. */
.kb-shepherd .shepherd-progress {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-subtle);
  white-space: nowrap;
}
.kb-shepherd .shepherd-footer .shepherd-button-link {
  margin-right: auto; /* everything after this hugs the right edge */
}
/* If there's no skip link, the progress span should still push nav right. */
.kb-shepherd .shepherd-progress + .shepherd-button:not(.shepherd-button-link) {
  margin-left: auto;
}

/* ---------- Buttons ---------- */
.kb-shepherd .shepherd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-caption);
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.kb-shepherd .shepherd-button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.kb-shepherd .shepherd-button:active {
  transform: scale(0.98);
}
.kb-shepherd .shepherd-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Next / Done -- primary lavender. Default (no classes set) and
   .shepherd-button-primary both resolve here so existing "Next"-only
   guides (no classes on their button def) get the primary treatment. */
.kb-shepherd .shepherd-button:not(.shepherd-button-secondary):not(.shepherd-button-link) {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-xs);
}
.kb-shepherd .shepherd-button:not(.shepherd-button-secondary):not(.shepherd-button-link):hover {
  background: var(--color-primary-hover);
}
.kb-shepherd .shepherd-button:not(.shepherd-button-secondary):not(.shepherd-button-link):active {
  background: var(--color-primary-active);
}

/* Back -- bordered white secondary */
.kb-shepherd .shepherd-button-secondary {
  background: var(--color-surface);
  color: var(--color-text-strong);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.kb-shepherd .shepherd-button-secondary:hover {
  background: var(--color-bg-sunken);
  border-color: var(--bark-300);
}

/* Skip tour -- quiet text link */
.kb-shepherd .shepherd-button-link {
  height: auto;
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--text-caption);
  text-underline-offset: 3px;
}
.kb-shepherd .shepherd-button-link:hover {
  color: var(--color-text-strong);
  text-decoration: underline;
  background: transparent;
}

/* ---------- Arrow / beak ---------- */
/* Shepherd positions .shepherd-arrow; we style its rotated ::before square
   to match the card fill + hairline border. */
.kb-shepherd .shepherd-arrow,
.kb-shepherd .shepherd-arrow::before {
  width: 16px;
  height: 16px;
  z-index: -1;
}
.kb-shepherd .shepherd-arrow::before {
  content: "";
  transform: rotate(45deg);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}
/* Show only the two border edges facing away from the card, per placement,
   so the beak reads as a seamless corner of the card. */
.kb-shepherd[data-popper-placement^="top"] .shepherd-arrow::before {
  /* arrow sits below the card, pointing down -- footer is cream */
  background: var(--color-surface-cream);
  border-top: none;
  border-left: none;
}
.kb-shepherd[data-popper-placement^="bottom"] .shepherd-arrow::before {
  /* arrow sits above the card, pointing up, header is white */
  border-bottom: none;
  border-right: none;
}
/* Shepherd's own base CSS hardcodes this exact case gray
   (.shepherd-element.shepherd-has-title[data-popper-placement^=bottom] >
   .shepherd-arrow:before { background-color: #e6e6e6 }) at higher
   specificity than the rule above, so every titled step placed below its
   target got a gray beak instead of white. Stack the same classes Shepherd
   uses (plus ours) to outrank it. */
.shepherd-element.kb-shepherd.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  background: var(--color-surface);
}
.kb-shepherd[data-popper-placement^="left"] .shepherd-arrow::before {
  border-left: none;
  border-bottom: none;
}
.kb-shepherd[data-popper-placement^="right"] .shepherd-arrow::before {
  border-right: none;
  border-top: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kb-shepherd.shepherd-element,
  .shepherd-modal-overlay-container {
    transition: none;
  }
}