/* ===========================================
   Duration picker — presets in words, or a custom amount + unit
   (partials/_duration_picker.html, static/js/duration_picker.js). The preset and unit
   selects are value menus (components/protection.css .vmenu).
   =========================================== */

.duration-picker {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.duration-custom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--fill-1);
}
.duration-custom[hidden] { display: none; }

.duration-picker .duration-amount {
    width: 4.5rem;
    height: 28px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface-1);
    font: 500 13px var(--font);
    color: var(--label-1);
    font-variant-numeric: tabular-nums;
}
.duration-custom .vmenu > select { min-width: 0; }

.duration-apply { flex-shrink: 0; white-space: nowrap; }