/* Shared interaction language: every action has the same resting, hover,
   pressed, focus, disabled and loading feedback without shifting layout. */
:root {
  --control-height: 48px;
  --control-radius: 999px;
  --control-border: 2px solid var(--ink);
  --control-shadow: 3px 3px 0 var(--ink);
  --control-speed: 180ms;
}

.button {
  min-height: var(--control-height);
  border: var(--control-border);
  border-radius: var(--control-radius);
  box-shadow: 0 0 0 transparent;
  transition:
    background-color var(--control-speed) ease,
    border-color var(--control-speed) ease,
    color var(--control-speed) ease,
    box-shadow var(--control-speed) ease,
    opacity var(--control-speed) ease,
    transform var(--control-speed) ease;
}

@media (hover: hover) {
  .button:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
    background-color: #fff;
    box-shadow: var(--control-shadow);
  }
  .button.primary:hover:not(:disabled) { background-color: #efff7a; }
  .button.dark:hover:not(:disabled) { background-color: #30312c; color: #fff; }
}

.button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.button:disabled,
.button[aria-disabled="true"] {
  border-color: rgba(18, 19, 15, .35);
  background: rgba(18, 19, 15, .08);
  color: rgba(18, 19, 15, .58);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.button[aria-busy="true"] { cursor: wait; }
.button[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: control-spin .7s linear infinite;
}

@keyframes control-spin { to { transform: rotate(360deg); } }

.nav-links a:not(.button),
.dashboard-aside nav a,
.footer-links a,
.brand,
.social-row,
.event-card,
.my-chat-link,
summary {
  border-radius: 10px;
  transition:
    background-color var(--control-speed) ease,
    border-color var(--control-speed) ease,
    color var(--control-speed) ease,
    box-shadow var(--control-speed) ease;
}

@media (hover: hover) {
  .nav-links a:not(.button):hover,
  .dashboard-aside nav a:hover,
  .footer-links a:hover,
  .my-chat-link:hover,
  summary:hover { background: rgba(18, 19, 15, .08); }
  .social-row:hover,
  .event-card:hover {
    transform: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(18, 19, 15, .08);
  }
}

.nav-links a:not(.button), .footer-links a { padding: 7px 9px; }
summary { min-height: 44px; padding: 9px 10px; cursor: pointer; }
.chat-report {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .chat-report:hover { border-color: var(--ink); background: rgba(18, 19, 15, .06); }
}

.auth-form-card [role="status"] {
  min-height: 1.7em;
  margin-bottom: 0;
}
.auth-form-card [role="status"]:empty { visibility: hidden; }
.auth-form-card .form-actions { align-items: stretch; }
.auth-form-card .button { min-height: 52px; }

@media (prefers-reduced-motion: reduce) {
  .button,
  .nav-links a,
  .dashboard-aside nav a,
  .footer-links a,
  .brand,
  .social-row,
  .event-card,
  .my-chat-link,
  summary { transition: none !important; }
  .button[aria-busy="true"]::before { animation: none; border-right-color: currentColor; }
}