/* === Minimal, elegant tooltip ========================================= */
:root{
  --tt-bg: #111;
  --tt-fg: #fff;
  --tt-radius: 10px;
  --tt-shadow: 0 12px 24px rgba(0,0,0,.28);
  --tt-gap: 10px;          /* distance from cursor/target */
  --tt-fs: 13px;           /* font size */
  --tt-maxw: 280px;        /* bubble max width */
}

/* ── Minimal tooltip bubble ───────────────────────────────── */
.tooltip-bubble{
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  background: #111;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: 8px 10px;
  max-width: 320px;
  font: 500 13px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;                 /* ⬅ left align */
  opacity: 0;                       /* fade base */
  visibility: hidden;
  transform: translateY(4px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.tooltip-bubble.show{
  opacity: 1;                       /* ⬅ fade in */
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease;
}
.tooltip-title{
  font-weight: 700;
  font-size: 0.95rem;               /* ⬅ slightly bigger */
  margin: 0 0 4px 0;
  text-align: left;
}
.tooltip-divider{
  display: none;
  height: 1px;
  background: rgba(255,255,255,.22);
  margin: 4px 0;
}
.tooltip-bubble.has-desc .tooltip-divider{ display:block; }
.tooltip-desc{
  font-weight: 400;
  font-size: .85rem;
  white-space: pre-wrap;            /* keep your bullets/newlines */
  text-align: left;
}


/* (Optional) micro-tweaks you can change later:
   .tooltip-bubble { letter-spacing: .1px; } */



















/* wide/tall, scrollable preview tooltip */
.guide-preview-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}

.guide-preview-pane {
  position: fixed;
  width: min(560px, 90vw);
  max-height: 380px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tooltip-bg, #111);
  color: var(--tooltip-fg, #fff);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  z-index: 9999;
  opacity: 0;
  transform: translateY(4px);
  /* 🔽 NEW: don’t block clicks when hidden */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  text-align: left;
}

.guide-preview-pane.show {
  opacity: 1;
  transform: translateY(0);
  /* 🔽 NEW: only interactive while shown */
  visibility: visible;
  pointer-events: auto;
}

.guide-preview-pane pre {
  white-space: pre-wrap;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.45;
}

.guide-preview-pane .gp-header {
  font-weight: 600;
  margin-bottom: 6px;
  opacity: .9;
}