/* Settings fields: one look for every dropdown, number, time and text box in
   a setting row (Richard, 28 Sep: option A, outlined). Number boxes had no
   style at all (the browser's black inset border), dropdowns kept the native
   arrow hard against the edge, and heights ran from 28 to 42px.

   The base rule is (0,3,1), which beats the per-area rules; the dark look
   comes from the --settings-field-* tokens in theme.css. The chevron's four background longhands are
   !important: the frozen dark overrides (dark-overrides.css, up to (0,4,1) on
   :focus) and recording-settings-devices.css set `background:` shorthand,
   which would reset them and leave a dropdown with no arrow at all. The focus
   border is !important for the same reason against base-typography.css's
   `input:focus-visible` (!important, 60% blue), so every field focuses alike. */

.settings-view :is(.setting-control select, .setting-control input:is([type="number"], [type="time"], [type="text"], [type="email"]), .notif-time-range input[type="time"], .recording-device-select, .whisper-model-select) {
    box-sizing: border-box;
    height: 36px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-14);
    line-height: normal;
    color: var(--text-primary);
    background-color: var(--settings-field-bg);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--settings-field-shadow);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

.settings-view :is(.setting-control select, .recording-device-select, .whisper-model-select) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: var(--settings-field-chevron) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--space-3) center !important;
    background-size: 12px !important;
    cursor: pointer;
}

.settings-view .setting-control input[type="number"] {
    width: 72px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.settings-view .setting-control input[type="number"]::-webkit-inner-spin-button,
.settings-view .setting-control input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.settings-view :is(.setting-control select, .setting-control input:is([type="number"], [type="time"], [type="text"], [type="email"]), .notif-time-range input, .recording-device-select, .whisper-model-select):hover:not(:disabled):not(:focus) {
    border-color: var(--settings-field-hover);
}

.settings-view :is(.setting-control select, .setting-control input:is([type="number"], [type="time"], [type="text"], [type="email"]), .notif-time-range input, .recording-device-select, .whisper-model-select):focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2);
}

.settings-view :is(.setting-control select, .setting-control input:is([type="number"], [type="time"], [type="text"], [type="email"]), .notif-time-range input, .recording-device-select, .whisper-model-select):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The microphone list's refresh button sits beside a field: same height */
.settings-view .mic-refresh-btn {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-color: var(--border-medium);
    border-radius: var(--radius-md);
}

.settings-view .mic-refresh-btn:not(:hover) {
    background: var(--settings-field-bg);
}