/* Resolve field paint on the Community, before drawer-local surface aliases.
   Search and composition share this material; hosts still own their geometry. */
body#app {
    --world-field-background: var(--surface);
    --world-field-border: var(--line);
    --world-field-radius: 5px;
    --world-field-shadow: inset 0 1px 2px #0000000a;
}
body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search, #bottom-bar .composer-box) {
    border: 1px solid var(--world-field-border);
    border-radius: var(--world-field-radius);
    background: var(--world-field-background);
    color: var(--ink);
    box-shadow: var(--world-field-shadow);
}

/* One single-line search field; each host still owns its width and placement. */
body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    outline: 0;
    font-size: 12px;
    transition: none;
}

body#app :is(#search-form, .world-search-form, .board-save-search) {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding-block: 0;
}

/* The 34px field sits inside its existing 48px column-aligned toolbar cell. */
body#app #lower-drawer .shelf-toolbar .board-nav-search {
    flex-basis: calc(var(--nav-width) - 16px);
    width: calc(var(--nav-width) - 16px);
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    margin-inline: 8px;
}
@media (max-width: 760px) {
    body#app #lower-drawer .shelf-toolbar .board-nav-search { flex: 1 1 140px; width: auto; }
}

body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search) input[type="search"] {
    appearance: none;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font: inherit;
    line-height: normal;
    white-space: nowrap;
    transition: none;
}

body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search) input::placeholder {
    color: var(--muted);
    opacity: 1;
}

body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search) > :is(#search-icon, .world-search-icon, span, svg) {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 32px;
    margin: 0;
    padding: 0;
    color: var(--muted);
}

body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search) svg {
    width: 16px;
    height: 16px;
}

body#app :is(#search-form, .world-search-form) .discover-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search):focus-within {
    outline: 0;
    box-shadow: var(--world-field-shadow);
}

body#app :is(#search-form, .world-search-form) .discover-search-submit:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

body#app :is(#search-form, .world-search-form, .board-save-search, .board-nav-search):focus-within > :is(#search-icon, .world-search-icon, span, svg) {
    color: var(--ink);
}

body#app .discover-preview-search { height: 32px; }

/* The existing Search skin is the shared field material, painted once around
   icon and text. Inputs remain transparent, including inside the Inventory. */
body#app[data-skin-components~="workspaceSearch"] {
    --world-field-background: var(--skin-workspaceSearch-color, var(--surface)) var(--skin-workspaceSearch-image, none) center / var(--skin-workspaceSearch-size, cover) var(--skin-workspaceSearch-repeat, no-repeat);
}