/* When picker: type a date (Phase 5b, js/modules/when-type-in.js) */
.when-typein {
    padding: 2px 2px var(--space-1-5);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-light);
}

.when-typein-input {
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-14);
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.when-typein-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-opacity-10);
}

.when-typein-input::placeholder {
    color: var(--text-tertiary);
}

.when-typein-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-md);
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    font-size: var(--font-size-14);
    cursor: pointer;
}

.when-typein-preview[hidden] {
    display: none;
}

.when-typein-preview kbd {
    font-family: inherit;
    font-size: var(--font-size-12);
    opacity: 0.8;
}

.when-typein-preview.is-empty {
    background: transparent;
    color: var(--text-tertiary);
    cursor: default;
}

/* While there's text in the box, Enter sets it, so the list's highlight goes */
.quick-action-dropdown.is-typing .dropdown-item.selected:not(:hover) {
    background: transparent;
}

.quick-action-dropdown.is-typing .dropdown-item.selected:not(:hover) .dropdown-label,
.quick-action-dropdown.is-typing .dropdown-item.selected:not(:hover) .dropdown-icon {
    color: inherit;
}