/* Opt-in settings typography. Appearance tokens remain owned by acctheme-common.css. */
.acc-settings {
    --type-ramp-base-font-size: 1rem;
    --type-ramp-base-line-height: 1.5rem;
    --type-ramp-minus-1-font-size: 1rem;
    --type-ramp-minus-1-line-height: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hc-text-primary, var(--neutral-foreground-rest));
    min-width: 0;
}

.acc-settings :is(.fluent-typography[typo="body"], .fluent-input-label, label, table, fluent-checkbox, fluent-radio) {
    font-size: 1rem;
    line-height: 1.5;
}

.acc-settings :is(fluent-text-field, fluent-number-field, fluent-text-area, fluent-select) {
    font-size: 1rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--hc-text-primary, var(--neutral-foreground-rest));
}

.acc-settings :is(fluent-text-field, fluent-number-field)::part(root),
.acc-settings fluent-text-area::part(control),
.acc-settings fluent-select::part(control) {
    height: auto;
    min-height: 40px;
    box-sizing: border-box;
    background: var(--hc-bg-primary, var(--neutral-layer-1));
    border: 1px solid var(--hc-border, #71869b);
    border-radius: 8px;
}

.acc-settings :is(fluent-text-field, fluent-number-field, fluent-text-area, fluent-select)::part(control) {
    font-size: 1rem;
    line-height: 1.5;
    min-height: 40px;
    height: auto;
    box-sizing: border-box;
    color: var(--hc-text-primary, var(--neutral-foreground-rest));
}

.acc-settings :is(fluent-text-field, fluent-number-field)::part(control) {
    background: transparent;
}

.acc-settings fluent-button::part(content) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.acc-settings :is(fluent-text-field, fluent-number-field, fluent-text-area)[disabled]::part(root),
.acc-settings fluent-select[disabled]::part(control) {
    background: var(--hc-disabled-bg, #e5e9ed);
    cursor: not-allowed;
}

.acc-settings :is(fluent-text-field, fluent-number-field, fluent-text-area):focus-within::part(root),
.acc-settings fluent-select:focus-within::part(control) {
    border-color: var(--hc-accent, var(--acc-control-accent));
}

/* Shared keyboard focus uses a yellow background, including in dark mode. */
:root:root[data-msgenie-input-modality="keyboard"] .acc-settings :is(fluent-button, fluent-text-field, fluent-number-field, fluent-text-area, fluent-select, fluent-checkbox, fluent-radio):focus-within,
:root:root[data-msgenie-input-modality="keyboard"] .acc-settings :is(fluent-button, fluent-text-field, fluent-number-field, fluent-text-area, fluent-select)::part(control):focus,
:root:root[data-msgenie-input-modality="keyboard"] .acc-settings :is(fluent-button, fluent-text-field, fluent-number-field, fluent-text-area, fluent-select):focus-within::part(control) {
    color: var(--acc-focus-underline) !important;
}

@media (forced-colors: active) {
    .acc-settings :is(fluent-text-field, fluent-number-field, fluent-text-area, fluent-select)::part(control) {
        color: FieldText;
        background: Field;
    }
    :root:root[data-msgenie-input-modality="keyboard"] .acc-settings :focus-within::part(control) {
        color: HighlightText !important;
    }
}