/* Shared app controls. Loaded after surface layouts; those own placement only.
   New controls can opt in with ui-control, ui-search or ui-segmented.
   Existing selectors below migrate the same control types without changing
   their event handlers, native semantics or saved state. */
:root {
  --control-height:40px;
  --control-compact-height:32px;
  --control-radius:10px;
  --control-font:500 12px/1.35 'Inter',sans-serif;
  --control-field-font:400 13px/1.4 'Inter',sans-serif;
  --control-search-font:400 16px/1.4 'Inter',sans-serif;
  --control-padding:12px;
  --control-focus:2px solid var(--accent);
  --control-caret-size:14px;
  --control-caret-inset:12px;
  --control-caret-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme=light] {
  --control-caret-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media(max-width:800px) {
  :root { --control-height:44px; --control-compact-height:44px; --control-field-font:400 16px/1.4 'Inter',sans-serif; }
}

/* Standard selects, dropdown triggers, form fields and action buttons.
   Primary/danger/selected states use variables, so dimensions stay identical. */
:is(.ui-control, select:not([multiple]),
    input:is([type=text],[type=search],[type=email],[type=password],[type=url],[type=number],[type=date]),
    .acct-input, .acct-btn, .mini-btn, .dl-btn, .btn-ghost, .btn-primary, .login-btn,
    .wl-bulk-act, .wl-note-save, .wl-note-cancel, .wl-pre,
    .autoplay-toggle, .wk-sort-trigger, .release-quick-filter,
    .modal-foot button, .dr-save-row .dr-action-btn, .dr-comparison-act,
    #panel-weekly #horizon, #panel-weekly .release-quick-filter,
    #panel-weekly #releasesViewTools .wk-sort-trigger,
    #panel-weekly .releases-toolbar #filterOpenBtn,
    #filtersSidebar.simple-release-filters .filter-row,
    #filtersSidebar.simple-release-filters select,
    #filtersSidebar .sidebar-foot button, #releasePrecisionField>summary) {
  box-sizing:border-box;
  height:var(--control-height);
  min-height:var(--control-height);
  padding:0 var(--control-padding-end,var(--control-padding)) 0 var(--control-padding);
  border:1px solid var(--control-border,var(--border-strong));
  border-radius:var(--control-radius);
  background:var(--control-background,var(--control-surface,var(--bg-elev)));
  color:var(--control-ink,var(--text));
  font:var(--control-font);
  box-shadow:none;
  vertical-align:middle;
  transition:border-color .15s, background-color .15s;
}
:is(.ui-control, .acct-btn, .mini-btn, .dl-btn, .btn-ghost, .btn-primary, .login-btn,
    .wl-bulk-act, .wl-note-save, .wl-note-cancel, .wl-pre,
    .autoplay-toggle, .modal-foot button, .dr-save-row .dr-action-btn, .dr-comparison-act) {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none;
}
/* Native selects keep their picker and keyboard behavior, but share the same
   chevron artwork and geometry as custom dropdowns. */
body select:not([multiple]) {
  appearance:none; -webkit-appearance:none;
  --control-padding-end:calc(var(--control-caret-inset) + var(--control-caret-size) + 10px);
  --control-background:var(--control-caret-image) right var(--control-caret-inset) center / var(--control-caret-size) var(--control-caret-size) no-repeat var(--control-surface,var(--bg-elev));
  cursor:pointer;
}
body :is(input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],input[type=number],input[type=date],.acct-input) { --control-font:var(--control-field-font); }
body :is(textarea,select[multiple]) {
  padding:10px var(--control-padding); border:1px solid var(--border-strong);
  border-radius:var(--control-radius); background:var(--bg-elev); color:var(--text);
  font:var(--control-field-font);
}
body textarea { resize:vertical; min-height:88px; }
body :is(input,textarea)::placeholder { color:var(--text-faint); opacity:1; }

/* Searches have one border around the icon and text, never a nested input box. */
:is(.ui-search, .wl-search, .helpc-search, #panel-weekly .releases-toolbar #wkSearch, #wkSearch) {
  box-sizing:border-box; display:flex; align-items:center; gap:8px;
  height:var(--control-height); min-height:var(--control-height);
  padding:0 12px; border:1px solid var(--border-strong); border-radius:999px;
  background:var(--bg-elev); color:var(--text-dim);
}
#panel-weekly .releases-toolbar #wkSearch, #wkSearch { padding-left:0; padding-right:0; gap:0; }
/* `hidden` must win over the display:flex rule above. That :is() takes the
   specificity of its heaviest member (two ids), so it outranked styles.css
   `.wk-search[hidden]` and the Releases search showed on other tabs whenever
   Releases had not rendered yet (booting straight into #admin), left in its
   shell slot at the page foot. The same :is() plus [hidden] outranks it anywhere. */
:is(#wkSearch, #panel-weekly .releases-toolbar #wkSearch)[hidden] { display:none; }
:is(.ui-search, .wl-search, .helpc-search, #panel-weekly #wkSearch) input:is([type=text],[type=search]) {
  flex:1; min-width:0; height:100%; min-height:0; margin:0; padding:0;
  border:0; border-radius:0; background:transparent; color:var(--text);
  font:var(--control-search-font); outline:0; box-shadow:none;
}
:is(.ui-search, .wl-search, .helpc-search) > .icon { width:17px; height:17px; flex:none; color:var(--text-dim); }
#panel-weekly #wkSearchToggle { width:calc(var(--control-height) - 2px); height:calc(var(--control-height) - 2px); }
#filtersSidebar #facetSearch.facet-search { height:var(--control-height); min-height:var(--control-height); border-radius:999px; padding-left:38px; font:var(--control-search-font); }
#filterDetail.direct-facet #facetBack { visibility:hidden; pointer-events:none; }

/* Same inset segments as the Releases Gallery/List switch. */
:is(.ui-segmented, .wanted-modes, .view-toggle, .release-history-seg, .au-toggle, #releaseViewToggle) {
  box-sizing:border-box; display:inline-flex; align-items:stretch; gap:2px;
  height:var(--control-height); padding:3px; border:1px solid var(--border-strong);
  border-radius:var(--control-radius); background:var(--bg-elev); overflow:visible;
}
:is(.ui-segmented, .wanted-modes, .view-toggle, .release-history-seg, .au-toggle, #releaseViewToggle) > button {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:calc(var(--control-height) - 8px); min-height:calc(var(--control-height) - 8px);
  margin:0; padding:0 10px; border:0; border-radius:7px;
  background:transparent; color:var(--text-dim); font:var(--control-font);
  white-space:nowrap; cursor:pointer;
}
:is(.ui-segmented, .wanted-modes, .view-toggle, .release-history-seg, .au-toggle, #releaseViewToggle) > button:is(.active,[aria-pressed=true]) {
  background:var(--accent-grad); color:#fff; font-weight:600; box-shadow:none;
}
#panel-weekly #releasesViewTools .wk-sort-select-wrap { height:var(--control-height); }
:is(#panel-weekly #releasesViewTools .wk-sort-trigger, #panel-weekly .release-quick-filter,
    #filtersSidebar.simple-release-filters .filter-row, #releasePrecisionField>summary) {
  position:relative;
  padding-right:calc(var(--control-caret-inset) + var(--control-caret-size) + 10px);
}
:is(#panel-weekly #releasesViewTools .wk-sort-trigger>.icon, #panel-weekly .release-quick-filter>.icon,
    #filtersSidebar.simple-release-filters .filter-row-chev, #releasePrecisionField>summary>.icon) {
  position:absolute; right:var(--control-caret-inset); top:50%;
  width:var(--control-caret-size); height:var(--control-caret-size);
  margin:0; translate:0 -50%; color:var(--text-dim); pointer-events:none;
}
#filtersSidebar.simple-release-filters .filter-row-chev .icon { width:100%; height:100%; }
.autoplay-toggle { color:var(--text-dim); }
.simple-release-filters .filter-row-val { font:var(--control-font); }

/* Consistent roles: neutral, primary, destructive, selected, and disabled. */
:is(.btn-primary,.apply-btn,.dl-btn:not(.ghost):not(.danger),.ui-primary,.login-btn) {
  --control-surface:var(--accent-grad); --control-ink:#fff; --control-border:transparent;
  --control-hover-surface:var(--accent-grad); --control-hover-border:transparent;
}
:is(.acct-btn-danger,.btn-danger,.mini-btn.danger,.dl-btn.danger,.ui-danger) {
  --control-ink:var(--danger); --control-border:color-mix(in srgb,var(--danger) 55%,var(--border-strong)); --control-surface:var(--bg-elev);
  --control-hover-surface:color-mix(in srgb,var(--danger) 12%,var(--bg-elev)); --control-hover-border:var(--danger);
}
.wl-pre[aria-pressed=true], .dr-save-btn.active {
  --control-ink:var(--accent); --control-border:var(--accent);
  --control-surface:color-mix(in srgb,var(--accent) 12%,var(--bg-elev));
}
body :is(.ui-control,.acct-btn,.mini-btn,.dl-btn,.btn-ghost,.btn-primary,.login-btn,.wl-bulk-act,.wl-note-save,.wl-note-cancel,.wl-pre,.autoplay-toggle,.wk-sort-trigger,.release-quick-filter,select):hover:not(:disabled),
#panel-weekly #releasesViewTools .wk-sort-trigger:hover,
#panel-weekly .releases-toolbar #filterOpenBtn:hover {
  --control-surface:var(--control-hover-surface,var(--bg-hover));
  --control-border:var(--control-hover-border,var(--accent));
  border-color:var(--control-border); transform:none;
}
body :is(button,input,select,textarea):disabled { opacity:.5; cursor:not-allowed; transform:none; }
body :is(button,input,select,textarea,a):focus-visible,
#panel-weekly #releasesViewTools .wk-sort-trigger:focus-visible,
#filtersSidebar.simple-release-filters .filter-row:focus-visible {
  outline:var(--control-focus); outline-offset:2px; box-shadow:none;
}
:is(.ui-search,.wl-search,.helpc-search,#panel-weekly #wkSearch):focus-within {
  border-color:var(--accent); outline:var(--control-focus); outline-offset:2px; box-shadow:none;
}
:is(.ui-search,.wl-search,.helpc-search,#panel-weekly #wkSearch) input:focus { outline:none; box-shadow:none; }
#panel-weekly #releasesViewTools .wk-sort-select-wrap.open .wk-sort-trigger { border-color:var(--accent); box-shadow:none; }

/* Compact contextual actions use the same shape, with a touch-size floor. */
body .mini-btn { --control-height:var(--control-compact-height); }
body :is(.ghost-btn:not(.avatar-btn),.modal-x,.wl-act) {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  width:var(--control-height); height:var(--control-height); padding:0;
  border:1px solid var(--border-strong); border-radius:var(--control-radius);
  background:var(--bg-elev); color:var(--text-dim); cursor:pointer;
}
body :is(.ghost-btn:not(.avatar-btn),.modal-x,.wl-act):hover { background:var(--bg-hover); color:var(--text); transform:none; }
body .wl-act--drop:hover { color:var(--danger); border-color:var(--danger); }
body :is(input[type=checkbox],input[type=radio]) { accent-color:var(--accent); }

/* Watchlist toolbar: the same search/select geometry as Releases. */
.wl-tools { gap:8px; }
.wl-search { max-width:none; }
.wl-tools #wlSort { min-width:156px; }
@media(max-width:800px) {
  .wl-tools .wl-search { flex-basis:100%; }
  .wl-note-edit { flex-wrap:wrap; }
  .wl-note-edit input { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.ui-control,.wk-sort-trigger,.autoplay-toggle,.acct-btn,.mini-btn,.dl-btn,input,select,textarea) { transition:none; }
}