/* KG3 action feedback (assets/action-feedback.js): the answer that appears next to a save / set / generate button. */
:root {
  --af-pending-ink: #2c3b52; --af-pending-bg: #eef1f6; --af-pending-line: #b9c3d3;
  --af-ok-ink: #14532d; --af-ok-bg: #e4f3ea; --af-ok-line: #7fbf9a;
  --af-err-ink: #8a1f1f; --af-err-bg: #fdecec; --af-err-line: #d98c8c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --af-pending-ink: #d6deeb; --af-pending-bg: #1c2f4d; --af-pending-line: #4a6288;
    --af-ok-ink: #b8ecce; --af-ok-bg: #123826; --af-ok-line: #3f8a62;
    --af-err-ink: #ffc7c7; --af-err-bg: #4a1d1d; --af-err-line: #b45c5c;
  }
}
:root[data-theme="dark"] {
  --af-pending-ink: #d6deeb; --af-pending-bg: #1c2f4d; --af-pending-line: #4a6288;
  --af-ok-ink: #b8ecce; --af-ok-bg: #123826; --af-ok-line: #3f8a62;
  --af-err-ink: #ffc7c7; --af-err-bg: #4a1d1d; --af-err-line: #b45c5c;
}
.af-feedback { margin: .5rem 0 0; padding: .55rem .8rem; border: 1px solid var(--af-pending-line); border-radius: .7rem;
  background: var(--af-pending-bg); color: var(--af-pending-ink); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere;
  flex: 1 1 100%; width: 100%; box-sizing: border-box; scroll-margin: 5rem 0 6rem; }
.af-feedback[hidden] { display: none !important; }
.af-feedback[data-tone="ok"] { background: var(--af-ok-bg); color: var(--af-ok-ink); border-color: var(--af-ok-line); }
.af-feedback[data-tone="error"] { background: var(--af-err-bg); color: var(--af-err-ink); border-color: var(--af-err-line); }
.af-feedback[data-tone="pending"]::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em;
  animation: af-spin .8s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .af-feedback[data-tone="pending"]::before { animation: none; } }
/* Floating answer for list actions whose button disappears with the re-render that follows. */
.af-toast { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(32rem, calc(100% - 2rem)); flex: none; z-index: 1000; margin: 0; cursor: pointer;
  box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .28); }