/* Shared form components. See  Loaded after page styles. */
:root {
 --control-height:48px;
 --control-radius:10px;
 --control-padding-y:10px;
 --control-padding-x:14px;
 --control-gap:10px;
 --control-font-size:14px;
 --control-background:var(--elevation-2);
 --control-hover:var(--elevation-3);
 --control-text:var(--gray-100);
 --control-placeholder:var(--gray-400);
 --control-focus:var(--gray-500);
 --control-popup:var(--elevation-1);
}
/* Native fields are the compatibility adapter: new fields use ui-input. */
:is(.ui-input,input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]),textarea,select),
:is(.ui-select,.npc-custom-filter) summary {
 box-sizing:border-box!important;
 min-height:var(--control-height)!important;
 padding:var(--control-padding-y) var(--control-padding-x)!important;
 border:1px solid transparent!important;
 border-radius:var(--control-radius)!important;
 background:var(--control-background)!important;
 color:var(--control-text)!important;
 font-family:inherit!important;
 font-size:var(--control-font-size)!important;
 line-height:1.5!important;
 outline:none!important;
 outline-offset:0!important;
 box-shadow:none!important;
 transition:background-color .15s ease,box-shadow .15s ease;
}
:is(.ui-input,input,textarea)::placeholder{color:var(--control-placeholder);opacity:1}
:is(.ui-input,input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select):hover,
:is(.ui-select,.npc-custom-filter) summary:hover{background:var(--control-hover)!important}
:is(.ui-input,input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select):focus,
:is(.ui-select,.npc-custom-filter) summary:focus-visible{
 outline:none!important;box-shadow:inset 0 0 0 1px var(--control-focus)!important
}
:is(.ui-select,.npc-custom-filter) details[open]>summary{border-color:transparent!important;background:var(--control-hover)!important}
:is(.ui-select,.npc-custom-filter) summary{display:flex;align-items:center;justify-content:space-between;gap:var(--control-gap);cursor:pointer;list-style:none}
:is(.ui-select,.npc-custom-filter) summary::-webkit-details-marker{display:none}
:is(.ui-select,.npc-custom-filter) summary>span:first-child{display:flex;align-items:center;gap:var(--control-gap);min-width:0}
:is(.ui-select__menu,.npc-filter-options){box-sizing:border-box;background:var(--control-popup)!important;border:1px solid var(--elevation-4)!important;border-radius:var(--control-radius)!important;padding:8px!important}
:is(.ui-select__menu,.npc-filter-options) button{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--control-height)!important;gap:var(--control-gap)!important;padding:var(--control-padding-y) var(--control-padding-x)!important;border:0!important;border-radius:var(--control-radius)!important;font-size:var(--control-font-size)!important;line-height:1.5!important;color:var(--control-text);outline:none!important;box-shadow:none!important}
:is(.ui-select__menu,.npc-filter-options) button:hover{background:var(--control-hover)!important;outline:none!important}
:is(.ui-select__menu,.npc-filter-options) button:focus-visible{background:var(--control-hover)!important;box-shadow:inset 0 0 0 1px var(--control-focus)!important}
:is(.ui-select__menu,.npc-filter-options) button[aria-pressed=true]{background:var(--control-hover)!important;color:var(--control-text)!important}
:is(.ui-select,.npc-custom-filter) :is(summary,button)>img{width:28px!important;height:28px!important;object-fit:contain;flex:0 0 28px;image-rendering:pixelated}
:is(input,textarea,select):disabled{opacity:.5;cursor:not-allowed}
/* Compound search fields have a single surface and focus indicator. */
:is(.header-search,.wiki-search-field,.cosmetic-search){border-radius:var(--control-radius)!important;background:var(--control-background)!important}
:is(.header-search,.wiki-search-field,.cosmetic-search) input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]){background:transparent!important;border:0!important;box-shadow:none!important}
:is(.header-search,.wiki-search-field,.cosmetic-search):focus-within{outline:none!important;box-shadow:inset 0 0 0 1px var(--control-focus)!important}
:is(.header-search,.wiki-search-field,.cosmetic-search) input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]):focus{box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.ui-input,.npc-custom-filter summary,input,textarea,select{transition:none!important}}

:is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select),:is(.ui-select,.npc-custom-filter) summary{height:var(--control-height)!important}
:is(.ui-select,.npc-custom-filter) summary img{width:26px!important;height:26px!important;object-fit:contain;flex:0 0 26px}

/* Keep the compound surface as tall as its shared input; children never paint over its focus ring. */
:is(.header-search,.wiki-search-field,.cosmetic-search){min-height:var(--control-height);box-sizing:border-box}

/* Shared button: <a|button class="ui-button">. Yellow text on a translucent yellow fill. Selected = .is-selected, [aria-pressed=true] or [aria-current]. */
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 16px;border:0;border-radius:var(--control-radius);background:color-mix(in srgb,var(--accent-yellow) 16%,transparent);color:var(--accent-yellow);font:inherit;font-size:13px;font-weight:var(--weight-bold);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.ui-button:hover{background:color-mix(in srgb,var(--accent-yellow) 28%,transparent);color:var(--accent-yellow)}
.ui-button:focus-visible{outline:0;background:color-mix(in srgb,var(--accent-yellow) 28%,transparent);box-shadow:0 0 0 2px var(--accent-yellow)}
.ui-button:active{background:color-mix(in srgb,var(--accent-yellow) 12%,transparent)}
.ui-button.is-selected,.ui-button[aria-pressed="true"],.ui-button[aria-current]{background:var(--accent-yellow);color:var(--elevation-0)}
.ui-button:disabled,.ui-button[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* Colour variants: --green, --neutral (gray, no accent). Same hover/focus/selected states. */
.ui-button--green{background:color-mix(in srgb,var(--accent-green) 16%,transparent);color:var(--accent-green)}
.ui-button--green:hover{background:color-mix(in srgb,var(--accent-green) 28%,transparent);color:var(--accent-green)}
.ui-button--green:focus-visible{background:color-mix(in srgb,var(--accent-green) 28%,transparent);box-shadow:0 0 0 2px var(--accent-green)}
.ui-button--green:active{background:color-mix(in srgb,var(--accent-green) 12%,transparent)}
.ui-button--green.is-selected,.ui-button--green[aria-pressed="true"],.ui-button--green[aria-current]{background:var(--accent-green);color:var(--elevation-0)}
.ui-button--neutral{background:var(--control-background);color:var(--control-text)}
.ui-button--neutral:hover{background:var(--control-hover);color:var(--gray-50)}
.ui-button--neutral:focus-visible{background:var(--control-hover);box-shadow:0 0 0 2px var(--control-focus)}
.ui-button--neutral:active{background:var(--elevation-1)}
.ui-button--neutral.is-selected,.ui-button--neutral[aria-pressed="true"],.ui-button--neutral[aria-current]{background:var(--gray-100);color:var(--elevation-0)}
/* Blue variant. */
:root{--accent-blue:#64b4ff}
:root[data-theme="light"]{--accent-blue:#1b62b8}
.ui-button--blue{background:color-mix(in srgb,var(--accent-blue) 16%,transparent);color:var(--accent-blue)}
.ui-button--blue:hover{background:color-mix(in srgb,var(--accent-blue) 28%,transparent);color:var(--accent-blue)}
.ui-button--blue:focus-visible{background:color-mix(in srgb,var(--accent-blue) 28%,transparent);box-shadow:0 0 0 2px var(--accent-blue)}
.ui-button--blue:active{background:color-mix(in srgb,var(--accent-blue) 12%,transparent)}
.ui-button--blue.is-selected,.ui-button--blue[aria-pressed="true"],.ui-button--blue[aria-current]{background:var(--accent-blue);color:var(--elevation-0)}

/* Number input stepper (dist/number-stepper.js): native spin buttons are hidden, a larger up/down pair replaces them. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;display:none}
.ui-stepper{position:relative;display:block;width:100%;min-width:0}
.ui-stepper>input{width:100%;padding-right:44px}
.ui-stepper-buttons{position:absolute;top:6px;right:6px;bottom:6px;width:30px;display:grid;grid-template-rows:1fr 1fr;gap:2px;opacity:.55;transition:opacity .15s}
.ui-stepper:hover .ui-stepper-buttons,.ui-stepper:focus-within .ui-stepper-buttons{opacity:1}
.ui-stepper-button{display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:var(--elevation-5);color:var(--gray-300);cursor:pointer;transition:background .15s,color .15s}
.ui-stepper-button:hover{background:var(--elevation-7);color:var(--accent-yellow)}
.ui-stepper-button:active{background:var(--elevation-1);color:var(--accent-yellow)}
.ui-stepper>input{padding-right:34px}
.ui-stepper-buttons{top:50%;bottom:auto;right:8px;width:20px;height:30px;transform:translateY(-50%);gap:2px}
.ui-stepper-button{border-radius:5px}
.ui-stepper-button svg{width:10px;height:10px}

/* Shared searchable select: the search field stays outside the scrolling options. */
.ui-select details{position:relative}
.ui-select-popup{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;display:grid;gap:8px;padding:8px;background:var(--control-popup);border:1px solid var(--elevation-4);border-radius:var(--control-radius)}
.ui-select-popup>.ui-input{width:100%;min-width:0}
.ui-select-popup>.npc-filter-options{position:static;max-height:260px;overflow:auto;margin:0;border:0!important;padding:0!important;box-shadow:none}
.ui-select-popup [hidden]{display:none!important}

/* Interaction fallback for legacy controls and linked cards. Low specificity keeps
   component-specific hover/pressed designs; keyboard focus is always visible. */
:where(button,input[type=button],input[type=submit],input[type=reset],a[href],summary,[role=button]):not(:disabled):not([aria-disabled=true]){cursor:pointer}
@media(hover:hover){
 :where(button,input[type=button],input[type=submit],input[type=reset],a[href],summary,[role=button]):not(:disabled):not([aria-disabled=true]):hover{filter:brightness(1.12)}
}
:where(button,input[type=button],input[type=submit],input[type=reset],a[href],summary,[role=button]):not(:disabled):not([aria-disabled=true]):active{filter:brightness(.88)}
:is(button,input[type=button],input[type=submit],input[type=reset],a[href],summary,[role=button]):focus-visible{outline:2px solid var(--control-focus)!important;outline-offset:-2px!important}
:is(button,input[type=button],input[type=submit],input[type=reset],[role=button]):is(:disabled,[aria-disabled=true]){cursor:not-allowed;filter:none;opacity:.45}
/* Legacy utility actions share the neutral button palette. */
:is(.quiet-button,.group-tab,.wiki-pagination a):not(:disabled):not([aria-disabled=true]):hover{background:var(--control-hover)}
:is(.quiet-button,.group-tab,.wiki-pagination a):not(:disabled):not([aria-disabled=true]):active{background:var(--elevation-1)}
:is(.quiet-button.is-completed,.group-tab.active,.wiki-pagination a.active):hover{background:var(--elevation-5)}
:is(.ui-select,.npc-custom-filter) summary:active,
:is(.ui-select__menu,.npc-filter-options) button:not(:disabled):active{background:var(--elevation-1)!important}
.npc-quest-filter{transition:background-color .15s ease}
@media(hover:hover){.npc-quest-filter:hover{background:var(--control-hover)}}
.npc-quest-filter:active{background:var(--elevation-1)}
.npc-quest-filter:focus-within{outline:none;box-shadow:inset 0 0 0 1px var(--control-focus)}
:is(input[type=checkbox],input[type=radio],input[type=range],input[type=file],input[type=color]):focus-visible{outline:2px solid var(--control-focus)!important;outline-offset:2px!important}
@media(prefers-reduced-motion:reduce){.npc-quest-filter{transition:none}}