/* Shared control surfaces. Native semantics, validation and change events stay intact. */
/* Icon and text occupy separate flex items, so form padding cannot overlap them. */
:is(.history-search,.hub-search){position:relative;display:flex;align-items:center;gap:8px;box-sizing:border-box;min-width:0;height:var(--control-h);min-height:var(--control-h);padding:0 10px;border:1px solid var(--line);border-radius:var(--control-r);background:var(--surface);color:var(--muted)}
:is(.history-search,.hub-search)>svg{position:static;transform:none;display:block;flex:0 0 16px;width:16px;height:16px;pointer-events:none}
:is(.history-search,.hub-search)>input[type=search]{flex:1;width:100%;min-width:0;max-width:none;height:100%!important;min-height:0!important;margin:0;padding:0!important;border:0!important;border-radius:0;background:transparent!important;outline:0!important;box-shadow:none!important;color:var(--text);font:400 13px/1.4 var(--font)}
:is(.history-search,.hub-search):focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--accent-ring)}
@media(max-width:700px){:is(.history-search,.hub-search){height:42px;min-height:42px}:is(.history-search,.hub-search)>input[type=search]{font-size:16px}}
:where(button){appearance:none;border:1px solid var(--line);border-radius:var(--control-r);padding:7px 10px;background:var(--surface);color:var(--text);font:500 13px/1.4 var(--font);cursor:pointer}
:where(button:hover){background:var(--surface-2)}
:where(button:disabled,input:disabled,select:disabled,textarea:disabled){cursor:not-allowed;opacity:.6}
:where(input,select,textarea){box-sizing:border-box}
:where(input,select,textarea):user-invalid{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}

/* Style the picker itself, including menus in dialogs and clipped table cells. */
@supports (appearance:base-select){
  select:not([multiple]):not([size]),select:not([multiple])[size="1"]{appearance:base-select;background-image:none!important;padding-right:10px!important;column-gap:8px;align-items:center;cursor:pointer}
  select:not([multiple]):not([size])::picker(select),select:not([multiple])[size="1"]::picker(select){appearance:base-select;box-sizing:border-box;margin-block:4px;min-width:anchor-size(width);max-width:calc(100vw - 16px);max-height:min(320px,60dvh);overflow-y:auto;overscroll-behavior:contain;padding:4px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);font:400 13px/1.4 var(--font);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  select::picker-icon{content:"";flex:none;width:12px;height:12px;margin-inline-start:auto;background:var(--muted);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
  select:open::picker-icon{transform:rotate(180deg)}
  select:not([multiple]) option{display:flex;align-items:center;gap:8px;min-height:34px;padding:7px 10px;border:0;border-radius:4px;background:var(--surface);color:var(--text);font:400 13px/1.4 var(--font);white-space:normal;overflow-wrap:anywhere;cursor:pointer}
  select:not([multiple]) option:checked{background:var(--blue-soft);color:var(--blue);font-weight:600}
  select:not([multiple]) option:hover,select:not([multiple]) option:focus{background:var(--surface-3);outline:0}
  select:not([multiple]) option:checked:hover,select:not([multiple]) option:checked:focus{background:var(--blue-soft)}
  select:not([multiple]) option:disabled{color:var(--muted);opacity:.55;cursor:not-allowed}
  select option::checkmark{order:1;margin-inline-start:auto;color:var(--blue);font-size:14px}
  select optgroup{padding:4px;font:600 12px/1.5 var(--font);color:var(--muted)}
  @media(max-width:700px){select:not([multiple]) option{min-height:44px;font-size:16px;padding:10px}select::picker(select){max-height:55dvh}}
}

select[multiple],select[size]:not([size="1"]){height:auto;min-height:100px;padding:4px!important;background-image:none!important;overflow:auto}
select[multiple] option,select[size]:not([size="1"]) option{padding:8px 10px;border-radius:4px;font:400 13px/1.4 var(--font)}
select[multiple] option:checked,select[size]:not([size="1"]) option:checked{background:var(--blue-soft);color:var(--blue)}

input[type=checkbox]:not([role=switch]),input[type=radio]{appearance:none;display:inline-grid;place-content:center;vertical-align:middle;width:16px;height:16px;min-height:16px;padding:0;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);cursor:pointer}
input[type=radio]{border-radius:50%}
input[type=checkbox]:not([role=switch]):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{border-color:var(--blue);background:var(--blue)}
input[type=checkbox]:not([role=switch]):checked::after{content:"";width:8px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:translateY(-1px) rotate(-45deg)}
input[type=checkbox]:indeterminate::after{content:"";width:8px;height:2px;background:white}
input[type=radio]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:white}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--blue);outline-offset:3px;box-shadow:none}

input[type=file]{max-width:100%;min-width:0;font:400 13px/1.4 var(--font);color:var(--muted)}
input[type=file]::file-selector-button{height:var(--control-h);margin-right:10px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--control-r);background:var(--surface);color:var(--text);font:500 13px/1 var(--font);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--surface-2)}
input[type=range]{accent-color:var(--blue);cursor:pointer}
progress{height:6px;border:0;border-radius:3px;overflow:hidden;accent-color:var(--blue);background:var(--surface-3)}
progress::-webkit-progress-bar{background:var(--surface-3)}progress::-webkit-progress-value{background:var(--blue)}progress::-moz-progress-bar{background:var(--blue)}
@media(forced-colors:active){input[type=checkbox]:not([role=switch]),input[type=radio]{appearance:auto}input[type=checkbox]::after,input[type=radio]::after{display:none}}