/* Feedback de interação — aplicado por último para manter o comportamento
   consistente entre os hubs sem transformar cards passivos em controles. */

.prototype-body :is(button, a[href], [role="button"], summary):not(:disabled) {
  cursor: pointer;
}

.screen button:not(:disabled) {
  transition:
    transform 110ms ease,
    box-shadow 110ms ease,
    background-color 110ms ease,
    border-color 110ms ease,
    color 110ms ease,
    filter 110ms ease;
}

.prototype-topbar button:not(:disabled) {
  cursor: pointer;
  transition:
    transform 110ms ease,
    box-shadow 110ms ease,
    background-color 110ms ease,
    filter 110ms ease;
}

.screen button:disabled {
  cursor: not-allowed;
}

.screen :is(button, a[href], [role="button"]):focus-visible,
.prototype-sidebar a:focus-visible {
  outline: 3px solid #5b9fc4;
  outline-offset: 3px;
}

/* Botões que não pertencem às famílias primária e secundária também
   ganham elevação visível ao passar o mouse e afundam ao clicar. */
@media (hover: hover) and (pointer: fine) {
  .screen button:not(:disabled):not(.dark-action):not(.outline-action):not(.bank-question-image):hover {
    filter: brightness(.97);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--ink);
  }

  .prototype-nav .nav-link:hover {
    filter: brightness(1.12);
    transform: translateX(2px);
  }

  .prototype-topbar button:not(:disabled):hover {
    filter: brightness(.96);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
  }
}

.screen button:not(:disabled):not(.dark-action):not(.outline-action):active {
  filter: brightness(.91);
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 var(--ink) !important;
}

.prototype-nav .nav-link:active,
.prototype-topbar button:not(:disabled):active {
  transform: translate(2px, 1px);
  box-shadow: 0 0 0 var(--ink);
}

/* Opções de resposta têm um comportamento próprio: sobem no hover,
   ficam selecionadas em azul e usam cores fortes somente após responder. */
[data-screen="banco"] .bank-question-answers button {
  position: relative;
  overflow: hidden;
  background: #fffefa;
  box-shadow: 0 0 0 var(--ink);
  transition:
    transform 110ms ease,
    box-shadow 110ms ease,
    background-color 110ms ease,
    border-color 110ms ease;
}

@media (hover: hover) and (pointer: fine) {
  [data-screen="banco"] .bank-question-answers button:hover:not(:disabled) {
    background: #d9edf7;
    box-shadow: 3px 3px 0 var(--ink);
    transform: translate(-1px, -1px);
  }
}

[data-screen="banco"] .bank-question-answers button.is-selected {
  background: #c9e7f6;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px, -1px);
}

[data-screen="banco"] .bank-question-answers button.is-correct {
  border-color: #111;
  background: #76d99a;
  box-shadow: 4px 4px 0 var(--ink);
}

[data-screen="banco"] .bank-question-answers button.is-wrong {
  border-color: #111;
  background: #f27f7f;
  box-shadow: 4px 4px 0 var(--ink);
}

[data-screen="banco"] .bank-question-answers button:is(.is-correct, .is-wrong) :is(strong, p) {
  color: var(--ink) !important;
}

[data-screen="banco"] .bank-question-answers button:is(.is-correct, .is-wrong)::after {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  background: #fffefa;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

[data-screen="banco"] .bank-question-answers button.is-correct::after {
  content: "Correta";
}

[data-screen="banco"] .bank-question-answers button.is-wrong::after {
  content: "Incorreta";
}

[data-screen="banco"] .bank-question-answers button:disabled {
  opacity: 1;
}

[data-screen="banco"] .bank-answer-feedback.is-correct {
  color: #146b34;
}

[data-screen="banco"] .bank-answer-feedback.is-wrong {
  color: #a31f1f;
}

/* Histórico visível, sem bloquear uma nova tentativa. */
[data-screen="banco"] .question-identification .bank-history-status {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

[data-screen="banco"] .question-identification .bank-history-status.is-correct {
  background: #76d99a;
}

[data-screen="banco"] .question-identification .bank-history-status.is-wrong {
  background: #f27f7f;
}

@media (prefers-reduced-motion: reduce) {
  .screen button,
  .prototype-nav .nav-link,
  .prototype-topbar button {
    transition: none !important;
  }
}