/* ═══ Interaction polish (Shanti): one feel for every button, a busy state while saving, loading placeholders ═══════
   Loaded last. Buttons were styled in several sheets (base, modern, components, clean); this sheet only adds how they
   respond: a soft lift on hover, a press, a clear disabled look, the keyboard focus ring, and the spinner core/api.js
   puts on the button that started a save (.is-busy). core/ui.js skeleton() draws the loading placeholders (.aw-sk; .skel-row in components.css is the older single-bar one).
   `.btn.btn` raises the specificity just enough to win over clean.css, which takes the shadow off secondary buttons. */

/* ─── Buttons ─── */
.btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease, color .15s ease, opacity .15s ease; }
.btn.btn:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 3px 8px rgb(15 23 42 / .07); }
.btn.btn.primary:not(:disabled):not([aria-disabled="true"]):hover,
.btn.btn.btn-primary:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn.btn:disabled, .btn.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.btn.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* the button of a save in flight (core/api.js busyButton): a spinner before its words; not clickable again */
.btn.btn.is-busy { opacity: .85; cursor: progress; gap: 6px; }
.btn.is-busy::before {
  content: ""; flex: none; display: inline-block; width: 12px; height: 12px; margin-right: 2px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: aw-spin .7s linear infinite;
}

/* ─── Loading placeholders (core/ui.js skeleton) ─── */
.aw-sk { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.aw-sk-line {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%;
  animation: aw-shimmer 1.4s ease infinite;
}
.aw-sk-h { width: 34%; height: 16px; margin-bottom: 4px; }
.aw-sk-row { display: grid; grid-template-columns: 2fr 3fr 1fr; gap: 16px; }
.aw-sk-row:nth-child(odd) { grid-template-columns: 3fr 2fr 1fr; }

@keyframes aw-spin { to { transform: rotate(360deg); } }
@keyframes aw-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .btn.btn:not(:disabled):active { transform: none; }
  .aw-sk-line { animation: none; }
  .btn.is-busy::before { animation-duration: 2s; }
}