/* Shared primitives.  They are opt-in: legacy reference CSS is not globally
 * reset, so adopting a primitive cannot change an unrelated recovered view. */
.ui-control {
  box-sizing: border-box;
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-field);
  color: var(--ui-color-text);
  font: inherit;
}
.ui-control:focus-visible,.ui-action:focus-visible,.ui-icon-action:focus-visible {
  outline: 2px solid var(--ui-color-accent);
  outline-offset: 2px;
}
.ui-action {
  min-height: var(--ui-touch-target);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-accent-strong);
  color: var(--ui-color-accent-contrast);
  font: 700 14px/1 var(--ui-font-sans);
}
.ui-dialog {
  box-sizing: border-box;
  border: 1px solid var(--ui-color-border-strong);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-dialog);
  font-family: var(--ui-font-sans);
}
.ui-icon-action {
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border:0;
  border-radius:50%;
  background:var(--ui-color-surface-raised);
  color:var(--ui-color-text-secondary);
}