/* Bonsai onboarding pill.
 * Just the amber pill button in the sidebar — clicking it opens the
 * Bonsai Product Tour panel (rendered by /assets/tour.js in browse
 * mode). The chapter list / panel itself lives in tour.css. */

/* When the pill mounts inside .sidebar-foot, the divider line moves
 * from above the pill to *below* it (between pill and tagline). */
.sidebar-foot:has(.gs-pill) {
  border-top: 0;
  padding-top: 4px;
}
.sidebar-foot:has(.gs-pill) .tagline {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.gs-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  align-self: flex-start;     /* center within the sidebar-foot column */
  background: var(--amber);
  color: #fff;
  border: 0;
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: filter 140ms, transform 140ms, box-shadow 140ms;
  box-shadow: 0 6px 16px rgba(139, 94, 20, 0.28);
  margin-bottom: 4px;
}
.gs-pill:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(139, 94, 20, 0.34);
}
.gs-pill:active { transform: translateY(0); }
.gs-pill[hidden] { display: none; }

.gs-pill-label {
  white-space: nowrap;
}
.gs-pill-progress {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.gs-pill.is-complete .gs-pill-progress {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}