.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: var(--pico-typography-spacing-vertical);
}
.help-btn {
    font-family: var(--pico-font-family-monospace);
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    transition: background-color var(--pico-transition);
    text-decoration: none; /* Prevents underline */
}

/* Optional: Add a nice hover effect using Pico's native hover color */
.help-btn:hover {
    background: var(--pico-primary-hover-background);
    color: var(--pico-primary-inverse);
    text-decoration: none;
}

.tooltip-wrap {
  position: relative;
  cursor: help;
  display: inline-flex;
  align-items: center;
}
/* On very small mobile screens, ensure the title doesn't crowd the button */
@media (max-width: 576px) {
    .header-wrapper {
        gap: 0.5rem;
    }
}