/**
 * Harbor utilities (Bootstrap-friendly)
 * - Prefer Bootstrap utilities for spacing/layout
 * - Use these only for missing Harbor-specific visuals (glass, accent dot, chips, hover/focus)
 * - Keep classes single-purpose where practical
 */

/* Panel: glassy surface that matches harbor tokens */
.hb-panel {
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.7));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hb-bg-glass-2 {
    background: rgba(255, 255, 255, 0.55);
}

/* Accent "dot" marker */
.hb-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.1);
}

/* Divider */
.hb-divider-b {
    border-bottom: 1px solid var(--stroke);
}

/* Subtree/indent guide line */
.hb-indent-line {
    border-left: 1px dashed rgba(15, 23, 42, 0.16);
}

/* Mono meta styling */
.hb-mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* Chip / pill look (can be <span> or <button>) */
.hb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, 0.75);
}

.hb-chip-btn {
    appearance: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.hb-chip-btn:focus-visible {
    outline: 2px solid rgba(2, 132, 199, 0.45);
    outline-offset: 2px;
}

/* Interactive row surface */
.hb-hover-surface:hover {
    background: rgba(2, 132, 199, 0.06);
}

.hb-focus-surface:focus-within {
    background: rgba(2, 132, 199, 0.1);
    box-shadow: 0 0 0 2px var(--accent);
}

/* Collapse caret rotation (Bootstrap updates aria-expanded on the trigger) */
.hb-caret {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.12s ease;
}

.hb-collapse-toggle[aria-expanded="true"] .hb-caret {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .hb-caret {
        transition: none;
    }
}