/* Shared keyboard feedback and comfortable targets for existing controls. */
:root { --cz-focus-ring: oklch(82% 0.12 240); }

html body :focus-visible {
  outline: 2px solid var(--cz-focus-ring) !important;
  outline-offset: 3px !important;
}

@media (forced-colors: active) {
  html body :focus-visible { outline-color: Highlight !important; }
}

html body :is(button, .button, [role="button"]):not(:disabled):active {
  filter: brightness(.88);
}

.navbar_usermenu > button,
button.button-search,
button.filter,
html #rowModsServers .mods__choose,
.tabbar_mobile > a {
  min-block-size: 44px;
}

button.button-search { min-inline-size: 44px; }

#rowModsServers .purchases__nav {
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* The visible state must not depend on an animation completing. */
dialog { opacity: 1; }
.text-animate { opacity: 1; transform: none; }
dialog#modal {
  inset: 0;
  margin: auto;
  min-inline-size: 0;
  inline-size: min(33rem, calc(100vw - 32px));
  max-block-size: calc(100dvh - 32px);
  overflow-y: auto;
}

@media (prefers-reduced-motion: no-preference) {
  dialog { opacity: 0; }
  .text-animate { opacity: 0; transform: translateY(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-confetti { display: none; }
  #rowModsServers .purchases__card { transform: none; }
}