/* Shared controls. Existing selectors are adapters; new screens use ui-* classes.
   Load after page CSS. Layout (width, placement, margin) belongs to each screen. */
:is(.ui-button,.cta,.login-card button,.billing-actions button,#settings-save,
    .admin-page button,.mcp-connect button,.document-actions button,#pick-open,#pick-cancel,
    .account-delete-actions button,.account-danger button,#account-delete-send,
    #settings-dialog .mcp-account-link) {
  --button-bg:transparent; --button-ink:var(--ink); --button-border:var(--input-border);
  --button-hover:var(--paper-alt); --button-active:var(--pressed);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  box-sizing:border-box; min-height:var(--button-height,var(--control-height));
  padding:var(--button-pad-y,var(--space-2)) var(--button-pad-x,var(--space-4)); border:1px solid var(--button-border);
  border-radius:var(--radius-control); background:var(--button-bg); color:var(--button-ink);
  font:500 var(--button-size,var(--text-md))/1.5 var(--font-ui); text-align:center; text-decoration:none;
  cursor:pointer; touch-action:manipulation;
  transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);
}
:root :is(.ui-button--primary,.cta,#login-submit,#account-recovery-confirm,#settings-save,
    .admin-page #save,#billing-subscribe,.mcp-connect button[value=allow],
    [data-id=habit-form] button[type=submit],#pick-open) {
  --button-bg:var(--action); --button-border:var(--action); --button-ink:var(--on-action);
  --button-hover:var(--action-hover); --button-active:var(--action-hover);
}
:root :is(.ui-button--danger,.mcp-connect .mcp-disconnect,.account-danger button,
    #account-delete-confirm,[data-id=habit-remove]) {
  --button-ink:var(--danger); --button-border:var(--danger-border);
  --button-hover:var(--danger-bg); --button-active:var(--danger-bg);
}
:is(.ui-button,.cta,.login-card button,.billing-actions button,#settings-save,
    .admin-page button,.mcp-connect button,.document-actions button,#pick-open,#pick-cancel,
    .account-delete-actions button,.account-danger button,#account-delete-send,
    #settings-dialog .mcp-account-link):hover:not(:disabled):not([aria-disabled=true]) {
  background:var(--button-hover); color:var(--button-ink);
}
:is(.ui-button,.cta,.login-card button,.billing-actions button,#settings-save,
    .admin-page button,.mcp-connect button,.document-actions button,#pick-open,#pick-cancel,
    .account-delete-actions button,.account-danger button,#account-delete-send,
    #settings-dialog .mcp-account-link):active:not(:disabled):not([aria-disabled=true]) {
  background:var(--button-active);
}
:is(.ui-button,.cta,.login-card button,.billing-actions button,#settings-save,
    .admin-page button,.mcp-connect button,.document-actions button,#pick-open,#pick-cancel,
    .account-delete-actions button,.account-danger button,#account-delete-send,
    #settings-dialog .mcp-account-link):is(:disabled,[aria-disabled=true]) {
  opacity:.5; cursor:default;
}
/* Compact actions retain room for the writing surface; they share every state. */
.ui-button--compact{
  --button-height:var(--control-height-compact); --button-size:var(--text-xs);
  --button-pad-y:6px; --button-pad-x:9px;
}
/* Text/date/select controls share their surface, border and focus; checkboxes and
   invisible date overlays deliberately retain their native/app-specific geometry. */
:is(.ui-input,.login-card input:not([type=checkbox]),.language-setting select,
    .admin-page .search-row input,#mcp-url,[data-id=habit-title],#account-delete-code,
    .pick-fields input,.pick-fields select) {
  box-sizing:border-box; min-height:var(--field-height,var(--control-height)); min-width:0;
  padding:var(--field-pad-y,var(--space-2)) var(--field-pad-x,var(--space-3)); border:1px solid var(--field-border,var(--input-border));
  padding-inline-end:var(--field-end-space,var(--field-pad-x,var(--space-3)));
  border-radius:var(--radius-control); background:var(--field-bg); color:var(--ink);
  font:400 var(--field-size,var(--text-base))/1.5 var(--font-ui);
}
.ui-input--compact{--field-height:var(--control-height-compact);--field-size:var(--text-md);--field-pad-y:6px;--field-pad-x:var(--space-2)}
#mcp-url{font-family:var(--font-mono)}
:is(.ui-input,.login-card input:not([type=checkbox]),.language-setting select,
    .admin-page .search-row input,#mcp-url,[data-id=habit-title],#account-delete-code,
    .pick-fields input,.pick-fields select):disabled{opacity:.5;cursor:default}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--field-border:var(--danger)}
:is(.ui-button,.ui-input,button,a,input,select,textarea):focus-visible:not(:where(#note-search,#pick-note-search)) {
  outline:var(--focus-width) solid var(--accent); outline-offset:var(--focus-offset);
}
/* This high-specificity adapter replaces earlier page-specific focus rules. */
:is(#settings-dialog,#page-picker,#account-delete-dialog,.login-card,.admin-page,.mcp-connect)
:is(button,a,input,select):focus-visible:not(:where(#note-search,#pick-note-search)) {
  outline:var(--focus-width) solid var(--accent); outline-offset:var(--focus-offset);
}
.ui-surface{padding:var(--space-6);border:1px solid var(--settings-border);border-radius:var(--radius-panel);background:var(--settings-background);color:var(--ink)}
.ui-notice{padding:var(--space-3) var(--space-4);border:1px solid var(--notice-border);border-radius:var(--radius-card);color:var(--warning);font:400 var(--text-md)/1.6 var(--font-ui)}
.ui-notice--danger{color:var(--danger);border-color:var(--danger-border);background:var(--danger-bg)}
:is(.ui-dialog,#settings-dialog,#page-picker,#account-delete-dialog,[data-id=habit-dialog]) {
  box-sizing:border-box; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px);
  overflow:auto; border:1px solid var(--settings-border); border-radius:var(--radius-dialog);
  background:var(--settings-background); color:var(--ink);
}
:is(.ui-dialog,#settings-dialog,#page-picker,#account-delete-dialog,[data-id=habit-dialog])::backdrop{background:var(--overlay)}
@media(prefers-reduced-motion:reduce){
  :is(.ui-button,button,a,input,select){transition:none}
}

/* Native selects retain keyboard/typeahead/OS popups; only the closed-field arrow
   is drawn here. Its wrapper follows the actual field, never intercepting taps. */
.ui-select{--field-end-space:var(--select-end-space);position:relative;display:grid;min-width:0;max-width:100%;color:var(--ink)}
:root .ui-select select{
  appearance:none;-webkit-appearance:none;width:100%;max-width:100%;
  padding-inline-end:var(--select-end-space);
}
.ui-select::after{
  content:"";position:absolute;pointer-events:none;inset-inline-end:var(--select-arrow-inset);
  top:50%;width:var(--select-arrow-size);height:var(--select-arrow-size);
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
}
.ui-select:has(select:disabled)::after{opacity:.5}
/* A composed search field owns its focus ring. The inner input keeps outline:none
   from style.css, so rounded outer bounds and the ring cannot diverge. */
:is(#search-form,#pick-search-form){background:var(--field-bg);border-color:var(--input-border)}
:is(#search-form,#pick-search-form):focus-within{
  border-color:var(--accent);outline:var(--focus-width) solid var(--accent);
  outline-offset:var(--focus-offset);
}
/* Keep native semantics and the login checkbox's appearance on every surface. */
:root input[type=checkbox]{
  appearance:auto;-webkit-appearance:auto;box-sizing:border-box;
  width:var(--checkbox-size);height:var(--checkbox-size);
  min-width:var(--checkbox-size);min-height:var(--checkbox-size);flex:0 0 var(--checkbox-size);
  margin:2px 0 0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;
  accent-color:var(--accent);cursor:pointer;
}
:root input[type=checkbox]:disabled{opacity:.5;cursor:default}
:root :is(.adult-confirmation,.account-delete-consent,.task-filter,.ui-check,
 .admin-page label:has(>input[type=checkbox])){
  display:flex;align-items:flex-start;gap:var(--space-2);line-height:1.6;cursor:pointer;
}
.task-filter{font-size:var(--text-sm)}
@media(forced-colors:active){.ui-select::after{color:ButtonText}}