/* ============================================================
   components/activity.css — .dd-activity, the "still working" pill
   ------------------------------------------------------------
   What shows in the corner while a save outlives a blink (issue 249,
   written without the hash on purpose: a three-digit issue number and
   a three-digit hex colour are the same string, and the raw-hex gate
   in test_convention_gates cannot tell them apart).

   It is a report, not a control: nothing to click, nothing to
   dismiss, and it leaves the moment the work lands — the
   confirmation is the toast that follows it (toast.css).

     <div id="dd-activity" class="dd-activity" hidden>
       <span class="dd-loader dd-loader--sm" aria-hidden="true">
         <span></span><span></span><span></span>
       </span>
       <span class="dd-activity__label">saving…</span>
     </div>

   Driven by window.ddActivity (components.js): start() when work
   begins, stop(token) when it ends. The delay before it appears
   belongs to the component, not to the caller.

   It rides in the toaster's column rather than pinning itself to
   the corner: both live bottom-right, and a second fixed element
   there would either land on top of a toast or carry a hard-coded
   offset that goes stale the first time the toast's padding moves.
   Sharing the column costs one `align-self` and cannot drift.
   ============================================================ */

.dd-activity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* Shrink to the words and hold the right edge: the toaster is a
     column of full-width toasts, and this is not one of them. */
  align-self: flex-end;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: lowercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-dreamy),
              transform var(--dur-base) var(--ease-dreamy);
}

.dd-activity.is-in {
  opacity: 1;
  transform: none;
}

/* A component that declares `display` has to guard [hidden] itself —
   the UA rule is only `[hidden] { display: none }` and loses
   (conventions §3; test_frontend_integrity asserts it). */
.dd-activity[hidden] {
  display: none;
}

.dd-activity__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .dd-activity {
    transition: none;
    transform: none;
  }
}