/* Shepherd.js theming — stone/amber palette, dark + parchment light modes */

/* ─── Base popover shell ─────────────────────────────────────────── */
.shepherd-element {
  max-width: 360px;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

html.dark .shepherd-element {
  background: #292524; /* stone-800 */
  border: 1px solid rgba(87, 83, 78, 0.6); /* stone-600/60 */
  color: #e7e5e4; /* stone-200 */
}

html:not(.dark) .shepherd-element {
  background: #fafaf9; /* stone-50 */
  border: 1px solid #d6d3d1; /* stone-300 */
  color: #1c1917; /* stone-900 */
}

/* ─── Arrow ──────────────────────────────────────────────────────── */
html.dark .shepherd-arrow::before {
  background: #292524;
  border-color: rgba(87, 83, 78, 0.6);
}

html:not(.dark) .shepherd-arrow::before {
  background: #fafaf9;
  border-color: #d6d3d1;
}

/* Override Shepherd's specificity-heavy rule that paints the arrow #e6e6e6
   when the popup is below its target on a step that has a title. */
html.dark .shepherd-element.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  background-color: #292524;
}

html:not(.dark) .shepherd-element.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  background-color: #fafaf9;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.shepherd-header {
  padding: 1rem 1rem 0.5rem;
  border-bottom: none;
}

/* Shepherd's own selector is `.shepherd-has-title .shepherd-content .shepherd-header`
   (specificity 0,0,3,0) which sets bg #e6e6e6. Match that depth to override. */
html.dark .shepherd-has-title .shepherd-content .shepherd-header {
  background: #292524;
}

html:not(.dark) .shepherd-has-title .shepherd-content .shepherd-header {
  background: #fafaf9;
}

.shepherd-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

html.dark .shepherd-title {
  color: #fde68a; /* amber-200 — high contrast on stone-800 */
}

html:not(.dark) .shepherd-title {
  color: #78350f; /* amber-900 — strong on parchment */
}

/* ─── Cancel (×) icon ────────────────────────────────────────────── */
.shepherd-cancel-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.15s;
}

html.dark .shepherd-cancel-icon {
  color: #78716c; /* stone-500 */
}

html.dark .shepherd-cancel-icon:hover {
  color: #fbbf24;
}

html:not(.dark) .shepherd-cancel-icon {
  color: #a8a29e; /* stone-400 */
}

html:not(.dark) .shepherd-cancel-icon:hover {
  color: #b45309;
}

/* ─── Body text ──────────────────────────────────────────────────── */
.shepherd-text {
  padding: 0.25rem 1rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

html.dark .shepherd-text {
  color: #d6d3d1; /* stone-300 */
}

html:not(.dark) .shepherd-text {
  color: #44403c; /* stone-700 */
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.shepherd-footer {
  padding: 0.5rem 1rem 1rem;
  border-top: none;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

html.dark .shepherd-footer {
  background: #292524;
}

html:not(.dark) .shepherd-footer {
  background: #fafaf9;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.shepherd-button {
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  line-height: 1.4;
}

/* Primary (Next / Finish) */
html.dark .shepherd-button:not(.shepherd-button-secondary) {
  background: #92400e; /* amber-900 */
  color: #fcd34d; /* amber-300 */
}

html.dark .shepherd-button:not(.shepherd-button-secondary):hover {
  background: #78350f; /* amber-900 darker */
  color: #fde68a; /* amber-200 */
}

html:not(.dark) .shepherd-button:not(.shepherd-button-secondary) {
  background: #d97706; /* amber-600 */
  color: #1c1917;
}

html:not(.dark) .shepherd-button:not(.shepherd-button-secondary):hover {
  background: #b45309;
  color: #fff;
}

/* Secondary (Back) */
html.dark .shepherd-button-secondary {
  background: rgba(68, 64, 60, 0.5); /* stone-700/50 */
  color: #a8a29e; /* stone-400 */
}

html.dark .shepherd-button-secondary:hover {
  background: rgba(87, 83, 78, 0.6);
  color: #e7e5e4;
}

html:not(.dark) .shepherd-button-secondary {
  background: #e7e5e4;
  color: #44403c;
}

html:not(.dark) .shepherd-button-secondary:hover {
  background: #d6d3d1;
  color: #1c1917;
}

/* ─── Modal overlay ──────────────────────────────────────────────── */
.shepherd-modal-overlay-container {
  /* opacity set by Shepherd; just ensure the fill matches our dark bg */
  fill: rgba(0, 0, 0, 0.5);
}

/* ─── Small screens ──────────────────────────────────────────────────
   The 360px shell overflows narrow phones and centered (unattached) cards
   need to sit comfortably within the viewport. */
@media (max-width: 480px) {
  .shepherd-element {
    max-width: calc(100vw - 2rem);
  }
}

/* ─── "Show me around" page-tour launcher ─────────────────────────────
   A subtle inline button that starts a page's contextual tour via
   data-tour-launch (see tour.js). Styled for both dark and parchment modes. */
.tour-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

html.dark .tour-launch {
  color: #d6d3d1;
  background-color: rgba(68, 64, 60, 0.4);
  border-color: rgba(120, 113, 108, 0.4);
}

html.dark .tour-launch:hover {
  color: #fbbf24;
  border-color: rgba(180, 83, 9, 0.6);
}

html:not(.dark) .tour-launch {
  color: #57534e;
  background-color: rgba(231, 229, 228, 0.7);
  border-color: rgba(214, 211, 209, 0.9);
}

html:not(.dark) .tour-launch:hover {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.5);
}