.bhf-notice {
    padding: 10px 14px;
    border-radius: var(--bh-radius-sm, 6px);
    background: var(--bh-surface-2, #f6f6f7);
    color: var(--bh-text-dim, #6b7280);
    margin-bottom: 12px;
}
.bhf-notice--ok { color: var(--bh-accent, #b3502e); }
.bhf-notice--error { color: #e0554a; }

.bhf-submit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bh-surface, #fff);
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius, 10px);
}
.bhf-submit-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9em;
    color: var(--bh-text-dim, #6b7280);
}
.bhf-submit-form input[type="text"], .bhf-submit-form input[type="file"] {
    background: var(--bh-surface-2, #f6f6f7);
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius-sm, 6px);
    padding: 8px 10px;
    color: var(--bh-text, #1d2327);
}
.bhf-balance {
    font-weight: 600;
    color: var(--bh-text, #1d2327);
}

.bhf-tier-picker {
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius-sm, 6px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bhf-tier-option {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;
}
.bhf-tier-description {
    flex-basis: 100%;
    color: var(--bh-text-dim, #6b7280);
    font-size: 0.85em;
}

.bhf-btn--primary {
    background: var(--bh-accent, #b3502e);
    color: #fff;
    border: none;
    border-radius: var(--bh-radius-sm, 6px);
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
    align-self: flex-start;
}
.bhf-btn--secondary {
    background: var(--bh-surface-2, #f6f6f7);
    border: 1px solid var(--bh-border, #e2e2e2);
    color: var(--bh-text, #1d2327);
    border-radius: var(--bh-radius-sm, 6px);
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

.bhf-request-card {
    background: var(--bh-surface, #fff);
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius, 10px);
    padding: 14px;
    margin-bottom: 10px;
}
.bhf-request-card audio {
    width: 100%;
    margin: 8px 0;
}
/* Shape now comes from the shared .bh-badge component (class-style.php)
   — markup carries both classes; this file only supplies color.
   Audit fix (2026-07-25): open/claimed/completed used to share the same
   styling, distinguished only by badge text — added distinct treatments
   so the three states read as visually different, not just textually. */
.bhf-badge-open {
    background: var(--bh-surface-2, #f6f6f7);
    color: var(--bh-text-dim, #6b7280);
}
.bhf-badge-claimed {
    background: var(--bh-warning-bg, #fff6e5);
    color: var(--bh-warning, #9a6700);
}
.bhf-badge-completed {
    background: var(--bh-accent-muted-bg, #eef4ff);
    color: var(--bh-accent, #b3502e);
}
.bhf-claimed-note { margin-top: -4px; }
.bhf-review-body {
    margin-top: 10px;
    padding: 10px;
    background: var(--bh-surface-2, #f6f6f7);
    border-radius: var(--bh-radius-sm, 6px);
}
.bhf-duplicate-flag {
    color: #b32d2e;
    font-weight: 600;
}
.bhf-review-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bh-surface-2, #f6f6f7);
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius-sm, 6px);
    padding: 8px 10px;
    color: var(--bh-text, #1d2327);
    margin-bottom: 8px;
}
.bhf-release-form {
    display: inline-block;
    margin-left: 8px;
}

.bhf-waveform {
    --bhf-waveform-color: var(--bh-accent, #8a8a8a);
    position: relative;
    margin: 10px 0;
}
.bhf-waveform-canvas {
    width: 100%;
    height: 70px;
    display: block;
    background: var(--bh-surface-2, #f6f6f7);
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius-sm, 6px);
}
.bhf-waveform-canvas--clickable {
    cursor: crosshair;
}
.bhf-waveform-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
}
.bhf-waveform-marker {
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--bh-accent, #c85c48);
    border: 2px solid var(--bh-surface, #fff);
    cursor: pointer;
    pointer-events: auto;
}
.bhf-annotation-thread {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bh-surface-2, #f6f6f7);
    border: 1px solid var(--bh-border, #e2e2e2);
    border-radius: var(--bh-radius-sm, 6px);
}
.bhf-annotation-thread--open {
    display: block;
}
.bhf-annotation-thread-heading {
    font-weight: 600;
    margin: 0 0 4px;
}
.bhf-annotation-reply {
    margin: 6px 0 0 12px;
    padding-left: 8px;
    border-left: 2px solid var(--bh-border, #e2e2e2);
}
.bhf-annotation-reply-form {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.bhf-annotation-reply-form textarea {
    flex: 1;
    box-sizing: border-box;
}