/* ============================================
   Component: As-of line
   Partial: dashboards/_as_of.html.erb
   Stimulus: none
   ============================================ */
/* FRESH-01 (#108, #582): a tab's as-of line, how fresh its numbers are: one line with the oldest
   time it names, a second only when some of it didn't finish updating, then each source's list
   behind a tap. */
.as-of {
  display: grid;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

/* Some of it didn't finish updating: in the warning colour, beside its words. */
.as-of-incomplete { color: var(--color-warning); }

/* A <details> opens with no JavaScript and no hover, its summary at least the tap target's height,
   as the tabs' other taps are. */
.as-of-tap > summary {
  display: flex;
  align-items: center;
  gap: 0 var(--spacing-sm);
  min-height: var(--tap-target);
  color: var(--color-link);
  cursor: pointer;
  list-style: none;
}

/* A flex summary loses its marker, so it draws its own: closed, then open */
.as-of-tap > summary::-webkit-details-marker { display: none; }

.as-of-tap > summary::before { content: "▸"; }

.as-of-tap[open] > summary::before { content: "▾"; }

.as-of-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-md);
  list-style: none;
}

.as-of-name { color: var(--color-text); font-weight: 600; }

.as-of-name::after { content: ":"; }

/* Entities are set apart by a middle dot, never "; ", which starts each clause after the first
   (D-37, #295), so a clause can't be read as the next entity's. */
.as-of-entity + .as-of-entity::before { content: " · "; }

/* A clause that qualifies the entity's watermark: a run that didn't finish its work, a run that
   failed, or a deletion check overdue, in its state's colour, always beside its words. */
.as-of-clause.is-degraded,
.as-of-clause.is-unreconciled { color: var(--color-warning); }

.as-of-clause.is-failed { color: var(--color-danger); }

.as-of time { color: var(--color-text); }