/* 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: 0.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: 0.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: 0.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: 0.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;
  }
}