/* Forms component layer. */

.feedback-context {
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap-tight);
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
    border-radius: var(--button-radius-unified);
    border: var(--emphasis-outline-field);
    background: var(--theme-action-secondary-bg);
    font-size: var(--type-control-meta-size);
    color: var(--hierarchy-meta-color);
    margin: var(--control-padding-y-compact) 0 var(--control-padding-x-compact);
}

.field-stack {
    display: grid;
    gap: var(--field-stack-gap, var(--control-gap-base));
    min-width: 0;
}

.field-row {
    display: flex;
    align-items: center;
    gap: var(--field-row-gap, var(--control-gap-base));
    min-width: 0;
}

.field-row > * {
    min-width: 0;
}

.field-row > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
.field-row > .field-control {
    flex: 1 1 0;
}

.field-control,
.field-stack > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
.field-row > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
[data-sidebar-combobox-input] {
    width: 100%;
    min-height: var(--field-control-height, var(--control-height-md));
    border-radius: var(--field-control-radius, var(--control-radius));
    border: var(--field-control-border, var(--emphasis-outline-field-control));
    background: var(--field-control-bg, var(--field-bg-color));
    color: var(--field-control-color, var(--text-primary));
    padding: 0 var(--field-control-padding-right, var(--field-control-padding-x, var(--control-padding-x-base))) 0 var(--field-control-padding-left, var(--field-control-padding-x, var(--control-padding-x-base)));
    font-size: var(--field-control-font-size, var(--font-size-sm));
    box-sizing: border-box;
}

.field-control--select,
.field-stack > select,
.field-row > select {
    --select-like-arrow-width: 10px;
    --select-like-arrow-height: 6px;
    --select-like-arrow-offset: 12px;
    --select-like-arrow-opacity: 0.72;
    --select-like-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --select-like-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230f1b20' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --select-like-arrow-image-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a7465' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--select-like-arrow-image);
    background-position: calc(100% - var(--select-like-arrow-offset)) center;
    background-size: var(--select-like-arrow-width) var(--select-like-arrow-height);
    background-repeat: no-repeat;
}

.field-control:focus-visible,
.field-stack > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):focus-visible,
.field-row > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):focus-visible,
[data-sidebar-combobox-input]:focus-visible {
    outline: none;
    box-shadow: var(--state-focus-ring-shadow);
}

[data-sidebar-combobox] {
    position: relative;
    display: grid;
    gap: var(--control-gap-tight);
    z-index: 0;
}

.sidebar [data-sidebar-combobox] {
    gap: 6px;
}

[data-sidebar-combobox-progressive] [data-sidebar-combobox-enhanced][hidden] {
    display: none;
}

[data-sidebar-combobox-picker] [data-sidebar-combobox-picker-ui][hidden] {
    display: none;
}

[data-sidebar-combobox-progressive][data-sidebar-combobox-ready="1"] [data-sidebar-combobox-enhanced] {
    display: grid;
    gap: inherit;
}

[data-sidebar-combobox-picker][data-sidebar-combobox-ready="1"] [data-sidebar-combobox-picker-ui] {
    display: grid;
    gap: inherit;
}

[data-sidebar-combobox-progressive][data-sidebar-combobox-ready="1"] [data-sidebar-combobox-native] {
    display: none;
}

[data-sidebar-combobox-picker][data-sidebar-combobox-ready="1"] [data-sidebar-combobox-native] {
    display: none;
}

[data-sidebar-combobox][data-open="true"] {
    z-index: var(--z-popover);
}

[data-sidebar-combobox-trigger] {
    --select-like-arrow-width: 10px;
    --select-like-arrow-height: 6px;
    --select-like-arrow-offset: 12px;
    --select-like-arrow-opacity: 0.72;
    --select-like-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    cursor: pointer;
    position: relative;
    padding-right: calc(var(--field-control-padding-right, var(--field-control-padding-x, var(--control-padding-x-base))) + var(--select-like-arrow-width) + 8px);
    background-image: none;
}

[data-sidebar-combobox-trigger]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--select-like-arrow-offset);
    width: var(--select-like-arrow-width);
    height: var(--select-like-arrow-height);
    background: currentColor;
    opacity: var(--select-like-arrow-opacity);
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-mask: var(--select-like-arrow-mask) center / contain no-repeat;
    mask: var(--select-like-arrow-mask) center / contain no-repeat;
    transition:
        opacity var(--motion-duration, 140ms) ease,
        transform var(--motion-duration, 140ms) ease;
}

[data-sidebar-combobox-trigger][aria-expanded="true"] {
    border-color: var(--control-selected-border);
    background: var(--control-selected-bg);
    color: var(--control-selected-color);
}

[data-sidebar-combobox-trigger][aria-expanded="true"]::after {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}

[data-sidebar-combobox-panel] {
    position: absolute;
    top: calc(100% + var(--control-gap-2xs));
    left: 0;
    right: 0;
    z-index: var(--z-popover);
    display: grid;
    gap: var(--control-gap-tight);
    padding: 6px;
    border: 1px solid var(--theme-border-surface-item);
    border-radius: var(--control-radius);
    background: var(--theme-surface-base);
    box-sizing: border-box;
}

[data-sidebar-combobox-panel][hidden] {
    display: none;
}

[data-sidebar-combobox-search-row] {
    position: relative;
}

[data-sidebar-combobox-input] {
    padding-right: var(--sidebar-combobox-input-padding-right);
}

[data-sidebar-combobox-clear] {
    position: absolute;
    top: 50%;
    right: var(--sidebar-combobox-clear-offset);
    --button-chrome-bg: var(--sidebar-combobox-clear-bg);
    --button-chrome-border: transparent;
    --button-chrome-color: var(--sidebar-combobox-clear-color);
    --button-chrome-bg-hover: var(--sidebar-combobox-clear-bg-hover);
    --button-chrome-border-hover: transparent;
    --button-chrome-color-hover: var(--sidebar-combobox-clear-color-hover);
    transform: translateY(-50%);
}

[data-sidebar-combobox][data-open="true"] [data-sidebar-combobox-clear] {
    --button-chrome-bg: var(--control-selected-bg);
    --button-chrome-border: var(--control-selected-border);
    --button-chrome-color: var(--control-selected-color);
    --button-chrome-bg-hover: var(--control-selected-bg-hover);
    --button-chrome-border-hover: var(--control-selected-border-hover);
    --button-chrome-color-hover: var(--control-selected-color-hover);
    --button-icon-filter: var(--icon-filter-brand);
    --button-icon-filter-hover: var(--icon-filter-brand);
}

[data-sidebar-combobox-list] {
    position: absolute;
    top: calc(100% + var(--control-gap-2xs));
    left: 0;
    right: 0;
    z-index: var(--z-popover);
    display: grid;
    gap: var(--sidebar-combobox-list-gap);
    max-height: 240px;
    overflow: auto;
    padding: var(--sidebar-combobox-list-padding);
    border: 1px solid var(--theme-border-surface-item);
    border-radius: var(--control-radius);
    background: var(--theme-surface-base);
    box-shadow: none;
}

.sidebar [data-sidebar-combobox-list] {
    background: var(--sidebar-ladder-item-bg);
    border-color: var(--sidebar-ladder-item-border);
    border-radius: var(--control-radius);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.sidebar [data-sidebar-combobox-panel] {
    background: var(--sidebar-ladder-item-bg);
    border-color: var(--sidebar-ladder-item-border);
}

.sidebar [data-sidebar-combobox-panel] [data-sidebar-combobox-list] {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    max-height: 220px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sidebar [data-sidebar-combobox-native][multiple] {
    min-height: 132px;
    padding: 6px 8px;
    background-image: none;
    overflow: auto;
}

[data-sidebar-combobox-list][hidden] {
    display: none;
}

.sidebar [data-sidebar-combobox-tags] {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--sidebar-ladder-item-border);
    border-radius: var(--control-radius);
    background: var(--sidebar-ladder-item-bg);
}

.sidebar .sidebar-combobox-empty,
.sidebar .sidebar-combobox-group-title,
.sidebar .sidebar-combobox-group-help {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.sidebar .sidebar-combobox-group-help {
    line-height: 1.35;
}

.sidebar .sidebar-combobox-group-title {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-sidebar-combobox-option] {
    width: 100%;
    min-height: var(--button-height-sm);
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
    justify-content: space-between;
    text-align: left;
    align-items: center;
    gap: var(--control-gap-tight);
}

.sidebar [data-sidebar-combobox-option] {
    min-height: var(--sidebar-control-height);
    padding: 0 10px;
    border-radius: var(--control-radius);
    max-width: 100%;
    white-space: normal;
}

[data-sidebar-combobox-option][data-highlighted="true"],
[data-sidebar-combobox-option][aria-selected="true"],
[data-sidebar-combobox-option][data-selected="true"] {
    --menu-button-bg: var(--control-selected-bg);
    --menu-button-bg-hover: var(--control-selected-bg-hover);
    --menu-button-bg-active: var(--control-selected-bg-hover);
    --menu-button-border: var(--control-selected-border);
    --menu-button-border-hover: var(--control-selected-border-hover);
    --menu-button-color: var(--control-selected-color);
    --menu-button-color-hover: var(--control-selected-color-hover);
}

[data-sidebar-combobox-option][data-highlighted="true"] .badge,
[data-sidebar-combobox-option][aria-selected="true"] .badge,
[data-sidebar-combobox-option][data-selected="true"] .badge {
    --badge-border: 1px solid color-mix(in srgb, var(--control-selected-border) 88%, var(--theme-border-subtle));
    --badge-bg: color-mix(in srgb, var(--control-selected-bg-hover) 72%, var(--theme-surface-base));
    --badge-color: var(--control-selected-color);
}

[data-sidebar-combobox-option][data-highlighted="true"] [data-sidebar-combobox-option-meta],
[data-sidebar-combobox-option][aria-selected="true"] [data-sidebar-combobox-option-meta],
[data-sidebar-combobox-option][data-selected="true"] [data-sidebar-combobox-option-meta] {
    color: color-mix(in srgb, var(--control-selected-color) 82%, var(--theme-text-muted));
}

[data-sidebar-combobox-option] > span:first-child {
    min-width: 0;
}

.sidebar [data-sidebar-combobox-option] > span:first-child {
    overflow-wrap: anywhere;
}

[data-sidebar-combobox-option] .badge {
    margin-left: auto;
    min-inline-size: 2.5ch;
    justify-content: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

[data-sidebar-combobox-more] {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--control-gap-tight);
}

[data-sidebar-combobox-more] .badge,
[data-sidebar-combobox-more] .icon-badge {
    margin-left: auto;
}

[data-sidebar-combobox-more] .badge {
    min-inline-size: 2.5ch;
    justify-content: center;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

[data-sidebar-combobox-more]:not(:disabled):not([aria-disabled="true"]):hover .badge,
[data-sidebar-combobox-more]:not(:disabled):not([aria-disabled="true"]):focus-visible .badge,
[data-sidebar-combobox-more]:not(:disabled):not([aria-disabled="true"]):hover .icon-badge,
[data-sidebar-combobox-more]:not(:disabled):not([aria-disabled="true"]):focus-visible .icon-badge {
    --badge-border: 1px solid color-mix(in srgb, var(--control-selected-border) 88%, var(--theme-border-subtle));
    --badge-bg: color-mix(in srgb, var(--control-selected-bg-hover) 72%, var(--theme-surface-base));
    --badge-color: var(--control-selected-color);
    border-color: color-mix(in srgb, var(--control-selected-border) 88%, var(--theme-border-subtle));
    background: color-mix(in srgb, var(--control-selected-bg-hover) 72%, var(--theme-surface-base));
    color: var(--control-selected-color);
}

.checkbox-row {
    min-height: var(--checkbox-row-min-height, var(--control-height-md));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--checkbox-row-gap, var(--control-gap-wide));
    padding: 0 var(--checkbox-row-padding-x, var(--control-padding-x-compact));
    border-radius: var(--checkbox-row-radius, var(--control-radius));
    border: var(--checkbox-row-border, var(--emphasis-outline-checkbox-row));
    background: var(--checkbox-row-bg, var(--field-bg-color));
    color: var(--checkbox-row-color, var(--text-primary));
    font-size: var(--checkbox-row-font-size, var(--font-size-sm));
    font-weight: var(--checkbox-row-font-weight, 400);
    cursor: pointer;
    box-sizing: border-box;
    --checkbox-row-bg-checked: var(--control-selected-bg);
    --checkbox-row-border-checked: var(--control-selected-border);
    --checkbox-row-color-checked: var(--control-selected-color);
    --checkbox-box-border-checked: var(--control-selected-border);
    --checkbox-box-bg-checked: var(--control-selected-bg-hover);
    --checkbox-check-color: var(--control-selected-color);
}

.checkbox-row input[type="checkbox"] {
    grid-column: 2;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-box-size, var(--control-check-size));
    height: var(--checkbox-box-size, var(--control-check-size));
    min-width: var(--checkbox-box-size, var(--control-check-size));
    min-height: var(--checkbox-box-size, var(--control-check-size));
    border-radius: var(--checkbox-box-radius, var(--control-check-radius));
    border: var(--checkbox-box-border, var(--emphasis-outline-checkbox-box));
    background: var(--checkbox-box-bg, var(--surface-muted));
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"]::before {
    content: "";
    width: var(--control-check-mark-width);
    height: var(--control-check-mark-height);
    border-right: 2px solid var(--checkbox-check-color, var(--emphasis-accent-checkbox-check-color));
    border-bottom: 2px solid var(--checkbox-check-color, var(--emphasis-accent-checkbox-check-color));
    transform: rotate(45deg) scale(0);
    transform-origin: center;
}

.checkbox-row input[type="checkbox"]:checked {
    border-color: var(--checkbox-box-border-checked, var(--emphasis-outline-checkbox-box-checked-color));
    background: var(--checkbox-box-bg-checked, color-mix(in srgb, var(--theme-action-secondary-bg) 72%, var(--field-bg-color)));
}

.checkbox-row input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

.checkbox-row input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--state-focus-ring-shadow);
}

.checkbox-row:has(input[type="checkbox"]:checked) {
    background: var(--checkbox-row-bg-checked);
    border-color: var(--checkbox-row-border-checked);
    color: var(--checkbox-row-color-checked);
}

.checkbox-row:has(input[type="checkbox"]:focus-visible) {
    box-shadow: var(--state-focus-ring-shadow);
}

.checkbox-row__label {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--checkbox-row-label-gap, var(--control-gap-tight));
    min-width: 0;
    flex: 1 1 auto;
    line-height: var(--line-height-normal);
}

[data-search-chip-group] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--control-gap-tight);
}

[data-search-chip-group="letter"] {
    justify-content: space-between;
}

[data-search-chip-group="start-primary"],
[data-search-chip-group="start-secondary"] {
    justify-content: flex-start;
}

[data-search-chip-group="start-secondary"] {
    margin-top: var(--control-gap-tight);
}

[data-search-chip-group] .chip-alphabet {
    width: fit-content;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

[data-search-start-groups] {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--control-gap-tight);
}

[data-search-chip-caption] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.alphabet-chip {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-pill);
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}

.feedback-context-label {
    font-weight: var(--type-control-weight);
    color: var(--theme-text-strong);
}

.feedback-url-preview {
    font-size: var(--type-control-meta-size);
    color: var(--hierarchy-meta-color);
    word-break: break-word;
    margin-bottom: var(--space-4);
}

body.search-page,
.account-page--v2,
.audio-page--v2,
.media-page--v2,
.grammar-page--v2 {
    --search-sticky-top: 82px;
    --search-sticky-top-collapsed: 12px;
    --search-action-size: 34px;
    --search-input-font-size: 17px;
    --search-action-icon-size: 18px;
    --search-symbol-font-size: 16px;
    --sidebar-sticky-top: var(--search-sticky-top-current);
}

@media (max-width: 640px) {
    body.search-page,
    .account-page--v2,
    .audio-page--v2,
    .media-page--v2,
    .grammar-page--v2 {
        --search-sticky-top: 62px;
        --search-sticky-top-collapsed: 8px;
        --search-action-size: 30px;
        --search-input-font-size: 16px;
        --search-action-icon-size: 16px;
    }
}


.search-form {
    width: 100%;
    min-width: 0;
}

.search-form[data-search-scope] {
    --search-shell-padding: 3px;
    --search-shell-gap: var(--control-gap-2xs);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--search-shell-gap);
    width: 100%;
    min-width: 0;
    min-height: var(--search-bar-height, calc(var(--search-action-size, 32px) + (var(--search-shell-padding) * 2)));
    padding: var(--search-shell-padding);
    border: 1px solid var(--theme-border-normal);
    border-radius: var(--radius-pill);
    background: var(--theme-surface-base);
    overflow: visible;
}

.search-form[data-search-scope]:focus-within {
    box-shadow: var(--state-focus-ring-shadow);
    outline: none;
}

.search-form[data-search-scope]:not([data-search-scope="header"]) {
    position: sticky;
    top: var(--search-sticky-top-current, var(--search-sticky-top, 82px));
    z-index: var(--z-quick-bar);
}

body.is-header-collapsed .search-form[data-search-scope]:not([data-search-scope="header"]) {
    z-index: calc(var(--z-quick-bar) - 1);
}

[data-search-scope="header"] {
    min-width: 0;
}

[data-search-select],
[data-search-input],
[data-search-submit],
[data-search-symbol],
[data-search-clear] {
    border: 1px solid transparent;
}

[data-search-select] {
    --select-like-arrow-width: 10px;
    --select-like-arrow-height: 6px;
    --select-like-arrow-offset: 10px;
    --select-like-arrow-opacity: 0.72;
    --select-like-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --select-like-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230f1b20' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --select-like-arrow-image-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a7465' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    appearance: none;
    -webkit-appearance: none;
    height: var(--search-action-size, 32px);
    min-height: var(--search-action-size, 32px);
    max-height: var(--search-action-size, 32px);
    min-width: var(--search-language-min-width, clamp(88px, 18vw, 118px));
    max-width: var(--search-language-max-width, 136px);
    width: auto;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 0 calc(var(--control-padding-x-base) + var(--select-like-arrow-width) + 8px) 0 var(--control-padding-x-base);
    border-radius: var(--button-radius-unified);
    background: var(--theme-surface-subtle);
    background-image: var(--select-like-arrow-image);
    background-repeat: no-repeat;
    background-position: right var(--select-like-arrow-offset) center;
    background-size: var(--select-like-arrow-width) var(--select-like-arrow-height);
    color: var(--text-primary);
    font-size: var(--search-language-font-size, var(--font-size-sm));
    line-height: var(--type-control-line);
    cursor: pointer;
    white-space: nowrap;
}

.search-form[data-search-scope]:not([data-search-scope="header"]) > [data-search-select] {
    width: var(--search-selector-width, auto);
}

[data-search-scope="header"] > [data-search-select] {
    min-width: var(--search-selector-width, clamp(88px, 18vw, 118px));
    max-width: var(--search-selector-width, 136px);
    --select-like-arrow-offset: 12px;
}

[data-search-input] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    align-self: center;
    height: var(--search-action-size, 32px);
    min-height: var(--search-action-size, 32px);
    padding: 0 var(--search-input-padding-x, var(--control-padding-x-base));
    background: transparent;
    color: var(--theme-text-strong);
    font-family: var(--font-sans-ui);
    font-size: var(--search-input-font-size, var(--font-size-md));
    line-height: var(--line-height-normal);
}

[data-search-input]::placeholder {
    color: var(--theme-text-muted);
    opacity: 1;
}

[data-search-input]:focus-visible {
    outline: none;
}

[data-search-submit],
[data-search-symbol],
[data-search-clear] {
    --search-utility-bg: var(--theme-surface-subtle);
    --search-utility-bg-hover: var(--control-selected-bg);
    --search-utility-border: transparent;
    --search-utility-border-hover: var(--control-selected-border);
    --search-utility-color: var(--text-secondary);
    --search-utility-color-hover: var(--control-selected-color);
    --search-utility-icon-filter: none;
    --search-utility-icon-filter-hover: var(--icon-filter-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--search-action-size, 32px);
    height: var(--search-action-size, 32px);
    min-width: var(--search-action-size, 32px);
    min-height: var(--search-action-size, 32px);
    margin: 0;
    padding: 0;
    border-radius: var(--button-radius-unified);
    background: var(--search-utility-bg);
    color: var(--search-utility-color);
    cursor: pointer;
}

[data-search-submit] {
    --search-utility-color: var(--text-primary);
}

[data-search-submit] .action-icon {
    width: var(--search-action-icon-size, 18px);
    height: var(--search-action-icon-size, 18px);
    display: block;
}

[data-search-submit] .action-icon__img {
    filter: var(--search-utility-icon-filter);
}

[data-search-symbol],
[data-search-clear] {
    font-size: var(--search-symbol-font-size, 16px);
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

[data-search-select]:not(:disabled):hover,
[data-search-select]:focus-visible {
    border-color: var(--control-selected-border);
    color: var(--control-selected-color);
    background-color: var(--control-selected-bg);
    background-image: var(--select-like-arrow-image-accent);
}

[data-search-submit]:not(:disabled):hover,
[data-search-submit]:not(:disabled):focus-visible,
[data-search-symbol]:not(:disabled):hover,
[data-search-symbol]:not(:disabled):focus-visible,
[data-search-clear]:not(:disabled):hover,
[data-search-clear]:not(:disabled):focus-visible {
    border-color: var(--search-utility-border-hover);
    background: var(--search-utility-bg-hover);
    color: var(--search-utility-color-hover);
}

[data-search-submit]:not(:disabled):hover .action-icon__img,
[data-search-submit]:not(:disabled):focus-visible .action-icon__img {
    filter: var(--search-utility-icon-filter-hover);
}

[data-search-clear][hidden] {
    display: none !important;
}

[data-search-select]:focus-visible,
[data-search-submit]:focus-visible,
[data-search-symbol]:focus-visible,
[data-search-clear]:focus-visible {
    outline: none;
    box-shadow: var(--state-focus-ring-shadow);
}

.search-form[data-search-scope]:not([data-search-scope="header"]) > [data-search-dropdown] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--control-gap-tight));
    z-index: var(--z-popover);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    --search-dropdown-list-max-height: max(160px, calc(100dvh - var(--search-sticky-top-current, var(--search-sticky-top, 82px)) - var(--search-bar-height, var(--control-height-md)) - var(--search-dropdown-bottom-clearance, calc(92px + env(safe-area-inset-bottom))) - 2px));
}

.search-form[data-search-scope]:not([data-search-scope="header"]) > [data-search-dropdown].has-items,
.search-form[data-search-scope]:not([data-search-scope="header"]) > [data-search-dropdown][data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

[data-search-dropdown="header"] {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    display: none;
    margin-top: var(--control-padding-x-compact);
    --search-dropdown-list-max-height: max(220px, calc(100dvh - var(--site-header-bar-height) - var(--site-header-search-results-clearance)));
    box-shadow: none;
    border-color: var(--theme-border-normal);
}

[data-search-dropdown="header"].has-items,
[data-search-dropdown="header"][data-open="true"] {
    display: block;
}

[data-search-dropdown] {
    background: var(--theme-surface-base);
    border: 1px solid var(--theme-border-normal);
    border-radius: var(--surface-radius);
    box-shadow: none;
    height: var(--search-dropdown-shell-height, auto);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    container-type: inline-size;
}

[data-search-dropdown]:focus-within {
    border-color: var(--theme-border-focus);
}

[data-search-dropdown="header"]:focus-within {
    border-color: var(--theme-border-normal);
    box-shadow: none;
}

[data-search-results] {
    margin: 0;
    padding: var(--control-padding-2xs);
    padding-bottom: max(var(--control-padding-2xs), env(safe-area-inset-bottom));
    list-style: none;
    display: grid;
    gap: var(--control-gap-2xs);
    max-height: var(--search-dropdown-list-max-height, max(220px, calc(100dvh - 140px - (92px + env(safe-area-inset-bottom)))));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--theme-text-muted) 28%, transparent) transparent;
    scroll-padding-block: var(--control-gap-2xs);
    box-sizing: border-box;
}

[data-search-results]::-webkit-scrollbar {
    width: 10px;
}

[data-search-results]::-webkit-scrollbar-track {
    background: transparent;
}

[data-search-results]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--theme-text-muted) 28%, transparent);
    border-radius: var(--button-radius-unified);
    border: 3px solid transparent;
    background-clip: padding-box;
}

.search-suggestion {
    --search-suggestion-selected-bg: var(--control-selected-bg);
    --search-suggestion-selected-border: var(--control-selected-border);
    --search-suggestion-selected-color: var(--control-selected-color);
    --search-suggestion-selected-color-soft: color-mix(in srgb, var(--control-selected-color) 82%, var(--theme-text-muted));
    --search-suggestion-selected-badge-bg: color-mix(in srgb, var(--control-selected-bg-hover) 72%, var(--theme-surface-base));
    --search-suggestion-selected-badge-border: color-mix(in srgb, var(--control-selected-border) 88%, var(--theme-border-subtle));
    position: relative;
    cursor: pointer;
    font-size: var(--font-size-md);
    border: 0;
    min-height: var(--control-height-md);
    color: var(--theme-text-strong);
    list-style: none;
    text-align: left;
    overflow: visible;
}

.search-suggestion::before {
    content: none;
}

.search-suggestion:focus-visible {
    outline: none;
    box-shadow: var(--state-focus-ring-shadow);
    background: var(--theme-surface-subtle);
}

.search-suggestion[data-highlighted="true"],
.search-suggestion[aria-selected="true"] {
    background: var(--search-suggestion-selected-bg);
    color: var(--search-suggestion-selected-color);
}

.search-suggestion[data-highlighted="true"] .search-suggestion__link,
.search-suggestion[aria-selected="true"] .search-suggestion__link,
.search-suggestion[data-highlighted="true"] .search-suggestion__title,
.search-suggestion[aria-selected="true"] .search-suggestion__title {
    color: var(--search-suggestion-selected-color);
}

.search-suggestion[data-highlighted="true"] .search-suggestion__meta,
.search-suggestion[aria-selected="true"] .search-suggestion__meta,
.search-suggestion[data-highlighted="true"] .search-suggestion__main,
.search-suggestion[aria-selected="true"] .search-suggestion__main,
.search-suggestion[data-highlighted="true"] .search-suggestion-homonym-index,
.search-suggestion[aria-selected="true"] .search-suggestion-homonym-index {
    color: var(--search-suggestion-selected-color-soft);
    --text-meta-color: var(--search-suggestion-selected-color-soft);
}

.search-suggestion[data-highlighted="true"] :is(.search-suggestion__lang, .search-suggestion__badge, .search-suggestion__meta-row .result-card__meta-badge),
.search-suggestion[aria-selected="true"] :is(.search-suggestion__lang, .search-suggestion__badge, .search-suggestion__meta-row .result-card__meta-badge) {
    --badge-border: 1px solid var(--search-suggestion-selected-badge-border);
    --badge-bg: var(--search-suggestion-selected-badge-bg);
    --badge-color: var(--search-suggestion-selected-color);
}

.search-suggestion[data-highlighted="true"] .search-suggestion__signals .icon-badge,
.search-suggestion[aria-selected="true"] .search-suggestion__signals .icon-badge {
    border-color: var(--search-suggestion-selected-badge-border);
    background: var(--search-suggestion-selected-badge-bg);
    color: var(--search-suggestion-selected-color);
}

.search-suggestion,
.search-suggestion__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--control-gap-base);
    padding: var(--control-padding-x-compact) var(--control-padding-x-base);
}

.search-suggestion__link {
    text-decoration: none;
    color: var(--theme-text-strong);
    font-weight: 400;
}

.search-suggestion__title {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--theme-text-strong);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-suggestion-homonym-index {
    margin-left: 4px;
    font-size: var(--type-homonym-sup-size);
    line-height: var(--type-homonym-sup-line);
    vertical-align: text-top;
    color: var(--text-muted);
}

.search-suggestion__main {
    display: flex;
    flex-direction: column;
    gap: var(--control-gap-2xs);
    min-width: 0;
    flex: 1 1 auto;
    --text-meta-size: 12px;
    --text-meta-line-height: 1.35;
    --text-meta-color: var(--text-muted);
}

.search-suggestion__meta {
    word-break: break-word;
}

.search-suggestion__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.search-suggestion__meta-row .result-card__meta-badge {
    --badge-min-height: 20px;
    --badge-padding-x: 7px;
    --badge-font-size: 10px;
}

.search-suggestion__signals {
    justify-content: flex-end;
}

.search-suggestion__signals .icon-badge {
    min-height: 22px;
    padding: 1px 7px;
}

.search-suggestion__signals .icon-badge__icon {
    --action-icon-box-size: 14px;
    --action-icon-img-width: 12px;
    --action-icon-img-height: 12px;
}

.search-suggestion__side {
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap-tight);
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: max-content;
    max-width: none;
}

.search-suggestion__side > :nth-child(n+3) {
    display: none;
}

.search-suggestion__lang,
.search-suggestion__badge {
    --badge-min-height: 24px;
    --badge-padding: 0 8px;
    --badge-radius: var(--control-radius);
    --badge-border: 0;
    --badge-bg: var(--theme-surface-subtle);
    --badge-color: var(--theme-text-muted);
    --badge-font-size: 10px;
    --badge-font-weight: 400;
    --badge-line-height: var(--type-control-line);
    --badge-letter-spacing: var(--hierarchy-status-track-compact);
    --badge-text-transform: var(--hierarchy-status-transform);
    margin-left: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion__lang {
    min-width: 40px;
    max-width: none;
}

.search-suggestion__badge.search-badge--icon {
    gap: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
    max-width: none;
}

.search-badge-icon {
    width: var(--control-icon-size-sm);
    height: var(--control-icon-size-sm);
    display: block;
    background: currentColor;
    -webkit-mask: var(--search-badge-icon) center / contain no-repeat;
    mask: var(--search-badge-icon) center / contain no-repeat;
}

.search-badge-text {
    display: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-badge--icon[data-badge-icon="history"] { --search-badge-icon: url("../../assets/icons/time-past.svg"); }
.search-badge--icon[data-badge-icon="search"] { --search-badge-icon: url("../../assets/icons/search.svg"); }
.search-badge--icon[data-badge-icon="semantic"] { --search-badge-icon: url("../../assets/icons/puzzle.svg"); }
.search-badge--icon[data-badge-icon="topic"] { --search-badge-icon: url("../../assets/icons/category-alt.svg"); }
.search-badge--icon[data-badge-icon="pos"] { --search-badge-icon: url("../../assets/icons/text.svg"); }
.search-badge--icon[data-badge-icon="lexical"] { --search-badge-icon: url("../../assets/icons/book-open.svg"); }
.search-badge--icon[data-badge-icon="possible"] { --search-badge-icon: url("../../assets/icons/sparkles.svg"); }
.search-badge--icon[data-badge-icon="meaning"] { --search-badge-icon: url("../../assets/icons/note-sticky.svg"); }
.search-badge--icon[data-badge-icon="example"] { --search-badge-icon: url("../../assets/icons/comment-quote.svg"); }
.search-badge--icon[data-badge-icon="section"] { --search-badge-icon: url("../../assets/icons/bookmark.svg"); }
.search-badge--icon[data-badge-icon="table"] { --search-badge-icon: url("../../assets/icons/table.svg"); }
.search-badge--icon[data-badge-icon="preferred"] { --search-badge-icon: url("../../assets/icons/star.svg"); }
.search-badge--icon[data-badge-icon="error"] { --search-badge-icon: url("../../assets/icons/exclamation.svg"); }
.search-badge--icon[data-badge-icon="dictionary"] { --search-badge-icon: url("../../assets/icons/book-open.svg"); }
.search-badge--icon[data-badge-icon="learn"] { --search-badge-icon: url("../../assets/icons/graduation-cap.svg"); }
.search-badge--icon[data-badge-icon="system"] { --search-badge-icon: url("../../assets/icons/settings.svg"); }
.search-badge--icon[data-badge-icon="staff"] { --search-badge-icon: url("../../assets/icons/users.svg"); }
.search-badge--icon[data-badge-icon="external"] { --search-badge-icon: url("../../assets/icons/globe.svg"); }
.search-badge--icon[data-badge-icon="local"] { --search-badge-icon: url("../../assets/icons/film.svg"); }

.search-suggestion__badge--preferred {
    --badge-border: 1px solid var(--theme-border-normal);
    --badge-bg: var(--theme-surface-accent-soft);
    --badge-color: var(--theme-text-accent);
}

.search-state {
    cursor: default;
    min-height: var(--control-height-md);
    padding: var(--control-padding-x-compact) var(--control-padding-x-base) var(--control-padding-x-base);
    border: 0;
    background: transparent;
    color: var(--theme-text-muted);
    pointer-events: none;
    margin: 0;
    align-items: flex-start;
    justify-content: space-between;
}

.search-state::after {
    content: "";
    display: block;
    margin-top: var(--control-gap-base);
    border-top: 1px solid var(--theme-border-quiet);
}

.search-state .search-suggestion__title {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-normal);
}

.search-state .search-suggestion__meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    -webkit-line-clamp: 1;
}

.search-state .search-suggestion__side {
    align-items: flex-start;
}

.search-state .search-suggestion__badge {
    --badge-min-height: 0;
    --badge-padding: 0;
    --badge-radius: 0;
    --badge-border: 0;
    --badge-bg: transparent;
    --badge-color: var(--theme-text-muted);
    --badge-font-size: 10px;
    --badge-line-height: 1.2;
    --badge-letter-spacing: 0.06em;
    --badge-text-transform: uppercase;
}

.search-state--hint .search-suggestion__title,
.search-state--history .search-suggestion__title {
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.search-result-highlight {
    background-color: var(--theme-surface-accent-soft);
    color: inherit;
    border-radius: var(--radius-2xs);
    padding: 0 2px;
}

@container (min-width: 620px) {
    [data-search-dropdown] .search-badge--icon.search-badge--with-text {
        width: auto;
        min-width: 28px;
        max-width: 14ch;
        padding: 0 10px;
        gap: 6px;
    }

    [data-search-dropdown] .search-badge--icon.search-badge--with-text .search-badge-text {
        display: inline;
    }
}

@media (max-width: 900px) {
    .search-suggestion__side {
        max-width: 48%;
        gap: 4px;
    }

    [data-search-scope="header"] [data-search-results="header"] {
        max-height: max(220px, calc(var(--visual-viewport-height, 100dvh) - var(--site-header-bar-height) - var(--site-header-search-results-clearance)));
        padding-bottom: calc(var(--control-padding-x-compact) + env(safe-area-inset-bottom));
    }
}

@media (max-width: 640px) {
    .search-form[data-search-scope]:not([data-search-scope="header"]) {
        padding: 4px;
    }

    [data-search-results] {
        gap: 5px;
        padding: 6px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .search-suggestion,
    .search-suggestion__link {
        min-height: 40px;
        gap: 6px;
        padding: 6px 8px;
    }

    .search-suggestion__title {
        font-size: 13px;
        line-height: 1.3;
        -webkit-line-clamp: 1;
    }

    .search-suggestion__meta {
        font-size: 10px;
        line-height: 1.2;
        -webkit-line-clamp: 1;
    }

    .search-suggestion__meta-row .result-card__meta-badge {
        --badge-min-height: 19px;
        --badge-font-size: 9px;
    }

    .search-suggestion__side {
        max-width: none;
    }

    .search-suggestion__lang,
    .search-suggestion__badge {
        --badge-min-height: 24px;
        --badge-padding: 0 8px;
        --badge-font-size: 9px;
        max-width: 13ch;
    }
}

@media (max-width: 360px) {
    [data-search-results] {
        gap: 4px;
        padding: 4px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .search-suggestion,
    .search-suggestion__link {
        min-height: 34px;
        gap: 5px;
        padding: 6px 8px;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .search-suggestion__side {
        max-width: 100%;
        justify-content: flex-start;
        margin-top: 4px;
    }

    .search-suggestion__title {
        font-size: 12px;
        line-height: 1.2;
    }

    .search-suggestion__meta {
        font-size: 9px;
        line-height: 1.15;
    }

    .search-suggestion__meta-row .result-card__meta-badge {
        --badge-min-height: 18px;
        --badge-font-size: 9px;
        --badge-padding-x: 6px;
    }

    .search-suggestion__lang,
    .search-suggestion__badge {
        max-width: 12ch;
    }

    .search-suggestion__badge.search-badge--icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }

    .search-badge-icon {
        width: 12px;
        height: 12px;
    }

    .search-state {
        padding: 0 1px 6px;
    }

    .search-state .search-suggestion__title,
    .search-state .search-suggestion__meta {
        font-size: 9px;
    }

    .search-state .search-suggestion__meta {
        margin-top: 1px;
    }
}