/* Shared hover feedback, including controls rendered later by the account. */
:root {
  --hover-edge: rgba(255, 226, 168, .76);
  --hover-ring: rgba(239, 200, 129, .38);
  --hover-glow: rgba(224, 171, 83, .18);
}

/* Inline links need a transformable box; component display rules still win. */
:where(a[href]) { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
:where(a[href], button, summary, [role="button"]) { border-radius: 8px; }

:is(a[href], button, summary, [role="button"], input, select, textarea):not(:disabled):not([aria-disabled="true"]):not([readonly]):not([type="hidden"]) {
  transition: scale .22s ease, border-color .22s ease, box-shadow .22s ease,
    color .22s ease, background-color .22s ease, text-shadow .22s ease;
  transform-origin: center;
}

/* Space inside scrollable controls keeps the enlarged edges visible. */
.account-tabs { padding: 8px; margin-inline: -8px; }
.requests-list { padding: 8px 3%; }
.request-item { border-radius: 12px; }
.navigation-dialog nav a { padding-inline: 12px; margin-inline: -12px; border-radius: 12px; }

@media (hover: hover) and (pointer: fine) {
  :is(a[href], button, summary, [role="button"], input, select, textarea):not(:disabled):not([aria-disabled="true"]):not([readonly]):not([type="hidden"]):hover {
    border-color: var(--hover-edge);
    box-shadow: inset 0 0 0 1px var(--hover-ring),
      0 0 0 1px rgba(246, 213, 152, .18),
      0 0 16px var(--hover-glow), 0 8px 24px rgba(0, 0, 0, .16);
  }

  :is(a[href], button, summary, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover {
    color: #ffe7b5;
    text-shadow: 0 0 10px rgba(235, 191, 115, .28);
  }

  /* Use the independent scale property to retain positioned password toggles. */
  @media (prefers-reduced-motion: no-preference) {
    :is(a[href], button, summary, [role="button"], input, select, textarea):not(:disabled):not([aria-disabled="true"]):not([readonly]):not([type="hidden"]):hover {
      scale: 1.05;
    }
  }

  /* These text buttons previously moved vertically on hover. */
  .submit:hover, .submit:active { transform: none; }

  button:is(.section-close, .menu-close, .about-close, .for-you-close):not(:disabled):not([aria-disabled="true"]):not([readonly]):not([type="hidden"]):hover {
    border: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    text-shadow: 0 0 12px rgba(230, 196, 119, .65);
  }
}

/* Keyboard users get the same edge emphasis without requiring pointer hover. */
:is(a[href], button, summary, [role="button"], input, select, textarea):not(:disabled):not([aria-disabled="true"]):not([readonly]):not([type="hidden"]):focus-visible {
  border-color: var(--hover-edge);
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
button:is(.section-close, .menu-close, .about-close, .for-you-close):not(:disabled):not([aria-disabled="true"]):not([readonly]):not([type="hidden"]):focus-visible {
  outline: none;
  box-shadow: none;
  color: #ffe7b5;
  text-shadow: 0 0 12px rgba(230, 196, 119, .65);
}

@media (prefers-reduced-motion: reduce) {
  :is(a[href], button, summary, [role="button"], input, select, textarea) {
    scale: none !important;
    transition: none !important;
  }
}