/* Shared raised metallic gold buttons, matching the approved Button 18 reference. */
:is(button, .cta, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  border: 2px solid #a97816;
  border-radius: 10px;
  color: #633c0c;
  background-color: #d9aa36;
  background-image: linear-gradient(156deg, transparent 21%, #fff3ab99 44%, transparent 66%), linear-gradient(180deg, #ad7714 0%, #e6bf4d 12%, #f8df7b 29%, #e9c45b 48%, #c79521 76%, #d3a32c 91%, #b68117 100%);
  box-shadow: inset 0 2px 3px #fff2b7, inset 3px 0 5px #f5dc7399, inset -3px -3px 5px #80500688, 0 3px 0 #725011, 0 9px 15px #0008;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 1px 1px #fff1b299;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
button:not(:disabled), .cta, [role="button"] { cursor: pointer; }
button:not(:disabled):hover, .cta:hover, [role="button"]:hover {
  background-color: #d9aa36;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button:not(:disabled):active, .cta:active, [role="button"]:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px #80500688, inset 0 -1px 2px #fff2b7, 0 1px 0 #725011, 0 4px 8px #0006;
}
button:focus-visible, .cta:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid #fff4cc;
  outline-offset: 5px;
}
button:disabled, input:disabled {
  filter: saturate(.6) brightness(.82);
  cursor: not-allowed;
}
button.close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 25px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  button, .cta, [role="button"] { transition: none; }
}

/* Show playful feedback only during an enabled text button press.
   Keep the original label in the layout and accessibility tree. */
:is(button:not(.close), .cta, [role="button"]):not(:disabled) {
  position: relative;
}
:is(button:not(.close), .cta, [role="button"]):not(:disabled):active {
  color: transparent;
  text-shadow: none;
}
:is(button:not(.close), .cta, [role="button"]):not(:disabled):active::after {
  content: "That tickles";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #633c0c;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px #fff1b299;
  pointer-events: none;
}