/* Voice notes of a colony (recorder inside a card). Only tokens (--hv-*), no new colours. */

.hv-recorder {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-3);
}

.hv-recorder [hidden] {
    display: none !important;
}

/* One wide button (tap to start, tap to stop) that is easy to hit with a thumb; busy states keep its height. */
.hv-recorder .hv-btn {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.hv-recorder__hint {
    text-align: center;
}

/* While recording the same spot turns into a red stop button with the running time. */
.hv-btn--rec,
.hv-btn--rec:hover {
    background: var(--hv-rec);
    box-shadow: none;
    color: #fff;
}

.hv-btn--rec {
    justify-content: space-between;
    padding: 0 var(--hv-space-4);
}

.hv-btn--rec .hv-rec-chip__dot {
    flex: none;
}

.hv-btn--rec .hv-tabular {
    font-variant-numeric: tabular-nums;
}

.hv-btn--rec__max {
    opacity: 0.8;
    font-weight: 600;
}

.hv-recorder__busy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hv-space-3);
    min-height: 60px;
}

.hv-note {
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-2);
    padding: var(--hv-space-3) var(--hv-space-4);
}

.hv-note__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hv-space-2);
    color: var(--hv-ink-muted);
    font-size: var(--hv-text-sm);
}

.hv-note__text {
    margin: 0;
    overflow-wrap: anywhere;
}