/* Shared control tokens. Page themes supply colors; native behavior stays intact. */
:root {
  --control-accent: var(--reading-accent, var(--site-accent-fg-color, #2f65b4));
  --control-bg: var(--reading-bg, var(--site-default-bg-color, #fff));
  --control-surface: var(--reading-surface, #f3f5f9);
  --control-border: var(--reading-rule, #e4e9f0);
  --control-text: var(--site-default-fg-color, #202b39);
  --control-muted: var(--site-default-fg-color--light, #5b6778);
  --control-error: #b34242;
  --control-radius: var(--site-radius-sm, 8px);
  --control-menu-radius: var(--site-radius-lg, 10px);
  --control-shadow: var(--site-shadow-md, 0 8px 24px #00000026);
  --control-font-size: 14px;
  --control-height: 46px;
  --control-focus-width: 2px;
}
:where(button, input, select, textarea) {
  font: inherit;
  accent-color: var(--control-accent);
}
:where(input, textarea)::placeholder {
  color: var(--control-muted);
  opacity: 1;
}
:where(button, input, select, textarea):disabled {
  opacity: 0.45;
  cursor: default;
}
/* Never transition outline: even a .01ms reduced-motion transition can paint a
   frame of the browser's initial outline before the authored focus indicator. */
:where(button, input, select, textarea, summary, a, [tabindex]) {
  transition-property:
    color, background-color, border-color, box-shadow, opacity, transform;
}
:where(button, input, select, textarea, summary, a, [tabindex]):focus-visible {
  outline: var(--control-focus-width) solid var(--control-accent);
  outline-offset: var(--control-focus-offset, 3px);
}
body :is(input, select, textarea, .viz-select-trigger)[aria-invalid="true"],
body :is(input, select, textarea):user-invalid {
  border-color: var(--control-error);
}
/* A compound field has one focus owner. Its buttons retain their own ring. */
@supports selector(:has(input:focus-visible)) {
  body [data-control-shell] {
    transition-property: color, background-color, border-color, box-shadow;
  }
  body [data-control-shell]:has(:is(input, textarea):focus-visible) {
    outline: var(--control-focus-width) solid var(--control-accent);
    outline-offset: var(--control-shell-focus-offset, 1px);
    box-shadow: none;
  }
  body [data-control-shell] :is(input, textarea):focus-visible {
    outline: none;
    box-shadow: none;
  }
  body [data-control-focus-row],
  body [data-control-focus-row] > a {
    transition-property: color, background-color;
  }
  body [data-control-focus-row]:has(> a:focus-visible) {
    outline: var(--control-focus-width) solid var(--control-accent);
    outline-offset: -2px;
    box-shadow: none;
  }
  body [data-control-focus-row] > a:focus-visible {
    outline: none;
  }
}
/* Windows high contrast must keep an identifiable keyboard focus indicator. */
@media (forced-colors: active) {
  :root {
    --control-accent: Highlight;
    --control-error: Mark;
  }
}

/* Theme the search affordance while retaining the browser’s clear action. */
:where(input[type="search"])::-webkit-search-decoration,
:where(input[type="search"])::-webkit-search-results-button,
:where(input[type="search"])::-webkit-search-results-decoration {
  display: none;
  appearance: none;
}
:where(input[type="search"])::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0 0 0 2px;
  background-color: var(--control-muted);
  cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:where(input[type="search"])::-webkit-search-cancel-button:hover {
  background-color: var(--control-text);
}