:root {
  --control-focus-color: var(--blue);
  --control-focus-width: 2px;
  --control-focus-offset: 3px;
  --control-border: var(--line);
  --control-radius: 20px;
  --control-hover-overlay: rgba(16, 24, 40, 0.05);
  --control-pressed-overlay: rgba(16, 24, 40, 0.12);
  --control-duration: 160ms;
}

/* Shared by actions, selectors, disclosures and icon links on every screen. */
:is(button, a[href], summary) {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--control-duration) ease,
    border-color var(--control-duration) ease,
    box-shadow var(--control-duration) ease,
    translate var(--control-duration) ease;
}

:is(button, a[href], summary):focus:not(:focus-visible) {
  outline: none;
}

:where(button, a[href], summary, input, select, textarea):focus-visible {
  outline: var(--control-focus-width) solid var(--control-focus-color);
  outline-offset: var(--control-focus-offset);
}

/* The inset ring stays visible inside a scrollable listbox. */
.region-select-option:focus-visible {
  outline-offset: -2px;
}

.btn,
.btn.compact,
.dashboard-back-link {
  border-radius: var(--control-radius);
}

.btn.primary {
  border: 1px solid transparent;
}

.btn.secondary,
.btn.ghost,
.dashboard-back-link,
.region-select,
.indicator-pill,
.choice-chip:not(.selected),
.round-btn,
.dots-btn {
  border: 1px solid var(--control-border);
}

.dashboard-back-link {
  background: var(--surface);
  color: var(--ink);
}

.brand-home-btn,
.dashboard-icon-btn,
.icon-close,
.copy-btn {
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
  :is(button, a[href], summary):not(:disabled, [aria-disabled="true"], .is-disabled, [aria-busy="true"]):hover {
    box-shadow: inset 0 0 0 999px var(--control-hover-overlay);
  }
}

:is(button, a[href], summary):not(:disabled, [aria-disabled="true"], .is-disabled, [aria-busy="true"]):active {
  box-shadow: inset 0 0 0 999px var(--control-pressed-overlay);
  translate: 0 1px;
  transition-duration: 60ms;
}

/* Open and selected are persistent application states, not keyboard focus. */
.region-select[aria-expanded="true"] {
  border-color: var(--cyan);
  background: var(--surface-soft);
}

:is(button, a[href]):is(:disabled, [aria-disabled="true"], .is-disabled) {
  cursor: not-allowed;
  box-shadow: none;
  translate: none;
}

.btn:is(:disabled, [aria-disabled="true"], .is-disabled),
.btn.primary:is(:disabled, [aria-disabled="true"], .is-disabled),
.choice-chip:disabled,
.indicator-pill:disabled {
  border: 1px solid var(--control-border);
  background: #e8eef6;
  color: var(--muted);
}

.btn.primary:is(:disabled, [aria-disabled="true"], .is-disabled)::before {
  background: #e8eef6;
}

:is(button, a[href])[aria-busy="true"] {
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  :is(button, a[href], summary) {
    transition: none;
  }

  :is(button, a[href], summary):not(:disabled, [aria-disabled="true"], .is-disabled, [aria-busy="true"]):active {
    translate: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  :where(button, a[href], summary, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }

  :is(button, a[href], summary):not(:disabled, [aria-disabled="true"], .is-disabled):active {
    color: Highlight;
  }
}