/* Wave 6, live: speed you can feel.

   This file loads after hub.css and the wave 2 to 5 files, so a rule here at
   equal specificity wins. Nothing in it changes a layout at rest.

   Sections:
   1. The attention cue on a row a morph changed.
   2. The inline error under an optimistic action that did not land.
   3. Rolling numbers.
   4. Shared elements: the avatar and the name from roster to page, the
      poster into its sheet.
   5. Reduced motion. */

/* ---- 1. Just updated --------------------------------------------------- */

/* A colleague's change arrives by morph, and the row whose text changed
   says so with one background fade: 600ms, lime tint to nothing, on the out
   curve. Attention, not entrance: nothing moves, nothing staggers, and a row
   that changes twice fades twice. The morph guard controller puts the class
   on and takes it off. */
.just-updated {
  animation: just-updated 600ms var(--ease-out) both;
}

@keyframes just-updated {
  from { background-color: var(--lime-100); }
  to { background-color: transparent; }
}

/* A table row has no background of its own to fade back to, so the cells
   carry it. */
tr.just-updated {
  animation: none;
}

tr.just-updated > td {
  animation: just-updated 600ms var(--ease-out) both;
}

/* ---- 2. The inline error ----------------------------------------------- */

/* Where the action was, in the row's own grid, spanning it: what did not
   happen and the same move again. Same red and weight as a field error. */
.row-error {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--bad);
}

.row-error .table-link {
  margin-left: 6px;
  color: var(--bad);
}

.collab-section .row-error,
.next-bar .row-error,
.switch-cell .row-error {
  flex-basis: 100%;
  margin-top: 0;
}

.switch-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- 3. Rolling numbers ------------------------------------------------ */

/* number-flow draws its digits inside a shadow root that inherits the
   host's font; the host carries .num (wave 5), so the figures are Inter,
   tabular, slashed zero. The currency code inside the element stands where
   the kpi-prefix span stood: smaller, the body face, raised. */
number-flow {
  font-variant-numeric: tabular-nums slashed-zero;
}

number-flow::part(currency) {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-right: 4px;
  vertical-align: 0.45em;
  color: var(--ink-soft);
}

.pay-bar-amount::part(currency) {
  font-size: 13px;
  vertical-align: 0.2em;
}

.today-number::part(currency),
.chip number-flow::part(currency) {
  display: none;
}

/* hub.css names every page heading page-title so it holds still between
   pages. The Today heading holds a number-flow, whose digit strips give the
   element an ink overflow many times its box, and a view transition snapshots
   the overflow: a refresh drew a ghost of "8 late" the height of the screen.
   The Today heading changes with the count anyway, so it takes no part. */
.page-head .today-count {
  view-transition-name: none;
}

/* ---- 4. Shared elements ------------------------------------------------ */

/* The roster row's avatar and name carry a view-transition-name that the
   creator page's head repeats, and the poster on a video tile hands its
   name to the sheet's player as it opens (fly controller). Each is in the
   hub-shared class: the group travels on the house curve in 220ms, the old
   image fades out through a 2px blur and the new one fades in from one, so
   the thing flies and nothing teleports. The page-wide cross-fade in hub.css
   stays as it is. The upload screen on the portal is not part of this; it
   sets view-transition-name: none on its own. */
::view-transition-group(.hub-shared) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease-out);
}

::view-transition-old(.hub-shared) {
  animation: shared-leave 220ms var(--ease-out) both;
}

::view-transition-new(.hub-shared) {
  animation: shared-enter 220ms var(--ease-out) both;
}

@keyframes shared-leave {
  to { opacity: 0; filter: blur(2px); }
}

@keyframes shared-enter {
  from { opacity: 0; filter: blur(2px); }
}

/* The head of the creator page: her initials beside her name, the same
   avatar as the roster row so the two read as one thing moving. */
.creator-head-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.creator-head-avatar {
  flex: none;
}

/* ---- 5. Reduced motion -------------------------------------------------- */

/* The fade on a changed row is colour, not motion, and stays. The shared
   elements stop travelling: hub.css already cuts every animation to a jump,
   and the fly controller does not start a transition at all. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(.hub-shared),
  ::view-transition-old(.hub-shared),
  ::view-transition-new(.hub-shared) {
    animation: none;
  }
}