/* Instant feedback, skeletons and progress (design.md "Feedback and loading").
   Pressed states answer within one frame; pending controls say "Saving…"; skeletons are grey
   rows in the real layout (opacity pulse only); every motion stops for reduced-motion. */

/* ---- pressed ---- */
.ds-btn:active:not(:disabled):not([aria-disabled="true"]) { filter: brightness(0.92); }
.ds-btn--secondary:active:not(:disabled), .ds-btn--quiet:active:not(:disabled) { background: var(--ds-soft); filter: none; }
.ds-list__row:active, .vault-nav-tab:active, .text-size-btn:active, .lang-switch-btn:active, .ds-chip:active { background: var(--ds-soft); }
.ds-switch:active .ds-switch__knob { width: 1.8125rem; }
.ds-switch:active[aria-checked="true"] .ds-switch__knob { inset-inline-start: 1.1875rem; }

.ds-btn, button:not([role="switch"]), [type="submit"] { transition: transform 80ms ease-out; }
.ds-btn:active:not(:disabled):not([aria-disabled="true"]), button:not([role="switch"]):active:not(:disabled), [type="submit"]:active:not(:disabled) { transform: scale(0.97); }
.reminder-answer [hidden] { display: none; }
.reminder-answer__instant { margin: 0 0 var(--ds-s4); font-weight: 600; }

/* ---- pending ---- */
.is-pending { cursor: progress; }
.ds-btn.is-pending, .ds-switch.is-pending { opacity: 0.7; }
.fb-chip { margin: var(--ds-s2) 0; }
.fb-error { margin: var(--ds-s2) 0 0; font: 600 var(--ds-fs-caption)/var(--ds-lh-caption) var(--ds-font); color: var(--ds-danger); }

/* ---- top progress bar: appears after 400 ms, stronger after 1 s ---- */
.fb-bar { position: fixed; top: 0; inset-inline: 0; z-index: 300; height: 3px; overflow: hidden; pointer-events: none; }
.fb-bar[hidden], .fb-status[hidden] { display: none; }
.fb-bar span { display: block; height: 100%; width: 40%; background: var(--ds-primary); animation: fb-slide 1.2s ease-in-out infinite; }
.fb-bar.is-long { height: 5px; }
.fb-bar.is-long span { background: var(--ds-deep); }
[dir="rtl"] .fb-bar span { animation-name: fb-slide-rtl; }
@keyframes fb-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes fb-slide-rtl { from { transform: translateX(100%); } to { transform: translateX(-250%); } }
.fb-status { margin: 0; padding: var(--ds-s1) var(--ds-s4); text-align: center; background: var(--ds-deep); color: var(--ds-surface); font: 600 var(--ds-fs-notice)/var(--ds-lh-notice) var(--ds-font); }

/* ---- skeleton: the real layout in grey ---- */
.is-skel > :not(.ds-skel) { display: none; }
.ds-skel { animation: fb-pulse 1.4s ease-in-out infinite; }
.ds-skel-title, .ds-skel-sub, .ds-skel-group, .ds-skel-ico, .ds-skel-lines i { background: var(--ds-border); }
.ds-skel-title { width: 55%; height: 1.875rem; margin: var(--ds-s3) 0 var(--ds-s2); border-radius: var(--ds-radius); }
.ds-skel-sub { width: 40%; height: 1rem; margin: 0 0 var(--ds-s4); border-radius: var(--ds-radius); }
.ds-skel-group { width: 28%; height: 0.75rem; margin: var(--ds-s5) var(--ds-s4) var(--ds-s2); border-radius: var(--ds-radius); }
.ds-skel-row { gap: var(--ds-s3); }
.ds-skel-ico { flex: none; width: var(--ds-icon); height: var(--ds-icon); border-radius: var(--ds-radius); }
.ds-skel-lines { flex: 1; min-width: 0; }
.ds-skel-lines i { display: block; height: 0.75rem; margin: var(--ds-s2) 0; border-radius: var(--ds-radius); width: 60%; }
.ds-skel-lines i + i { width: 38%; }
@keyframes fb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---- reading a paper: step text, a bar, Cancel ---- */
.fb-task { position: fixed; inset-inline: var(--ds-s4); bottom: calc(var(--v-bar-height, 4.5rem) + var(--ds-s5)); z-index: 250; box-sizing: border-box; padding: var(--ds-s4); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); }
.fb-task__step { margin: 0 0 var(--ds-s3); font: 600 var(--ds-fs-row)/var(--ds-lh-row) var(--ds-font); color: var(--ds-text); }
.fb-task__bar { height: 8px; border-radius: var(--ds-radius); background: var(--ds-soft); overflow: hidden; }
.fb-task__bar span { display: block; height: 100%; width: 0; background: var(--ds-primary); transition: width 0.25s linear; }
.fb-task__cancel { margin-top: var(--ds-s2); }

@media (prefers-reduced-motion: reduce) {
  .fb-bar span { animation: none; width: 70%; }
  .ds-skel { animation: none; }
  .ds-btn, button, [type="submit"] { transition: none; }
  .fb-task__bar span, .ds-switch, .ds-switch__knob { transition: none; }
}

/* ---- offline banner and "we kept what you typed" note ---- */
.fb-offline { margin: 0; padding: var(--ds-s1) var(--ds-s4); text-align: center; background: var(--ds-text); color: var(--ds-surface); font: 600 var(--ds-fs-notice)/var(--ds-lh-notice) var(--ds-font); }
.fb-offline[hidden] { display: none; }
.fb-kept { margin: 0 0 var(--ds-s3); padding: var(--ds-s2) var(--ds-s3); background: var(--ds-soft); border-radius: var(--ds-radius); color: var(--ds-text); font: 600 var(--ds-fs-caption)/var(--ds-lh-caption) var(--ds-font); }